123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603 |
- <!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: 4.2rem;">
- <div class="mvp">
- <span class="bots"></span>
- <div class="vtitle">样机信息</div>
- <div class="inline">
- <el-select placeholder="产品线" v-model="param.ITEM_PRO" class="els" @change="change($event,'xx')" 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:yj_index==index}" v-for="(item, index) in date" :key="index" @click="change_date('xx',item.value,yj_index=index,)">{{item.name}}</span>
- </div>
- </div>
- <!–样机数量–>
- <div class="las" style="margin-left: 0.1rem;margin-top: 0.1rem">
- <div class="bag" style="background-color: rgb(33, 150, 243)"></div>
- <span class="mgt" style="color: rgb(33, 150, 243);">样机数量</span>
- <div class="clear"></div>
- </div>
- <div class="allnav" id="chart3" style="height: 1.5rem;"></div>
- <!–样机试验次数–>
- <div class="las" style="margin-left: 0.1rem">
- <div class="bag" style="background-color:#4CAF50"></div>
- <span class="mgt" style="color: #4CAF50;">样机试验次数</span>
- <div class="clear"></div>
- </div>
- <div class="allnav" id="chart4" style="height: 1.6rem;"></div>
- </div>-->
- <!-- 样机改装信息-->
- <div class="boxall" style="height: 6.75rem;">
- <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>
- </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">已完成试验({{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">
- <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>
- </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: '',
- color: '#2196F3',
- show: true
- }, {
- name: '封存设备',
- value: '0',
- icon: '',
- color: '#F44336',
- show: true
- }, {
- name: '可用设备',
- value: '0',
- icon: '',
- color: '#4CAF50',
- show: true
- }, {
- name: '使用设备',
- value: '0',
- icon: '',
- 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>
|