|
|
@@ -1,689 +1,689 @@
|
|
|
-<template>
|
|
|
- <div id="index" ref="appRef">
|
|
|
- <div class="bg">
|
|
|
- <dv-loading v-if="loading">Loading...</dv-loading>
|
|
|
- <div v-else class="host-body">
|
|
|
- <headTitle :lineName="ProductionLineName"></headTitle>
|
|
|
- <localTime></localTime>
|
|
|
-
|
|
|
- <div class="body-box" style="padding-top: 10px;">
|
|
|
- <!-- 第三行数据 -->
|
|
|
- <div class="content-box">
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 第四行数据 -->
|
|
|
- <div class="bottom-box">
|
|
|
- <dv-border-box-12>
|
|
|
- <!-- <bottomRight /> -->
|
|
|
- <div class="orderWorking" style="width:100%;height:430px;padding: 20px;">
|
|
|
- <dv-scroll-board :config="config" />
|
|
|
- </div>
|
|
|
- <div style="width:100%;height:370px;padding: 20px;">
|
|
|
- <dv-scroll-board :config="config1" />
|
|
|
- </div>
|
|
|
- </dv-border-box-12>
|
|
|
- </div>
|
|
|
- <!--底部四个数据-->
|
|
|
- <div class="buttomBox">
|
|
|
- <dv-border-box-8>
|
|
|
- <div class="buttomBox-items">
|
|
|
- <div class="buttomBox-items-title">
|
|
|
- <img src="../../static/img/Title_Icon.png" />
|
|
|
- <span class="buttomBox-items-title-text">当日产量/辆</span>
|
|
|
- </div>
|
|
|
- <span class="buttomBox-items-data">{{dayOutput}}</span>
|
|
|
- </div>
|
|
|
- </dv-border-box-8>
|
|
|
- <dv-border-box-8>
|
|
|
- <div class="buttomBox-items">
|
|
|
- <div class="buttomBox-items-title">
|
|
|
- <img src="../../static/img/Title_Icon.png" />
|
|
|
- <span class="buttomBox-items-title-text">当月产量/辆</span>
|
|
|
- </div>
|
|
|
- <span class="buttomBox-items-data">{{MonthOutput}}</span>
|
|
|
- </div>
|
|
|
- </dv-border-box-8>
|
|
|
- <dv-border-box-8>
|
|
|
- <div class="buttomBox-items">
|
|
|
- <div class="buttomBox-items-title">
|
|
|
- <img src="../../static/img/Title_Icon.png" />
|
|
|
- <span class="buttomBox-items-title-text">累计产量/辆</span>
|
|
|
- </div>
|
|
|
- <span class="buttomBox-items-data">{{TotalOutput}}</span>
|
|
|
- </div>
|
|
|
- </dv-border-box-8>
|
|
|
- <dv-border-box-8>
|
|
|
- <div class="buttomBox-items">
|
|
|
- <div class="buttomBox-items-title">
|
|
|
- <img src="../../static/img/Title_Icon.png" />
|
|
|
- <span class="buttomBox-items-title-text">当天异常次数</span>
|
|
|
- </div>
|
|
|
- <span class="buttomBox-items-data">{{alarmCount}}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- </dv-border-box-8>
|
|
|
- <dv-border-box-8>
|
|
|
- <div class="buttomBox-items">
|
|
|
- <div class="buttomBox-items-title">
|
|
|
- <img src="../../static/img/Title_Icon.png" />
|
|
|
- <span class="buttomBox-items-title-text">当天异常时间</span>
|
|
|
- </div>
|
|
|
- <span class="buttomBox-items-data">{{alarmTime}}</span>
|
|
|
- </div>
|
|
|
- </dv-border-box-8>
|
|
|
- </div>
|
|
|
- <!-- <div>{{test}}</div> -->
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div>{{test}}</div> -->
|
|
|
-
|
|
|
- <!-- <el-button type="text" id="fullScreenBtn" @click="onclick"></el-button> -->
|
|
|
- <el-dialog :visible.sync="alarmDialogVisible" width="100%" height="80%"
|
|
|
- style="margin-bottom: 10px;overflow-y: auto;" :show-close="false" :modal-append-to-body="false">
|
|
|
- <!-- <dv-border-box-7 :color="['red', 'orange']" padding: 0.5rem,background: rgba(255, 2, 6, 0.2),> -->
|
|
|
- <div style="width:100%;height:1050px;display: flex; flex-direction: column;">
|
|
|
- <div :style="[{height:(stateArr.length == 1 ? '100%' : stateArr.length == 2 ? '50%' : '33.3%'),
|
|
|
- margin: '0.3rem',
|
|
|
- background: (stateArr[index].state) == '停止' ? 'rgba(255, 2, 6, 0.3)' : (stateArr[index].state) == '求助' ? 'rgba(255, 255, 0, 0.3)' : 'rgba(0, 255, 0, 0.3)'}]"
|
|
|
- v-for="(item,index) in stateArr" :key="index">
|
|
|
- <!-- <el-table :data="tableData" border="true" style="width: 100%;background-color: transparent;"
|
|
|
- :row-class-name="tableRowClassName">
|
|
|
- <el-table-column prop="state" label="报警类型" width="300">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="stateNum" label="工位号" width="1100">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="time" label="触发时间" width="500">
|
|
|
- </el-table-column>
|
|
|
- </el-table> -->
|
|
|
- <conpenttest :state="stateArr[index].state" :stationNumber="stateArr[index].stationNumber">
|
|
|
- </conpenttest>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- </dv-border-box-7> -->
|
|
|
- </el-dialog>
|
|
|
- <!-- <el-dialog>
|
|
|
- <div style="width: 100%;height: 100%;background-image: url("../../static/img/announcementBackground.png");">
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-dialog> -->
|
|
|
- <el-dialog :visible.sync="announcementDialogVisible" width="100%" height="100%"
|
|
|
- style="margin-bottom: 10px;overflow-y: auto;" :show-close="false" class="announcementDialog"
|
|
|
- :modal-append-to-body="false">
|
|
|
- <div style="width: 100%;height: 1080px;">
|
|
|
- <announcement :title="announcementTitle" :content="announcementContent"
|
|
|
- :titleFontSize="announcementTitleSize" :contentFontSize="announcementContentSize">
|
|
|
- </announcement>
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import drawMixin from "../utils/drawMixin";
|
|
|
- import headTitle from "./head.vue";
|
|
|
- import localTime from "./localTime.vue";
|
|
|
- import conpenttest from "./AlarmModel.vue";
|
|
|
- import announcement from './announcementModel.vue'
|
|
|
-
|
|
|
- // import Vue from 'vue'
|
|
|
- var that = require("../api/product");
|
|
|
- var notice = [];
|
|
|
- var configAlign = ['center', 'center', 'center', 'center', 'center'];
|
|
|
- var configColumnWidth = [500, 570, 245, 245, 240]
|
|
|
- var configWaitTime = 5000;
|
|
|
-
|
|
|
- export default {
|
|
|
- mixins: [drawMixin],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dayOutput: 0,
|
|
|
- MonthOutput: 0,
|
|
|
- TotalOutput: 0,
|
|
|
- alarmCount: 0,
|
|
|
- alarmTime: '00:00:00',
|
|
|
- stateArr: [],
|
|
|
- height: 500,
|
|
|
- tableData: [],
|
|
|
- announcementTitle: '',
|
|
|
- announcementContent: '',
|
|
|
- announcementTitleSize: '',
|
|
|
- announcementContentSize: '',
|
|
|
- alarmDialogVisible: false,
|
|
|
- announcementDialogVisible: false,
|
|
|
- ProductionLineId: '',
|
|
|
- WorkShopId: '',
|
|
|
- ProductionLineName: '生产看板',
|
|
|
- title: '测试',
|
|
|
- loading: true,
|
|
|
- decorationColor: ['#568aea', '#000000'],
|
|
|
- config: {
|
|
|
- header: ['工单顺序-生产中', '车型', '计划', '完成', '达成率'],
|
|
|
- data: [],
|
|
|
- index: false,
|
|
|
- columnWidth: configColumnWidth,
|
|
|
- waitTime: configWaitTime,
|
|
|
- rowNum: 2,
|
|
|
- align: configAlign
|
|
|
- },
|
|
|
- config1: {
|
|
|
- header: ['工单顺序-待生产', '车型', '计划', '完成', '达成率'],
|
|
|
- data: [],
|
|
|
- index: false,
|
|
|
- columnWidth: configColumnWidth,
|
|
|
- waitTime: configWaitTime,
|
|
|
- rowNum: 2,
|
|
|
- align: configAlign
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
- headTitle,
|
|
|
- localTime,
|
|
|
- conpenttest,
|
|
|
- announcement
|
|
|
- // el-dialog,
|
|
|
- // el-table,
|
|
|
- // el-table-column
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // document.getElementById("fullScreenBtn").click();
|
|
|
- // this.test = this.$BaseUrl.BaseUrl;
|
|
|
- // console.log(this.$BaseUrl);
|
|
|
- console.log("process.env = " + process.env.NODE_ENV);
|
|
|
- console.log("process.env =", process.env);
|
|
|
- var isGetInfo = false;
|
|
|
- //获取产线信息
|
|
|
- that.GetProductionLineInfo().then(res => {
|
|
|
- var resData = res.Data
|
|
|
- isGetInfo = true;
|
|
|
- this.ProductionLineId = resData.ProductionLineId;
|
|
|
- this.WorkShopId = resData.WorkShopId;
|
|
|
- this.ProductionLineName = resData.ProductionLineName + "生产看板";
|
|
|
- this.PlcName = resData.PlcName;
|
|
|
- // console.log(res);
|
|
|
- console.log("车间号=" + this.WorkShopId + "，产线号=" + this.ProductionLineId + "，产线名称=" + this
|
|
|
- .ProductionLineName + "，PLC名称 =" + this.PlcName);
|
|
|
- })
|
|
|
- //定义公告循环显示定时器
|
|
|
- var noticeInterval;
|
|
|
-
|
|
|
- var apiInterval = setInterval(() => {
|
|
|
- if (isGetInfo == false) {
|
|
|
- that.GetProductionLineInfo().then(res => {
|
|
|
- var resData = res.Data
|
|
|
- this.ProductionLineId = resData.ProductionLineId;
|
|
|
- this.WorkShopId = resData.WorkShopId;
|
|
|
- this.ProductionLineName = resData.ProductionLineName + "生产看板";
|
|
|
- // console.log(res);
|
|
|
- console.log("车间号=" + this.WorkShopId + "，产线号=" + this.ProductionLineId + "，产线名称=" +
|
|
|
- this
|
|
|
- .ProductionLineName);
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- //订单详情接口
|
|
|
- that.GetTaskInfo([this.WorkShopId], [this.ProductionLineId]).then((num) => {
|
|
|
- //console.log(num.Data)
|
|
|
- let numData = num.Data;
|
|
|
- if (numData != null) {
|
|
|
- // var orderInfoCurrent = [];
|
|
|
- var workingInfoCurrent = [];
|
|
|
- var standbyInfoCurrent = [];
|
|
|
- //OrderState等于生产中
|
|
|
- num.Data.forEach(element => {
|
|
|
- let completionRate = element.CompletionRate * 100 + "%";
|
|
|
-
|
|
|
- let arr = [element.OrderSequence, element.MotorcycleTypeName,
|
|
|
- element.ScheduledProduction, element.CurrentProduction,
|
|
|
- completionRate
|
|
|
- ];
|
|
|
- if (element.OrderState == "生产中") {
|
|
|
- workingInfoCurrent.push(arr)
|
|
|
- } else {
|
|
|
- standbyInfoCurrent.push(arr)
|
|
|
- }
|
|
|
- // orderInfoCurrent.push(arr);
|
|
|
- })
|
|
|
- if (JSON.stringify(workingInfoCurrent) != JSON.stringify(this.config.data) ||
|
|
|
- JSON.stringify(standbyInfoCurrent) != JSON.stringify(this.config1.data)) {
|
|
|
-
|
|
|
- this.config = {
|
|
|
- header: ['工单顺序-生产中', '车型', '计划', '完成', '达成率'],
|
|
|
- data: workingInfoCurrent,
|
|
|
- index: false,
|
|
|
- columnWidth: configColumnWidth,
|
|
|
- waitTime: configWaitTime,
|
|
|
- rowNum: 2,
|
|
|
- align: configAlign
|
|
|
- };
|
|
|
- this.config1 = {
|
|
|
- header: ['工单顺序-待生产', '车型', '计划', '完成', '达成率'],
|
|
|
- data: standbyInfoCurrent,
|
|
|
- index: false,
|
|
|
- columnWidth: configColumnWidth,
|
|
|
- waitTime: configWaitTime,
|
|
|
- rowNum: 2,
|
|
|
- align: configAlign
|
|
|
- },
|
|
|
- console.log("轮播表的config已更新");
|
|
|
- }
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '服务器连接失败'
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- // 产量详情接口
|
|
|
- // that.GetOutputAndOrder([this.WorkShopId], [this.ProductionLineId]).then(res => {
|
|
|
- // let resData = res.Data;
|
|
|
- // if (resData != null) {
|
|
|
- // if (resData.length > 0) {
|
|
|
- // let localYearFullData = resData.filter(t => t.Year == new Date()
|
|
|
- // .getFullYear());
|
|
|
- // // console.log(localYearFullData);
|
|
|
- // if (localYearFullData.length > 0) {
|
|
|
- // this.MonthOutput = localYearFullData[0].Output[
|
|
|
- // `${new Date().getMonth() + 1}`];
|
|
|
- // // console.log("当前时间"+new Date());
|
|
|
- // // console.log(new Date().getMonth()+"月"+localYearFullData[0].Output[`${new Date().getMonth() +1}`]+"辆");
|
|
|
- // // console.log(localYearFullData[0].Output[`${new Date().getMonth()}`]);
|
|
|
- // //getMonth方法获取的是对应的索引值
|
|
|
- // this.MonthOrder = localYearFullData[0].OrderQuantity[
|
|
|
- // `${new Date().getMonth() + 1}`];
|
|
|
- // }
|
|
|
- // let outputTotal = 0;
|
|
|
- // let orderTotal = 0;
|
|
|
- // resData.forEach(element => {
|
|
|
- // for (let i in element.Output) {
|
|
|
- // outputTotal = outputTotal + element.Output[i];
|
|
|
- // }
|
|
|
- // for (let i in element.OrderQuantity) {
|
|
|
- // orderTotal = orderTotal + element.OrderQuantity[i];
|
|
|
- // }
|
|
|
- // });
|
|
|
- // this.TotalOutput = outputTotal;
|
|
|
- // this.TotalOrder = orderTotal;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // })
|
|
|
-
|
|
|
- //产线数据接口
|
|
|
- that.GetLineOutput().then(res => {
|
|
|
- let resData = res.Data;
|
|
|
- // console.log(res.Data.length);
|
|
|
- if (resData.length > 0) {
|
|
|
- this.dayOutput = resData[0].日产量;
|
|
|
- this.MonthOutput = resData[0].月产量;
|
|
|
- this.TotalOutput = resData[0].总产量;
|
|
|
- // console.log("日产量+",resData[0].日产量);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- that.GetLineExceptionData().then(res => {
|
|
|
- let resData = res.Data;
|
|
|
- if (resData.length > 0) {
|
|
|
- this.alarmCount = resData[0].次数;
|
|
|
- //this.alarmTime = this.formateTime(resData[0].时长);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- that.GetLineExceptionTime().then(res => {
|
|
|
- let resData = res.Data;
|
|
|
- this.alarmTime = resData;
|
|
|
- // if (resData.length > 0) {
|
|
|
- // this.alarmTime = resData;
|
|
|
- // //this.alarmTime = this.formateTime(resData[0].时长);
|
|
|
- // }
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- //报警接口
|
|
|
- that.GerAlarms(this.PlcName).then(res => {
|
|
|
- let resData = res.Data;
|
|
|
- if (resData != null) {
|
|
|
- if (resData.length > 0) {
|
|
|
- var stateArrTemp = [];
|
|
|
- // resData.filter()
|
|
|
- resData.forEach(element => {
|
|
|
- // console.log(element.Desc);
|
|
|
- if (element.Desc != "停止计时" &&
|
|
|
- element.Desc != "缺料计时" &&
|
|
|
- element.Desc != "求助计时") {
|
|
|
- //Desc的格式
|
|
|
- let resDataDesc = element.Desc.split("#-");
|
|
|
- stateArrTemp.push({
|
|
|
- state: resDataDesc[1],
|
|
|
- stationNumber: resDataDesc[0]
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- });
|
|
|
- var stateMergeArr = stateArrTemp.reduce((total, cur) => {
|
|
|
- if (total) {
|
|
|
- let hasValue = total.findIndex(current => {
|
|
|
- return current.state === cur.state
|
|
|
- })
|
|
|
- // total 中不包含这一项，则push到数组
|
|
|
- hasValue === -1 && total.push({
|
|
|
- state: cur.state,
|
|
|
- stationNumber: [cur.stationNumber]
|
|
|
- })
|
|
|
- // total 中包含这项，则push到对应工位上
|
|
|
- hasValue !== -1 && total[hasValue].stationNumber.push(cur
|
|
|
- .stationNumber)
|
|
|
- //return 是给到下一次的total的初始值
|
|
|
- return total
|
|
|
- }
|
|
|
- }, [])
|
|
|
- this.stateArr = stateMergeArr;
|
|
|
- if (this.announcementDialogVisible == true || stateArrTemp.length == 0) {
|
|
|
- this.alarmDialogVisible = false;
|
|
|
- } else if(stateArrTemp.length > 0){
|
|
|
- this.alarmDialogVisible = true;
|
|
|
- }
|
|
|
- // console.log(this.alarmDialogVisible)
|
|
|
- }
|
|
|
- else{
|
|
|
- this.alarmDialogVisible = false;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- });
|
|
|
- }, 1000)
|
|
|
- //直接在需要定时器的方法或者生命周期函数中声明并销毁
|
|
|
-
|
|
|
- var noticeApiInterval = setInterval(() => {
|
|
|
- //公告接口
|
|
|
- that.GetNoticeInfo().then(async (res) => {
|
|
|
- let resData = res.Data;
|
|
|
- //使用JSON.stringify判断两个数组是否相等
|
|
|
- if (JSON.stringify(notice) != JSON.stringify(resData)) {
|
|
|
- if (noticeInterval != null) {
|
|
|
- clearInterval(noticeInterval);
|
|
|
- //若下面销毁定时器，则下方使用showNotice方法时也要同时销毁，否则会出现多个定时器
|
|
|
- // noticeInterval = null;
|
|
|
- }
|
|
|
- notice = resData;
|
|
|
- if (resData.length > 0) {
|
|
|
- this.announcementTitle = notice[0].NoticeTitle;
|
|
|
- this.announcementContent = notice[0].NoticeContent;
|
|
|
- this.announcementTitleSize = notice[0].TitleFontSize + "px";
|
|
|
- this.announcementContentSize = notice[0].ContentFontSize + "px";
|
|
|
- var index = 1;
|
|
|
- var lenth = notice.length;
|
|
|
- //使用setInterval调用一次停止一次
|
|
|
- showNotice();
|
|
|
- var thisData = this;
|
|
|
-
|
|
|
- function showNotice() {
|
|
|
- noticeInterval = setInterval(() => {
|
|
|
- thisData.announcementTitle = notice[index % lenth]
|
|
|
- .NoticeTitle;
|
|
|
- thisData.announcementContent = notice[index % lenth]
|
|
|
- .NoticeContent;
|
|
|
- thisData.announcementTitleSize = notice[index % lenth]
|
|
|
- .TitleFontSize + "px";
|
|
|
- thisData.announcementContentSize = notice[index % lenth]
|
|
|
- .ContentFontSize + "px";
|
|
|
- index++;
|
|
|
- //clearInterval只会停止定时器，不会销毁对象
|
|
|
- clearInterval(noticeInterval);
|
|
|
- //若上面判断两个数组是否相等时执行销毁定时器，则此处也要同时销毁，否则会出现多个定时器
|
|
|
- // noticeInterval = null;
|
|
|
- showNotice();
|
|
|
- // console.log((index - 1) % lenth);
|
|
|
- }, notice[(index - 1) % lenth].DurationSec * 1000)
|
|
|
- }
|
|
|
- this.announcementDialogVisible = true;
|
|
|
- } else {
|
|
|
- this.announcementDialogVisible = false;
|
|
|
- }
|
|
|
- console.log("公告变化");
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- }, 5000)
|
|
|
-
|
|
|
- this.$once('hook:beforeDestroy', () => {
|
|
|
- clearInterval(apiInterval);
|
|
|
- apiInterval = null;
|
|
|
- clearInterval(noticeApiInterval);
|
|
|
- noticeApiInterval = null
|
|
|
- })
|
|
|
- this.cancelLoading();
|
|
|
- // this.onclick();
|
|
|
- // //获取当前月份的英文格式
|
|
|
- // console.log("month + " + new Date().toDateString().split(" ")[1]);
|
|
|
- // //获取当前年份
|
|
|
- // console.log("year = " + new Date().getFullYear());
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
-
|
|
|
- },
|
|
|
- showNotice() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onclick() {
|
|
|
- document.documentElement.webkitRequestFullScreen();
|
|
|
- // screenfull.toggle();
|
|
|
- },
|
|
|
- cancelLoading() {
|
|
|
- setTimeout(() => {
|
|
|
- this.loading = false
|
|
|
- }, 500)
|
|
|
- },
|
|
|
- formateTime(time) {
|
|
|
- const h = parseInt(time / 3600)
|
|
|
- const minute = parseInt(time / 60 % 60)
|
|
|
- const second = Math.ceil(time % 60)
|
|
|
-
|
|
|
- const hours = h < 10 ? '0' + h : h
|
|
|
- const formatSecond = second > 59 ? 59 : second
|
|
|
- // return `${hours > 0 ? `${hours}:` : ''}${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
|
|
|
- return `${hours}:${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- @import '../assets/scss/index.scss';
|
|
|
-
|
|
|
- .dv-scroll-board {
|
|
|
- .header-item {
|
|
|
- font-size: 2.7rem;
|
|
|
- font-weight: bold;
|
|
|
- height: 4.5rem !important;
|
|
|
- padding: 0;
|
|
|
- line-height: 4.5rem !important;
|
|
|
- }
|
|
|
-
|
|
|
- .rows {
|
|
|
- height: 9rem !important;
|
|
|
-
|
|
|
- .row-item {
|
|
|
- font-size: 3rem;
|
|
|
- height: 4.5rem !important;
|
|
|
- line-height: 4.5rem !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .orderWorking .dv-scroll-board {
|
|
|
- // .header-item {
|
|
|
- // font-size: 2.5rem;
|
|
|
- // font-weight: bold;
|
|
|
- // height: 4rem !important;
|
|
|
- // padding: 0;
|
|
|
- // line-height: 4rem !important;
|
|
|
- // }
|
|
|
-
|
|
|
- .rows {
|
|
|
- height: 11rem !important;
|
|
|
-
|
|
|
- .row-item {
|
|
|
- font-size: 4.5rem;
|
|
|
- height: 5.5rem !important;
|
|
|
- line-height: 5.5rem !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .buttomBox {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- height: 6rem;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .buttomBox .dv-border-box-8 {
|
|
|
- margin-left: 10px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .announcementDialog .el-dialog__body {
|
|
|
- padding: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- .buttomBox-items {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- position: relative;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .buttomBox-items-title {
|
|
|
- display: flex;
|
|
|
- text-align: center;
|
|
|
- justify-content: center;
|
|
|
- height: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .buttomBox-items-title img {
|
|
|
- width: 1rem;
|
|
|
- height: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .buttomBox-items-title-text {
|
|
|
- font-size: 1.8rem;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .buttomBox-items-data {
|
|
|
- font-size: 1.8rem;
|
|
|
- color: aqua;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog {
|
|
|
- /* background: rgba(0, 0, 0, .2) !important; */
|
|
|
- background: rgba(0, 0, 0, 0.2) !important;
|
|
|
- // border: rgb(255, 112, 46) 5px solid;
|
|
|
- backdrop-filter: blur(3px);
|
|
|
- margin-top: 0 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog__title {
|
|
|
- color: rgb(255, 255, 255);
|
|
|
- font-weight: 900;
|
|
|
- font-size: 3rem;
|
|
|
- color: red;
|
|
|
- line-height: 4.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog__header {
|
|
|
- height: 0rem;
|
|
|
- color: #fff;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- text-align: center;
|
|
|
- // box-shadow: 0 0 1.5vw rgb(97, 255, 255) inset;
|
|
|
- // background: linear-gradient(#74ffef, #74ffef) left top,
|
|
|
- // linear-gradient(#3deeda, #3deeda) left top,
|
|
|
- // linear-gradient(#3deeda, #3deeda) right top,
|
|
|
- // linear-gradient(#3deeda, #3deeda) right top;
|
|
|
- /* linear-gradient(#3deeda, #3deeda) left bottom,
|
|
|
- linear-gradient(#3deeda, #3deeda) left bottom,
|
|
|
- linear-gradient(#3deeda, #3deeda) right bottom,
|
|
|
- linear-gradient(#3deeda, #3deeda) right bottom; */
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 2px 20px, 20px 2px;
|
|
|
- padding: 0 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .el-dialog__body {
|
|
|
- padding: 20px;
|
|
|
- color: #fff;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- text-align: left;
|
|
|
- // box-shadow: 0 0 1.5vw rgb(57, 255, 255) inset;
|
|
|
- // background:
|
|
|
- // linear-gradient(#3deeda, #3deeda) left bottom,
|
|
|
- // linear-gradient(#3deeda, #3deeda) left bottom,
|
|
|
- // linear-gradient(#3deeda, #3deeda) right bottom,
|
|
|
- // linear-gradient(#3deeda, #3deeda) right bottom;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 2px 20px, 20px 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-table th.el-table__cell>.cell {
|
|
|
- height: 3rem;
|
|
|
- line-height: 3rem;
|
|
|
- font-size: 2rem;
|
|
|
- background-color: #00BAFF;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .el-table th.el-table__cell {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .el-table .stop-row {
|
|
|
- color: red;
|
|
|
- background-color: #003B51;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .el-table .needHelp-row {
|
|
|
- color: #ffe446;
|
|
|
- background-color: #003B51;
|
|
|
- }
|
|
|
-
|
|
|
- .el-table .less-row {
|
|
|
- color: lime;
|
|
|
- background-color: #0A2732;
|
|
|
- }
|
|
|
-
|
|
|
- //表格内容行设置
|
|
|
- .el-table__cell .cell {
|
|
|
- padding: 0;
|
|
|
- line-height: 7rem;
|
|
|
- //background: lightblue;
|
|
|
- font-size: 5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .el-table .el-table__cell {
|
|
|
- padding: 0;
|
|
|
- // height: 6rem;
|
|
|
- }
|
|
|
-
|
|
|
- .el-table__row {
|
|
|
-
|
|
|
- padding: 0;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-</style>
|
|
|
+<!--<template>-->
|
|
|
+<!-- <div id="index" ref="appRef">-->
|
|
|
+<!-- <div class="bg">-->
|
|
|
+<!-- <dv-loading v-if="loading">Loading...</dv-loading>-->
|
|
|
+<!-- <div v-else class="host-body">-->
|
|
|
+<!-- <headTitle :lineName="ProductionLineName"></headTitle>-->
|
|
|
+<!-- <localTime></localTime>-->
|
|
|
+
|
|
|
+<!-- <div class="body-box" style="padding-top: 10px;">-->
|
|
|
+<!-- <!– 第三行数据 –>-->
|
|
|
+<!-- <div class="content-box">-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+<!-- <!– 第四行数据 –>-->
|
|
|
+<!-- <div class="bottom-box">-->
|
|
|
+<!-- <dv-border-box-12>-->
|
|
|
+<!-- <!– <bottomRight /> –>-->
|
|
|
+<!-- <div class="orderWorking" style="width:100%;height:430px;padding: 20px;">-->
|
|
|
+<!-- <dv-scroll-board :config="config" />-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div style="width:100%;height:370px;padding: 20px;">-->
|
|
|
+<!-- <dv-scroll-board :config="config1" />-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </dv-border-box-12>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <!–底部四个数据–>-->
|
|
|
+<!-- <div class="buttomBox">-->
|
|
|
+<!-- <dv-border-box-8>-->
|
|
|
+<!-- <div class="buttomBox-items">-->
|
|
|
+<!-- <div class="buttomBox-items-title">-->
|
|
|
+<!-- <img src="../../static/img/Title_Icon.png" />-->
|
|
|
+<!-- <span class="buttomBox-items-title-text">当日产量/辆</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <span class="buttomBox-items-data">{{dayOutput}}</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </dv-border-box-8>-->
|
|
|
+<!-- <dv-border-box-8>-->
|
|
|
+<!-- <div class="buttomBox-items">-->
|
|
|
+<!-- <div class="buttomBox-items-title">-->
|
|
|
+<!-- <img src="../../static/img/Title_Icon.png" />-->
|
|
|
+<!-- <span class="buttomBox-items-title-text">当月产量/辆</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <span class="buttomBox-items-data">{{MonthOutput}}</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </dv-border-box-8>-->
|
|
|
+<!-- <dv-border-box-8>-->
|
|
|
+<!-- <div class="buttomBox-items">-->
|
|
|
+<!-- <div class="buttomBox-items-title">-->
|
|
|
+<!-- <img src="../../static/img/Title_Icon.png" />-->
|
|
|
+<!-- <span class="buttomBox-items-title-text">累计产量/辆</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <span class="buttomBox-items-data">{{TotalOutput}}</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </dv-border-box-8>-->
|
|
|
+<!-- <dv-border-box-8>-->
|
|
|
+<!-- <div class="buttomBox-items">-->
|
|
|
+<!-- <div class="buttomBox-items-title">-->
|
|
|
+<!-- <img src="../../static/img/Title_Icon.png" />-->
|
|
|
+<!-- <span class="buttomBox-items-title-text">当天异常次数</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <span class="buttomBox-items-data">{{alarmCount}}</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+<!-- </dv-border-box-8>-->
|
|
|
+<!-- <dv-border-box-8>-->
|
|
|
+<!-- <div class="buttomBox-items">-->
|
|
|
+<!-- <div class="buttomBox-items-title">-->
|
|
|
+<!-- <img src="../../static/img/Title_Icon.png" />-->
|
|
|
+<!-- <span class="buttomBox-items-title-text">当天异常时间</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <span class="buttomBox-items-data">{{alarmTime}}</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </dv-border-box-8>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <!– <div>{{test}}</div> –>-->
|
|
|
+
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <!– <div>{{test}}</div> –>-->
|
|
|
+
|
|
|
+<!-- <!– <el-button type="text" id="fullScreenBtn" @click="onclick"></el-button> –>-->
|
|
|
+<!-- <el-dialog :visible.sync="alarmDialogVisible" width="100%" height="80%"-->
|
|
|
+<!-- style="margin-bottom: 10px;overflow-y: auto;" :show-close="false" :modal-append-to-body="false">-->
|
|
|
+<!-- <!– <dv-border-box-7 :color="['red', 'orange']" padding: 0.5rem,background: rgba(255, 2, 6, 0.2),> –>-->
|
|
|
+<!-- <div style="width:100%;height:1050px;display: flex; flex-direction: column;">-->
|
|
|
+<!-- <div :style="[{height:(stateArr.length == 1 ? '100%' : stateArr.length == 2 ? '50%' : '33.3%'),-->
|
|
|
+<!-- margin: '0.3rem',-->
|
|
|
+<!-- background: (stateArr[index].state) == '停止' ? 'rgba(255, 2, 6, 0.3)' : (stateArr[index].state) == '求助' ? 'rgba(255, 255, 0, 0.3)' : 'rgba(0, 255, 0, 0.3)'}]"-->
|
|
|
+<!-- v-for="(item,index) in stateArr" :key="index">-->
|
|
|
+<!-- <!– <el-table :data="tableData" border="true" style="width: 100%;background-color: transparent;"-->
|
|
|
+<!-- :row-class-name="tableRowClassName">-->
|
|
|
+<!-- <el-table-column prop="state" label="报警类型" width="300">-->
|
|
|
+<!-- </el-table-column>-->
|
|
|
+<!-- <el-table-column prop="stateNum" label="工位号" width="1100">-->
|
|
|
+<!-- </el-table-column>-->
|
|
|
+<!-- <el-table-column prop="time" label="触发时间" width="500">-->
|
|
|
+<!-- </el-table-column>-->
|
|
|
+<!-- </el-table> –>-->
|
|
|
+<!-- <conpenttest :state="stateArr[index].state" :stationNumber="stateArr[index].stationNumber">-->
|
|
|
+<!-- </conpenttest>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <!– </dv-border-box-7> –>-->
|
|
|
+<!-- </el-dialog>-->
|
|
|
+<!-- <!– <el-dialog>-->
|
|
|
+<!-- <div style="width: 100%;height: 100%;background-image: url("../../static/img/announcementBackground.png");">-->
|
|
|
+<!-- -->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </el-dialog> –>-->
|
|
|
+<!-- <el-dialog :visible.sync="announcementDialogVisible" width="100%" height="100%"-->
|
|
|
+<!-- style="margin-bottom: 10px;overflow-y: auto;" :show-close="false" class="announcementDialog"-->
|
|
|
+<!-- :modal-append-to-body="false">-->
|
|
|
+<!-- <div style="width: 100%;height: 1080px;">-->
|
|
|
+<!-- <announcement :title="announcementTitle" :content="announcementContent"-->
|
|
|
+<!-- :titleFontSize="announcementTitleSize" :contentFontSize="announcementContentSize">-->
|
|
|
+<!-- </announcement>-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+<!-- </el-dialog>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!--</template>-->
|
|
|
+
|
|
|
+<!--<script>-->
|
|
|
+<!-- import drawMixin from "../utils/drawMixin";-->
|
|
|
+<!-- import headTitle from "./head.vue";-->
|
|
|
+<!-- import localTime from "./localTime.vue";-->
|
|
|
+<!-- import conpenttest from "./AlarmModel.vue";-->
|
|
|
+<!-- import announcement from './announcementModel.vue'-->
|
|
|
+
|
|
|
+<!-- // import Vue from 'vue'-->
|
|
|
+<!-- var that = require("../api/product");-->
|
|
|
+<!-- var notice = [];-->
|
|
|
+<!-- var configAlign = ['center', 'center', 'center', 'center', 'center'];-->
|
|
|
+<!-- var configColumnWidth = [500, 570, 245, 245, 240]-->
|
|
|
+<!-- var configWaitTime = 5000;-->
|
|
|
+
|
|
|
+<!-- export default {-->
|
|
|
+<!-- mixins: [drawMixin],-->
|
|
|
+<!-- data() {-->
|
|
|
+<!-- return {-->
|
|
|
+<!-- dayOutput: 0,-->
|
|
|
+<!-- MonthOutput: 0,-->
|
|
|
+<!-- TotalOutput: 0,-->
|
|
|
+<!-- alarmCount: 0,-->
|
|
|
+<!-- alarmTime: '00:00:00',-->
|
|
|
+<!-- stateArr: [],-->
|
|
|
+<!-- height: 500,-->
|
|
|
+<!-- tableData: [],-->
|
|
|
+<!-- announcementTitle: '',-->
|
|
|
+<!-- announcementContent: '',-->
|
|
|
+<!-- announcementTitleSize: '',-->
|
|
|
+<!-- announcementContentSize: '',-->
|
|
|
+<!-- alarmDialogVisible: false,-->
|
|
|
+<!-- announcementDialogVisible: false,-->
|
|
|
+<!-- ProductionLineId: '',-->
|
|
|
+<!-- WorkShopId: '',-->
|
|
|
+<!-- ProductionLineName: '生产看板',-->
|
|
|
+<!-- title: '测试',-->
|
|
|
+<!-- loading: true,-->
|
|
|
+<!-- decorationColor: ['#568aea', '#000000'],-->
|
|
|
+<!-- config: {-->
|
|
|
+<!-- header: ['工单顺序-生产中', '车型', '计划', '完成', '达成率'],-->
|
|
|
+<!-- data: [],-->
|
|
|
+<!-- index: false,-->
|
|
|
+<!-- columnWidth: configColumnWidth,-->
|
|
|
+<!-- waitTime: configWaitTime,-->
|
|
|
+<!-- rowNum: 2,-->
|
|
|
+<!-- align: configAlign-->
|
|
|
+<!-- },-->
|
|
|
+<!-- config1: {-->
|
|
|
+<!-- header: ['工单顺序-待生产', '车型', '计划', '完成', '达成率'],-->
|
|
|
+<!-- data: [],-->
|
|
|
+<!-- index: false,-->
|
|
|
+<!-- columnWidth: configColumnWidth,-->
|
|
|
+<!-- waitTime: configWaitTime,-->
|
|
|
+<!-- rowNum: 2,-->
|
|
|
+<!-- align: configAlign-->
|
|
|
+<!-- },-->
|
|
|
+<!-- }-->
|
|
|
+<!-- },-->
|
|
|
+<!-- components: {-->
|
|
|
+<!-- headTitle,-->
|
|
|
+<!-- localTime,-->
|
|
|
+<!-- conpenttest,-->
|
|
|
+<!-- announcement-->
|
|
|
+<!-- // el-dialog,-->
|
|
|
+<!-- // el-table,-->
|
|
|
+<!-- // el-table-column-->
|
|
|
+<!-- },-->
|
|
|
+<!-- mounted() {-->
|
|
|
+<!-- // document.getElementById("fullScreenBtn").click();-->
|
|
|
+<!-- // this.test = this.$BaseUrl.BaseUrl;-->
|
|
|
+<!-- // console.log(this.$BaseUrl);-->
|
|
|
+<!-- console.log("process.env = " + process.env.NODE_ENV);-->
|
|
|
+<!-- console.log("process.env =", process.env);-->
|
|
|
+<!-- var isGetInfo = false;-->
|
|
|
+<!-- //获取产线信息-->
|
|
|
+<!-- that.GetProductionLineInfo().then(res => {-->
|
|
|
+<!-- var resData = res.Data-->
|
|
|
+<!-- isGetInfo = true;-->
|
|
|
+<!-- this.ProductionLineId = resData.ProductionLineId;-->
|
|
|
+<!-- this.WorkShopId = resData.WorkShopId;-->
|
|
|
+<!-- this.ProductionLineName = resData.ProductionLineName + "生产看板";-->
|
|
|
+<!-- this.PlcName = resData.PlcName;-->
|
|
|
+<!-- // console.log(res);-->
|
|
|
+<!-- console.log("车间号=" + this.WorkShopId + "，产线号=" + this.ProductionLineId + "，产线名称=" + this-->
|
|
|
+<!-- .ProductionLineName + "，PLC名称 =" + this.PlcName);-->
|
|
|
+<!-- })-->
|
|
|
+<!-- //定义公告循环显示定时器-->
|
|
|
+<!-- var noticeInterval;-->
|
|
|
+
|
|
|
+<!-- var apiInterval = setInterval(() => {-->
|
|
|
+<!-- if (isGetInfo == false) {-->
|
|
|
+<!-- that.GetProductionLineInfo().then(res => {-->
|
|
|
+<!-- var resData = res.Data-->
|
|
|
+<!-- this.ProductionLineId = resData.ProductionLineId;-->
|
|
|
+<!-- this.WorkShopId = resData.WorkShopId;-->
|
|
|
+<!-- this.ProductionLineName = resData.ProductionLineName + "生产看板";-->
|
|
|
+<!-- // console.log(res);-->
|
|
|
+<!-- console.log("车间号=" + this.WorkShopId + "，产线号=" + this.ProductionLineId + "，产线名称=" +-->
|
|
|
+<!-- this-->
|
|
|
+<!-- .ProductionLineName);-->
|
|
|
+
|
|
|
+<!-- })-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- //订单详情接口-->
|
|
|
+<!-- that.GetTaskInfo([this.WorkShopId], [this.ProductionLineId]).then((num) => {-->
|
|
|
+<!-- //console.log(num.Data)-->
|
|
|
+<!-- let numData = num.Data;-->
|
|
|
+<!-- if (numData != null) {-->
|
|
|
+<!-- // var orderInfoCurrent = [];-->
|
|
|
+<!-- var workingInfoCurrent = [];-->
|
|
|
+<!-- var standbyInfoCurrent = [];-->
|
|
|
+<!-- //OrderState等于生产中-->
|
|
|
+<!-- num.Data.forEach(element => {-->
|
|
|
+<!-- let completionRate = element.CompletionRate * 100 + "%";-->
|
|
|
+
|
|
|
+<!-- let arr = [element.OrderSequence, element.MotorcycleTypeName,-->
|
|
|
+<!-- element.ScheduledProduction, element.CurrentProduction,-->
|
|
|
+<!-- completionRate-->
|
|
|
+<!-- ];-->
|
|
|
+<!-- if (element.OrderState == "生产中") {-->
|
|
|
+<!-- workingInfoCurrent.push(arr)-->
|
|
|
+<!-- } else {-->
|
|
|
+<!-- standbyInfoCurrent.push(arr)-->
|
|
|
+<!-- }-->
|
|
|
+<!-- // orderInfoCurrent.push(arr);-->
|
|
|
+<!-- })-->
|
|
|
+<!-- if (JSON.stringify(workingInfoCurrent) != JSON.stringify(this.config.data) ||-->
|
|
|
+<!-- JSON.stringify(standbyInfoCurrent) != JSON.stringify(this.config1.data)) {-->
|
|
|
+
|
|
|
+<!-- this.config = {-->
|
|
|
+<!-- header: ['工单顺序-生产中', '车型', '计划', '完成', '达成率'],-->
|
|
|
+<!-- data: workingInfoCurrent,-->
|
|
|
+<!-- index: false,-->
|
|
|
+<!-- columnWidth: configColumnWidth,-->
|
|
|
+<!-- waitTime: configWaitTime,-->
|
|
|
+<!-- rowNum: 2,-->
|
|
|
+<!-- align: configAlign-->
|
|
|
+<!-- };-->
|
|
|
+<!-- this.config1 = {-->
|
|
|
+<!-- header: ['工单顺序-待生产', '车型', '计划', '完成', '达成率'],-->
|
|
|
+<!-- data: standbyInfoCurrent,-->
|
|
|
+<!-- index: false,-->
|
|
|
+<!-- columnWidth: configColumnWidth,-->
|
|
|
+<!-- waitTime: configWaitTime,-->
|
|
|
+<!-- rowNum: 2,-->
|
|
|
+<!-- align: configAlign-->
|
|
|
+<!-- },-->
|
|
|
+<!-- console.log("轮播表的config已更新");-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }).catch(() => {-->
|
|
|
+<!-- this.$message({-->
|
|
|
+<!-- type: 'warning',-->
|
|
|
+<!-- message: '服务器连接失败'-->
|
|
|
+<!-- });-->
|
|
|
+<!-- });-->
|
|
|
+
|
|
|
+<!-- // 产量详情接口-->
|
|
|
+<!-- // that.GetOutputAndOrder([this.WorkShopId], [this.ProductionLineId]).then(res => {-->
|
|
|
+<!-- // let resData = res.Data;-->
|
|
|
+<!-- // if (resData != null) {-->
|
|
|
+<!-- // if (resData.length > 0) {-->
|
|
|
+<!-- // let localYearFullData = resData.filter(t => t.Year == new Date()-->
|
|
|
+<!-- // .getFullYear());-->
|
|
|
+<!-- // // console.log(localYearFullData);-->
|
|
|
+<!-- // if (localYearFullData.length > 0) {-->
|
|
|
+<!-- // this.MonthOutput = localYearFullData[0].Output[-->
|
|
|
+<!-- // `${new Date().getMonth() + 1}`];-->
|
|
|
+<!-- // // console.log("当前时间"+new Date());-->
|
|
|
+<!-- // // console.log(new Date().getMonth()+"月"+localYearFullData[0].Output[`${new Date().getMonth() +1}`]+"辆");-->
|
|
|
+<!-- // // console.log(localYearFullData[0].Output[`${new Date().getMonth()}`]);-->
|
|
|
+<!-- // //getMonth方法获取的是对应的索引值-->
|
|
|
+<!-- // this.MonthOrder = localYearFullData[0].OrderQuantity[-->
|
|
|
+<!-- // `${new Date().getMonth() + 1}`];-->
|
|
|
+<!-- // }-->
|
|
|
+<!-- // let outputTotal = 0;-->
|
|
|
+<!-- // let orderTotal = 0;-->
|
|
|
+<!-- // resData.forEach(element => {-->
|
|
|
+<!-- // for (let i in element.Output) {-->
|
|
|
+<!-- // outputTotal = outputTotal + element.Output[i];-->
|
|
|
+<!-- // }-->
|
|
|
+<!-- // for (let i in element.OrderQuantity) {-->
|
|
|
+<!-- // orderTotal = orderTotal + element.OrderQuantity[i];-->
|
|
|
+<!-- // }-->
|
|
|
+<!-- // });-->
|
|
|
+<!-- // this.TotalOutput = outputTotal;-->
|
|
|
+<!-- // this.TotalOrder = orderTotal;-->
|
|
|
+<!-- // }-->
|
|
|
+<!-- // }-->
|
|
|
+<!-- // })-->
|
|
|
+
|
|
|
+<!-- //产线数据接口-->
|
|
|
+<!-- that.GetLineOutput().then(res => {-->
|
|
|
+<!-- let resData = res.Data;-->
|
|
|
+<!-- // console.log(res.Data.length);-->
|
|
|
+<!-- if (resData.length > 0) {-->
|
|
|
+<!-- this.dayOutput = resData[0].日产量;-->
|
|
|
+<!-- this.MonthOutput = resData[0].月产量;-->
|
|
|
+<!-- this.TotalOutput = resData[0].总产量;-->
|
|
|
+<!-- // console.log("日产量+",resData[0].日产量);-->
|
|
|
+<!-- }-->
|
|
|
+<!-- });-->
|
|
|
+
|
|
|
+<!-- that.GetLineExceptionData().then(res => {-->
|
|
|
+<!-- let resData = res.Data;-->
|
|
|
+<!-- if (resData.length > 0) {-->
|
|
|
+<!-- this.alarmCount = resData[0].次数;-->
|
|
|
+<!-- //this.alarmTime = this.formateTime(resData[0].时长);-->
|
|
|
+<!-- }-->
|
|
|
+<!-- });-->
|
|
|
+<!-- -->
|
|
|
+<!-- -->
|
|
|
+<!-- that.GetLineExceptionTime().then(res => {-->
|
|
|
+<!-- let resData = res.Data;-->
|
|
|
+<!-- this.alarmTime = resData;-->
|
|
|
+<!-- // if (resData.length > 0) {-->
|
|
|
+<!-- // this.alarmTime = resData;-->
|
|
|
+<!-- // //this.alarmTime = this.formateTime(resData[0].时长);-->
|
|
|
+<!-- // }-->
|
|
|
+<!-- });-->
|
|
|
+<!-- -->
|
|
|
+
|
|
|
+<!-- //报警接口-->
|
|
|
+<!-- that.GerAlarms(this.PlcName).then(res => {-->
|
|
|
+<!-- let resData = res.Data;-->
|
|
|
+<!-- if (resData != null) {-->
|
|
|
+<!-- if (resData.length > 0) {-->
|
|
|
+<!-- var stateArrTemp = [];-->
|
|
|
+<!-- // resData.filter()-->
|
|
|
+<!-- resData.forEach(element => {-->
|
|
|
+<!-- // console.log(element.Desc);-->
|
|
|
+<!-- if (element.Desc != "停止计时" &&-->
|
|
|
+<!-- element.Desc != "缺料计时" &&-->
|
|
|
+<!-- element.Desc != "求助计时") {-->
|
|
|
+<!-- //Desc的格式-->
|
|
|
+<!-- let resDataDesc = element.Desc.split("#-");-->
|
|
|
+<!-- stateArrTemp.push({-->
|
|
|
+<!-- state: resDataDesc[1],-->
|
|
|
+<!-- stationNumber: resDataDesc[0]-->
|
|
|
+<!-- });-->
|
|
|
+<!-- -->
|
|
|
+<!-- -->
|
|
|
+<!-- }-->
|
|
|
+<!-- -->
|
|
|
+
|
|
|
+<!-- });-->
|
|
|
+<!-- var stateMergeArr = stateArrTemp.reduce((total, cur) => {-->
|
|
|
+<!-- if (total) {-->
|
|
|
+<!-- let hasValue = total.findIndex(current => {-->
|
|
|
+<!-- return current.state === cur.state-->
|
|
|
+<!-- })-->
|
|
|
+<!-- // total 中不包含这一项，则push到数组-->
|
|
|
+<!-- hasValue === -1 && total.push({-->
|
|
|
+<!-- state: cur.state,-->
|
|
|
+<!-- stationNumber: [cur.stationNumber]-->
|
|
|
+<!-- })-->
|
|
|
+<!-- // total 中包含这项，则push到对应工位上-->
|
|
|
+<!-- hasValue !== -1 && total[hasValue].stationNumber.push(cur-->
|
|
|
+<!-- .stationNumber)-->
|
|
|
+<!-- //return 是给到下一次的total的初始值-->
|
|
|
+<!-- return total-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }, [])-->
|
|
|
+<!-- this.stateArr = stateMergeArr;-->
|
|
|
+<!-- if (this.announcementDialogVisible == true || stateArrTemp.length == 0) {-->
|
|
|
+<!-- this.alarmDialogVisible = false;-->
|
|
|
+<!-- } else if(stateArrTemp.length > 0){-->
|
|
|
+<!-- this.alarmDialogVisible = true;-->
|
|
|
+<!-- }-->
|
|
|
+<!-- // console.log(this.alarmDialogVisible)-->
|
|
|
+<!-- } -->
|
|
|
+<!-- else{-->
|
|
|
+<!-- this.alarmDialogVisible = false;-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- });-->
|
|
|
+<!-- }, 1000)-->
|
|
|
+<!-- //直接在需要定时器的方法或者生命周期函数中声明并销毁-->
|
|
|
+
|
|
|
+<!-- var noticeApiInterval = setInterval(() => {-->
|
|
|
+<!-- //公告接口-->
|
|
|
+<!-- that.GetNoticeInfo().then(async (res) => {-->
|
|
|
+<!-- let resData = res.Data;-->
|
|
|
+<!-- //使用JSON.stringify判断两个数组是否相等-->
|
|
|
+<!-- if (JSON.stringify(notice) != JSON.stringify(resData)) {-->
|
|
|
+<!-- if (noticeInterval != null) {-->
|
|
|
+<!-- clearInterval(noticeInterval);-->
|
|
|
+<!-- //若下面销毁定时器，则下方使用showNotice方法时也要同时销毁，否则会出现多个定时器-->
|
|
|
+<!-- // noticeInterval = null;-->
|
|
|
+<!-- }-->
|
|
|
+<!-- notice = resData;-->
|
|
|
+<!-- if (resData.length > 0) {-->
|
|
|
+<!-- this.announcementTitle = notice[0].NoticeTitle;-->
|
|
|
+<!-- this.announcementContent = notice[0].NoticeContent;-->
|
|
|
+<!-- this.announcementTitleSize = notice[0].TitleFontSize + "px";-->
|
|
|
+<!-- this.announcementContentSize = notice[0].ContentFontSize + "px";-->
|
|
|
+<!-- var index = 1;-->
|
|
|
+<!-- var lenth = notice.length;-->
|
|
|
+<!-- //使用setInterval调用一次停止一次-->
|
|
|
+<!-- showNotice();-->
|
|
|
+<!-- var thisData = this;-->
|
|
|
+
|
|
|
+<!-- function showNotice() {-->
|
|
|
+<!-- noticeInterval = setInterval(() => {-->
|
|
|
+<!-- thisData.announcementTitle = notice[index % lenth]-->
|
|
|
+<!-- .NoticeTitle;-->
|
|
|
+<!-- thisData.announcementContent = notice[index % lenth]-->
|
|
|
+<!-- .NoticeContent;-->
|
|
|
+<!-- thisData.announcementTitleSize = notice[index % lenth]-->
|
|
|
+<!-- .TitleFontSize + "px";-->
|
|
|
+<!-- thisData.announcementContentSize = notice[index % lenth]-->
|
|
|
+<!-- .ContentFontSize + "px";-->
|
|
|
+<!-- index++;-->
|
|
|
+<!-- //clearInterval只会停止定时器，不会销毁对象-->
|
|
|
+<!-- clearInterval(noticeInterval);-->
|
|
|
+<!-- //若上面判断两个数组是否相等时执行销毁定时器，则此处也要同时销毁，否则会出现多个定时器-->
|
|
|
+<!-- // noticeInterval = null;-->
|
|
|
+<!-- showNotice();-->
|
|
|
+<!-- // console.log((index - 1) % lenth);-->
|
|
|
+<!-- }, notice[(index - 1) % lenth].DurationSec * 1000)-->
|
|
|
+<!-- }-->
|
|
|
+<!-- this.announcementDialogVisible = true;-->
|
|
|
+<!-- } else {-->
|
|
|
+<!-- this.announcementDialogVisible = false;-->
|
|
|
+<!-- }-->
|
|
|
+<!-- console.log("公告变化");-->
|
|
|
+<!-- }-->
|
|
|
+<!-- })-->
|
|
|
+
|
|
|
+<!-- }, 5000)-->
|
|
|
+
|
|
|
+<!-- this.$once('hook:beforeDestroy', () => {-->
|
|
|
+<!-- clearInterval(apiInterval);-->
|
|
|
+<!-- apiInterval = null;-->
|
|
|
+<!-- clearInterval(noticeApiInterval);-->
|
|
|
+<!-- noticeApiInterval = null-->
|
|
|
+<!-- })-->
|
|
|
+<!-- this.cancelLoading();-->
|
|
|
+<!-- // this.onclick();-->
|
|
|
+<!-- // //获取当前月份的英文格式-->
|
|
|
+<!-- // console.log("month + " + new Date().toDateString().split(" ")[1]);-->
|
|
|
+<!-- // //获取当前年份-->
|
|
|
+<!-- // console.log("year = " + new Date().getFullYear());-->
|
|
|
+<!-- },-->
|
|
|
+<!-- beforeDestroy() {-->
|
|
|
+
|
|
|
+<!-- },-->
|
|
|
+<!-- showNotice() {-->
|
|
|
+
|
|
|
+<!-- },-->
|
|
|
+<!-- methods: {-->
|
|
|
+<!-- onclick() {-->
|
|
|
+<!-- document.documentElement.webkitRequestFullScreen();-->
|
|
|
+<!-- // screenfull.toggle();-->
|
|
|
+<!-- },-->
|
|
|
+<!-- cancelLoading() {-->
|
|
|
+<!-- setTimeout(() => {-->
|
|
|
+<!-- this.loading = false-->
|
|
|
+<!-- }, 500)-->
|
|
|
+<!-- },-->
|
|
|
+<!-- formateTime(time) {-->
|
|
|
+<!-- const h = parseInt(time / 3600)-->
|
|
|
+<!-- const minute = parseInt(time / 60 % 60)-->
|
|
|
+<!-- const second = Math.ceil(time % 60)-->
|
|
|
+
|
|
|
+<!-- const hours = h < 10 ? '0' + h : h-->
|
|
|
+<!-- const formatSecond = second > 59 ? 59 : second-->
|
|
|
+<!-- // return `${hours > 0 ? `${hours}:` : ''}${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`-->
|
|
|
+<!-- return `${hours}:${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`-->
|
|
|
+<!-- },-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+<!--</script>-->
|
|
|
+
|
|
|
+<!--<style lang="scss">-->
|
|
|
+<!-- @import '../assets/scss/index.scss';-->
|
|
|
+
|
|
|
+<!-- .dv-scroll-board {-->
|
|
|
+<!-- .header-item {-->
|
|
|
+<!-- font-size: 2.7rem;-->
|
|
|
+<!-- font-weight: bold;-->
|
|
|
+<!-- height: 4.5rem !important;-->
|
|
|
+<!-- padding: 0;-->
|
|
|
+<!-- line-height: 4.5rem !important;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .rows {-->
|
|
|
+<!-- height: 9rem !important;-->
|
|
|
+
|
|
|
+<!-- .row-item {-->
|
|
|
+<!-- font-size: 3rem;-->
|
|
|
+<!-- height: 4.5rem !important;-->
|
|
|
+<!-- line-height: 4.5rem !important;-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .orderWorking .dv-scroll-board {-->
|
|
|
+<!-- // .header-item {-->
|
|
|
+<!-- // font-size: 2.5rem;-->
|
|
|
+<!-- // font-weight: bold;-->
|
|
|
+<!-- // height: 4rem !important;-->
|
|
|
+<!-- // padding: 0;-->
|
|
|
+<!-- // line-height: 4rem !important;-->
|
|
|
+<!-- // }-->
|
|
|
+
|
|
|
+<!-- .rows {-->
|
|
|
+<!-- height: 11rem !important;-->
|
|
|
+
|
|
|
+<!-- .row-item {-->
|
|
|
+<!-- font-size: 4.5rem;-->
|
|
|
+<!-- height: 5.5rem !important;-->
|
|
|
+<!-- line-height: 5.5rem !important;-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+
|
|
|
+<!-- .buttomBox {-->
|
|
|
+<!-- display: flex;-->
|
|
|
+<!-- justify-content: center;-->
|
|
|
+<!-- height: 6rem;-->
|
|
|
+<!-- margin-top: 10px;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .buttomBox .dv-border-box-8 {-->
|
|
|
+<!-- margin-left: 10px;-->
|
|
|
+<!-- margin-right: 10px;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .announcementDialog .el-dialog__body {-->
|
|
|
+<!-- padding: 0px;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .buttomBox-items {-->
|
|
|
+<!-- display: flex;-->
|
|
|
+<!-- flex-direction: column;-->
|
|
|
+<!-- justify-content: center;-->
|
|
|
+<!-- position: relative;-->
|
|
|
+<!-- align-items: center;-->
|
|
|
+<!-- height: 100%;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .buttomBox-items-title {-->
|
|
|
+<!-- display: flex;-->
|
|
|
+<!-- text-align: center;-->
|
|
|
+<!-- justify-content: center;-->
|
|
|
+<!-- height: 50%;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .buttomBox-items-title img {-->
|
|
|
+<!-- width: 1rem;-->
|
|
|
+<!-- height: 1rem;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .buttomBox-items-title-text {-->
|
|
|
+<!-- font-size: 1.8rem;-->
|
|
|
+<!-- color: white;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+
|
|
|
+<!-- .buttomBox-items-data {-->
|
|
|
+<!-- font-size: 1.8rem;-->
|
|
|
+<!-- color: aqua;-->
|
|
|
+
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-dialog {-->
|
|
|
+<!-- /* background: rgba(0, 0, 0, .2) !important; */-->
|
|
|
+<!-- background: rgba(0, 0, 0, 0.2) !important;-->
|
|
|
+<!-- // border: rgb(255, 112, 46) 5px solid;-->
|
|
|
+<!-- backdrop-filter: blur(3px);-->
|
|
|
+<!-- margin-top: 0 !important;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-dialog__title {-->
|
|
|
+<!-- color: rgb(255, 255, 255);-->
|
|
|
+<!-- font-weight: 900;-->
|
|
|
+<!-- font-size: 3rem;-->
|
|
|
+<!-- color: red;-->
|
|
|
+<!-- line-height: 4.5rem;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-dialog__header {-->
|
|
|
+<!-- height: 0rem;-->
|
|
|
+<!-- color: #fff;-->
|
|
|
+<!-- background: rgba(0, 0, 0, 0.5);-->
|
|
|
+<!-- text-align: center;-->
|
|
|
+<!-- // box-shadow: 0 0 1.5vw rgb(97, 255, 255) inset;-->
|
|
|
+<!-- // background: linear-gradient(#74ffef, #74ffef) left top,-->
|
|
|
+<!-- // linear-gradient(#3deeda, #3deeda) left top,-->
|
|
|
+<!-- // linear-gradient(#3deeda, #3deeda) right top,-->
|
|
|
+<!-- // linear-gradient(#3deeda, #3deeda) right top;-->
|
|
|
+<!-- /* linear-gradient(#3deeda, #3deeda) left bottom,-->
|
|
|
+<!-- linear-gradient(#3deeda, #3deeda) left bottom,-->
|
|
|
+<!-- linear-gradient(#3deeda, #3deeda) right bottom,-->
|
|
|
+<!-- linear-gradient(#3deeda, #3deeda) right bottom; */-->
|
|
|
+<!-- background-repeat: no-repeat;-->
|
|
|
+<!-- background-size: 2px 20px, 20px 2px;-->
|
|
|
+<!-- padding: 0 !important;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-dialog__body {-->
|
|
|
+<!-- padding: 20px;-->
|
|
|
+<!-- color: #fff;-->
|
|
|
+<!-- background: rgba(0, 0, 0, 0.5);-->
|
|
|
+<!-- text-align: left;-->
|
|
|
+<!-- // box-shadow: 0 0 1.5vw rgb(57, 255, 255) inset;-->
|
|
|
+<!-- // background: -->
|
|
|
+<!-- // linear-gradient(#3deeda, #3deeda) left bottom,-->
|
|
|
+<!-- // linear-gradient(#3deeda, #3deeda) left bottom,-->
|
|
|
+<!-- // linear-gradient(#3deeda, #3deeda) right bottom,-->
|
|
|
+<!-- // linear-gradient(#3deeda, #3deeda) right bottom;-->
|
|
|
+<!-- background-repeat: no-repeat;-->
|
|
|
+<!-- background-size: 2px 20px, 20px 2px;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-table th.el-table__cell>.cell {-->
|
|
|
+<!-- height: 3rem;-->
|
|
|
+<!-- line-height: 3rem;-->
|
|
|
+<!-- font-size: 2rem;-->
|
|
|
+<!-- background-color: #00BAFF;-->
|
|
|
+<!-- color: white;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-table th.el-table__cell {-->
|
|
|
+<!-- padding: 0;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-table .stop-row {-->
|
|
|
+<!-- color: red;-->
|
|
|
+<!-- background-color: #003B51;-->
|
|
|
+
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-table .needHelp-row {-->
|
|
|
+<!-- color: #ffe446;-->
|
|
|
+<!-- background-color: #003B51;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-table .less-row {-->
|
|
|
+<!-- color: lime;-->
|
|
|
+<!-- background-color: #0A2732;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- //表格内容行设置-->
|
|
|
+<!-- .el-table__cell .cell {-->
|
|
|
+<!-- padding: 0;-->
|
|
|
+<!-- line-height: 7rem;-->
|
|
|
+<!-- //background: lightblue; -->
|
|
|
+<!-- font-size: 5rem;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-table .el-table__cell {-->
|
|
|
+<!-- padding: 0;-->
|
|
|
+<!-- // height: 6rem;-->
|
|
|
+<!-- }-->
|
|
|
+
|
|
|
+<!-- .el-table__row {-->
|
|
|
+
|
|
|
+<!-- padding: 0;-->
|
|
|
+<!-- color: white;-->
|
|
|
+<!-- }-->
|
|
|
+<!--</style>-->
|
莫海杰