<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>柳工数字实验室</title>
    <link rel="stylesheet" href="#(path)/static/big-screen/css/comon0.css">
    <link rel="stylesheet" href="#(path)/static/js/element-ui.css">
    <link rel="stylesheet" href="#(path)/static/big-screen/font/iconfont.css"/>
</head>
<body style="background:#000d4a url('#(path)/static/big-screen/images/bg.jpg') center top; background-size:cover;">
<div id="app">
    <div class="loading">
        <div class="loadbox"><img src="#(path)/static/big-screen/images/loading.gif"> 页面加载中...</div>
    </div>
    <!--头部-->
    <div class="head" style="background: url('#(path)/static/big-screen/images/head_bg.png') no-repeat center;background-size: 100% 100%;height: 0.8rem;">
        <h1 style="font-family: auto;">柳工数字实验室</h1>
        <div class="weather">
            <span class="iconfont icon-quanping_o" @click="fullScreen()" title="全屏"></span>
            <span id="showTime"></span>
        </div>
    </div>
    <!--内容区域-->
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <!--试验次数-->
                <div class="boxall panel" style="height: 3.3rem;">
                    <div class="mvp">
                        <span class="bots"></span>
                        <div class="vtitle">试验次数</div>
                        <div class="inline">
                            <el-cascader ref="cs" v-model="param.value" :options="options" placeholder="部门"  class="els" :props="props" @change="handleChange" :show-all-levels="false"  clearable></el-cascader>
                            <el-select placeholder="产品线" v-model="param.item_product" class="els" @change="change($event,'cs')" clearable>
                                <el-option v-for="(item,index) in prouname" :key="index" :value="item.ITEM_DIC_PROUNAME" :label="item.ITEM_DIC_PROUNAME"></el-option>
                            </el-select>
                        </div>
                        <div class="serig">
                            <span class="sec" :class="{active:cs_index==index}" v-for="(item, index) in date" :key="index" @click="change_date('cs',item.value,cs_index=index,)">{{item.name}}</span>
                        </div>
                    </div>
                    <div class="allnav" id="chart1"></div>
                </div>
                <!--试验完成率-->
                <div class="boxall" style="height: 3.3rem">
                    <div class="mvp">
                        <span class="bots"></span>
                        <div class="vtitle">试验完成率</div>
                        <div class="serig">
                            <span class="sec" :class="{active:finish_s_index==index}" v-for="(item, index) in date" :key="index" @click="change_date('finish_s',item.value,finish_s_index=index,)">{{item.name}}</span>
                        </div>
                    </div>
                    <div class="allnav" id="chart2"></div>
                </div>
            </li>
            <li>
                <!--已完成试验-->
                <div class="boxall" style="height: 6.75rem;">
                    <div class="mvp">
                        <span class="bots"></span>
                        <div class="vtitle">已完成试验({{examine_list.length}})</div>
                        <div class="inline">
                            <el-input v-model="param.ITEM_TITLE1" placeholder="输入标题名称回车搜索" @keyup.enter.native="keydown('examine')" style="width: 2.3rem;" clearable></el-input>
                        </div>
                        <div class="serig">
                            <span class="sec" :class="{active:examine_index==index}" v-for="(item, index) in date" :key="index" @click="change_date('examine',item.value,examine_index=index,)">{{item.name}}</span>
                        </div>
                    </div>
                    <div class="allnav">
                        <div class="flex bsd">
                            <div class="f omit tl">标题名称</div>
                            <div class="f omit cn">试验结论</div>
                        </div>
                        <div id="a2_marquee-view" class="marquee-view" style="height: 5.6rem;">
                            <div id="a2_comment1">
                                <div class="row" v-for="(item, index) in examine_list" :key="index">
                                    <span class="col omit tl">
                                        <span class="pm" style="background: #ed405d;" v-if="index==0">{{index+1}}</span>
										<span class="pm" style="background: #f78c44;" v-else-if="index==1">{{index+1}}</span>
										<span class="pm" style="background: #49bcf7;" v-else-if="index==2">{{index+1}}</span>
                                        <span class="pm" v-else>{{index+1}}</span>
                                        <span :title="item.ITEM_TITLE">{{item.ITEM_TITLE}}</span>
                                    </span>
                                    <span class="col cn" title="点击查看详情" @click="look(item.views)" style="overflow: hidden;">
                                        <div class="omit" style="float: left;width: 80%;">{{item.ITEM_TEST_CONCLUSION}}</div>
                                        <div style="float: right;width: 20%;text-align: right;color: #2ecd35;" v-if="item.ITEM_TEST_CONCLUSION">详情</div>
                                    </span>
                                </div>
                            </div>
                            <div id="a2_comment2"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <!--设备资产-->
                <div class="boxall" style="height:6.75rem">
                    <div class="mvp"> <span class="bots"></span>设备资产</div>
                    <div class="navboxall">
                        <div class="sycm">
                            <ul class="clearfix">
                                <li v-for="(item, index) in tab" :key="index" v-if="item.show">
                                    <div class="baowei" :style="{backgroundColor:item.color}">
                                        <div class="iconfont" v-html="item.icon"></div>
                                    </div>
                                    <div class="baowei_r">
                                        <h2>{{item.value}}</h2>
                                        <span>{{item.name}}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="flex" style="height: 5.18rem;margin-top: -0.1rem;">
                        <!--使用时长-->
                        <div class="f" style="background-color: rgba(101,132,226,.1);padding: 0.1rem;margin-right: 0.1rem;">
                            <div class="las">
                                <div class="bag"></div>
                                <span class="mgt" style="color: #23abca;">使用时长({{zc_time_list.length}})</span>
                                <div class="clear"></div>
                            </div>
                            <div class="allnav">
                                <div class="marquee-view" style="height: 5rem">
                                <div class="rowl" v-for="(item, index) in zc_time_list" :key="index">
                                    <div class="lname omit" :title="item.ITEM_EQKTX+'('+item.ITEM_DEVID+')'">{{item.ITEM_EQKTX}}</div>
                                    <div class="pro">
                                        <div class="curren" :style="{ width: ((item.ITEM_VTIME / zc_time_list[0].ITEM_VTIME).toFixed(2)*100)+'%' }"></div>
                                    </div>
                                    <div class="view">{{(item.ITEM_VTIME / 1440).toFixed(0)}}天</div>
                                </div>
                               </div>
                            </div>
                        </div>
                        <!--使用频次-->
                        <div class="f" style="background-color: rgba(101,132,226,.1);padding: 0.1rem;margin-right: 0.1rem;margin-left: 0;">
                            <div class="las">
                                <div class="bag" style="background-color: #FF9800;"></div>
                                <span class="mgt" style="color: #FF9800;">使用频次({{zc_pc_list.length}})</span>
                                <div class="clear"></div>
                            </div>
                            <div class="allnav">
                                <div class="marquee-view" style="height: 5rem">
                                    <div class="rowl" v-for="(item, index) in zc_pc_list" :key="index">
                                        <div class="lname omit" :title="item.ITEM_EQKTX+'('+item.ITEM_DEVID+')'">{{item.ITEM_EQKTX}}</div>
                                        <div class="pro">
                                            <div class="curren" style="background-color: #FF9800;" :style="{ width: ((item.ITEM_INVALUE / zc_pc_list[0].ITEM_INVALUE).toFixed(2)*100)+'%' }"></div>
                                        </div>
                                        <div class="view">{{item.ITEM_INVALUE}}次</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="flex">
            <!--待完成试验-->
            <div class="f">
                <div class="boxall" style="height:3.3rem">
                    <div class="mvp">
                        <span class="bots"></span>
                        <div class="vtitle">待完成试验({{no_examine_list.length}})</div>
                        <div class="inline">
                            <el-input v-model="param.ITEM_TITLE2" placeholder="输入标题名称回车搜索" @keyup.enter.native="keydown('no_examine')" style="width: 2.3rem;" clearable></el-input>
                        </div>
                        <div class="serig">
                            <span class="sec" :class="{active:no_examine_index==index}" v-for="(item, index) in date" :key="index" @click="change_date('no_examine',item.value,no_examine_index=index,)">{{item.name}}</span>
                        </div>
                    </div>
                    <div class="allnav">
                        <div class="flex bsd">
                            <div class="f omit tl">标题名称</div>
                            <div class="f omit cn" style="flex: 0.4;">当前处理人</div>
                            <div class="f omit cn" style="flex: 0.4;">流程状态</div>
                            <div class="f omit cn" style="flex: 0.45;">流程总耗时</div>
                        </div>
                        <div id="marquee-view" class="marquee-view">
                            <div id="comment1">
                                <div class="row" v-for="(item, index) in no_examine_list" :key="index">
                                    <span class="col omit tl">
                                        <span class="pm" style="background: #ed405d;" v-if="index==0">{{index+1}}</span>
										<span class="pm" style="background: #f78c44;" v-else-if="index==1">{{index+1}}</span>
										<span class="pm" style="background: #49bcf7;" v-else-if="index==2">{{index+1}}</span>
                                        <span class="pm" v-else>{{index+1}}</span>
                                        <span :title="item.ITEM_TITLE">{{item.ITEM_TITLE}}</span>
                                    </span>
                                    <span class="col omit cn" :title="item.AUDITORNAMES" style="flex: 0.4;">{{item.AUDITORNAMES}}</span>
                                    <span class="col omit cn" style="flex: 0.4;">{{item.STATELABEL}}</span>
                                    <span class="col omit cn" style="flex: 0.45;">{{(item.ITEM_VTIME / 60).toFixed(0)}}小时</span>
                                </div>
                            </div>
                            <div id="comment2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 样机改装信息-->
            <div class="f">
                <div class="boxall" style="height:3.3rem">
                    <div class="mvp">
                        <span class="bots"></span>
                        <div class="vtitle">样机改装({{yj_data.length}})</div>
                        <div class="inline">
                            <el-input v-model="param.ITEM_NAME" placeholder="名称,序列号回车" @keyup.enter.native="keydown('yj')" style="width: 1.5rem;" clearable></el-input>
                            <el-date-picker
                                    class="dpk"
                                    v-model="param.datetime"
                                    value-format="yyyy-MM-dd"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="picker('yj')">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="allnav">
                        <div class="flex bsd">
                            <div class="f omit tl">样机名称</div>
                            <div class="f omit cn" style="flex: 0.4;">序列号</div>
                            <div class="f omit cn" style="flex: 0.4;">变更次数</div>
                        </div>
                        <div id="a3_marquee-view" class="marquee-view" style="height: 5.8rem;">
                            <div id="a3_comment1">
                                <div class="row" v-for="(item, index) in yj_data" :key="index">
                                    <span class="col omit tl">
                                        <span class="pm" style="background: #ed405d;" v-if="index==0">{{index+1}}</span>
										<span class="pm" style="background: #f78c44;" v-else-if="index==1">{{index+1}}</span>
										<span class="pm" style="background: #49bcf7;" v-else-if="index==2">{{index+1}}</span>
                                        <span class="pm" v-else>{{index+1}}</span>
                                        <span :title="item.ITEM_NAME">{{item.ITEM_NAME}}</span>
                                    </span>
                                    <span class="col omit cn" style="flex: 0.4;">{{item.ITEM_XL_NUM}}</span>
                                    <span class="col omit cn" style="flex: 0.4;">{{item.num}}</span>
                                </div>
                            </div>
                            <div id="a3_comment2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--样机列表-->
            <div class="f">
                <!--样机列表-->
                <div class="boxall" style="height: 3.3rem;">
                    <div class="mvp">
                        <span class="bots"></span>
                        <div class="vtitle">样机列表({{yj_list.length}})</div>
                        <div class="inline">
                            <el-input v-model="param.ITEM_NAMES" placeholder="名称,序列号回车" @keyup.enter.native="keydown('yj2')" style="width: 1.5rem;" clearable></el-input>
                            <el-date-picker
                                    class="dpk"
                                    v-model="param.datetime2"
                                    value-format="yyyy-MM-dd"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="picker('yj2')">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="allnav">
                        <div class="flex bsd">
                            <div class="f omit tl">样机名称</div>
                            <div class="f omit cn" style="flex: 0.4;">版本</div>
                            <div class="f omit cn" style="flex: 0.6;">序列号</div>
                            <div class="f omit cn" style="flex: 0.6;">创建时间</div>
                        </div>
                        <div class="marquee-view">
                            <div>
                                <div class="row" v-for="(item, index) in yj_list" :key="index">
                                    <span class="col omit tl">
                                        <span class="pm" style="background: #ed405d;" v-if="index==0">{{index+1}}</span>
                                        <span class="pm" style="background: #f78c44;" v-else-if="index==1">{{index+1}}</span>
										<span class="pm" style="background: #49bcf7;" v-else-if="index==2">{{index+1}}</span>
                                        <span class="pm" v-else>{{index+1}}</span>
                                        <span :title="item.ITEM_NAME">{{item.ITEM_NAME}}</span>
                                    </span>
                                    <span class="col omit cn" style="flex: 0.4;">{{item.ITEM_VERSION}}</span>
                                    <span class="col omit cn" style="flex: 0.6;">{{item.ITEM_XL_NUM}}</span>
                                    <span class="col omit cn" style="flex: 0.6;">{{item.CREATED}}</span>
                                </div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--查看实验结论-->
    <el-dialog title="查看实验结论" width="70%" :visible.sync="dialogVisible" append-to-body>
      <div v-html="views" style="background-color: #f6f6f6;padding: 15px;border-radius: 5px;overflow: hidden;"></div>
    </el-dialog>
</div>
<script type="text/javascript" src="#(path)/static/js/jquery.min.js"></script>
<script type="text/javascript" src="#(path)/static/js/vue.js"></script>
<script type="text/javascript" src="#(path)/static/js/echarts.min.js"></script>
<script type="text/javascript" src="#(path)/static/js/element-ui.js"></script>
<script type="text/javascript" src="#(path)/static/js/common.js"></script>
<script type="text/javascript" src="#(path)/static/big-screen/js/js.js"></script>
<script type="text/javascript" src="#(path)/static/js/layer/layer.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            dialogVisible:false,
            param: {
                value: ['#(value)'],
                CREATED:'year',
                begin: '',
                end: '',
                datetime: [],
                datetime2:[]
            },
            props: {
                value: 'ID',
                label: 'NAME',
                checkStrictly: true
            },
            date:[{name:'年',value:'year'},{name:'季',value:'quarter'},{name:'月',value:'month'}],
            finish_s_index:0,
            no_examine_index:0,
            examine_index:0,
            yj_index:0,
            cs_index:0,
            yj_data:[],//样机改装信息
            yj_list:[],//样机列表
            no_examine_list: [],//待完成试验
            zc_time_list:[],//使用时长条形图
            zc_pc_list:[],//使用频次条形图
            examine_list: [],//已完成试验
            options:[], //部门
            prouname:[], //产品线
            tab: [{
                name: '设备总数',
                value: '0',
                icon: '&#xe638;',
                color: '#2196F3',
                show: true
            }, {
                name: '封存设备',
                value: '0',
                icon: '&#xe632;',
                color: '#F44336',
                show: true
            }, {
                name: '可用设备',
                value: '0',
                icon: '&#xe618;',
                color: '#4CAF50',
                show: true
            }, {
                name: '使用设备',
                value: '0',
                icon: '&#xe616;',
                color: '#03A9F4',
                show: true
            }],
            views:{}//实验结论
        },
        mounted() {
            start_time();
            this.gd();//部门数据和产品线
            this.finish_s();//实验完成率
            this.yj();//样机改装信息
            this.no_examine();//待完成试验
            this.yj2();//样机列表
            this.examine(); //已完成试验
            this.cs(); //试验次数
            this.zc(); //设备资产
            //this.yj_xx(); //样机信息:(样机数量和样机试验次数)
        },
        methods: {
            //部门数据和产品线
            gd(){
                sendAjax("#(path)/big/gd", this.param, res => {
                    cancelLoding();
                    this.options=res.department;
                    this.prouname=res.prouname;
                })
            },
            //选则年，季，月
            change_date(tag,value){
                if(tag=='xx'){
                    if(value=='quarter'||value=='month'){
                        if(!this.param.ITEM_PRO){
                            this.yj_index=0;
                            showMessage("选择季度或者月请先选择产品线");
                            return;
                        }
                    }
                    this.param.CREATED=value;
                    this.yj_xx();
                }
                if(tag=='cs'){
                    this.param.CREATED=value;
                    this.cs();
                }
                if(tag=='finish_s'){
                    this.param.CREATED=value;
                    this.finish_s();
                }
                if(tag=='no_examine'){
                   this.param.CREATED=value;
                   this.no_examine();
               }
               if(tag=='examine'){
                    this.param.CREATED=value;
                    this.examine();
                }
            },
            //样机信息:(样机数量和样机试验次数)
            yj_xx() {
                sendAjax("#(path)/big/yj_xx", this.param, res => {
                    cancelLoding();
                    chart3(res.yj_sl);
                    chart4(res.yj_cs);
                })
            },
            //试验次数
            cs() {
                sendAjax("#(path)/big/cs", this.param, res => {
                    cancelLoding();
                    chart1(res.data);
                })
            },
            //设备资产
            zc() {
                sendAjax("#(path)/big/zc", this.param, res => {
                    cancelLoding();
                    vm.zc_time_list=res.zc_time;
                    vm.zc_pc_list=res.zc_pc;
                    vm.tab[0].value=res.tj.ALLS;
                    vm.tab[1].value=res.tj.FC;
                    vm.tab[2].value=res.tj.KY;
                    vm.tab[3].value=res.tj.SY;
                })
            },
            //实验完成率
            finish_s() {
                sendAjax("#(path)/big/finish_s", this.param, res => {
                    cancelLoding();
                    chart2(res.data);
                })
            },
            //待完成试验
            no_examine() {
                sendAjax("#(path)/big/no_examine", this.param, res => {
                    cancelLoding();
                    vm.no_examine_list = res.data;
                })
            },
            //已完成试验
            examine() {
                sendAjax("#(path)/big/examine", this.param, res => {
                    cancelLoding();
                    vm.examine_list = res.data;
                    vm.examine_list.forEach(item=>{
                        if(item.ITEM_TEST_CONCLUSION){
                            item.views=item.ITEM_TEST_CONCLUSION;
                            item.ITEM_TEST_CONCLUSION=item.ITEM_TEST_CONCLUSION.replace(/<.*?>/g,"");
                        }
                    })
                })
            },
            //样机改装信息
            yj() {
                sendAjax("#(path)/big/yj", this.param, res => {
                    cancelLoding();
                    vm.yj_data=res.data;
                    vm.yj_data = vm.yj_data.sort((a,b)=>{return b.num-a.num});
                })
            },
            //样机列表
            yj2() {
                sendAjax("#(path)/big/yj_list", this.param, res => {
                    cancelLoding();
                    vm.yj_list=res.data;
                })
            },
            //选择部门
            handleChange(value) {
                this.param.ID = value[value.length - 1];
                this.$refs.cs.dropDownVisible = false;
                this.cs();
            },
            //选择产品线
            change(value,tag){
                if(tag=='cs'){
                    this.cs();
                }
                if(tag=='xx'){
                    this.yj_xx();
                }
            },
            //键盘回车搜索
            keydown(tag){
                if(tag=='yj'){
                    if(!this.param.datetime){
                        this.param.begin='';
                        this.param.end='';
                    }
                    this.yj();
                }
                if(tag=='yj2'){
                    if(!this.param.datetime2){
                        this.param.begin='';
                        this.param.end='';
                    }
                    this.yj2();
                }
                if(tag=='examine'){
                    this.examine();
                }
                if(tag=='no_examine'){
                    this.no_examine();
                }
            },
            //选择日期范围
            picker(tag){
                if(tag=='yj'){
                    this.param.begin = this.param.datetime[0];
                    this.param.end = this.param.datetime[1];
                    this.yj();
                }
                if(tag=='yj2'){
                    this.param.begin = this.param.datetime2[0];
                    this.param.end = this.param.datetime2[1];
                    this.yj2();
                }
            },
            //查看实验结论
            look(item){
              this.dialogVisible=true;
              this.views=item;
            },
            //设置全屏
            fullScreen() {
                const element = document.documentElement
                // 如果是全屏状态
                if (this.fullscreen) {
                    // 如果浏览器有这个Function
                    if (document.exitFullscreen) {
                        document.exitFullscreen()
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen()
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen()
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen()
                    }
                } else {
                    // 如果浏览器有这个Function
                    if (element.requestFullscreen) {
                        element.requestFullscreen()
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen()
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen()
                    } else if (element.msRequestFullscreen) {
                        element.msRequestFullscreen()
                    }
                }
                // 判断全屏状态的变量
                this.fullscreen = !this.fullscreen
            }
        }
    })
</script>
</body>
</html>
