From e51c1799ce6e4f0a3d84ceb8870cc58507c5f422 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期日, 08 十月 2023 16:42:41 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/SchedulingDashboard into wn
---
src/components/TaskControlModal.vue | 928 ++++++++++++++++++++++++++++++++++++++++++++++++
src/views/visualization.vue | 155 +++++--
2 files changed, 1,040 insertions(+), 43 deletions(-)
diff --git a/src/components/TaskControlModal.vue b/src/components/TaskControlModal.vue
new file mode 100644
index 0000000..65e2c38
--- /dev/null
+++ b/src/components/TaskControlModal.vue
@@ -0,0 +1,928 @@
+<template>
+ <el-dialog
+ :close-on-click-modal="false"
+ :visible.sync="show"
+ width="753px"
+ class="add-event-dialog"
+ :show-close="false"
+ >
+ <div class="tank-box">
+ <div slot="title" class="tac drawerHeader">
+ <span class="title-l">{{ messageError ? '鎻愮ず' : '鏂颁换鍔�' }}</span>
+ </div>
+ <div class="dialog-content-box">
+ <div style="
+ margin: 0 auto;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ text-align: left;"
+ >
+ <template v-if="messageError">
+ <div class="error-t">
+ <span v-if="messageError ==='涓嬪彂鎴愬姛锛�'" class="el-icon-success color_success"></span>
+ <span v-else class="el-icon-error color_error"></span>
+ </div>
+ <div class="error-m">
+ {{ messageError }}
+ </div>
+ <div
+ class="font_size_20 color_fff"
+ style="text-align: center; width: 100%; margin: 10px 0"
+ >
+ <span v-if="messageError ==='涓嬪彂鎴愬姛锛�'" style="font-size:30px;">{{ 3 - Number(second) }}s</span>
+ <span v-else>璇烽噸璇�</span>
+ </div>
+
+ </template>
+ <template v-else-if="Object.keys(currentTaskData || {}).length">
+ <div class="title-box margin_bottom_13">
+ <div class="title-item color_4efefa font_size_20 title-bng">
+ 褰撳墠浠诲姟锛歿{ currentTaskData.Procedure.procedure.procedureName || "" }}
+ </div>
+ <div class="title-item title-bng color_4efefa font_size_20">
+ 鐢熶骇鏁伴噺锛�<span style="color:#fff;">{{ currentTaskData.Order.amount || 0 }}</span>
+ </div>
+ </div>
+ <div class="title-auto-box">
+ <div class="title-box margin_bottom_20">
+ <div class="title-item">
+ 璁㈠崟缂栧彿锛歿{ currentTaskData.Order.orderId || "" }}
+ </div>
+ <div class="title-item">
+ 宸ュ崟缂栧彿锛歿{ currentTaskData.Order.workOrderId || "" }}
+ </div>
+ <div class="title-item">
+ 浜у搧鍚嶇О锛歿{ currentTaskData.Order.productName || "" }}
+ </div>
+ <div class="title-item">
+ 鏁伴噺锛歿{ currentTaskData.Order.amount || 0 }}{{ currentTaskData.Order.unit }}
+ </div>
+ <div class="title-item">
+ 浜よ揣鏃ユ湡锛歿{ currentTaskData.Order.deliverDate || "" }}
+ </div>
+ <div class="title-item">
+ 宸ユ椂锛� {{ currentTaskData.Procedure.procedure.workHours || "" }}
+ </div>
+ <div class="title-item">
+ 璁″垝鏃堕棿锛� {{ formatDate(currentTaskData.Order.startTime) || "" }}
+ -
+ {{ formatDate(currentTaskData.Order.endTime) }}
+ </div>
+
+ <div class="title-item">
+ 瀹㈡埛鍚嶇О锛歿{ currentTaskData.Order.customer || "" }}
+ </div>
+ <div class="title-item title-item-two">
+ 閫氶亾锛� {{ channelNameConfig[currentTaskData.Channel] || "" }}
+ </div>
+
+ <div class="title-item title-item-two">
+ 鍙傛暟瑕佹眰锛歿{ currentTaskData.Order.parameter || "" }}
+ </div>
+ </div>
+ <div class="title-box margin_bottom_20">
+ <div
+ style="
+ color: #fff;
+ font-size: 18px;
+ margin-bottom: 10px;
+ margin-top: 20px;
+ "
+ class="color_4efefa"
+ >
+ 宸ヨ壓鍙傛暟
+ </div>
+ <div
+ class="title-item title-item-two"
+ v-for="(item, index) in currentProcessParams"
+ :key="index"
+ >
+ {{ item.Key }}锛歿{ item.Value || "" }}
+
+ </div>
+ </div>
+ </div>
+ <div class="process-box" v-if="showBtn === 2 || showBtn === 3">
+ <div
+ style="
+ color: red;
+ font-size: 26px;
+ width: 100%;
+ text-align: center;
+ margin-bottom: 15px;
+ line-height:35px;
+ "
+ :class="showBtn === 3&&isLoading?'margin-top-10px':'margin-top-40px'"
+ >
+ <div class="gif-box" v-if="showBtn === 2||(showBtn === 3&&!isLoading)">
+ <template v-if="showBtn === 2">
+ <div class="gif">
+ <img src="../../public/shan.gif"/>
+ </div>
+
+ </template>
+ <template v-if="showBtn === 3&&!isLoading">
+ <div class="gif">
+ <span class="yuandian"></span>
+ </div>
+ </template>
+ <div class="gif-right">
+ ----- 鍓╀綑鏃堕棿 -----
+ <span>00:00:{{ 30 - Number(num) < 10 ? 0 : '' }}{{ 30 - Number(num) }}</span>
+ </div>
+ </div>
+ {{ message }}
+ </div>
+ <template v-if="showBtn === 3&&isLoading">
+ <div class="progress-item">
+ <span>{{ (+num / 30) * 100 }}%</span>
+ <el-progress
+ style="width: calc(100% - 50px); float: right"
+ define-back-color="#CDC6C6"
+ color="#00cc66"
+ text-color="#fff"
+ :text-inside="true"
+ :stroke-width="20"
+ :percentage="(+num / 30) * 100"
+ ></el-progress>
+ </div>
+ </template>
+ </div>
+ </template>
+ </div>
+ <!--宸︾炕椤垫寜閽�-->
+ <div v-show="showPreviousTaskBtn" class="paginator-btn previous" @click="previousTask"><</div>
+ <!--鍙崇炕椤垫寜閽�-->
+ <div v-show="showNextTaskBtn" class="paginator-btn next" @click="nextTask">></div>
+ </div>
+ <div slot="footer" :class="messageError?'dialog-footer tac btn-error':'dialog-footer tac'"
+ style="overflow: hidden">
+ <template v-if="messageError">
+ <div class="btn" v-if="messageError ==='涓嬪彂鎴愬姛锛�'||getProcessParamsErrMsg" @click="closeClick">
+ <img src="../../public/close-btn.png"/>
+ </div>
+ <div class="btn" v-else @click="confirmClick2">
+ <img src="../../public/agin.png"/>
+ </div>
+ </template>
+ <template v-else>
+ <div class="btn" @click="closeClick">
+ <img src="../../public/btn1.png"/>
+ </div>
+ <div class="btn" v-if="showBtn === 1">
+ <div v-if='currentTaskData && currentTaskData.CanStarted' @click="confirmClick1">
+ <img src="../../public/confirm1.png"/>
+ </div>
+ <div v-else>
+ <img src="../../public/confirm2.png"/>
+ </div>
+ </div>
+ <div class="btn" v-if="showBtn === 2">
+ <img src="../../public/confirm2.png"/>
+ </div>
+ <div
+ class="btn"
+ v-if="showBtn === 3"
+ v-prevent-re-click="3000"
+ @click="onSubmit()"
+ >
+ <i class="el-icon-loading icon-loading" v-if="isLoading"/>
+ <img src="../../public/loading.png" v-if="isLoading"/>
+ <img src="../../public/confirm3.png" v-if="!isLoading"/>
+ </div>
+ </template>
+ </div>
+
+ <div class="paginator-text" v-if="taskList?.length">
+ <span class="page">{{ paginatorText.page }}</span>
+ <span class="total">/ {{ paginatorText.total }}</span>
+ </div>
+ </div>
+ </el-dialog>
+</template>
+
+<script>
+import {getTaskInfo, sendProcessParams, startTask,} from "@/api/home"; // 浜х嚎
+export default {
+ name: 'TaskControlModal',
+ components: {},
+ props: {
+ activeName: {
+ type: [String, Number],
+ default: () => {
+ return 1;
+ },
+ },
+ },
+ data() {
+ return {
+ show: false,
+ // 褰撳墠搴斿睍绀虹殑浠诲姟绱㈠紩
+ currentTaskIndex: 0,
+ // 褰撳墠灞曠ず鐨勪换鍔″搴旂殑宸ヨ壓鍙傛暟
+ currentProcessParams: [],
+ getProcessParamsErrMsg: '',
+ // 浠诲姟鍒楄〃
+ taskList: [],
+ showBtn: 1,
+ num: 0,
+ timer: null,
+ safeProduce: '',
+ message: this.safeProduce,
+ messageError: "",
+ resParams: {},
+ isLoading: false,
+ second: 0,
+ secondTimer: null,
+ // 閫氶亾鍚嶇О閰嶇疆 Channel 0 瀵瑰簲灞曠ず 0, Channel 1 瀵瑰簲灞曠ず A,鏆傛椂蹇界暐鍏朵綑鎯呭喌
+ channelNameConfig: {
+ 0: '0',
+ 1: 'A'
+ }
+ };
+ },
+ mounted() {
+ this.getTaskList().then(() => {
+ const firstData = this.taskList[0]
+ const id = firstData?.Procedure?.ID
+ if (id) {
+ this.currentTaskIndex = this.taskList.findIndex(ele => ele.Procedure.ID === id)
+ this.getCurrentTaskProduceParams(id)
+ }
+ })
+ this.message = this.safeProduce;
+ this.getInfo();
+ },
+ computed: {
+ /**
+ * 褰撳墠搴斿睍绀虹殑浠诲姟鏁版嵁
+ * @returns {*}
+ */
+ currentTaskData() {
+ return this.taskList[this.currentTaskIndex]
+ },
+ showPreviousTaskBtn() {
+ return this.currentTaskIndex > 0
+ },
+ showNextTaskBtn() {
+ return this.currentTaskIndex < this.taskList.length - 1
+ },
+ paginatorText() {
+ return {
+ page: this.currentTaskIndex + 1,
+ total: this.taskList.length
+ }
+ }
+ },
+ watch: {
+ num() {
+ if (this.num === 30) {
+ clearInterval(this.timer);
+ this.showBtn = 3;
+ }
+ },
+ second() {
+ if (this.second === 3) {
+ clearInterval(this.secondTimer);
+ this.closeClick()
+ }
+ },
+ show(newVal) {
+ if (this.timer) {
+ clearInterval(this.timer);
+ }
+ if (this.secondTimer) {
+ clearInterval(this.secondTimer)
+ }
+ this.num = 0;
+ this.showBtn = 1;
+ this.isLoading = false
+ this.second = 0
+ this.secondTimer = null
+ this.messageError = ''
+ this.resParams = {};
+ if (newVal) {
+ this.getTaskList().then(() => {
+ const firstData = this.taskList[0]
+ const id = firstData?.Procedure?.ID
+ if (id) {
+ this.currentTaskIndex = this.taskList.findIndex(ele => ele.Procedure.ID === id)
+ this.getCurrentTaskProduceParams(id)
+ }
+ })
+ this.message = this.safeProduce;
+ this.getInfo();
+ }
+ this.$emit('isTip', this.show)
+ },
+ },
+ methods: {
+ confirmClick2() {
+ this.messageError = "";
+ this.isLoading = false;
+ },
+ confirmClick1() {
+ this.num = 0;
+ this.showBtn = 2;
+ (this.message = this.safeProduce),
+ (this.timer = setInterval(() => {
+ this.num = this.num + 1;
+ }, 1000));
+ },
+ closeClick() {
+ if (this.timer) {
+ clearInterval(this.timer);
+ }
+ this.num = 0;
+ this.shutdown();
+ },
+ /**
+ * 鑾峰彇浠诲姟鍒楄〃
+ */
+ getTaskList() {
+ return getTaskInfo({taskMode: 1}).then(res => {
+ if (res.code == 200) {
+ this.taskList = res.data?.Tasks?.length ? res.data.Tasks : []
+ this.safeProduce = res.data.Prompt.safeProduce ? res.data.Prompt.safeProduce : ''
+ this.message = this.safeProduce
+ }
+ }, err => {
+ this.taskList = []
+ console.error(err)
+ },)
+ },
+ /**
+ * 鑾峰彇褰撳墠灞曠ず鐨勪换鍔＄殑宸ヨ壓鍙傛暟
+ */
+ getCurrentTaskProduceParams(id) {
+ // const id = this.currentTaskData?.Procedure?.ID
+ if (id) {
+ startTask({id}).then((res) => {
+ if (res.code === 200) {
+ this.currentProcessParams = res.data.Params ?? []
+ } else {
+ this.getProcessParamsErrMsg = res.msg ?? '鑾峰彇宸ヨ壓鍙傛暟澶辫触锛�';
+ }
+ });
+ }
+ },
+ /**
+ * 鍓嶇炕椤�
+ */
+ previousTask() {
+ if (this.currentTaskIndex - 1 >= 0) {
+ this.currentTaskIndex -= 1
+ this.$nextTick(() => {
+ const id = this.currentTaskData?.Procedure?.ID
+ this.getCurrentTaskProduceParams(id)
+ this.message = this.safeProduce;
+ this.getInfo()
+ })
+ }
+ },
+ /**
+ * 鍚庣炕椤�
+ */
+ nextTask() {
+ if (this.currentTaskIndex + 1 <= this.taskList.length - 1) {
+ this.currentTaskIndex += 1
+ this.$nextTick(() => {
+ const id = this.currentTaskData?.Procedure?.ID
+ this.getCurrentTaskProduceParams(id)
+ this.message = this.safeProduce;
+ this.getInfo()
+ })
+ }
+ },
+ getInfo() {
+ // 1 鏈敓浜� 2鐢熶骇涓� 3鐢熶骇瀹屾垚
+ if (this.currentTaskData?.Procedure?.ID && this.currentTaskData?.Procedure?.Status === 1) {
+ this.num = 0;
+ this.showBtn = 1;
+ this.show = true;
+ } else {
+ this.show = false;
+ }
+ if (this.getProcessParamsErrMsg) {
+ this.messageError = this.getProcessParamsErrMsg;
+ }
+ },
+ getDateObj(date, fmt) {
+ if (/(y+)/.test(fmt)) {
+ fmt = fmt.replace(
+ RegExp.$1,
+ (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+ );
+ }
+ let o = {
+ "M+": date.getMonth() + 1,
+ "d+": date.getDate(),
+ "h+": date.getHours(),
+ "m+": date.getMinutes(),
+ "s+": date.getSeconds(),
+ };
+ for (let k in o) {
+ if (new RegExp(`(${k})`).test(fmt)) {
+ let str = o[k] + "";
+ fmt = fmt.replace(
+ RegExp.$1,
+ RegExp.$1.length === 1 ? str : this.padLeftZero(str)
+ );
+ }
+ }
+ return fmt;
+ },
+ padLeftZero(str) {
+ return ("00" + str).substr(str.length);
+ },
+ // 鏍煎紡鍖栨椂闂� ==> yyyy-mm-dd
+ formatDate(value) {
+ if (value) {
+ const now = value ? new Date(value * 1000) : new Date();
+ return this.getDateObj(now, "MM-dd hh:mm");
+ } else {
+ return "";
+ }
+ },
+
+ onSubmit() {
+ if (this.currentTaskData.Procedure.ID) {
+ this.message = "宸ヨ壓鍙傛暟涓嬪彂涓�...";
+ this.num = 0;
+ this.timer = setInterval(() => {
+ this.num = this.num + 1;
+ if (this.num === 30 || this.resParams) {
+ this.num = 30;
+ this.getCode(this.resParams);
+ }
+ }, 1000);
+ if (this.isLoading) {
+ return true;
+ }
+ this.isLoading = true;
+ sendProcessParams({
+ procedureId: this.currentTaskData.Procedure.ID,
+ position: Number(this.currentTaskData.Position),
+ }).then((res) => {
+ if (res.code === 200) {
+ this.resParams = res;
+ this.isLoading = false;
+ } else {
+ this.isLoading = false;
+ this.resParams = res;
+ }
+ }, err => {
+ console.error(err)
+ });
+ setTimeout(() => {
+ this.isLoading = false;
+ }, 30000)
+ }
+ },
+ getCode(res) {
+ if (res.code === 200) {
+ if (this.num === 30) {
+ this.messageError = "涓嬪彂鎴愬姛锛�";
+ if (!this.secondTimer) {
+ this.secondTimer = setInterval(() => {
+ this.second = this.second + 1;
+ }, 1000);
+ }
+ clearInterval(this.timer);
+ // this.num = 30;
+ // this.showBtn = 2;
+ this.message = this.safeProduce;
+
+ this.num = 0;
+ this.showBtn = 1
+ this.shutdown();
+ this.$emit('getSetProductNumber', this.activeName)
+ // this.$message.success("涓嬪彂鐢熶骇鏁伴噺鎴愬姛锛�");
+ }
+ } else {
+ this.messageError = res.msg ? res.msg : "鎶辨瓑锛屽伐搴忎笅鍙戝け璐ワ紒";
+ clearInterval(this.timer);
+ this.num = 30;
+ this.showBtn = 2;
+ this.message = this.safeProduce;
+ }
+ },
+ shutdown() {
+ this.show = false;
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.color_error {
+ color: red;
+}
+
+.color_success {
+ color: green;
+}
+
+.tank-box {
+ width: 753px;
+ height: 728px;
+ background: url("../../public/tank.png") no-repeat center center / cover;
+ position: relative;
+
+ .dialog-footer {
+ position: absolute;
+ bottom: 25px;
+ width: 100%;
+ text-align: center;
+ }
+}
+
+.margin-top-10px {
+ margin-top: 10px;
+}
+
+.margin-top-40px {
+ margin-top: 40px;
+}
+
+.color_4efefa {
+ color: #4efefa !important;
+}
+
+.color_fff {
+ color: #fff;
+}
+
+.font_size_20 {
+ font-size: 20px !important;
+}
+
+.margin_bottom_13 {
+ margin-bottom: 13px;
+}
+
+.title-box {
+ width: calc(100% - 140px);
+ height: auto;
+ overflow: hidden;
+ padding: 0 70px;
+
+ .title-item {
+ width: 45%;
+ float: left;
+ height: 35px;
+ line-height: 35px;
+ font-size: 16px;
+ color: #fff;
+
+ &:nth-of-type(odd) {
+ width: 55%;
+ }
+ }
+
+ .title-bng {
+ height: 52px;
+ line-height: 52px;
+
+ span {
+ width: calc(100% - 120px);
+ height: 52px;
+ text-align: center;
+ display: inline-block;
+ background: url("../../public/number.png") no-repeat center center / cover;
+ }
+ }
+
+ .title-item-two {
+ width: 100% !important;
+ }
+}
+
+.error-t {
+ width: 100px;
+ margin: 100px auto 40px;
+ font-size: 98px;
+
+ span {
+ display: inline-block;
+ }
+}
+
+.error-m {
+ line-height: 35px;
+ font-size: 28px;
+ color: #fff;
+ margin-bottom: 20px;
+ text-align: center;
+}
+
+::v-deep .el-dialog {
+ background: transparent;
+}
+
+::v-deep .el-dialog__header {
+ padding: 0 !important;
+}
+
+::v-deep .el-dialog__body {
+ padding: 0 !important;
+}
+
+.btn-error {
+ bottom: 80px !important;
+}
+
+.btn {
+ width: 150px;
+ height: auto;
+ display: inline-block;
+ position: relative;
+
+ img {
+ width: 100%;
+ }
+
+ .icon-loading {
+ font-size: 32px;
+ color: #333;
+ position: absolute;
+ line-height: 2.0;
+ left: 38%;
+ }
+
+ &:nth-of-type(1) {
+ // margin-right: 30px;
+ // margin-left: 110px;
+ }
+}
+
+::v-deep .el-tabs__content {
+ height: calc(100% - 55px);
+ overflow-y: auto;
+}
+
+.circel {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ border: 2px solid rgba(12, 79, 218, 1);
+ position: relative;
+ float: left;
+
+ .circel-two {
+ width: 75px;
+ height: 75px;
+ position: absolute;
+ top: 11px;
+ left: 11px;
+ border-radius: 50%;
+ border: 2px solid rgba(12, 79, 218, 1);
+ }
+}
+
+.circel-text {
+ color: #fff;
+ margin-left: 20px;
+
+ .circel-text-t {
+ font-size: 18px;
+ line-height: 40px;
+ }
+
+ .circel-text-b {
+ font-weight: 700;
+ font-size: 14px;
+
+ span {
+ color: rgba(12, 79, 218, 1);
+ font-size: 38px;
+ margin-right: 10px;
+ }
+ }
+}
+
+.color_red {
+ width: 100%;
+ margin: 0 auto 25px auto;
+ text-align: center;
+ font-size: 14px;
+}
+
+.form-item {
+ width: calc(50% - 20px);
+ float: left;
+
+ &:nth-child(odd) {
+ margin-right: 20px;
+ }
+}
+
+.form-item-two {
+ width: calc(50% - 20px);
+ float: left;
+
+ &:nth-of-type(odd) {
+ margin-right: 20px;
+ }
+}
+
+.form-item-three {
+ width: calc(100% - 20px);
+ float: left;
+}
+
+.form-item-check {
+ width: calc(33% - 40px);
+ float: left;
+
+ &:nth-of-type(odd) {
+ margin-right: 20px;
+ }
+}
+
+.title {
+ width: 100%;
+}
+
+.dialog-content-box {
+ height: calc(100% - 190px);
+ padding: 20px 0 10px;
+ position: relative;
+
+ .el-form {
+ overflow: hidden;
+ }
+
+ .title-auto-box {
+ height: calc(100% - 220px);
+ overflow: auto;
+ width: calc(100% - 140px);
+ margin: 0 auto;
+ background: #0E246A;
+
+ .title-box {
+ padding: 0 10px;
+ width: calc(100% - 20px);
+ }
+ }
+
+ .gif-box {
+ width: 230px;
+ margin: 0 auto 5px auto;
+
+ .gif-right {
+ width: 210px;
+ font-size: 14px;
+ color: #fff;
+ line-height: 28px;
+
+ span {
+ font-weight: 700;
+ font-size: 18px;
+ }
+ }
+ }
+
+ .gif {
+ width: 55px;
+ vertical-align: middle;
+ float: left;
+ margin-right: 20px;
+
+ img {
+ width: 100%;
+ }
+
+ .yuandian {
+ width: 55px;
+ height: 55px;
+ float: left;
+ // background: #15d815;
+ background: red;
+ border-radius: 50%;
+ // margin-top:-5px;
+ vertical-align: middle;
+ }
+ }
+
+ .progress-item {
+ width: 55%;
+ padding: 2px 8px;
+ height: 20px;
+ background: #fff;
+ border-radius: 30px;
+ margin: 0 auto;
+ border: 2px solid rgba(255, 255, 255, 0.5);
+ box-shadow: 1px 5px 5px rgba(255, 255, 255, 0.5);
+
+ span {
+ float: left;
+ font-weight: 700;
+ color: #333;
+ font-size: 15px;
+ }
+ }
+}
+
+.num-identify {
+ padding: 5px 8px;
+ background-color: rgba(255, 153, 0, 1);
+ border-radius: 6px;
+ font-size: 14px;
+ color: #fff;
+ font-weight: 600;
+}
+
+.drawerHeader {
+ width: 98%;
+ margin: 0 auto;
+ overflow: hidden;
+
+ .title-l {
+ width: 25%;
+ float: left;
+ margin-left: 30px;
+ font-size: 25px;
+ color: #fff;
+ height: 3.2vw;
+ line-height: 4.5vw;
+ }
+
+ .title-r {
+ width: 60px;
+ float: right;
+ height: 60px;
+ line-height: 5vw;
+ cursor: pointer;
+
+ img {
+ display: inline-block;
+ width: 100%;
+ }
+ }
+
+ .identify {
+ width: 80px;
+ height: 25px;
+ line-height: 25px;
+ text-align: center;
+ border: 1px solid rgba(255, 153, 0, 1);
+ border-radius: 6px;
+ font-size: 16px;
+ color: rgba(255, 153, 0, 1);
+ transform: rotate(15deg);
+ font-weight: 600;
+ margin-right: 100px;
+ margin-top: 12px;
+ float: right;
+ }
+}
+
+.paginator-btn {
+ position: absolute;
+ height: 40px;
+ width: 40px;
+ background-color: #09e5ed;
+ color: #fff;
+ top: 50%;
+ text-align: center;
+ font-size: 24px;
+ font-weight: 500;
+ border-radius: 50%;
+ margin-top: -20px;
+ line-height: 38px;
+ box-sizing: border-box;
+ cursor: pointer;
+ user-select: none;
+
+ &.previous {
+ left: -60px;
+ padding-right: 2px;
+ }
+
+ &.next {
+ right: -60px;
+ padding-left: 4px;
+ }
+}
+
+.paginator-text {
+ position: absolute;
+ bottom: -30px;
+ height: 40px;
+ width: 100%;
+ text-align: center;
+
+ & .page {
+ color: #fff;
+ font-size: 22px;
+ padding-right: 8px;
+ }
+
+ & .total {
+ color: #ffffffaa;
+ font-size: 16px;
+ }
+}
+</style>
diff --git a/src/views/visualization.vue b/src/views/visualization.vue
index 9d1679e..4a0d6f3 100644
--- a/src/views/visualization.vue
+++ b/src/views/visualization.vue
@@ -275,11 +275,12 @@
v-for="(item, index) in taskData.procedureList"
>
<div
- class="card"
:key="index2"
v-for="(list, index2) in item"
>
- <template v-if="list.name == '宸ュ簭'">
+ <div
+ class="card"
+ v-if="list.name == '宸ュ簭'">
<div class="card_content">
<div class="card_contentLeft color_blue font_dian">
<!-- {{ list.deviceName }} -->
@@ -337,24 +338,34 @@
<!-- <span class="card-top-r-t">瀹屾垚杩涘害锛�50%</span>
<span class="card-top-r-b">12鏈�28鏃� 08:24</span> -->
</div>
- </template>
- <template v-else>
- <!-- <div class="card_content">
-
- </div> -->
- <div :class="(activeName==1||activeName == 3)?'card_top-4 font_size_20px':'card_top-4'">
- <div>宸ヨ壓缂栧彿锛�<div >{{ list.number }}</div></div>
- <!-- <div
- style="
- font-size: 14px;
- color: #cfcfcf;
- line-height: 20px;
- "
+ </div>
+ <div v-else class="process-params">
+ <div class="process-params-title">
+ <el-popover
+ width="200"
+ :content="list.number"
+ placement="top-start"
+ trigger="click"
>
- 宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛�
- </div> -->
+ <span slot="reference">宸ヨ壓缂栧彿锛歿{ list.number }}</span>
+ </el-popover>
+
</div>
- </template>
+ <div class="process-params-value">
+ <!-- 宸ヨ壓鍙傛暟-->
+ {{mergeProcessParams(taskData.Arr)}}
+ </div>
+
+ <!-- <div
+ style="
+ font-size: 14px;
+ color: #cfcfcf;
+ line-height: 20px;
+ "
+ >
+ 宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛�
+ </div> -->
+ </div>
</div>
</el-carousel-item>
</el-carousel>
@@ -461,7 +472,7 @@
<template
v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)"
>
-
+
<el-empty description="鏆傛棤浠诲姟..."></el-empty>
</template>
</div>
@@ -533,9 +544,9 @@
<!-- <span>{{ item.phoneNum || "" }}</span> -->
<span class="color_yellow"><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /></span>
</dl>
-
+
</div>
-
+
<!-- <div
style="
width: 100%;
@@ -591,19 +602,14 @@
</div>
</div>
</div>
-
+
</template> -->
<!-- 鎺у埗鐨勫脊妗� -->
<AddControl ref="control" :Arr="Arr" />
<!-- 鎺у埗鐨勫脊妗� -->
- <AddIssue
+ <TaskControlModal
ref="control"
- :Arr="Arr"
:activeName="activeName"
- :ArrError="ArrError"
- :safeProduce="safeProduce"
- :taskData="taskData"
- :Order="taskData.Order"
@getSetProductNumber="reloadPage"
@isTip="isTip"
/>
@@ -632,8 +638,10 @@
import AddControl from "../components/AddControl.vue";
import AddIssue from "../components/AddIssue.vue";
import ProcessModel from "../components/ProcessModel.vue";
+import TaskControlModal from "@/components/TaskControlModal.vue";
export default {
components: {
+ TaskControlModal,
Card,
Knowledge,
AddControl,
@@ -642,6 +650,7 @@
},
data() {
return {
+ pollingTaskCountTimer: null,
activeName: 1,
progress: 70, //杩涘害
passrate: 30, //鍚堟牸鐜�
@@ -779,6 +788,12 @@
this.getDate2();
}, 5000);
this.getTaskInfo();
+ this.getTaskCountStatistics()
+ },
+ beforeDestroy() {
+ clearTimeout(this.pollingTaskCountTimer)
+ clearTimeout(this.procInfoTimer)
+ clearTimeout(this.ProcessModelTimer)
},
watch:{
// isFinsh(){
@@ -788,6 +803,7 @@
// }
},
methods: {
+
getModelList(){
this.resResult=null
for (let i in this.TasksCopy){
@@ -833,10 +849,17 @@
}, 10000)
}
},
+ mergeProcessParams(params){
+ if (params?.length){
+ return params.map(ele=> `${ele.Key}: ${ele.Value}`).join(' ')
+ }else{
+ return ''
+ }
+ },
taskClick(){
if(this.TaskCount>0){
- this.getStartArr()
- this.$refs.control.islook=true
+ // this.getStartArr()
+ this.$refs.control.show=true
}else{
this.$message({
message:'鐩墠娌℃湁浠诲姟锛�',
@@ -892,6 +915,8 @@
}
});
},
+
+
getDateObj(date, fmt) {
if (/(y+)/.test(fmt)) {
@@ -955,7 +980,7 @@
let String=now-date*1000;
let seconds=Math.floor(String/1000)
let minutes=Math.floor(seconds/60)
-
+
let days=Math.floor(String/1000/60/60/24)
let hours=Math.floor(minutes/60)-days*24
let m=minutes-days*24*60-hours*60
@@ -1006,6 +1031,25 @@
}
},
+ /**
+ * 杞鑾峰彇浠诲姟鏁伴噺
+ */
+ getTaskCountStatistics(){
+ getTaskInfo({taskMode:1}).then((res) => {
+ if (res.code === 200&&res.data) {
+ this.TaskCount=res.data?.TaskCount ?? 0
+ }
+ },err=>{
+ this.TaskCount = 0
+ console.error(err)
+ }).finally(()=>{
+ this.pollingTaskCountTimer = setTimeout(()=>{
+ this.getTaskCountStatistics()
+ // 20绉掍竴娆¤疆璇�
+ },20000)
+ });
+ },
+
getTaskInfo(val) {
this.Tasks = [];
this.TasksCopy=[]
@@ -1018,14 +1062,14 @@
})
}
this.TasksCopy = res.data.Tasks ? res.data.Tasks : [];
- this.safeProduce=res.data.Prompt.safeProduce?res.data.Prompt.safeProduce:''
+ // this.safeProduce=res.data.Prompt.safeProduce?res.data.Prompt.safeProduce:''
this.plcNotConnected=res.data.Prompt.plcNotConnected?res.data.Prompt.plcNotConnected:''
this.ChannelAmount=res.data.ChannelAmount?res.data.ChannelAmount:1
// if(this.ChannelAmount>1 &&this.TasksCopy.length<2){
// this.TasksCopy.push(this.object)
// }
this.TaskCount=res.data.TaskCount?res.data.TaskCount:0
-
+
if ((this.TasksCopy.length ==0 )||!this.TasksCopy) {
if (this.activeName == 1||this.activeName == 3) {
this.TasksCopy.push(this.object);
@@ -1053,7 +1097,7 @@
...this.TasksCopy[i].Procedure.procedure,
},
]);
-
+
if (this.TasksCopy[i].Procedure.ID) {
startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => {
if (res.code == 200) {
@@ -1062,7 +1106,7 @@
this.TasksCopy[i].procedureList[0].push({
number: res.data.Number,
});
- // this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
+ this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
// this.isFinsh=Number(i)+1
}
});
@@ -1192,7 +1236,7 @@
background:#12234a!important;
color:#fff!important;
border-color: #09e5ed !important;
-
+
.popper__arrow::after{
border-top-color:#09e5ed !important;
}
@@ -1241,7 +1285,7 @@
box-sizing: border-box;
border-right: 1px solid #eee;
}
-
+
.small_title {
margin-bottom: 30px;
}
@@ -1297,7 +1341,7 @@
font-size:14px;
}
}
-
+
.el-step{
.el-step__icon{
background:#00cc66;
@@ -1495,8 +1539,7 @@
overflow-y:auto;
}
.el-carousel__item{
- // height:auto;
- min-height:160px;
+ height:auto;
}
}
.bottom-box-btn{
@@ -1504,6 +1547,10 @@
position:absolute;
bottom:10px;
left:10px;
+ .el-button{
+ height: 40px;
+
+ }
}
}
@@ -1511,7 +1558,6 @@
font-size: 20px;
}
.right-small-btn {
- margin-top: 10px;
width: calc(100% - 20px);
margin: 0 auto;
position: absolute;
@@ -1820,7 +1866,7 @@
border-radius: 5px 5px 0 0;
background: rgb(19, 35, 90);
}
-
+
.card_contentRight {
width: 100%;
@@ -1962,7 +2008,7 @@
.right-base-btn {
width: 100%;
position: absolute;
- bottom: 0;
+ bottom: 24px;
left: 0;
.el-button--primary {
width: 100%;
@@ -1972,6 +2018,10 @@
color: #fff;
font-weight: 700;
font-size: 18px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
}
// .call {
@@ -1997,4 +2047,23 @@
font-weight: 700 !important;
font-size: 16px;
}
+.process-params{
+ margin-top: 10px;
+ border-radius: 5px;
+ overflow: hidden;
+ color: #fff;
+ font-size: 12px;
+ &-title{
+ height: 25px;
+ padding: 0 5px;
+ background-color: #13235a;
+ line-height: 25px;
+ }
+ &-value{
+ background-color: #6b83ff;
+ min-height: 45px;
+ box-sizing: border-box;
+ padding: 12px;
+ }
+}
</style>
--
Gitblit v1.8.0