1053 lines
30 KiB
Vue
1053 lines
30 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>
|