1053 lines
29 KiB
Vue
1053 lines
29 KiB
Vue
<!--生产运营驾驶舱-->
|
||
<template>
|
||
<div class="home">
|
||
<dv-border-box-1>
|
||
<div class="head_title">数字化设备监控大屏</div>
|
||
<div class="time2">
|
||
<div>{{ date }}</div>
|
||
<div style="margin-left: 12px;">{{ time }}</div>
|
||
</div>
|
||
<!-- <img :src="logoUrl?logoUrl:logoUrlDefault" v-if="logoUrlFlag" class='logo_kanban'> -->
|
||
<!-- <div class="time">星期{{weekday}}</div> -->
|
||
<!-- <div class="date">
|
||
<div>{{date}}</div>
|
||
<div>星期{{weekday}}</div>
|
||
</div> -->
|
||
<div class="main">
|
||
<div
|
||
:class="is_first ? 'main_pre' : 'main_pre main_pre_light'"
|
||
@click="to_pre"
|
||
></div>
|
||
<div
|
||
class="main_center"
|
||
v-loading="loading"
|
||
element-loading-background="rgba(0, 0, 0, 0.4)"
|
||
>
|
||
<div class="main_item" v-for="(items, index) in dataList">
|
||
<dv-border-box-13 backgroundColor="rgba(11, 21, 44, 0.8)">
|
||
<div class="item_top">
|
||
<div class="item_top_left">
|
||
<div>{{ items.deviceName }}</div>
|
||
<!-- <div>{{items.deviceCode}}</div> -->
|
||
</div>
|
||
<!-- :class="items.statusName == '开机' ? 'work_bg' : 'close_bg'" -->
|
||
<div class="item_top_left item_top_right">
|
||
<div class="item_top_right_div">
|
||
<div
|
||
style="width:80%;text-align: center;"
|
||
:class="items.status == '开机' ? 'work_bg' : 'close_bg'"
|
||
>
|
||
{{ items.status }}
|
||
</div>
|
||
</div>
|
||
<!-- <div class="item_top_right_div">
|
||
<el-tooltip class="item" effect="light" content="点击可查询设备一周产能分析" placement="top-start">
|
||
<div @click="deviceCapacity(items)">产能分析</div>
|
||
</el-tooltip>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="item_center">
|
||
<!-- <div style="font-size: 35px;text-align: center;">
|
||
{{ items.kaitong ? items.kaitong : 0 }}%
|
||
</div> -->
|
||
<div
|
||
style="width:100%;height:100%;display: flex;flex-direction:column; justify-content: center;align-items: center;"
|
||
>
|
||
<el-progress
|
||
width="95"
|
||
text-color="#fff"
|
||
type="circle"
|
||
:stroke-width="8"
|
||
:percentage="items.ktl ? items.ktl : 0"
|
||
></el-progress>
|
||
<div
|
||
style="font-size: 12px;text-align: center;position: absolute;top:57%"
|
||
>
|
||
开通率
|
||
</div>
|
||
<div style="font-size: 12px;text-align: center;"></div>
|
||
</div>
|
||
<!-- <div class="item_center_item">设备状态<span>{{items.statusName}}</span></div> -->
|
||
<!-- <div class="item_center_item">今日产量<span>{{items.outPut}}</span></div> -->
|
||
<!-- <div class="item_center_item">在制工单<span>{{items.workOrder}}</span></div> -->
|
||
<!-- <div class="item_center_item">产品名称<span>{{items.materielName}}</span></div>
|
||
<div class="item_center_item">规格型号<span>{{items.specification}}</span></div>
|
||
<div class="item_center_item">计划数量<span>{{items.planCount}}</span></div> -->
|
||
<!-- <div v-for="(items2,index2) in items.pointList">
|
||
<div :class="['item_status',items2.value==1?'item_status_green':'item_status_red']" v-if="items2.pointName.includes('开关机') || items2.pointName.includes('开机')"></div>
|
||
</div> -->
|
||
<!-- <div v-for="(items2,index2) in items.pointList">
|
||
<div class="item_status_green" v-if="(items2.pointName.includes('开关机') || items2.pointName.includes('开机')) && items2.value==1"></div>
|
||
<div class="item_status_red" v-if="(items2.pointName.includes('开关机') || items2.pointName.includes('开机')) && items2.value==0"></div>
|
||
</div> -->
|
||
</div>
|
||
<div class="item_bottom">
|
||
<div class="item_table">
|
||
<!-- <div class="item_table_item">
|
||
<div>测点</div>
|
||
<div>计量单位</div>
|
||
<div>数值</div>
|
||
</div> -->
|
||
<div
|
||
class="item_table_item"
|
||
v-for="(items2, index2) in pointInfoList"
|
||
>
|
||
<!-- <div class="item_status item_status_yellow" v-if="items2.pointName=='开关机'"></div>
|
||
<div class="item_status item_status_red" v-if="items2.pointName=='停机'"></div> -->
|
||
<div>{{ items2.pointName }}</div>
|
||
<div>{{ items[items2.pointKey] }}</div>
|
||
<div>{{ items2.unitUomName }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
</div>
|
||
<div
|
||
:class="is_last ? 'main_next' : 'main_next main_next_light'"
|
||
@click="to_next"
|
||
></div>
|
||
</div>
|
||
<footer></footer>
|
||
<!--产能分析-->
|
||
<el-dialog
|
||
v-dialogDrag
|
||
center
|
||
:title="dialog_title"
|
||
:visible.sync="innerVisible"
|
||
width="900px"
|
||
>
|
||
<div class="chart_container"></div>
|
||
<div class="charts_footer">
|
||
<el-button type="primary" size="small" @click="innerVisible = false"
|
||
>关闭</el-button
|
||
>
|
||
</div>
|
||
</el-dialog>
|
||
</dv-border-box-1>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from "echarts";
|
||
|
||
import Auth from "@/utils/auth";
|
||
import Cookies from "js-cookie";
|
||
import { mapState } from "vuex";
|
||
import jsCookie from "js-cookie";
|
||
|
||
var websocket = null;
|
||
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
||
window.onbeforeunload = function() {
|
||
if (websocket) {
|
||
websocket.close();
|
||
}
|
||
};
|
||
window.addEventListener("resize", function() {
|
||
// location.reload();
|
||
});
|
||
export default {
|
||
name: "kanban",
|
||
data() {
|
||
return {
|
||
config: {
|
||
value: 66
|
||
},
|
||
timer_list: "",
|
||
loading: true,
|
||
first_in: true, //第一次进入页面
|
||
dialog_title: "",
|
||
innerVisible: false,
|
||
dataList: [],
|
||
totalPages: 0, //总页数
|
||
search_data: {
|
||
pageno: 1,
|
||
pagesize: 10
|
||
},
|
||
is_first: true,
|
||
is_last: true,
|
||
date: "",
|
||
time: "",
|
||
weekday: "",
|
||
flag: false,
|
||
showLogo: false,
|
||
logoUrlDefault: require("../../assets/logo.png"),
|
||
logoUrlSubei: require("../../assets/logo_sbly.png"),
|
||
interval_time: "10000",
|
||
websoketData: [],
|
||
pointInfoList: [
|
||
{
|
||
pointName: "每日产量",
|
||
pointKey: "mrcl",
|
||
value: 0,
|
||
unitUomName: "米"
|
||
},
|
||
{
|
||
pointName: "今日开机时间",
|
||
pointKey: "jrkjsjString",
|
||
value: 0,
|
||
unitUomName: ""
|
||
},
|
||
{
|
||
pointName: "累计米数",
|
||
pointKey: "ljms",
|
||
value: 0,
|
||
unitUomName: "米"
|
||
},
|
||
{
|
||
pointName: "今日电量",
|
||
pointKey: "jrdl",
|
||
value: 0,
|
||
unitUomName: "度"
|
||
},
|
||
{
|
||
pointName: "累计运行时长",
|
||
pointKey: "ljyxsc",
|
||
value: 0,
|
||
unitUomName: "Min"
|
||
}
|
||
]
|
||
};
|
||
},
|
||
components: {},
|
||
computed: {
|
||
...mapState({
|
||
logoUrl: state => state.common.logoUrl,
|
||
logoUrlFlag: state => state.common.logoUrlFlag
|
||
})
|
||
},
|
||
activated() {
|
||
if (this.dataList.length > 0) {
|
||
this.openWebsoket();
|
||
this.onmessageWebsoket();
|
||
} else {
|
||
this.first_in = true;
|
||
}
|
||
},
|
||
beforeRouteLeave(to, from, next) {
|
||
this.closeWebSocket();
|
||
next();
|
||
},
|
||
mounted() {
|
||
let allWidth = document.documentElement.clientWidth; //1440
|
||
let allHeight = document.documentElement.clientHeight; //714
|
||
if (this.$route.query.deptId) {
|
||
this.$set(this.search_data, "deptId", this.$route.query.deptId);
|
||
}
|
||
this.getLogo();
|
||
this.getTime();
|
||
let this_ = this;
|
||
setInterval(function() {
|
||
this_.getTime();
|
||
}, 1000);
|
||
this.getList();
|
||
//定时刷新数据
|
||
// setInterval(function() {
|
||
// if (this_.is_last) {
|
||
// this_.to_pre();
|
||
// } else {
|
||
// this_.to_next();
|
||
// }
|
||
// }, 30000);
|
||
},
|
||
watch: {
|
||
websoketData: {
|
||
handler: function(newVal, oldVal) {
|
||
if (newVal[0] == "{") {
|
||
if (JSON.parse(newVal).datas && this.dataList.length > 0) {
|
||
this.changeValue();
|
||
}
|
||
}
|
||
},
|
||
deep: true
|
||
},
|
||
|
||
$route: "fetchData"
|
||
},
|
||
|
||
methods: {
|
||
getLogo() {
|
||
this.$api.fileAPI.getLogo().then(res => {
|
||
if (res.code == 0 && res.logoUrl == "sbly") {
|
||
this.flag = true;
|
||
}
|
||
this.showLogo = true;
|
||
});
|
||
},
|
||
//关闭连接
|
||
closeWebSocket() {
|
||
websocket.close();
|
||
},
|
||
//连接成功建立的回调方法
|
||
openWebsoket() {
|
||
if (websocket) {
|
||
websocket.close();
|
||
}
|
||
|
||
let href = window.location.href;
|
||
let wsHref = href.split("//")[1].split(":")[0];
|
||
let port = JSON.parse(Cookies.get("userInfo")).port;
|
||
let url = JSON.parse(Cookies.get("userInfo")).mqttUrl;
|
||
|
||
let ws = "ws://" + url + "/cusWebSocket/" + Auth.hasToken();
|
||
// let ws="ws://"+wsHref+":"+port+"/cusWebSocket/"+Auth.hasToken()
|
||
//判断当前浏览器是否支持WebSocket
|
||
if ("WebSocket" in window) {
|
||
//连接WebSocket节点
|
||
// websocket = new WebSocket("ws://192.168.1.50:8888/cusWebSocket/"+Auth.hasToken());
|
||
websocket = new WebSocket(ws);
|
||
} else {
|
||
alert("Not support websocket");
|
||
}
|
||
websocket.onopen = function(event) {};
|
||
},
|
||
//接收到消息的回调方法
|
||
onmessageWebsoket() {
|
||
let _this = this;
|
||
websocket.onmessage = function(event) {
|
||
_this.websoketData = event.data;
|
||
};
|
||
},
|
||
|
||
changeValue() {
|
||
if (this.websoketData[0] == "{") {
|
||
let websoketArr = JSON.parse(this.websoketData).datas;
|
||
for (let n = 0; n < this.dataList.length; n++) {
|
||
let pointData = this.dataList[n].pointList;
|
||
if (pointData) {
|
||
for (let i = 0; i < pointData.length; i++) {
|
||
let flag = true;
|
||
for (let j = 0; j < websoketArr.length; j++) {
|
||
if (pointData[i].pointId == websoketArr[j].pointId) {
|
||
flag = false;
|
||
this.$set(pointData[i], "value", websoketArr[j].value);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
//上一页
|
||
to_pre() {
|
||
if (this.search_data.pageno == 1) {
|
||
return;
|
||
}
|
||
this.search_data.pageno = this.search_data.pageno - 1;
|
||
this.first_in = true;
|
||
this.getList();
|
||
},
|
||
//下一页
|
||
to_next() {
|
||
if (this.search_data.pageno == this.totalPages) {
|
||
return;
|
||
}
|
||
this.search_data.pageno = this.search_data.pageno + 1;
|
||
this.first_in = true;
|
||
this.getList();
|
||
},
|
||
//工单查询-跳转派工记录
|
||
to_dispatch(items) {
|
||
window.open(
|
||
"/#/jobShop/dispatch?deviceName=" +
|
||
encodeURIComponent(items.deviceName) +
|
||
"&deviceId=" +
|
||
items.deviceId +
|
||
"&t=" +
|
||
Date.now()
|
||
);
|
||
},
|
||
getList() {
|
||
console.log("进来了");
|
||
this.$api.yxkAPI
|
||
.yxkPost("/apis/hl/kanban/kanbanTwo", this.search_data)
|
||
.then(res => {
|
||
// this.$api.kanbanAPI.ManageKanbanAllDevice(this.search_data).then(res => {
|
||
this.loading = false;
|
||
let _this = this;
|
||
clearTimeout(_this.timer_list);
|
||
_this.timer_list = setTimeout(function() {
|
||
_this.getList();
|
||
}, _this.interval_time);
|
||
if (res.code === 0) {
|
||
// if (this.first_in) {
|
||
this.dataList = res.data.records ? res.data.records : [];
|
||
this.first_in = false;
|
||
// this.openWebsoket();
|
||
// this.onmessageWebsoket();
|
||
// } else {
|
||
// let dataList = res.data.records ? res.data.records : [];
|
||
// for (let i = 0; i < this.dataList.length; i++) {
|
||
// for (let j = 0; j < dataList.length; j++) {
|
||
// if (this.dataList[i].deviceId == dataList[j].deviceId) {
|
||
// this.$set(
|
||
// this.dataList[i],
|
||
// "deviceCode",
|
||
// dataList[j].deviceCode
|
||
// );
|
||
// this.$set(
|
||
// this.dataList[i],
|
||
// "deviceName",
|
||
// dataList[j].deviceName
|
||
// );
|
||
// this.$set(
|
||
// this.dataList[i],
|
||
// "statusName",
|
||
// dataList[j].statusName
|
||
// );
|
||
// this.$set(this.dataList[i], "outPut", dataList[j].outPut);
|
||
// this.$set(
|
||
// this.dataList[i],
|
||
// "workOrder",
|
||
// dataList[j].workOrder
|
||
// );
|
||
// this.$set(
|
||
// this.dataList[i],
|
||
// "materielName",
|
||
// dataList[j].materielName
|
||
// );
|
||
// this.$set(
|
||
// this.dataList[i],
|
||
// "specification",
|
||
// dataList[j].specification
|
||
// );
|
||
// this.$set(
|
||
// this.dataList[i],
|
||
// "planCount",
|
||
// dataList[j].planCount
|
||
// );
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
// this.dataList.forEach(item => {
|
||
// if (!!item.pointList && item.pointList.length > 0) {
|
||
// item.statusName = "开机";
|
||
// }
|
||
// });
|
||
// let listData = JSON.parse(JSON.stringify(this.dataList));
|
||
// listData.map(item => {
|
||
// let list = JSON.parse(JSON.stringify(item.pointList));
|
||
// let realList = [];
|
||
// if (item.statusName == "开机") {
|
||
// item.kaitong = Math.floor(Math.random() * (95 - 60 + 1)) + 60;
|
||
// realList.push({
|
||
// pointName: "每日产量",
|
||
// unitUomName: "个",
|
||
// value: item.outPut
|
||
// });
|
||
// realList.push({
|
||
// pointName: "今日开机时间",
|
||
// unitUomName: "",
|
||
// value:
|
||
// "7:" +
|
||
// Math.floor(Math.random() * 59) +
|
||
// ":" +
|
||
// Math.floor(Math.random() * 59)
|
||
// });
|
||
// }
|
||
// list.map((v, idx) => {
|
||
// // if(idx==1){
|
||
// // v.pointName = '实际电压'
|
||
// // realList.push(v)
|
||
// // }
|
||
// if (v.pointName == "运转时间") {
|
||
// v.pointName = "累计运行时长";
|
||
// realList.push(v);
|
||
// }
|
||
// });
|
||
// list.map((v, idx) => {
|
||
// if (v.pointName == "电压") {
|
||
// v.pointName = "实际电压";
|
||
// realList.push(v);
|
||
// }
|
||
// });
|
||
// item.pointList = [...JSON.parse(JSON.stringify(realList))];
|
||
// console.log(realList, "====realList=====");
|
||
// });
|
||
// this.dataList = [...listData];
|
||
// this.changeValue();
|
||
this.totalPages = res.data.pages ? res.data.pages : 0;
|
||
if (this.search_data.pageno > 1) {
|
||
this.is_first = false;
|
||
} else {
|
||
this.is_first = true;
|
||
}
|
||
if (this.search_data.pageno == res.data.pages) {
|
||
this.is_last = true;
|
||
} else {
|
||
this.is_last = false;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//产能分析
|
||
deviceCapacity(items) {
|
||
this.innerVisible = true;
|
||
this.dialog_title = items.deviceName + "产能分析";
|
||
this.$nextTick(function() {
|
||
var myChart = echarts.init(document.querySelector(".chart_container"));
|
||
var option;
|
||
this.$api.kanbanAPI
|
||
.ManageKanbanDeviceCapacityAnalysis(items.deviceId)
|
||
.then(res => {
|
||
if (res.code === 0) {
|
||
let xAxis = [];
|
||
let yAxis1 = [];
|
||
let yAxis2 = [];
|
||
// res.data = {
|
||
// "2020-08-10": {"actualCapacity": 10, "rate": "10", "totalCapacity": 20},
|
||
// "2020-08-11": {"actualCapacity": 20, "rate": "20", "totalCapacity": 20},
|
||
// "2020-08-12": {"actualCapacity": 10, "rate": 0, "totalCapacity": 30},
|
||
// "2020-08-13": {"actualCapacity": 10, "rate": 0, "totalCapacity": 40},
|
||
// "2020-08-14": {"actualCapacity": 10, "rate": 0, "totalCapacity": 20},
|
||
// "2020-08-15": {"actualCapacity": 30, "rate": 0, "totalCapacity": 20},
|
||
// "2020-08-16": {"actualCapacity": 40, "rate": 0, "totalCapacity": 20}
|
||
// }
|
||
if (res.data) {
|
||
for (let n in res.data) {
|
||
xAxis.push(n);
|
||
if (res.data[n].actualCapacity <= res.data[n].totalCapacity) {
|
||
//实际未超出总的，超出部分灰色显示
|
||
yAxis1.push(res.data[n].actualCapacity);
|
||
yAxis2.push({
|
||
value:
|
||
res.data[n].totalCapacity - res.data[n].actualCapacity,
|
||
rate: res.data[n].rate + "%",
|
||
is_red: false
|
||
});
|
||
} else {
|
||
//实际超出总的，超出部分红色显示
|
||
yAxis1.push(res.data[n].totalCapacity);
|
||
yAxis2.push({
|
||
value:
|
||
res.data[n].actualCapacity - res.data[n].totalCapacity,
|
||
rate: res.data[n].rate + "%",
|
||
is_red: true
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
option.xAxis.data = xAxis;
|
||
option.series[0].data = yAxis1;
|
||
option.series[1].data = yAxis2;
|
||
|
||
myChart.setOption(option, true);
|
||
}
|
||
});
|
||
option = {
|
||
title: {
|
||
text: "",
|
||
left: "center"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
formatter: function(val) {
|
||
if (val[1].data.is_red) {
|
||
let actualCapacity = val[0].value + val[1].value;
|
||
let totalCapacity = val[0].value;
|
||
return (
|
||
val[0].name +
|
||
"<br>" +
|
||
"实际产能：" +
|
||
actualCapacity +
|
||
"<br>" +
|
||
"总产能：" +
|
||
totalCapacity
|
||
);
|
||
} else {
|
||
let actualCapacity = val[0].value;
|
||
let totalCapacity = val[1].value + val[0].value;
|
||
return (
|
||
val[0].name +
|
||
"<br>" +
|
||
"实际产能：" +
|
||
actualCapacity +
|
||
"<br>" +
|
||
"总产能：" +
|
||
totalCapacity
|
||
);
|
||
}
|
||
}
|
||
},
|
||
xAxis: {
|
||
name: "日期",
|
||
type: "category",
|
||
// boundaryGap: false,
|
||
data: [],
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 30
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: "设备产能(工时)",
|
||
type: "value"
|
||
}
|
||
],
|
||
grid: {
|
||
left: "40",
|
||
bottom: "10",
|
||
top: "40",
|
||
right: "15",
|
||
containLabel: true
|
||
},
|
||
series: [
|
||
{
|
||
// data: [100, 250, 180, 450, 300, 150, 250,400,160],//实际
|
||
data: [], //实际
|
||
type: "bar",
|
||
stack: "产能",
|
||
barWidth: 30, //柱图宽度
|
||
itemStyle: {
|
||
color: function(paras) {
|
||
return "#20a267";
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: "",
|
||
type: "bar",
|
||
stack: "产能",
|
||
barWidth: 30, //柱图宽度
|
||
itemStyle: {
|
||
normal: {
|
||
color: function(paras) {
|
||
if (paras.data.is_red) {
|
||
return "#df5c53";
|
||
} else {
|
||
return "#dfdfdf";
|
||
}
|
||
},
|
||
label: {
|
||
show: true, //开启显示
|
||
position: "top", //在上方显示
|
||
formatter: function(val) {
|
||
return val.data.rate;
|
||
// if (val.value !== 0) {
|
||
// return val.value+'%';
|
||
// } else {
|
||
// return '';
|
||
// }
|
||
},
|
||
textStyle: {
|
||
//数值样式
|
||
color: "#1a1a1a",
|
||
fontSize: 12
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// data: [80, 80, 90, 60, 70, 50, 50,80,80]//总的减去实际
|
||
data: [] //总的减去实际
|
||
}
|
||
]
|
||
};
|
||
});
|
||
},
|
||
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>
|
||
.logo_kanban {
|
||
width: 120px;
|
||
height: 29px;
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 20px;
|
||
}
|
||
|
||
.home {
|
||
position: relative;
|
||
width: 100%;
|
||
min-width: 1200px;
|
||
background-color: #062a5d;
|
||
/* background-image: url("../../assets/back.png");
|
||
background-size: cover; */
|
||
min-height: 600px;
|
||
height: 100%;
|
||
}
|
||
|
||
.head_title {
|
||
position: relative;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
font-weight: 900;
|
||
width: 1115px;
|
||
text-align: center;
|
||
/* background-image: url("../../assets/head8.png");
|
||
background-repeat: no-repeat;
|
||
background-size: contain; */
|
||
margin: auto;
|
||
}
|
||
|
||
.main {
|
||
position: absolute;
|
||
top: 80px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
bottom: 25px;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.main_pre,
|
||
.main_next {
|
||
position: absolute;
|
||
width: 25px;
|
||
height: 100%;
|
||
left: 15px;
|
||
top: 0;
|
||
background-image: url("../../assets/kanban8_pre0.png");
|
||
background-position: center;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.main_next {
|
||
background-image: url("../../assets/kanban8_next0.png");
|
||
right: 15px;
|
||
left: auto;
|
||
}
|
||
|
||
.main_pre_light {
|
||
cursor: pointer;
|
||
background-image: url("../../assets/kanban8_pre1.png");
|
||
}
|
||
|
||
.main_next_light {
|
||
cursor: pointer;
|
||
background-image: url("../../assets/kanban8_next1.png");
|
||
}
|
||
|
||
.main_center {
|
||
position: absolute;
|
||
left: 50px;
|
||
right: 50px;
|
||
top: 0;
|
||
bottom: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.main_item {
|
||
position: relative;
|
||
float: left;
|
||
margin: 5px;
|
||
border-radius: 5px;
|
||
/* border: 1px solid #0d7cd7; */
|
||
/* background-color: rgba(11, 21, 44, 0.8); */
|
||
width: calc((100% - 50px) / 5);
|
||
height: calc((100% - 20px) / 2);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.item_top {
|
||
position: relative;
|
||
top: 15px;
|
||
width: 100%;
|
||
height: 40px;
|
||
margin-bottom: 5px;
|
||
color: #fff;
|
||
/* background-image: url("../../assets/device_kanban_icon.png"); */
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.work_bg {
|
||
background-color: #2fab62 !important;
|
||
}
|
||
.close_bg {
|
||
background-color: #909399 !important;
|
||
}
|
||
.danger_bg {
|
||
background-color: #f56c6c !important;
|
||
}
|
||
.item_top_left {
|
||
position: relative;
|
||
width: calc(100% - 80px);
|
||
font-size: 15px;
|
||
color: #fff;
|
||
padding-top: 4px;
|
||
box-sizing: border-box;
|
||
float: left;
|
||
/* background-color: #95f204; */
|
||
}
|
||
|
||
.item_top_left div {
|
||
width: 100%;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
padding-left: 15px;
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #fff;
|
||
}
|
||
|
||
.item_top_right {
|
||
float: right;
|
||
text-align: right;
|
||
padding-left: 0;
|
||
padding-right: 15px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
width: 80px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.item_top_right_div,
|
||
.item_top_right div {
|
||
cursor: pointer;
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
.item_top_right_div:hover {
|
||
color: #134363;
|
||
}
|
||
|
||
.item_center {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 30%;
|
||
font-size: 13px;
|
||
color: #e2e2e2;
|
||
}
|
||
|
||
.item_center_item {
|
||
position: relative;
|
||
color: #fff;
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
height: calc(100% / 6);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.item_center_item span {
|
||
margin-left: 10px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.item_bottom {
|
||
position: relative;
|
||
width: calc(100% - 16px);
|
||
margin: auto;
|
||
height: 70%;
|
||
font-size: 13px;
|
||
color: #e2e2e2;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.item_bottom:before {
|
||
position: absolute;
|
||
content: "";
|
||
width: 100%;
|
||
left: 0;
|
||
height: 1px;
|
||
background-color: #e2e2e2;
|
||
top: -5px;
|
||
}
|
||
|
||
.item_table {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.item_table_item {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 100%;
|
||
align-items: center;
|
||
}
|
||
|
||
.item_table_item div {
|
||
width: 40%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
text-align: center;
|
||
}
|
||
|
||
.item_table_item div:nth-child(1) {
|
||
text-align: left;
|
||
width: 40%;
|
||
}
|
||
|
||
.item_table_item div:nth-child(3) {
|
||
text-align: right;
|
||
width: 20%;
|
||
}
|
||
|
||
.item_status {
|
||
position: absolute;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 40px;
|
||
background-color: #ffffff;
|
||
right: 5px;
|
||
top: 0px;
|
||
}
|
||
|
||
.item_status_red {
|
||
background-color: #e52929;
|
||
box-shadow: 1px 1px 2px rgba(229, 41, 41, 0.5),
|
||
-1px -1px 2px rgba(229, 41, 41, 0.5), -1px 1px 2px rgba(229, 41, 41, 0.5),
|
||
1px -1px 2px rgba(229, 41, 41, 0.5);
|
||
}
|
||
|
||
.item_status_green {
|
||
background-color: #3bffc4;
|
||
box-shadow: 1px 1px 2px rgba(59, 255, 196, 0.5),
|
||
-1px -1px 2px rgba(59, 255, 196, 0.5), -1px 1px 2px rgba(59, 255, 196, 0.5),
|
||
1px -1px 2px rgba(59, 255, 196, 0.5);
|
||
}
|
||
|
||
.item_status_yellow {
|
||
background-color: #ffd96a;
|
||
box-shadow: 1px 1px 2px rgba(255, 217, 106, 0.5),
|
||
-1px -1px 2px rgba(255, 217, 106, 0.5),
|
||
-1px 1px 2px rgba(255, 217, 106, 0.5), 1px -1px 2px rgba(255, 217, 106, 0.5);
|
||
}
|
||
|
||
.time {
|
||
font-family: "黑体";
|
||
position: absolute;
|
||
right: 30px;
|
||
top: 30px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
transform: translate3d(0, 0, 0);
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
-moz-transform: translate3d(0, 0, 0);
|
||
-o-transform: translate3d(0, 0, 0);
|
||
}
|
||
.time2 {
|
||
display: flex;
|
||
font-family: "黑体";
|
||
position: absolute;
|
||
left: 30px;
|
||
top: 30px;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
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);
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
.chart_container {
|
||
position: relative;
|
||
width: 700px;
|
||
height: 400px;
|
||
margin: auto;
|
||
}
|
||
|
||
.charts_footer {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
justify-content: center;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
footer span {
|
||
padding: 0px 20px;
|
||
}
|
||
|
||
footer span a {
|
||
color: #fff;
|
||
}
|
||
|
||
@media (max-width: 1600px) {
|
||
}
|
||
|
||
@media (min-width: 1600px) {
|
||
footer {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.item_bottom,
|
||
.item_center {
|
||
font-size: 17px;
|
||
}
|
||
}
|
||
</style>
|