feat: add "fszxjckb" page in independent
This commit is contained in:
ruofei.yu
parent
0318d1b7e7
commit
d8b6ee8b30
|
|
@ -0,0 +1,864 @@
|
||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<dv-border-box-11 title="废水在线监测看板">
|
||||||
|
<div class="head_title"></div>
|
||||||
|
<img :src="logoUrl ? logoUrl : logoUrlDefault" v-if="logoUrlFlag" class="logo_kanban" />
|
||||||
|
<!-- <div class="time">{{time}}</div>
|
||||||
|
<div class="date"><div>{{date}}</div><div>星期{{weekday}}</div></div> -->
|
||||||
|
<div class="main">
|
||||||
|
<div class="item_out-new item_out7">
|
||||||
|
<div class="item_name">总排口</div>
|
||||||
|
<div class="item_container item7_container">
|
||||||
|
<img src="../../assets/item_border.png" class="item_container_back" />
|
||||||
|
<table class="table" border="0" cellpadding="0" cellspacing="0">
|
||||||
|
<div class="tr table_head">
|
||||||
|
<div class="td" style="width:14%">监控时间</div>
|
||||||
|
<div class="td" style="width:7.6%">瞬时流量(L/S)</div>
|
||||||
|
<div class="td" style="width:7.6%">PH</div>
|
||||||
|
<div class="td" style="width:7.6%">标准值</div>
|
||||||
|
<div class="td" style="width:7.6%">COD(mg/L)</div>
|
||||||
|
<div class="td" style="width:7.6%">标准值</div>
|
||||||
|
<div class="td" style="width:7.6%">总铜(mg/L)</div>
|
||||||
|
<div class="td" style="width:7.6%">标准值</div>
|
||||||
|
<div class="td" style="width:7.6%">总锌(mg/L)</div>
|
||||||
|
<div class="td" style="width:7.6%">标准值</div>
|
||||||
|
<div class="td" style="width:7.6%">氨氮(mg/L)</div>
|
||||||
|
<div class="td" style="width:7.6%">标准值</div>
|
||||||
|
<div class="td" style="width:7.6%">状态</div>
|
||||||
|
</div>
|
||||||
|
<div class="tr table_list" v-for="(items, index) in dataList7" :key="items.id">
|
||||||
|
<div class="td" style="width:14%">{{ items.jksj }}</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.ssllzt)">{{ items.ssll
|
||||||
|
}}</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.phzzt)">
|
||||||
|
{{ items.phz }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.bzz1zt)">
|
||||||
|
{{ items.bzz1 }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.cod, items.bzz2, items.codzt)">
|
||||||
|
{{ items.cod }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.bzz2zt)">
|
||||||
|
{{ items.bzz2 }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.zt, items.bzz3, items.ztzt)">
|
||||||
|
{{ items.zt }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.bzz3zt)">
|
||||||
|
{{ items.bzz3 }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.zx, items.bzz4, items.zxzt)">
|
||||||
|
{{ items.zx }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.bzz4zt)">
|
||||||
|
{{ items.bzz4 }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.ad, items.bzz5, items.adzt)">
|
||||||
|
{{ items.ad }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:7.6%" :class="isDanger(items.phz, items.bzz1, items.bzz5zt)">
|
||||||
|
{{ items.bzz5 }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:7.6%">
|
||||||
|
<div class="status_btn" v-if="items.zt2 == '超标'" style="color:#A30014;border:1px solid #A30014">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
<div class="status_btn" v-else-if="items.zt2 == '正常'" style="color:#95f204;border:1px solid #95f204;">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
<div class="status_btn" v-else-if="items.zt2 == '异常'" style="color:#D9001B;border:1px solid #D9001B;">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
<div class="status_btn" v-else style="color:#3c2ed1;border:1px solid #3c2ed1;">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="item_out item_out8">
|
||||||
|
<div class="item_name">保养看板</div>
|
||||||
|
<div class="item_container item8_container">
|
||||||
|
<img src="../../assets/item_border.png" class="item_container_back">
|
||||||
|
<table class="table" border=0 cellpadding=0 cellspacing=0>
|
||||||
|
<div class="tr table_head">
|
||||||
|
<div class="td">序号</div>
|
||||||
|
<div class="td">设备</div>
|
||||||
|
<div class="td">保养项目</div>
|
||||||
|
<div class="td">负责人</div>
|
||||||
|
<div class="td">要求完成时间</div>
|
||||||
|
<div class="td">状态</div>
|
||||||
|
</div>
|
||||||
|
<div class="tr table_list" v-for="(items,index) in dataList8" :key="index">
|
||||||
|
<div class="td">{{items.xuhao}}</div>
|
||||||
|
<div class="td">{{items.deviceName}}</div>
|
||||||
|
<div class="td">{{items.pro_name}}</div>
|
||||||
|
<div class="td">{{items.engineerName}}</div>
|
||||||
|
<div class="td">{{items.endTime1}}</div>
|
||||||
|
<div class="td">
|
||||||
|
<div class="status_btn" v-if="items.result==56" style="background-color:#2394d4">{{items.resultName}}</div>
|
||||||
|
<div class="status_btn" v-else-if="items.result==57" style="background-color:#feae0e">{{items.resultName}}</div>
|
||||||
|
<div class="status_btn" v-else-if="items.result==999" style="background-color:#d11806">{{items.resultName}}</div>
|
||||||
|
<div class="status_btn" v-else style="background-color:#3c2ed1">{{items.resultName}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="item_out item_out9">
|
||||||
|
<div class="item_name">车间排口1</div>
|
||||||
|
<div class="item_container item9_container">
|
||||||
|
<img src="../../assets/item_border.png" class="item_container_back" />
|
||||||
|
<table class="table" border="0" cellpadding="0" cellspacing="0">
|
||||||
|
<div class="tr table_head">
|
||||||
|
<div class="td" style="width:22%">监控时间</div>
|
||||||
|
<div class="td">瞬时流量(L/S)</div>
|
||||||
|
<div class="td">总镍(mg/L)</div>
|
||||||
|
<div class="td">标准值</div>
|
||||||
|
<div class="td" style="width:14%">状态</div>
|
||||||
|
</div>
|
||||||
|
<div class="tr table_list" v-for="(items, index) in dataList9" :key="index">
|
||||||
|
<div class="td" style="width:22%" :class="isDanger(items.phz, items.bzz1, items.jksjzt)">{{ items.jksj
|
||||||
|
}}</div>
|
||||||
|
<div class="td" :class="isDanger(items.phz, items.bzz1, items.ssllzt)">{{ items.ssll }}</div>
|
||||||
|
<div class="td" :class="isDanger(items.zn, items.bzz1, items.znzt)">{{ items.zn }}</div>
|
||||||
|
<div class="td" :class="isDanger(items.phz, items.bzz1, items.bzz1zt)">{{ items.bzz1 }}</div>
|
||||||
|
<div class="td" style="width:14%">
|
||||||
|
<div class="status_btn" v-if="items.zt2 == '超标'" style="color:#A30014;border:1px solid #A30014">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
<div class="status_btn" v-else-if="items.zt2 == '正常'" style="color:#95f204;border:1px solid #95f204;">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
<div class="status_btn" v-else-if="items.zt2 == '异常'" style="color:#D9001B;border:1px solid #D9001B;">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
<div class="status_btn" v-else style="color:#3c2ed1;border:1px solid #3c2ed1;">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_out item_out10">
|
||||||
|
<div class="item_name">车间排口2</div>
|
||||||
|
<div class="item_container item10_container">
|
||||||
|
<img src="../../assets/item_border.png" class="item_container_back" />
|
||||||
|
<table class="table" border="0" cellpadding="0" cellspacing="0">
|
||||||
|
<div class="tr table_head">
|
||||||
|
<div class="td" style="width:25%">监控时间</div>
|
||||||
|
<div class="td" style="width:14%">瞬时流量(L/S)</div>
|
||||||
|
<div class="td" style="width:14%">总铬(mg/L)</div>
|
||||||
|
<div class="td" style="width:14%">标准值</div>
|
||||||
|
<div class="td" style="width:14%">六价铬(mg/L)</div>
|
||||||
|
<div class="td" style="width:14%">标准值</div>
|
||||||
|
<div class="td" style="width:14%">状态</div>
|
||||||
|
</div>
|
||||||
|
<div class="tr table_list" v-for="(items, index) in dataList10" :key="index">
|
||||||
|
<div class="td" style="width:25%">{{ items.jksj }}</div>
|
||||||
|
<div class="td" style="width:14%" :class="isDanger(items.phz, items.bzz1, items.ssllzt)">{{ items.ssll
|
||||||
|
}}</div>
|
||||||
|
<div class="td" style="width:14%" :class="isDanger(items.zg, items.bzz1, items.zgzt)">{{ items.zg }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:14%" :class="isDanger(items.phz, items.bzz1, items.bzz1zt)">
|
||||||
|
{{ items.bzz1 }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:14%" :class="isDanger(items.ljg, items.bzz2, items.ljgzt)">{{ items.ljg }}
|
||||||
|
</div>
|
||||||
|
<div class="td" style="width:14%" :class="isDanger(items.phz, items.bzz1, items.bzz2zt)">{{ items.bzz2
|
||||||
|
}}</div>
|
||||||
|
<div class="td" style="width:14%">
|
||||||
|
<div class="status_btn" v-if="items.zt2 == '超标'" style="color:#A30014;border:1px solid #A30014">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
<div class="status_btn" v-else-if="items.zt2 == '正常'" style="color:#95f204;border:1px solid #95f204;">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
<div class="status_btn" v-else-if="items.zt2 == '异常'" style="color:#D9001B;border:1px solid #D9001B;">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
<div class="status_btn" v-else style="color:#3c2ed1;border:1px solid #3c2ed1;">
|
||||||
|
{{ items.zt2 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dv-border-box-11>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from "echarts";
|
||||||
|
import { mapState } from "vuex";
|
||||||
|
window.addEventListener("resize", function() {
|
||||||
|
location.reload();
|
||||||
|
});
|
||||||
|
export default {
|
||||||
|
name: "kanban",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList10: [],
|
||||||
|
left_pagesize: 0, //左侧巡视看板一页加载多少条
|
||||||
|
right_pagesize: 0, //右侧框里一页加载多少条
|
||||||
|
date: "",
|
||||||
|
time: "",
|
||||||
|
weekday: "",
|
||||||
|
pageno7: 1,
|
||||||
|
totalPages7: 1,
|
||||||
|
dataList7: [],
|
||||||
|
pageno8: 1,
|
||||||
|
totalPages8: 1,
|
||||||
|
dataList8: [],
|
||||||
|
pageno9: 1,
|
||||||
|
pageno10: 1,
|
||||||
|
totalPages9: 1,
|
||||||
|
totalPages10: 1,
|
||||||
|
flag: false,
|
||||||
|
showLogo: false,
|
||||||
|
logoUrlDefault: require("../../assets/logo.png"),
|
||||||
|
logoUrlSubei: require("../../assets/logo_sbly.png"),
|
||||||
|
dataList9: [],
|
||||||
|
|
||||||
|
interval_time: "120000"
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
logoUrl: state => state.common.logoUrl,
|
||||||
|
logoUrlFlag: state => state.common.logoUrlFlag
|
||||||
|
})
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let allWidth = document.documentElement.clientWidth; //1440
|
||||||
|
let allHeight = document.documentElement.clientHeight; //714
|
||||||
|
// let left_out_height=allHeight-80-20-20-29-5-39
|
||||||
|
let left_out_height = (allHeight - 80 - 60) / 2 - 34 - 39;
|
||||||
|
this.left_pagesize = Math.floor(left_out_height / 39);
|
||||||
|
let right_out_height = (allHeight - 80 - 60) / 2 - 34 - 39;
|
||||||
|
this.right_pagesize = Math.floor(right_out_height / 39);
|
||||||
|
this.getLogo();
|
||||||
|
this.getTime();
|
||||||
|
let this_ = this;
|
||||||
|
setInterval(function() {
|
||||||
|
this_.getTime();
|
||||||
|
}, 1000);
|
||||||
|
this.setChart7();
|
||||||
|
// this.setChart8();
|
||||||
|
// this.setChart9();
|
||||||
|
// this.setChart10();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 标准值定义
|
||||||
|
isDanger(val, bz,zt) {
|
||||||
|
if(zt==0){
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
if(zt==1){
|
||||||
|
return 'td-warn'
|
||||||
|
}
|
||||||
|
if(zt==2){
|
||||||
|
return 'td-err'
|
||||||
|
}
|
||||||
|
// if (!val || !bz) {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// if (val > bz) {
|
||||||
|
// if(zt){
|
||||||
|
// return 'error td-err'
|
||||||
|
// }else{
|
||||||
|
// return 'error'
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// if(zt){
|
||||||
|
// return 'td-err'
|
||||||
|
// }else{
|
||||||
|
// return ''
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
getLogo() {
|
||||||
|
this.$api.fileAPI.getLogo().then(res => {
|
||||||
|
if (res.code == 0 && res.logoUrl == "sbly") {
|
||||||
|
this.flag = true;
|
||||||
|
}
|
||||||
|
this.showLogo = true;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setChart7() {
|
||||||
|
this.$api.yxkAPI
|
||||||
|
.yxkPost("/apis/mdh/ahgl/fszxjckb", {})
|
||||||
|
// this.$api.kanbanAPI
|
||||||
|
//.eventListForBoard({pageno:this.pageno7,pagesize:this.right_pagesize,boardStatus:1})
|
||||||
|
.then(res => {
|
||||||
|
let _this = this;
|
||||||
|
setTimeout(function() {
|
||||||
|
_this.setChart7();
|
||||||
|
}, _this.interval_time);
|
||||||
|
if (res.code == 0) {
|
||||||
|
let result = res.data;
|
||||||
|
let zpk = [];
|
||||||
|
if (result.zpk && result.zpk.length > 0) {
|
||||||
|
result.zpk.forEach((item, index) => {
|
||||||
|
if (index < 8) {
|
||||||
|
zpk.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
_this.dataList7 = zpk;
|
||||||
|
let cjpk1 = [];
|
||||||
|
if (result.cjpk1 && result.cjpk1.length > 0) {
|
||||||
|
result.cjpk1.forEach((item, index) => {
|
||||||
|
if (index < 8) {
|
||||||
|
cjpk1.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
_this.dataList9 = cjpk1;
|
||||||
|
let cjpk2 = [];
|
||||||
|
if (result.cjpk2 && result.cjpk2.length > 0) {
|
||||||
|
result.cjpk2.forEach((item, index) => {
|
||||||
|
if (index < 8) {
|
||||||
|
cjpk2.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
_this.dataList10 = cjpk2;
|
||||||
|
// let totalPages = res.data ? res.data.totalPages : 0;
|
||||||
|
// let pageno = this.pageno7;
|
||||||
|
// if (this.pageno7 < totalPages) {
|
||||||
|
// this.pageno7 = this.pageno7 + 1;
|
||||||
|
// } else {
|
||||||
|
// this.pageno7 = 1;
|
||||||
|
// }
|
||||||
|
// this.dataList7 = res.data ? res.data.datas : [];
|
||||||
|
// this.dataList7.forEach((item, index) => {
|
||||||
|
// item.xuhao = (pageno - 1) * this.right_pagesize + index;
|
||||||
|
// if (item.planTime) {
|
||||||
|
// item.endTime1 =
|
||||||
|
// item.planTime.split(" ")[0] +
|
||||||
|
// " " +
|
||||||
|
// item.planTime.split(" ")[1].split(":")[0] +
|
||||||
|
// ":" +
|
||||||
|
// item.planTime.split(" ")[1].split(":")[1];
|
||||||
|
// } else {
|
||||||
|
// item.endTime1 = "";
|
||||||
|
// }
|
||||||
|
// item.reventTypeName = item.reventTypeName
|
||||||
|
// ? item.reventTypeName
|
||||||
|
// : "--";
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setChart8() {
|
||||||
|
this.$api.kanbanAPI
|
||||||
|
.upkeepOfBoard({ pageno: this.pageno8, pagesize: this.right_pagesize })
|
||||||
|
.then(res => {
|
||||||
|
let _this = this;
|
||||||
|
setTimeout(function() {
|
||||||
|
_this.setChart8();
|
||||||
|
}, _this.interval_time);
|
||||||
|
if (res.code === 0) {
|
||||||
|
let pageno = this.pageno8;
|
||||||
|
let totalPages = res.data ? res.data.totalPages : 0;
|
||||||
|
if (this.pageno8 < totalPages) {
|
||||||
|
this.pageno8 = this.pageno8 + 1;
|
||||||
|
} else {
|
||||||
|
this.pageno8 = 1;
|
||||||
|
}
|
||||||
|
this.dataList8 = res.data.datas ? res.data.datas : [];
|
||||||
|
this.dataList8.forEach((item, index) => {
|
||||||
|
item.xuhao = (pageno - 1) * this.right_pagesize + index;
|
||||||
|
if (item.endTime) {
|
||||||
|
item.endTime1 =
|
||||||
|
item.endTime.split(" ")[0] +
|
||||||
|
" " +
|
||||||
|
item.endTime.split(" ")[1].split(":")[0] +
|
||||||
|
":" +
|
||||||
|
item.endTime.split(" ")[1].split(":")[1];
|
||||||
|
} else {
|
||||||
|
item.endTime1 = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
item.pro_name = item.pro_name ? item.pro_name : "--";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setChart9() {
|
||||||
|
this.$api.kanbanAPI
|
||||||
|
.recordListForBoard({
|
||||||
|
pageno: this.pageno9,
|
||||||
|
pagesize: this.left_pagesize
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
let _this = this;
|
||||||
|
setTimeout(function() {
|
||||||
|
_this.setChart9();
|
||||||
|
}, _this.interval_time);
|
||||||
|
if (res.code === 0) {
|
||||||
|
let pageno = this.pageno9;
|
||||||
|
let totalPages = res.data ? res.data.totalPages : 0;
|
||||||
|
|
||||||
|
if (this.pageno9 < totalPages) {
|
||||||
|
this.pageno9 = this.pageno9 + 1;
|
||||||
|
} else {
|
||||||
|
this.pageno9 = 1;
|
||||||
|
}
|
||||||
|
this.dataList9 = res.data ? res.data.datas : [];
|
||||||
|
this.dataList9.forEach((item, index) => {
|
||||||
|
item.xuhao = (pageno - 1) * this.left_pagesize + index;
|
||||||
|
if (item.endTime) {
|
||||||
|
item.endTime1 =
|
||||||
|
item.endTime.split(" ")[0] +
|
||||||
|
" " +
|
||||||
|
item.endTime.split(" ")[1].split(":")[0] +
|
||||||
|
":" +
|
||||||
|
item.endTime.split(" ")[1].split(":")[1];
|
||||||
|
} else {
|
||||||
|
item.endTime1 = "";
|
||||||
|
}
|
||||||
|
// item.pro_name=item.pro_name?item.pro_name:'--'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setChart10() {
|
||||||
|
this.$api.kanbanAPI
|
||||||
|
.taskMainListForBoard({
|
||||||
|
pageno: this.pageno10,
|
||||||
|
pagesize: this.left_pagesize
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
let _this = this;
|
||||||
|
setTimeout(function() {
|
||||||
|
_this.setChart10();
|
||||||
|
}, _this.interval_time);
|
||||||
|
if (res.code === 0) {
|
||||||
|
let pageno = this.pageno10;
|
||||||
|
let totalPages = res.data ? res.data.totalPages : 0;
|
||||||
|
|
||||||
|
if (this.pageno10 < totalPages) {
|
||||||
|
this.pageno10 = this.pageno10 + 1;
|
||||||
|
} else {
|
||||||
|
this.pageno10 = 1;
|
||||||
|
}
|
||||||
|
this.dataList10 = res.data ? res.data.datas : [];
|
||||||
|
this.dataList10.forEach((item, index) => {
|
||||||
|
item.xuhao = (pageno - 1) * this.left_pagesize + index;
|
||||||
|
if (item.expireDate) {
|
||||||
|
item.endTime1 =
|
||||||
|
item.expireDate.split(" ")[0] +
|
||||||
|
" " +
|
||||||
|
item.expireDate.split(" ")[1].split(":")[0] +
|
||||||
|
":" +
|
||||||
|
item.expireDate.split(" ")[1].split(":")[1];
|
||||||
|
} else {
|
||||||
|
item.endTime1 = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
formatDate(n) {
|
||||||
|
if (n.toString().length == 1) {
|
||||||
|
return "0" + n;
|
||||||
|
} else {
|
||||||
|
return n;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getTime() {
|
||||||
|
let datatime = new Date();
|
||||||
|
this.date =
|
||||||
|
datatime.getFullYear() +
|
||||||
|
"-" +
|
||||||
|
this.formatDate(datatime.getMonth() + 1) +
|
||||||
|
"-" +
|
||||||
|
this.formatDate(datatime.getDate());
|
||||||
|
this.time =
|
||||||
|
this.formatDate(datatime.getHours()) +
|
||||||
|
":" +
|
||||||
|
this.formatDate(datatime.getMinutes()) +
|
||||||
|
":" +
|
||||||
|
this.formatDate(datatime.getSeconds());
|
||||||
|
let a = ["日", "一", "二", "三", "四", "五", "六"];
|
||||||
|
this.weekday = a[datatime.getDay()];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.error-page {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped>
|
||||||
|
.error {
|
||||||
|
color: red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo_kanban {
|
||||||
|
width: 120px;
|
||||||
|
height: 29px;
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 1200px;
|
||||||
|
background-image: url("../../assets/back.png");
|
||||||
|
background-size: cover;
|
||||||
|
min-height: 700px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head_title {
|
||||||
|
position: relative;
|
||||||
|
height: 80px;
|
||||||
|
width: 1115px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
position: absolute;
|
||||||
|
top: 80px;
|
||||||
|
width: 95%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: auto;
|
||||||
|
bottom: 25px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-family: "黑体";
|
||||||
|
position: absolute;
|
||||||
|
right: 200px;
|
||||||
|
top: 24px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 22px;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
font-family: "黑体";
|
||||||
|
position: absolute;
|
||||||
|
right: 50px;
|
||||||
|
top: 15px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_out {
|
||||||
|
/*height: calc((100% - 60px)/3);*/
|
||||||
|
width: calc((100% - 60px) / 2);
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_out-new {
|
||||||
|
/*height: calc((100% - 60px)/3);*/
|
||||||
|
width: calc(100% - 60px);
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_out10 {
|
||||||
|
height: calc((100% - 60px) / 2);
|
||||||
|
left: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_out9 {
|
||||||
|
height: calc((100% - 60px) / 2);
|
||||||
|
left: 10px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_out7 {
|
||||||
|
height: calc((100% - 55px) / 2);
|
||||||
|
right: 10px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_out8 {
|
||||||
|
height: calc((100% - 60px) / 2);
|
||||||
|
right: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_name {
|
||||||
|
position: relative;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 29px;
|
||||||
|
padding-left: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-weight: bold;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
color: #0efcff;
|
||||||
|
text-align: left;
|
||||||
|
width: 200px;
|
||||||
|
height: 29px;
|
||||||
|
background-image: url("../../assets/item_name_back.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_container_back,
|
||||||
|
.charts_item_container {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 34px);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
margin-top: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_head {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
height: 39px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_head .td {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 !important;
|
||||||
|
padding-top: calc((100% - 24px) / 2);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_list {
|
||||||
|
width: 100%;
|
||||||
|
height: 35px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_list .td {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #708acc;
|
||||||
|
font-size: 13px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_list .td-err {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
width: 35%;
|
||||||
|
height: 60%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: red;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-left: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_list .td-warn {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
width: 35%;
|
||||||
|
height: 60%;
|
||||||
|
margin-left: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: #E6A23C;
|
||||||
|
font-size: 13px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_head .td:nth-child(1),
|
||||||
|
.table_list .td:nth-child(1) {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_head .td:nth-child(2),
|
||||||
|
.table_list .td:nth-child(2) {
|
||||||
|
width: 21%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_head .td:nth-child(3),
|
||||||
|
.table_list .td:nth-child(3) {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_head .td:nth-child(4),
|
||||||
|
.table_list .td:nth-child(4) {
|
||||||
|
width: 12%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_head .td:nth-child(5),
|
||||||
|
.table_list .td:nth-child(5) {
|
||||||
|
width: 21%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_head .td:nth-child(6),
|
||||||
|
.table_list .td:nth-child(6) {
|
||||||
|
width: 16%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status_btn {
|
||||||
|
position: absolute;
|
||||||
|
width: 90%;
|
||||||
|
height: 70%;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
color: #95f204;
|
||||||
|
border: 1px solid #95f204;
|
||||||
|
/* background-color: #2394d4; */
|
||||||
|
text-align: center;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 1px;
|
||||||
|
margin: auto;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2px 0px;
|
||||||
|
/* background: rgb(247, 247, 247); */
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer span {
|
||||||
|
padding: 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer span a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
|
||||||
|
.table_list .td,
|
||||||
|
.table_head,
|
||||||
|
.items2_chartname,
|
||||||
|
.items3_chartname,
|
||||||
|
.status_btn {
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1600px) {
|
||||||
|
|
||||||
|
.table_list .td,
|
||||||
|
.table_head,
|
||||||
|
.items2_chartname,
|
||||||
|
.items3_chartname,
|
||||||
|
.status_btn {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue