| | |
| | | <template> |
| | | <div class="login-container"> |
| | | <div class="project-name">WIDESEA_WMS</div> |
| | | <div class="login-form"> |
| | | <div class="form-user" @keypress="loginPress"> |
| | | <div class="login-text"> |
| | | <div> |
| | | <div>欢è¿ç»å½...</div> |
| | | <div class="login-line"></div> |
| | | </div> |
| | | <div style="flex:1;"></div> |
| | | </div> |
| | | <div class="login-text-small">WELCOME TO LOGIN</div> |
| | | <div class="item"> |
| | | <div class="input-icon el-icon-user"></div> |
| | | <input type="text" v-focus v-model="userInfo.userName" placeholder="请è¾å
¥è´¦å·" /> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="input-icon el-icon-lock"></div> |
| | | <input type="password" v-focus v-model="userInfo.password" placeholder="请è¾å
¥å¯ç " /> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="input-icon el-icon-mobile"></div> |
| | | |
| | | <input v-focus type="text" v-model="userInfo.verificationCode" placeholder="è¾å
¥éªè¯ç " /> |
| | | <div class="code" @click="getVierificationCode"> |
| | | <img v-show="codeImgSrc != ''" :src="codeImgSrc" /> |
| | | </div> |
| | | </div> |
| | | <div id="vol-container" :class="['vol-theme-' + theme]"> |
| | | <div class="vol-aside" :style="{ width: menuWidth + 'px' }"> |
| | | <div class="header" :style="{ width: menuWidth - 1 + 'px' }"> |
| | | <img v-show="!isCollapse" v-bind:src="logo" /> |
| | | <i |
| | | @click="toggleLeft" |
| | | class="collapse-menu" |
| | | :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" |
| | | /> |
| | | </div> |
| | | <div class="loging-btn"> |
| | | <el-button size="large" :loading="loading" color="#3a6cd1" :dark="true" @click="login" long> |
| | | <span v-if="!loading">ç»å½</span> |
| | | <span v-else>æ£å¨ç»å½...</span> |
| | | </el-button> |
| | | <div class="vol-menu"> |
| | | <el-scrollbar style="height: 100%"> |
| | | <VolMenu |
| | | :currentMenuId="currentMenuId" |
| | | :on-select="onSelect" |
| | | :enable="true" |
| | | :open-select="false" |
| | | :isCollapse="isCollapse" |
| | | :list="menuOptions" |
| | | ></VolMenu> |
| | | </el-scrollbar> |
| | | </div> |
| | | |
| | | <!-- è´¦å·ä¿¡æ¯ --> |
| | | <!-- <div class="account-info"> |
| | | <p>æ¼ç¤ºè´¦å·ï¼admin666 å¯ç :123456</p> |
| | | <p>æ¬å°è´¦å·ï¼admin å¯ç :123456</p> |
| | | <p><a href="https://jq.qq.com/?_wv=1027&k=Sqstuy0M" style="text-decoration: none" |
| | | target="_blank">QQ3群:743852316</a> |
| | | |
| | | <a href="http://v2.volcore.xyz/document/guide" style="text-decoration: none" target="_blank">æ¡æ¶ææ¡£</a> |
| | | </p> |
| | | </div> --> |
| | | <!-- 龿¥ä½ç½® --> |
| | | <!-- <div class="app-link" > |
| | | <a href="#" style="text-decoration: none">ç§»å¨ç«¯æ«ç </a> |
| | | <a> |
| | | <i class="el-icon-chat-dot-round"></i> å°ç¨åº |
| | | <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/wechat.jpg" /></a> |
| | | <a> |
| | | <i class="el-icon-apple"></i> |
| | | Android |
| | | <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/Android.png" /></a> |
| | | <a> |
| | | <i class="el-icon-document"></i> |
| | | H5 |
| | | <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/H5.png" /></a> |
| | | </div> --> |
| | | </div> |
| | | <div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }"> |
| | | <div class="vol-header"> |
| | | <div class="project-name">WMS</div> |
| | | <div class="header-text"> |
| | | <div class="h-link"> |
| | | <a |
| | | href="javascript:void(0)" |
| | | @click="to(item)" |
| | | v-for="(item, index) in links.filter((c) => { |
| | | return !c.icon; |
| | | })" |
| | | :key="index" |
| | | > |
| | | <span v-if="!item.icon">{{ item.text }}</span> |
| | | <i v-else :class="item.icon"></i> |
| | | </a> |
| | | </div> |
| | | </div> |
| | | <div class="header-info"> |
| | | <div class="h-link"> |
| | | <a |
| | | href="javascript:void(0)" |
| | | @click="to(item)" |
| | | v-for="(item, index) in links.filter((c) => { |
| | | return c.icon; |
| | | })" |
| | | :key="index" |
| | | > |
| | | <span v-if="!item.icon">{{ item.text }}</span> |
| | | <i v-else :class="item.icon"></i> |
| | | </a> |
| | | </div> |
| | | <!--æ¶æ¯ç®¡ç--> |
| | | <div class="h-link" @click="messageModel = true"> |
| | | <a> |
| | | <i class="el-icon-message-solid"> |
| | | <el-badge |
| | | :value="messageList.length" |
| | | :type="messageList.length > 0 ? 'danger' : 'success'" |
| | | class="item" |
| | | style="width: 10px" |
| | | ></el-badge> |
| | | </i> |
| | | </a> |
| | | </div> |
| | | <div> |
| | | <img class="user-header" :src="userImg" :onerror="errorImg" /> |
| | | </div> |
| | | <div class="user"> |
| | | <span>{{ userName }}</span> |
| | | <span id="index-date"></span> |
| | | </div> |
| | | <div class="settings"> |
| | | <i style="font-size: 20px" class="el-icon-s-tools" @click="drawer_model = true" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="vol-path"> |
| | | <el-tabs |
| | | @tab-click="selectNav" |
| | | @tab-remove="removeNav" |
| | | @contextmenu.prevent="bindRightClickMenu(false)" |
| | | type="border-card" |
| | | class="header-navigation" |
| | | v-model="selectId" |
| | | :strtch="false" |
| | | > |
| | | <el-tab-pane |
| | | v-for="(item, navIndex) in navigation" |
| | | type="card" |
| | | :name="navIndex + ''" |
| | | :closable="navIndex > 0" |
| | | :key="navIndex" |
| | | :label="item.name" |
| | | > |
| | | <span style="display: none">{{ navIndex }}</span> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <!-- å³é®èå --> |
| | | <div v-show="contextMenuVisible"> |
| | | <ul :style="{ left: menuLeft + 'px', top: menuTop + 'px' }" class="contextMenu"> |
| | | <li v-show="visibleItem.all"> |
| | | <el-button link @click="closeTabs()"> |
| | | <i class="el-icon-close"></i> |
| | | {{ |
| | | navigation.length == 2 ? "å
³éèå" : "å
³éææ" |
| | | }} |
| | | </el-button> |
| | | </li> |
| | | <li v-show="visibleItem.left"> |
| | | <el-button link @click="closeTabs('left')"> |
| | | <i class="el-icon-back"></i>å
³é左边 |
| | | </el-button> |
| | | </li> |
| | | <li v-show="visibleItem.right"> |
| | | <el-button link @click="closeTabs('right')"> |
| | | <i class="el-icon-right"></i>å
³éå³è¾¹ |
| | | </el-button> |
| | | </li> |
| | | <li v-show="visibleItem.other"> |
| | | <el-button link @click="closeTabs('other')"> |
| | | <i class="el-icon-right"></i>å
³éå
¶ä» |
| | | </el-button> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | </div> |
| | | <div class="vol-main" id="vol-main"> |
| | | <el-scrollbar style="height: 100%" v-if="permissionInited"> |
| | | <loading v-show="$store.getters.isLoading()"></loading> |
| | | <router-view v-slot="{ Component }"> |
| | | <keep-alive> |
| | | <component |
| | | :is="Component" |
| | | :key="$route.name" |
| | | v-if=" |
| | | !$route.meta || |
| | | ($route.meta && !$route.meta.hasOwnProperty('keepAlive')) |
| | | " |
| | | /> |
| | | </keep-alive> |
| | | <component |
| | | :is="Component" |
| | | :key="$route.name" |
| | | v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')" |
| | | /> |
| | | </router-view> |
| | | </el-scrollbar> |
| | | </div> |
| | | </div> |
| | | <el-drawer title="鿩䏻é¢" v-model="drawer_model" direction="rtl" destroy-on-close> |
| | | <div class="theme-selector"> |
| | | <div |
| | | @click="changeTheme(item.name)" |
| | | class="item" |
| | | v-for="(item, index) in theme_color" |
| | | :key="index" |
| | | :style="{ background: item.color }" |
| | | > |
| | | <div |
| | | v-show="item.leftColor" |
| | | :style="{ background: item.leftColor }" |
| | | style="height: 100%; width: 20px" |
| | | class="t-left" |
| | | ></div> |
| | | <div class="t-right"></div> |
| | | </div> |
| | | </div> |
| | | </el-drawer> |
| | | |
| | | <!-- 页é¢åºé¨ --> |
| | | <!-- <div class="login-footer"> |
| | | <a style="text-decoration: none" href="https://beian.miit.gov.cn/" target="_blank">京ICPå¤19056538å·-1</a> |
| | | |
| | | |
| | | <a href="https://dotnet9.com/" style="text-decoration: none" target="blank">Dotnet9</a> |
| | | <a href="https://space.bilibili.com/525836469" style="text-decoration: none" target="blank">NETè§é¢æç¨(微软MVP-ACEå½å¶)</a> |
| | | <a href="https://www.cctalk.com/m/group/90268531" style="text-decoration: none" target="blank">VOLæ¡æ¶è§é¢</a> |
| | | <a href="http://120.48.115.252:9990" style="text-decoration: none" target="blank">è§é¢æ¼ç¤ºå°å</a> |
| | | </div> --> |
| | | |
| | | <img class="login-bg" src="/static/login_bg.png" /> |
| | | <el-drawer title="æ¶æ¯å表" v-model="messageModel" direction="rtl" destroy-on-close size="40%"> |
| | | <Message :list="messageList"></Message> |
| | | </el-drawer> |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | <script > |
| | | <style lang="less" scoped> |
| | | @import "./index/index.less"; |
| | | </style> |
| | | <script> |
| | | import loading from "@/components/basic/RouterLoading"; |
| | | import VolMenu from "@/components/basic/VolElementMenu.vue"; |
| | | import Message from "./index/Message.vue"; |
| | | import MessageConfig from "./index/MessageConfig.js"; |
| | | var imgUrl = require("@/assets/imgs/wms_x.png"); |
| | | var $this; |
| | | var $interval; |
| | | var $indexDate; |
| | | import { |
| | | defineComponent, |
| | | ref, |
| | | reactive, |
| | | toRefs, |
| | | getCurrentInstance |
| | | } from 'vue'; |
| | | import { useRouter, useRoute } from 'vue-router'; |
| | | import store from '../store/index'; |
| | | import http from '@/../src/api/http.js'; |
| | | ref, |
| | | watch, |
| | | onMounted, |
| | | getCurrentInstance, |
| | | h |
| | | } from "vue"; |
| | | import { useRouter, useRoute } from "vue-router"; |
| | | import store from "../store/index"; |
| | | import http from "@/../src/api/http.js"; |
| | | import { ElNotification } from "element-plus"; |
| | | import { useStore } from "vuex"; |
| | | |
| | | export default defineComponent({ |
| | | setup(props, context) { |
| | | store.commit('clearUserInfo', ''); |
| | | const loading = ref(false); |
| | | const codeImgSrc = ref(''); |
| | | const userInfo = reactive({ |
| | | userName: '', |
| | | password: '', |
| | | verificationCode: '', |
| | | UUID: undefined |
| | | }); |
| | | components: { |
| | | VolMenu, |
| | | loading, |
| | | Message |
| | | }, |
| | | |
| | | const getVierificationCode = () => { |
| | | http.get('/api/User/getVierificationCode').then((x) => { |
| | | codeImgSrc.value = 'data:image/png;base64,' + x.img; |
| | | userInfo.UUID = x.uuid; |
| | | }); |
| | | }; |
| | | getVierificationCode(); |
| | | |
| | | let appContext = getCurrentInstance().appContext; |
| | | let $message = appContext.config.globalProperties.$message; |
| | | let router = useRouter(); |
| | | |
| | | const login = () => { |
| | | if (!userInfo.userName) return $message.error('请è¾å
¥ç¨æ·å'); |
| | | if (!userInfo.password) return $message.error('请è¾å
¥å¯ç '); |
| | | if (!userInfo.verificationCode) { |
| | | return $message.error('请è¾å
¥éªè¯ç '); |
| | | } |
| | | loading.value = true; |
| | | http.post('/api/User/login', userInfo, 'æ£å¨ç»å½....').then((result) => { |
| | | if (!result.status) { |
| | | loading.value = false; |
| | | getVierificationCode(); |
| | | return $message.error(result.message); |
| | | } |
| | | $message.success('ç»å½æå,æ£å¨è·³è½¬!'); |
| | | store.commit('setUserInfo', result.data); |
| | | router.push({ path: '/' }); |
| | | }); |
| | | }; |
| | | const loginPress = (e) => { |
| | | if (e.keyCode == 13) { |
| | | login(); |
| | | } |
| | | }; |
| | | const openUrl = (url) => { |
| | | window.open(url, '_blank'); |
| | | }; |
| | | data() { |
| | | return { |
| | | loading, |
| | | codeImgSrc, |
| | | getVierificationCode, |
| | | login, |
| | | userInfo, |
| | | loginPress, |
| | | openUrl |
| | | allTabs: true, |
| | | leftTabs: true, |
| | | rightTabs: true, |
| | | otherTabs: true, |
| | | menuLeft: 0, |
| | | menuTop: 0 |
| | | }; |
| | | }, |
| | | directives: { |
| | | focus: { |
| | | inserted: function (el) { |
| | | el.focus(); |
| | | setup(props, context) { |
| | | let client = ref(null); |
| | | // èæµç¸å
³åéï¼å»¶è¿æ¶é´å»ºè®®300-500msï¼æ ¹æ®å端æ¨éé¢çè°æ´ï¼ |
| | | const THROTTLE_DELAY = 300; // å»¶è¿æ´æ°æ¶é´ï¼æ¯«ç§ï¼ |
| | | let lastUpdateTime = ref(0); // ä¸ä¸æ¬¡æ´æ°æ¶é´ |
| | | let latestWsData = ref(null); // ç¼åææ°çWebSocketæ°æ® |
| | | let throttleTimer = ref(null); // èæµå®æ¶å¨ |
| | | |
| | | // è·åå
¨å±å±æ§åæ¹æ³ |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | // èå导èªé»è®¤å®½åº¦ |
| | | const menuWidth = ref(200); |
| | | const contextMenuVisible = ref(false); |
| | | const isCollapse = ref(false); |
| | | const drawer_model = ref(false); |
| | | const messageModel = ref(false); |
| | | const theme_color = ref([ |
| | | { name: "blue", color: "rgb(45, 140, 240)" }, |
| | | { name: "blue2", color: "rgb(45, 140, 240)", leftColor: "#0068d6" }, |
| | | { name: "red", color: "rgb(237, 64, 20)" }, |
| | | { name: "red2", color: "rgb(237, 64, 20)", leftColor: "#a90000" }, |
| | | { name: "dark", color: "#272929" }, |
| | | { name: "orange", color: "#ff9900" }, |
| | | { name: "orange2", color: "#ff9900", leftColor: "rgb(232 141 5)" }, |
| | | { name: "green", color: "rgb(25, 190, 107)" }, |
| | | { name: "green2", color: "rgb(25, 190, 107)", leftColor: "#019e4f" }, |
| | | { name: "white", color: "#fff" } |
| | | ]); |
| | | const links = ref([ |
| | | { text: "个人ä¸å¿", path: "/UserInfo", id: -1, icon: "el-icon-s-custom" }, |
| | | { |
| | | text: "å®å
¨éåº", |
| | | path: "/login", |
| | | id: -4, |
| | | icon: "el-icon-switch-button" |
| | | } |
| | | ]); |
| | | const errorImg = ref( |
| | | 'this.src="' + require("@/assets/imgs/error-img.png") + '"' |
| | | ); |
| | | const selectId = ref("1"); |
| | | // ãé¦é¡µãæ ç¾åºå·(å½åå³é®éä¸çèå) |
| | | const selectMenuIndex = ref("0"); |
| | | //2022.05.29å¢å tabé项ä¸èåèå¨åè½ |
| | | const currentMenuId = ref(0); |
| | | const userName = ref("--"); |
| | | const userTrueName = ref("--"); |
| | | const userInfo = ref({}); |
| | | const visibleItem = reactive({ |
| | | left: false, |
| | | right: false, |
| | | all: false, |
| | | other: false |
| | | }); |
| | | const userImg = ref(""); |
| | | const navigation = reactive([ |
| | | { orderNo: "0", id: "1", name: "é¦é¡µ", path: "/home" } |
| | | ]); |
| | | const logo = ref(imgUrl); |
| | | const theme = ref("blue2"); |
| | | const menuOptions = ref([]); |
| | | const permissionInited = ref(false); |
| | | const messageList = reactive([]); |
| | | let _config = getCurrentInstance().appContext.config.globalProperties; |
| | | let router = useRouter(); |
| | | const toggleLeft = () => { |
| | | isCollapse.value = !isCollapse.value; |
| | | menuWidth.value = isCollapse.value ? 63 : 200; |
| | | }; |
| | | //2021.08.28弿¾æå¨æå èåæ¹æ³ |
| | | _config.menu = { |
| | | show() { |
| | | toggleLeft(); |
| | | }, |
| | | hide() { |
| | | toggleLeft(); |
| | | } |
| | | }; |
| | | const Store = useStore(); |
| | | const s = ref(null); |
| | | |
| | | // èæµå¤çWebSocketæ°æ®ï¼æ ¸å¿é»è¾ï¼ |
| | | const handleThrottledWsData = (rawData) => { |
| | | // ç¼åææ°æ°æ®ï¼ç¡®ä¿æç»æ´æ°ç¨çæ¯ææ°å¼ï¼ |
| | | latestWsData.value = rawData; |
| | | const now = Date.now(); |
| | | |
| | | // æ
åµ1ï¼è·ç¦»ä¸æ¬¡æ´æ°è¶
è¿å»¶è¿æ¶é´ï¼ç´æ¥å¤ç |
| | | if (now - lastUpdateTime.value >= THROTTLE_DELAY) { |
| | | processAndUpdateData(); |
| | | lastUpdateTime.value = now; |
| | | } |
| | | // æ
åµ2ï¼æªè¶
è¿å»¶è¿æ¶é´ï¼ç¨å®æ¶å¨å»¶è¿å¤çï¼é¿å
éå¤è§¦åï¼ |
| | | else { |
| | | if (throttleTimer.value) clearTimeout(throttleTimer.value); |
| | | throttleTimer.value = setTimeout(() => { |
| | | processAndUpdateData(); |
| | | lastUpdateTime.value = Date.now(); |
| | | }, THROTTLE_DELAY); |
| | | } |
| | | }; |
| | | |
| | | // ç»ä¸å¤çå¹¶æ´æ°æ°æ®ï¼é¿å
éå¤ä»£ç ï¼ |
| | | const processAndUpdateData = () => { |
| | | if (!latestWsData.value) return; |
| | | try { |
| | | // è§£æWebSocketæ°æ® |
| | | const parsedData = typeof latestWsData.value === 'string' |
| | | ? JSON.parse(latestWsData.value) |
| | | : latestWsData.value; |
| | | |
| | | // 1. æ´æ°Vuexä¸çhomedata |
| | | store.dispatch("sethomedata", parsedData); |
| | | |
| | | // 2. å¤çæ¶æ¯å表 |
| | | if (parsedData.title && parsedData.message) { |
| | | messageList.push(parsedData); |
| | | // æ¾ç¤ºéç¥ |
| | | ElNotification({ |
| | | title: parsedData.title, |
| | | message: h("i", { style: "color: teal" }, parsedData.message), |
| | | position: "bottom-right" |
| | | }); |
| | | } |
| | | } catch (err) { |
| | | console.error("WebSocketæ°æ®å¤ç失败ï¼", err); |
| | | } |
| | | }; |
| | | |
| | | // WebSocketè¿æ¥é»è¾ï¼ä½¿ç¨èæµå¤çæ°æ®ï¼ |
| | | const createSocket = url => { |
| | | // å
³éå·²æè¿æ¥ï¼é¿å
éå¤è¿æ¥ï¼ |
| | | if (client.value) { |
| | | client.value.close(); |
| | | } |
| | | |
| | | // å建WebSocketè¿æ¥ |
| | | client.value = new WebSocket("ws:localhost:9260/"); |
| | | |
| | | client.value.onopen = function() { |
| | | console.log("WebSocket è¿æ¥æå"); |
| | | }; |
| | | |
| | | // æ¶å°æ¶æ¯å交ç»èæµå½æ°å¤ç |
| | | client.value.onmessage = function(event) { |
| | | if (event && event.data) { |
| | | handleThrottledWsData(event.data); |
| | | } |
| | | }; |
| | | |
| | | client.value.onclose = function() { |
| | | console.log("WebSocket è¿æ¥å
³é"); |
| | | // éè¿é»è¾ |
| | | setTimeout(() => createSocket(url), 5000); |
| | | }; |
| | | |
| | | client.value.onerror = function(err) { |
| | | console.log("WebSocket è¿æ¥é误: ", err); |
| | | // é误åéè¿ |
| | | setTimeout(() => createSocket(url), 5000); |
| | | }; |
| | | }; |
| | | |
| | | const changeTheme = name => { |
| | | if (theme.value != name) { |
| | | theme.value = name; |
| | | } |
| | | localStorage.setItem("vol3_theme", name); |
| | | }; |
| | | const to = item => { |
| | | if (item.path == "#") { |
| | | window.open("https://github.com/cq-panda/Vue.NetCore"); |
| | | return; |
| | | } |
| | | if (item.path.indexOf("http") != -1) { |
| | | window.open(item.path); |
| | | return; |
| | | } |
| | | if (typeof item == "string" || item.path == "/login") { |
| | | if (item == "/login" || item.path == "/login") { |
| | | store.commit("clearUserInfo", ""); |
| | | window.location.href = "/"; |
| | | return; |
| | | } |
| | | router.push({ path: item }); |
| | | return; |
| | | } |
| | | if (item.path == "#") return; |
| | | open(item); |
| | | }; |
| | | const open = (item, useRoute) => { |
| | | let _index = navigation.findIndex(x => { |
| | | return x.path == item.path; |
| | | }); |
| | | if (_index == -1) { |
| | | navigation.push({ |
| | | id: item.id + "", |
| | | name: item.name || item.text || "æ æ é¢", |
| | | path: item.path, |
| | | query: item.query |
| | | }); |
| | | selectId.value = navigation.length - 1 + ""; |
| | | } else { |
| | | selectId.value = _index + ""; |
| | | } |
| | | if (useRoute === undefined) { |
| | | setItem(item); |
| | | router.push(item); |
| | | } |
| | | currentMenuId.value = item.id * 1; |
| | | // tabèåç»å®å³é®äºä»¶ |
| | | proxy.$nextTick(function(e) { |
| | | proxy.bindRightClickMenu(true); |
| | | }); |
| | | }; |
| | | const close = path => { |
| | | let index = navigation.findIndex(x => { |
| | | return x.path == path; |
| | | }); |
| | | if (index == -1) { |
| | | return _config.$Message.error("æªæ¾å°èå"); |
| | | } |
| | | removeNav(index); |
| | | }; |
| | | const setItem = item => { |
| | | localStorage.setItem( |
| | | window.location.origin + "_tabs", |
| | | JSON.stringify(item) |
| | | ); |
| | | }; |
| | | const getItem = () => { |
| | | let nav = localStorage.getItem(window.location.origin + "_tabs"); |
| | | return nav ? JSON.parse(nav) : null; |
| | | }; |
| | | const selectNav = item => { |
| | | selectId.value = item.props.name; |
| | | let _path = navigation[item.index].path; |
| | | currentMenuId.value = ( |
| | | menuOptions.value.find(c => { |
| | | return c.path == _path; |
| | | }) || { id: 0 } |
| | | ).id; |
| | | |
| | | router.push({ |
| | | path: navigation[item.index].path, |
| | | query: navigation[item.index].query |
| | | }); |
| | | }; |
| | | |
| | | const removeNav = _index => { |
| | | return new Promise(() => { |
| | | //å
³éçå½å项,跳转å°åä¸ä¸ªé¡µé¢ |
| | | if (selectId.value == _index + "") { |
| | | setItem(navigation[_index - 1]); |
| | | router.push({ |
| | | path: navigation[_index - 1].path, |
| | | query: navigation[_index - 1].query |
| | | }); |
| | | navigation.splice(_index, 1); |
| | | selectId.value = selectId.value - 1 + ""; |
| | | return; |
| | | } |
| | | if (_index < selectId.value) { |
| | | selectId.value = selectId.value - 1 + ""; |
| | | } |
| | | navigation.splice(_index, 1); |
| | | currentMenuId.value = ( |
| | | menuOptions.value.find(c => { |
| | | return c.path == navigation[selectId.value * 1].path; |
| | | }) || { id: 0 } |
| | | ).id; |
| | | }); |
| | | }; |
| | | |
| | | const getSelectMenuName = id => { |
| | | return menuOptions.value.find(function(x) { |
| | | return x.id == id; |
| | | }); |
| | | }; |
| | | const onSelect = treeId => { |
| | | var item = getSelectMenuName(treeId); |
| | | open(item, false); |
| | | }; |
| | | |
| | | /** |
| | | * æ¾ç¤ºå³é®èå |
| | | */ |
| | | const openTabsMenu = function(e) { |
| | | e.preventDefault(); |
| | | let tabId = e.target.id.split("-")[1] * 1; |
| | | |
| | | //è®°å½å½åéä¸çèåindex |
| | | selectMenuIndex.value = |
| | | document.getElementById("pane-" + tabId).children[0].textContent * 1; |
| | | //åªæé¦é¡µæ¶ä¸æ¾ç¤º |
| | | if (navigation.length == 1) { |
| | | return; |
| | | } |
| | | |
| | | //é¦é¡µè®¾ç½®æ¾ç¤ºå
³éå³è¾¹èå |
| | | if (!selectMenuIndex.value) { |
| | | visibleItem.all = false; |
| | | visibleItem.right = true; |
| | | visibleItem.left = false; |
| | | visibleItem.other = false; |
| | | } else { |
| | | visibleItem.all = true; |
| | | //䏿¯æåä¸ä¸ªæ¾ç¤ºå
³éå³è¾¹èå |
| | | visibleItem.right = selectMenuIndex.value != navigation.length - 1; |
| | | //åªæä¸¤ä¸ªè忶䏿¾ç¤ºå
³é左边 |
| | | visibleItem.left = navigation.length != 2; |
| | | //åªæä¸¤ä¸ªè忶䏿¾ç¤ºå
³éå
¶ä» |
| | | visibleItem.other = navigation.length != 2; |
| | | } |
| | | contextMenuVisible.value = true; |
| | | // 设置å³é®èåæ¾ç¤ºçä½ç½® |
| | | proxy.menuLeft = |
| | | e.target.getBoundingClientRect().left - (isCollapse.value ? 63 : 198); |
| | | proxy.menuTop = 36; |
| | | }; |
| | | |
| | | /** |
| | | * å
³éå³é®èå |
| | | */ |
| | | const closeTabsMenu = () => { |
| | | contextMenuVisible.value = false; |
| | | }; |
| | | const toHome = () => { |
| | | open({ |
| | | text: navigation[0].name, |
| | | path: navigation[0].path |
| | | }); |
| | | }; |
| | | /** |
| | | * å
³éå
¶å®æ ç¾é¡µ |
| | | */ |
| | | const closeTabs = value => { |
| | | let _menuId = navigation[selectId.value * 1].id; |
| | | let currnetIndex = selectId.value * 1; |
| | | switch (value) { |
| | | case "left": { |
| | | // å é¤å·¦ä¾§tabæ ç¾ |
| | | navigation.splice(1, currnetIndex - 1); |
| | | break; |
| | | } |
| | | case "right": { |
| | | // å é¤å³ä¾§tabæ ç¾ |
| | | if (selectMenuIndex.value == 0) { |
| | | navigation.splice(currnetIndex); |
| | | toHome(); |
| | | } else { |
| | | navigation.splice(currnetIndex + 1); |
| | | if (selectMenuIndex.value < currnetIndex) { |
| | | navigation.splice( |
| | | selectMenuIndex.value, |
| | | currnetIndex - selectMenuIndex.value |
| | | ); |
| | | } |
| | | } |
| | | break; |
| | | } |
| | | case "other": { |
| | | // å é¤å
¶ä»æætabæ ç¾ |
| | | navigation.splice(currnetIndex + 1); |
| | | navigation.splice(1, currnetIndex - 1); |
| | | break; |
| | | } |
| | | default: { |
| | | //å
³éææ |
| | | navigation.splice(1, navigation.length); |
| | | toHome(); |
| | | break; |
| | | } |
| | | } |
| | | selectId.value = |
| | | navigation.findIndex(c => { |
| | | return c.id == _menuId; |
| | | }) + ""; |
| | | closeTabsMenu(); |
| | | }; |
| | | |
| | | watch( |
| | | () => contextMenuVisible.value, |
| | | (newVal, oldVal) => { |
| | | if (newVal) { |
| | | document.body.addEventListener("click", closeTabsMenu); |
| | | } else { |
| | | document.body.removeEventListener("click", closeTabsMenu); |
| | | } |
| | | } |
| | | ); |
| | | |
| | | /** |
| | | * ç³»ç»å建å¼å§ |
| | | */ |
| | | const created = () => { |
| | | let _theme = localStorage.getItem("vol3_theme"); |
| | | if (_theme) { |
| | | theme.value = _theme; |
| | | } |
| | | |
| | | let _userInfo = store.getters.getUserInfo(); |
| | | if (_userInfo) { |
| | | userName.value = _userInfo.userName; |
| | | userTrueName.value = _userInfo.userTrueName; |
| | | if (_userInfo.img) { |
| | | userImg.value = _config.base.getImgSrc(_userInfo.img, http.ipAddress); |
| | | } |
| | | } |
| | | |
| | | createSocket(window.webConfig.webSocketUrl); |
| | | |
| | | Object.assign(_config.$tabs, { open: open, close: close }); |
| | | |
| | | http.get("api/Sys_Menu/getTreeMenu", {}, true).then(data => { |
| | | data.push({ id: "1", name: "é¦é¡µ", url: "/home" }); |
| | | data.forEach(d => { |
| | | d.path = (d.url || "").replace("/Manager", ""); |
| | | d.to = (d.url || "").replace("/Manager", ""); |
| | | if (!d.icon || d.icon.substring(0, 3) != "el-") { |
| | | d.icon = "el-icon-menu"; |
| | | } |
| | | }); |
| | | |
| | | store.dispatch("setPermission", data); |
| | | menuOptions.value = data; |
| | | permissionInited.value = true; |
| | | |
| | | //å¼å¯æ¶æ¯æ¨é |
| | | if (_config.$global.signalR) { |
| | | MessageConfig(http, result => { |
| | | messageList.unshift(result); |
| | | }); |
| | | } |
| | | |
| | | //å½åå·æ°æ¯ä¸æ¯é¦é¡µ |
| | | if (router.currentRoute.value.path != navigation[0].path) { |
| | | //æ¥æ¾ç³»ç»èå |
| | | let item = menuOptions.value.find(x => { |
| | | return x.path == router.currentRoute.value.path; |
| | | }); |
| | | if (item) return onSelect(item.id); |
| | | //æ¥æ¾é¡¶é¨å¿«æ·è¿æ¥ |
| | | item = links.value.find(x => { |
| | | return x.path == router.currentRoute.value.path; |
| | | }); |
| | | //æ¥æ¾æå䏿¬¡è·³è½¬çé¡µé¢ |
| | | if (!item) { |
| | | item = getItem(); |
| | | } |
| | | if (item) { |
| | | return open(item, false); |
| | | } |
| | | } |
| | | selectId.value = "1"; |
| | | }); |
| | | }; |
| | | created(); |
| | | return { |
| | | menuWidth, |
| | | isCollapse, |
| | | drawer_model, |
| | | theme_color, |
| | | errorImg, |
| | | userInfo, |
| | | userName, |
| | | userTrueName, |
| | | userImg, |
| | | selectId, |
| | | selectMenuIndex, |
| | | navigation, |
| | | links, |
| | | onSelect, |
| | | openTabsMenu, |
| | | selectNav, |
| | | getSelectMenuName, |
| | | removeNav, |
| | | logo, |
| | | theme, |
| | | menuOptions, |
| | | permissionInited, |
| | | changeTheme, |
| | | to, |
| | | toggleLeft, |
| | | messageModel, |
| | | messageList, |
| | | contextMenuVisible, |
| | | visibleItem, |
| | | closeTabsMenu, |
| | | closeTabs, |
| | | currentMenuId |
| | | }; |
| | | }, |
| | | /** |
| | | * æè½½é©å彿° |
| | | */ |
| | | mounted() { |
| | | let _date = showTime(); |
| | | $indexDate = document.getElementById("index-date"); |
| | | $indexDate.innerText = _date; |
| | | $interval = setInterval(function() { |
| | | $indexDate.innerText = showTime(); |
| | | }, 1000); |
| | | |
| | | this.bindRightClickMenu(true); |
| | | }, |
| | | |
| | | methods: { |
| | | /** |
| | | * ç»å®å³é®äºä»¶ |
| | | */ |
| | | bindRightClickMenu(enable) { |
| | | if (!enable) return; |
| | | let that = this; |
| | | // 使ç¨åçjs 为å个domç»å®é¼ æ å³å»äºä»¶ |
| | | that.$nextTick(() => { |
| | | let tab_top_dom = Object.assign( |
| | | [], |
| | | document.getElementsByClassName("el-tabs__item is-top") |
| | | ); |
| | | tab_top_dom.forEach((item, index) => { |
| | | item.oncontextmenu = that.openTabsMenu; |
| | | }); |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 鿝é©å彿° |
| | | */ |
| | | destroyed() { |
| | | $this = null; |
| | | clearInterval($interval); |
| | | // å
³éWebSocketè¿æ¥ |
| | | if (client && client.value) { |
| | | client.value.close(); |
| | | } |
| | | } |
| | | }); |
| | | const week = new Array( |
| | | "ææä¸", |
| | | "ææäº", |
| | | "ææä¸", |
| | | "ææå", |
| | | "ææäº", |
| | | "ææå
", |
| | | "æææ¥" |
| | | ); |
| | | function showTime() { |
| | | let date = new Date(); |
| | | let year = date.getFullYear(); |
| | | let month = date.getMonth() + 1; |
| | | let day = date.getDate(); |
| | | let hour = date.getHours(); |
| | | let minutes = date.getMinutes(); |
| | | let second = date.getSeconds(); |
| | | |
| | | return ( |
| | | year + |
| | | "." + |
| | | (month < 10 ? "0" + month : month) + |
| | | "." + |
| | | (day < 10 ? "0" + day : day) + |
| | | "" + |
| | | " " + |
| | | (hour < 10 ? "0" + hour : hour) + |
| | | ":" + |
| | | (minutes < 10 ? "0" + minutes : minutes) + |
| | | ":" + |
| | | (second < 10 ? "0" + second : second) + |
| | | " " + |
| | | (week[date.getDay() - 1] || week[6]) |
| | | ); |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .login-container { |
| | | display: flex; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: rgb(246, 247, 252); |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | .vol-container .vol-path ::v-deep(.el-tabs__content) { |
| | | padding: 0; |
| | | } |
| | | |
| | | .login-form { |
| | | align-items: center; |
| | | width: 50%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | // margin-right: 150px; |
| | | z-index: 999; |
| | | |
| | | .form-user { |
| | | // margin: 25px 0; |
| | | |
| | | .item { |
| | | border-radius: 5px; |
| | | border: 1px solid #ececec; |
| | | display: flex; |
| | | margin-bottom: 30px; |
| | | background: #ffff; |
| | | height: 45px; |
| | | padding-left: 20px; |
| | | display: flex; |
| | | |
| | | .code { |
| | | position: relative; |
| | | cursor: pointer; |
| | | width: 74px; |
| | | padding: 5px 10px 0 0; |
| | | } |
| | | |
| | | .input-icon { |
| | | line-height: 45px; |
| | | color: #7a7a7a; |
| | | padding-right: 20px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | input:-webkit-autofill { |
| | | box-shadow: 0 0 0px 1000px white inset; |
| | | -webkit-box-shadow: 0 0 0px 1000px white inset !important; |
| | | } |
| | | |
| | | input { |
| | | background: white; |
| | | display: block; |
| | | box-sizing: border-box; |
| | | width: 100%; |
| | | min-width: 0; |
| | | margin: 0; |
| | | padding: 0; |
| | | color: #323233; |
| | | line-height: inherit; |
| | | text-align: left; |
| | | border: 0; |
| | | outline: none; |
| | | font-size: 16px; |
| | | line-height: 20px; |
| | | } |
| | | .item { |
| | | margin-top: -20px; |
| | | margin-right: 40px; |
| | | } |
| | | |
| | | .form-user, |
| | | .loging-btn { |
| | | width: 400px; |
| | | } |
| | | |
| | | .loging-btn { |
| | | box-shadow: 2px 4px 11px #a4c2ff; |
| | | margin-top: 10px; |
| | | |
| | | .contextMenu { |
| | | width: 120px; |
| | | margin: 0; |
| | | border: 1px solid #eaeaea; |
| | | background: #fff; |
| | | z-index: 30000; |
| | | position: absolute; |
| | | list-style-type: none; |
| | | padding: 5px 0; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | color: #333; |
| | | box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%); |
| | | i, |
| | | button { |
| | | padding: 21px; |
| | | font-size: 14px !important; |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | .login-text { |
| | | font-weight: bolder; |
| | | font-size: 20px; |
| | | letter-spacing: 2px; |
| | | |
| | | position: relative; |
| | | display: flex; |
| | | |
| | | .login-line { |
| | | z-index: -1; |
| | | padding: 5px; |
| | | position: relative; |
| | | top: -8px; |
| | | width: 100%; |
| | | background-image: linear-gradient(to right, #6598ff, white); |
| | | } |
| | | .contextMenu li { |
| | | margin: 0; |
| | | padding: 5px 17px; |
| | | } |
| | | |
| | | .login-text-small { |
| | | margin-bottom: 20px; |
| | | font-size: 13px; |
| | | color: #7d7c7c; |
| | | .contextMenu li:hover { |
| | | background: #fafafa; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .login-bg { |
| | | left: 0; |
| | | position: absolute; |
| | | height: 100%; |
| | | width: 50%; |
| | | z-index: 0; |
| | | .contextMenu li button { |
| | | color: #626060; |
| | | font-size: 14px; |
| | | letter-spacing: 1px; |
| | | } |
| | | |
| | | .project-name { |
| | | position: absolute; |
| | | top: 40px; |
| | | left: 40px; |
| | | z-index: 9999; |
| | | font-weight: bolder; |
| | | background-image: linear-gradient(to right, #1850c1, #9c009c); |
| | | -webkit-background-clip: text; |
| | | color: transparent; |
| | | font-size: 25px; |
| | | .el-tabs.el-tabs--top.el-tabs--border-card.header-navigation |
| | | > .el-tabs__header |
| | | .el-tabs__item:last-child, |
| | | .el-tabs--top.el-tabs--border-card.header-navigation |
| | | > .el-tabs__header |
| | | .el-tabs__item:nth-child(2) { |
| | | padding: 0; |
| | | } |
| | | |
| | | .header-navigation ::v-deep(.el-tabs__item.is-top) { |
| | | padding: 0 15px; |
| | | } |
| | | </style> |
| | | <style lang="less" scoped> |
| | | .app-link { |
| | | // font-weight: bolder; |
| | | text-align: center; |
| | | padding-top: 5px; |
| | | font-size: 12px; |
| | | width: 400px; |
| | | padding-left: 40px; |
| | | display: flex; |
| | | |
| | | a { |
| | | flex: 1; |
| | | position: relative; |
| | | cursor: pointer; |
| | | width: 70px; |
| | | color: #666666; |
| | | margin: 2px 10px 0 0; |
| | | } |
| | | |
| | | img { |
| | | display: none; |
| | | } |
| | | |
| | | a:hover { |
| | | color: #0545f6 !important; |
| | | |
| | | img { |
| | | display: block; |
| | | position: absolute; |
| | | z-index: 999999999; |
| | | top: -130px; |
| | | width: 120px; |
| | | left: -22px; |
| | | |
| | | border: 1px solid #b1b1b1; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .login-footer { |
| | | position: absolute; |
| | | width: 50%; |
| | | bottom: 0.5rem; |
| | | font-size: 12px; |
| | | text-align: center; |
| | | padding-bottom: 10px; |
| | | color: #4f4f4f; |
| | | |
| | | a { |
| | | margin-right: 10px; |
| | | font-size: 12px; |
| | | color: #4f4f4f; |
| | | } |
| | | |
| | | div { |
| | | margin-bottom: 5px; |
| | | } |
| | | |
| | | a:hover { |
| | | cursor: pointer; |
| | | color: #0540e3 !important; |
| | | } |
| | | } |
| | | |
| | | .account-info { |
| | | font-size: 12px; |
| | | color: #636363; |
| | | margin-top: 15px; |
| | | <style> |
| | | .horizontal-collapse-transition { |
| | | transition: 0s width ease-in-out, 0s padding-left ease-in-out, |
| | | 0s padding-right ease-in-out; |
| | | } |
| | | </style> |
| | | |
| | | <style lang="less" scoped> |
| | | @media screen and (max-width: 700px) { |
| | | |
| | | .login-bg, |
| | | .account-info, |
| | | .app-link, |
| | | .login-footer, |
| | | .project-name { |
| | | display: none; |
| | | } |
| | | |
| | | .login-container { |
| | | padding: 2rem; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .login-form { |
| | | width: 100%; |
| | | } |
| | | |
| | | .form-user, |
| | | .loging-btn { |
| | | width: 100%; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div id="title"> |
| | | <div id="bkuang" style="border-top: none"> |
| | | |
| | | <div class="skuang"> |
| | | <div class="zhuname">å
¥åº8005ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§å®æ(å):</div> |
| | | <div class="xzhi" :title="data.W_PutFinish5">{{ data.W_PutFinish5 }}</div> |
| | | <div class="xzhi" :title="flData.W_PutFinish5">{{ flData.W_PutFinish5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å
¥åºå°ä½æä»¤(读):</div> |
| | | <div class="xzhi" :title="data.R_ConveyArrivaled5">{{ data.R_ConveyArrivaled5 }}</div> |
| | | <div class="xzhi" :title="flData.R_ConveyArrivaled5">{{ flData.R_ConveyArrivaled5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å°ä½æçå·(读):</div> |
| | | <div class="xzhi" :title="data.R_Barcode5">{{ data.R_Barcode5 }}</div> |
| | | <div class="xzhi" :title="flData.R_Barcode5">{{ flData.R_Barcode5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å°ä½ä»»å¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_TaskNum5">{{ data.R_TaskNum5 }}</div> |
| | | <div class="xzhi" :title="flData.R_TaskNum5">{{ flData.R_TaskNum5 || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | <div class="zhuname">åºåº8001ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§å®æ(å):</div> |
| | | <div class="xzhi" :title="data.W_PutFinish1">{{ data.W_PutFinish1 }}</div> |
| | | <div class="xzhi" :title="flData.W_PutFinish1">{{ flData.W_PutFinish1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦å
许æ¾è´§(读):</div> |
| | | <div class="xzhi" :title="data.R_IsCanPut">{{ data.R_IsCanPut }}</div> |
| | | <div class="xzhi" :title="flData.R_IsCanPut">{{ flData.R_IsCanPut || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { ref, nextTick } from "vue"; |
| | | import { ref, nextTick, watch, onUnmounted } from "vue"; |
| | | import { useStore } from "vuex"; |
| | | import { onMounted } from "vue"; |
| | | |
| | |
| | | xuan: 0 |
| | | }; |
| | | }, |
| | | methods: { |
| | | }, |
| | | setup() { |
| | | const store = useStore(); |
| | | const data = ref({}); |
| | | // ä»
åå¨FLç¸å
³æ°æ® |
| | | const flData = ref({}); |
| | | |
| | | // 1. å®ä¹æ®éåæ®µçæ å°è§å |
| | | const statusMap = { |
| | | |
| | | // å»¶è¿æ´æ°é
ç½®ï¼è§£å³éªçé®é¢ |
| | | const UPDATE_DELAY = 300; // 300mså»¶è¿ï¼å¹³è¡¡å®æ¶æ§åçé¢ç¨³å®æ§ |
| | | let updateTimer = null; // 宿¶å¨å®ä¾ |
| | | |
| | | // FLæ°æ®æ å°è§åé
ç½® |
| | | const flStatusConfig = { |
| | | // FL booleanç±»ååæ®µæ å° |
| | | booleanFields: { |
| | | keys: [ |
| | | "W_PutFinish5", "W_PutFinish1", |
| | | "R_IsCanPut", "R_ConveyArrivaled5" |
| | | ], |
| | | map: { true: "æ¯", false: "å¦" } |
| | | } |
| | | }; |
| | | |
| | | // 2. å®ä¹éè¦å
±ç¨æ å°è§åçåæ®µå表å对åºçæ å°è§å |
| | | const booleanFields = [ |
| | | "W_PutFinish5", "W_PutFinish1", |
| | | "R_IsCanPut", "R_ConveyArrivaled5", |
| | | ]; |
| | | const booleanMap = { |
| | | true: "æ¯", |
| | | false: "å¦" |
| | | }; |
| | | |
| | | // å¤çæ°æ®ï¼å
å¤çæ®éæ å°ï¼åæ¹éå¤çå
±ç¨æ å°çåæ®µ |
| | | const processData = (rawData) => { |
| | | // å¤çFLåå§æ°æ® |
| | | const processFLData = (rawData) => { |
| | | if (!rawData) return {}; |
| | | const processed = { ...rawData }; |
| | | |
| | | // å¤çæ®éåæ®µæ å° |
| | | Object.keys(statusMap).forEach(key => { |
| | | // å¤çbooleanç±»ååæ®µ |
| | | flStatusConfig.booleanFields.keys.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | const map = statusMap[key]; |
| | | processed[key] = map[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | |
| | | // æ¹éå¤çå
±ç¨æ å°è§åçåæ®µ |
| | | booleanFields.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = booleanMap[processed[key]] || processed[key]; |
| | | processed[key] = flStatusConfig.booleanFields.map[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | |
| | | return processed; |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | nextTick(() => { |
| | | setInterval(() => { |
| | | const rawData = store.state.homedata; |
| | | data.value = processData(rawData); |
| | | const xian = document.getElementsByClassName("xzhi"); |
| | | for (let i = 0; i < xian.length; i++) { |
| | | if (xian[i].innerHTML === "æ¯") { |
| | | xian[i].style.color = "yellow"; |
| | | } else if (xian[i].innerHTML === "å¦") { |
| | | xian[i].style.color = "red"; |
| | | // å»¶è¿æ´æ°FLæ°æ®ï¼é¿å
é«é¢å·æ°å¯¼è´çéªç |
| | | const delayedUpdateFLData = (newRawData) => { |
| | | if (updateTimer) clearTimeout(updateTimer); |
| | | |
| | | updateTimer = setTimeout(() => { |
| | | // æ£æ¥æ¯å¦å
å«FLç¹å¾å段 |
| | | const hasFLFields = flStatusConfig.booleanFields.keys.some(key => |
| | | newRawData && newRawData[key] !== undefined |
| | | ); |
| | | |
| | | if (hasFLFields) { |
| | | flData.value = processFLData(newRawData); |
| | | |
| | | // æ´æ°æ ·å¼ |
| | | nextTick(() => { |
| | | const valueElements = document.getElementsByClassName("xzhi"); |
| | | for (let i = 0; i < valueElements.length; i++) { |
| | | const text = valueElements[i].innerHTML; |
| | | if (text === "æ¯") { |
| | | valueElements[i].style.color = "yellow"; |
| | | } else if (text === "å¦") { |
| | | valueElements[i].style.color = "red"; |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }, UPDATE_DELAY); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | // åå§å è½½æ°æ® |
| | | const initialData = store.state.homedata; |
| | | const hasFLFields = flStatusConfig.booleanFields.keys.some(key => |
| | | initialData && initialData[key] !== undefined |
| | | ); |
| | | |
| | | if (hasFLFields) { |
| | | flData.value = processFLData(initialData); |
| | | } |
| | | |
| | | // ç嬿°æ®ååï¼åªå¤çFLæ°æ® |
| | | const unwatch = watch( |
| | | () => store.state.homedata, |
| | | (newData) => { |
| | | const hasFLFields = flStatusConfig.booleanFields.keys.some(key => |
| | | newData && newData[key] !== undefined |
| | | ); |
| | | |
| | | if (hasFLFields) { |
| | | delayedUpdateFLData(newData); |
| | | } |
| | | }); |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | |
| | | // ç»ä»¶å¸è½½æ¶æ¸
çèµæº |
| | | onUnmounted(() => { |
| | | unwatch(); |
| | | if (updateTimer) clearTimeout(updateTimer); |
| | | }); |
| | | }); |
| | | |
| | | return { |
| | | data, |
| | | flData |
| | | }; |
| | | } |
| | | }; |
| | |
| | | border-radius: 10px; |
| | | } |
| | | </style> |
| | | |
| | |
| | | <template> |
| | | <div id="title"> |
| | | <div id="bkuang" style="border-top: none"> |
| | | <!-- GMä»å åæºç¶æé¢æ¿ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">å¹²èä»å åæº</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_GM_Status">{{ data.R_GM_Status }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Status">{{ gmData.R_GM_Status || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºæèªå¨ç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_GM_AutoStatus">{{ data.R_GM_AutoStatus }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_AutoStatus">{{ gmData.R_GM_AutoStatus || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ£å¨æ§è¡çä»»å¡å·:</div> |
| | | <div class="xzhi" :title="data.R_GM_TaskNum">{{ data.R_GM_TaskNum }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_TaskNum">{{ gmData.R_GM_TaskNum || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºå·¥ä½ç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_GM_WorkStatus">{{ data.R_GM_WorkStatus }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_WorkStatus">{{ gmData.R_GM_WorkStatus || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ä½ä¸ç±»å:</div> |
| | | <div class="xzhi" :title="data.R_GM_WorkType">{{ data.R_GM_WorkType }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_WorkType">{{ gmData.R_GM_WorkType || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æçç±»å:</div> |
| | | <div class="xzhi" :title="data.R_GM_TrayType">{{ data.R_GM_TrayType }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_TrayType">{{ gmData.R_GM_TrayType || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- GMå
³èç«å°ï¼å
¥åº7003ï¼ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">å
¥åº7003ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">读åç®±ä½ç (读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Boxcode">{{ data.R_GM_Boxcode }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Boxcode">{{ gmData.R_GM_Boxcode || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¡æä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_HandShake3">{{ data.R_GM_HandShake3 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_HandShake3">{{ gmData.R_GM_HandShake3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦èæº(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Online3">{{ data.R_GM_Online3 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Online3">{{ gmData.R_GM_Online3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦ç©ºé²(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Free3">{{ data.R_GM_Free3 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Free3">{{ gmData.R_GM_Free3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Goods3">{{ data.R_GM_Goods3 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Goods3">{{ gmData.R_GM_Goods3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æ
é(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Alarm3">{{ data.R_GM_Alarm3 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Alarm3">{{ gmData.R_GM_Alarm3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_STB3">{{ data.R_GM_STB3 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_STB3">{{ gmData.R_GM_STB3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_ACK3">{{ data.R_GM_ACK3 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_ACK3">{{ gmData.R_GM_ACK3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_GM_STB3">{{ data.W_GM_STB3 }}</div> |
| | | <div class="xzhi" :title="gmData.W_GM_STB3">{{ gmData.W_GM_STB3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_GM_ACK3">{{ data.W_GM_ACK3 }}</div> |
| | | <div class="xzhi" :title="gmData.W_GM_ACK3">{{ gmData.W_GM_ACK3 || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <!-- GMå
³èç«å°ï¼åºåº7004+7005ï¼ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">åºåºç»ç¹7004ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¡æä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_HandShake4">{{ data.R_GM_HandShake4 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_HandShake4">{{ gmData.R_GM_HandShake4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦èæº(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Online4">{{ data.R_GM_Online4 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Online4">{{ gmData.R_GM_Online4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦ç©ºé²(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Free4">{{ data.R_GM_Free4 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Free4">{{ gmData.R_GM_Free4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Goods4">{{ data.R_GM_Goods4 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Goods4">{{ gmData.R_GM_Goods4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æ
é(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Alarm4">{{ data.R_GM_Alarm4 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Alarm4">{{ gmData.R_GM_Alarm4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_STB4">{{ data.R_GM_STB4 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_STB4">{{ gmData.R_GM_STB4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_ACK4">{{ data.R_GM_ACK4 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_ACK4">{{ gmData.R_GM_ACK4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_GM_STB4">{{ data.W_GM_STB4 }}</div> |
| | | <div class="xzhi" :title="gmData.W_GM_STB4">{{ gmData.W_GM_STB4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_GM_ACK4">{{ data.W_GM_ACK4 }}</div> |
| | | <div class="xzhi" :title="gmData.W_GM_ACK4">{{ gmData.W_GM_ACK4 || '-' }}</div> |
| | | </div> |
| | | |
| | | <div class="zhuname">åºåº7005ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¡æä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_HandShake5">{{ data.R_GM_HandShake5 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_HandShake5">{{ gmData.R_GM_HandShake5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦èæº(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Online5">{{ data.R_GM_Online5 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Online5">{{ gmData.R_GM_Online5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦ç©ºé²(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Free5">{{ data.R_GM_Free5 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Free5">{{ gmData.R_GM_Free5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Goods5">{{ data.R_GM_Goods5 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Goods5">{{ gmData.R_GM_Goods5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æ
é(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_Alarm5">{{ data.R_GM_Alarm5 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_Alarm5">{{ gmData.R_GM_Alarm5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_STB5">{{ data.R_GM_STB5 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_STB5">{{ gmData.R_GM_STB5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_GM_ACK5">{{ data.R_GM_ACK5 }}</div> |
| | | <div class="xzhi" :title="gmData.R_GM_ACK5">{{ gmData.R_GM_ACK5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_GM_STB5">{{ data.W_GM_STB5 }}</div> |
| | | <div class="xzhi" :title="gmData.W_GM_STB5">{{ gmData.W_GM_STB5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_GM_ACK5">{{ data.W_GM_ACK5 }}</div> |
| | | <div class="xzhi" :title="gmData.W_GM_ACK5">{{ gmData.W_GM_ACK5 || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { ref, nextTick } from "vue"; |
| | | import { ref, nextTick, watch, onUnmounted } from "vue"; |
| | | import { useStore } from "vuex"; |
| | | import { onMounted } from "vue"; |
| | | |
| | |
| | | xuan: 0 |
| | | }; |
| | | }, |
| | | methods: { |
| | | }, |
| | | setup() { |
| | | const store = useStore(); |
| | | const data = ref({}); |
| | | // ä»
åå¨GMæ°æ®ï¼ä¸å
¶ä»ä»æ°æ®é离 |
| | | const gmData = ref({}); |
| | | |
| | | // 1. å®ä¹æ®éåæ®µçæ å°è§å |
| | | const statusMap = { |
| | | R_GM_Status: { |
| | | 1: "æ£å¸¸", |
| | | 2: "æ
é", |
| | | 3: "æ¥å", |
| | | // å»¶è¿æ´æ°é
ç½®ï¼è§£å³éªçé®é¢ |
| | | const UPDATE_DELAY = 300; // 300mså»¶è¿ï¼å¹³è¡¡å®æ¶æ§åçé¢ç¨³å®æ§ |
| | | let updateTimer = null; // 宿¶å¨å®ä¾ |
| | | |
| | | // GMæ°æ®æ å°è§åé
ç½®ï¼æåè½åç»ï¼ |
| | | const gmStatusConfig = { |
| | | coreStatus: { |
| | | R_GM_Status: { 1: "æ£å¸¸", 2: "æ
é", 3: "æ¥å" }, |
| | | R_GM_AutoStatus: { 0: "ç»´ä¿®", 1: "æå¨", 2: "åèªå¨", 3: "èªå¨" }, |
| | | R_GM_WorkStatus: { 0: "å¾
æº", 1: "åè´§ä¸", 2: "åè´§å®æ", 4: "æ¾è´§ä¸", 5: "æ¾è´§å®æ", 6: "ä»»å¡å®æ" }, |
| | | R_GM_WorkType: { 0: "æ ä½ä¸ä»»å¡(0)", 1: "åæ¾è´§ä½ä¸(1)", 2: "åªåè´§ä½ä¸(2)", 3: "åªæ¾è´§ä½ä¸(3)", 4: "ç§»å¨å°æå®ä½ç½®" }, |
| | | R_GM_TrayType: { "-1": "空箱(-1)", 1: "å°æç(1)", 2: "䏿ç(2)", 3: "大æç(3)", 4: "ç¹å¤§æç(4)" } |
| | | }, |
| | | R_GM_AutoStatus: { |
| | | 0: "ç»´ä¿®", |
| | | 1: "æå¨", |
| | | 2: "åèªå¨", |
| | | 3: "èªå¨", |
| | | onlineStatus: { |
| | | keys: ["R_GM_Online3", "R_GM_Online4", "R_GM_Online5"], |
| | | map: { true: "èæº", false: "è±æº" } |
| | | }, |
| | | R_GM_WorkStatus: { |
| | | 0: "å¾
æº", |
| | | 1: "åè´§ä¸", |
| | | 2: "åè´§å®æ", |
| | | 4: "æ¾è´§ä¸", |
| | | 5: "æ¾è´§å®æ", |
| | | 6: "ä»»å¡å®æ", |
| | | alarmStatus: { |
| | | keys: ["R_GM_Alarm3", "R_GM_Alarm4", "R_GM_Alarm5"], |
| | | map: { true: "æ
é", false: "æ£å¸¸" } |
| | | }, |
| | | R_GM_WorkType: { |
| | | 0: "æ ä½ä¸ä»»å¡(0)", |
| | | 1: "åæ¾è´§ä½ä¸(1)", |
| | | 2: "åªåè´§ä½ä¸(2)", |
| | | 3: "åªæ¾è´§ä½ä¸(3)", |
| | | 4: "ç§»å¨å°æå®ä½ç½®" |
| | | freeStatus: { |
| | | keys: ["R_GM_Free3", "R_GM_Free4", "R_GM_Free5"], |
| | | map: { true: "空é²", false: "ç¹å¿" } |
| | | }, |
| | | R_GM_TrayType: { |
| | | "-1": "空箱(-1)", |
| | | 1: "å°æç(1)", |
| | | 2: "䏿ç(2)", |
| | | 3: "大æç(3)", |
| | | 4: "ç¹å¤§æç(4)", |
| | | goodsStatus: { |
| | | keys: ["R_GM_Goods3", "R_GM_Goods4", "R_GM_Goods5"], |
| | | map: { true: "æè´§", false: "æ è´§" } |
| | | }, |
| | | signalFields: { |
| | | keys: [ |
| | | "R_GM_HandShake3", "R_GM_STB3", "R_GM_ACK3", "W_GM_STB3", "W_GM_ACK3", |
| | | "R_GM_HandShake4", "R_GM_STB4", "R_GM_ACK4", "W_GM_STB4", "W_GM_ACK4", |
| | | "R_GM_HandShake5", "R_GM_STB5", "R_GM_ACK5", "W_GM_STB5", "W_GM_ACK5" |
| | | ], |
| | | map: { true: "æ¯", false: "å¦" } |
| | | } |
| | | }; |
| | | const onlines = [ |
| | | "R_GM_Online3","R_GM_Online4", |
| | | "R_GM_Online5", |
| | | ] |
| | | const online = { |
| | | 1: "èæº", |
| | | 0: "è±æº" |
| | | }; |
| | | const alarms = [ |
| | | "R_GM_Alarm3","R_GM_Alarm4", |
| | | "R_GM_Alarm5", |
| | | ] |
| | | const alarm = { |
| | | 1: "æ
é", |
| | | 0: "æ£å¸¸" |
| | | }; |
| | | const frees = [ |
| | | "R_GM_Free3","R_GM_Free4", |
| | | "R_GM_Free5", |
| | | ] |
| | | const free = { |
| | | 1: "空é²", |
| | | 0: "ç¹å¿" |
| | | }; |
| | | const goods = [ |
| | | "R_GM_Goods3", "R_GM_Goods4", |
| | | "R_GM_Goods5", |
| | | ] |
| | | const good = { |
| | | 1: "æè´§", |
| | | 0: "æ è´§" |
| | | }; |
| | | // 2. å®ä¹éè¦å
±ç¨æ å°è§åçåæ®µå表å对åºçæ å°è§å |
| | | const booleanFields = [ |
| | | "R_GM_HandShake3", |
| | | "R_GM_STB3", |
| | | "R_GM_ACK3", "W_GM_STB3", |
| | | "W_GM_ACK3", |
| | | "R_GM_HandShake4", |
| | | "R_GM_STB4", |
| | | "R_GM_ACK4", "W_GM_STB4", |
| | | "W_GM_ACK4", |
| | | "R_GM_HandShake5", |
| | | "R_GM_STB5", |
| | | "R_GM_ACK5", "W_GM_STB5", |
| | | "W_GM_ACK5", |
| | | ]; |
| | | const booleanMap = { |
| | | true: "æ¯", |
| | | false: "å¦" |
| | | }; |
| | | |
| | | // å¤çæ°æ®ï¼å
å¤çæ®éæ å°ï¼åæ¹éå¤çå
±ç¨æ å°çåæ®µ |
| | | const processData = (rawData) => { |
| | | // å¤çGMåå§æ°æ® |
| | | const processGMData = (rawData) => { |
| | | if (!rawData) return {}; |
| | | const processed = { ...rawData }; |
| | | |
| | | // å¤çæ®éåæ®µæ å° |
| | | Object.keys(statusMap).forEach(key => { |
| | | // å¤çæ ¸å¿ç¶æå段 |
| | | Object.entries(gmStatusConfig.coreStatus).forEach(([key, map]) => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | const map = statusMap[key]; |
| | | processed[key] = map[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | |
| | | // æ¹éå¤çå
±ç¨æ å°è§åçåæ®µ |
| | | booleanFields.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = booleanMap[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | onlines.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = online[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | alarms.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = alarm[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | frees.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = free[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | goods.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = good[processed[key]] || processed[key]; |
| | | } |
| | | // æ¹éå¤çåç»å段 |
| | | [ |
| | | gmStatusConfig.onlineStatus, |
| | | gmStatusConfig.alarmStatus, |
| | | gmStatusConfig.freeStatus, |
| | | gmStatusConfig.goodsStatus, |
| | | gmStatusConfig.signalFields |
| | | ].forEach(group => { |
| | | group.keys.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = group.map[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | return processed; |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | nextTick(() => { |
| | | setInterval(() => { |
| | | const rawData = store.state.homedata; |
| | | data.value = processData(rawData); |
| | | const xian = document.getElementsByClassName("xzhi"); |
| | | for (let i = 0; i < xian.length; i++) { |
| | | if (xian[i].innerHTML === "æ¯" || xian[i].innerHTML === "èæº") { |
| | | xian[i].style.color = "yellow"; |
| | | } else if (xian[i].innerHTML === "å¦") { |
| | | xian[i].style.color = "red"; |
| | | // å»¶è¿æ´æ°GMæ°æ®ï¼é¿å
é«é¢å·æ°å¯¼è´çéªç |
| | | const delayedUpdateGMData = (newRawData) => { |
| | | if (updateTimer) clearTimeout(updateTimer); |
| | | |
| | | updateTimer = setTimeout(() => { |
| | | // ä»
å¤çå
å«GMç¹å¾åæ®µçæ°æ® |
| | | if (newRawData && newRawData.R_GM_Status !== undefined) { |
| | | gmData.value = processGMData(newRawData); |
| | | |
| | | // æ´æ°æ ·å¼ |
| | | nextTick(() => { |
| | | const valueElements = document.getElementsByClassName("xzhi"); |
| | | for (let i = 0; i < valueElements.length; i++) { |
| | | const text = valueElements[i].innerHTML; |
| | | if (text === "æ¯" || text === "èæº") { |
| | | valueElements[i].style.color = "yellow"; |
| | | } else if (text === "å¦") { |
| | | valueElements[i].style.color = "red"; |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }, UPDATE_DELAY); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | // åå§å è½½æ°æ® |
| | | const initialData = store.state.homedata; |
| | | if (initialData && initialData.R_GM_Status !== undefined) { |
| | | gmData.value = processGMData(initialData); |
| | | } |
| | | |
| | | // ç嬿°æ®ååï¼åªå¤çGMæ°æ® |
| | | const unwatch = watch( |
| | | () => store.state.homedata, |
| | | (newData) => { |
| | | if (newData && newData.R_GM_Status !== undefined) { |
| | | delayedUpdateGMData(newData); |
| | | } |
| | | }); |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | |
| | | // ç»ä»¶å¸è½½æ¶æ¸
çèµæº |
| | | onUnmounted(() => { |
| | | unwatch(); |
| | | if (updateTimer) clearTimeout(updateTimer); |
| | | }); |
| | | }); |
| | | |
| | | return { |
| | | data, |
| | | gmData |
| | | }; |
| | | } |
| | | }; |
| | |
| | | border-radius: 10px; |
| | | } |
| | | </style> |
| | | |
| | |
| | | <template> |
| | | <div id="title"> |
| | | <div id="bkuang" style="border-top: none"> |
| | | <!-- YMä»å åæºç¶æé¢æ¿ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">油墨ä»å åæº</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_YM_Status">{{ data.R_YM_Status }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_Status">{{ ymData.R_YM_Status || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºæèªå¨ç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_YM_AutoStatus">{{ data.R_YM_AutoStatus }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_AutoStatus">{{ ymData.R_YM_AutoStatus || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ£å¨æ§è¡çä»»å¡å·:</div> |
| | | <div class="xzhi" :title="data.R_YM_TaskNum">{{ data.R_YM_TaskNum }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_TaskNum">{{ ymData.R_YM_TaskNum || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºå·¥ä½ç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_YM_WorkStatus">{{ data.R_YM_WorkStatus }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_WorkStatus">{{ ymData.R_YM_WorkStatus || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ä½ä¸ç±»å:</div> |
| | | <div class="xzhi" :title="data.R_YM_WorkType">{{ data.R_YM_WorkType }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_WorkType">{{ ymData.R_YM_WorkType || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æçç±»å:</div> |
| | | <div class="xzhi" :title="data.R_YM_TrayType">{{ data.R_YM_TrayType }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_TrayType">{{ ymData.R_YM_TrayType || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- YMå
³èç«å°ï¼åºå
¥åº9001ï¼ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">åºå
¥åº9001ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_YM_Tray1">{{ data.R_YM_Tray1 }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_Tray1">{{ ymData.R_YM_Tray1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å
¥åºæ§è¡ä¸(读):</div> |
| | | <div class="xzhi" :title="data.R_YM_Inbounding1">{{ data.R_YM_Inbounding1 }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_Inbounding1">{{ ymData.R_YM_Inbounding1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æåæºç©ºé²(读):</div> |
| | | <div class="xzhi" :title="data.R_YM_Leisure1">{{ data.R_YM_Leisure1 }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_Leisure1">{{ ymData.R_YM_Leisure1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">åºåºæ§è¡ä¸(读):</div> |
| | | <div class="xzhi" :title="data.R_YM_Outbounding1">{{ data.R_YM_Outbounding1 }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_Outbounding1">{{ ymData.R_YM_Outbounding1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ç³è¯·å
¥åº(å):</div> |
| | | <div class="xzhi" :title="data.W_YM_RequestIn1">{{ data.W_YM_RequestIn1 }}</div> |
| | | <div class="xzhi" :title="ymData.W_YM_RequestIn1">{{ ymData.W_YM_RequestIn1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ç³è¯·åºåº(å):</div> |
| | | <div class="xzhi" :title="data.W_YM_RequestOut1">{{ data.W_YM_RequestOut1 }}</div> |
| | | <div class="xzhi" :title="ymData.W_YM_RequestOut1">{{ ymData.W_YM_RequestOut1 || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <!-- YMå
³èç«å°ï¼åºå
¥åº9002ï¼ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">åºå
¥åº9002ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_YM_Tray2">{{ data.R_YM_Tray2 }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_Tray2">{{ ymData.R_YM_Tray2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å
¥åºæ§è¡ä¸(读):</div> |
| | | <div class="xzhi" :title="data.R_YM_Inbounding2">{{ data.R_YM_Inbounding2 }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_Inbounding2">{{ ymData.R_YM_Inbounding2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æåæºç©ºé²(读):</div> |
| | | <div class="xzhi" :title="data.R_YM_Leisure2">{{ data.R_YM_Leisure2 }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_Leisure2">{{ ymData.R_YM_Leisure2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">åºåºæ§è¡ä¸(读):</div> |
| | | <div class="xzhi" :title="data.R_YM_Outbounding2">{{ data.R_YM_Outbounding2 }}</div> |
| | | <div class="xzhi" :title="ymData.R_YM_Outbounding2">{{ ymData.R_YM_Outbounding2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ç³è¯·å
¥åº(å):</div> |
| | | <div class="xzhi" :title="data.W_YM_RequestIn2">{{ data.W_YM_RequestIn2 }}</div> |
| | | <div class="xzhi" :title="ymData.W_YM_RequestIn2">{{ ymData.W_YM_RequestIn2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ç³è¯·åºåº(å):</div> |
| | | <div class="xzhi" :title="data.W_YM_RequestOut2">{{ data.W_YM_RequestOut2 }}</div> |
| | | <div class="xzhi" :title="ymData.W_YM_RequestOut2">{{ ymData.W_YM_RequestOut2 || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { ref, nextTick } from "vue"; |
| | | import { ref, nextTick, watch, onUnmounted } from "vue"; |
| | | import { useStore } from "vuex"; |
| | | import { onMounted } from "vue"; |
| | | |
| | |
| | | xuan: 0 |
| | | }; |
| | | }, |
| | | methods: { |
| | | }, |
| | | setup() { |
| | | const store = useStore(); |
| | | const data = ref({}); |
| | | // ä»
åå¨YMæ°æ®ï¼ä¸å
¶ä»æ°æ®é离 |
| | | const ymData = ref({}); |
| | | |
| | | // 1. å®ä¹æ®éåæ®µçæ å°è§å |
| | | const statusMap = { |
| | | // å»¶è¿æ´æ°é
ç½®ï¼è§£å³éªçé®é¢ |
| | | const UPDATE_DELAY = 300; // å»¶è¿300msæ´æ°UI |
| | | let updateTimer = null; // 宿¶å¨å®ä¾ |
| | | |
| | | // YMæ°æ®æ å°è§å |
| | | const ymStatusMap = { |
| | | R_YM_Status: { |
| | | 1: "æ£å¸¸", |
| | | 2: "æ
é", |
| | |
| | | } |
| | | }; |
| | | |
| | | // 2. å®ä¹éè¦å
±ç¨æ å°è§åçåæ®µå表å对åºçæ å°è§å |
| | | const booleanFields = [ |
| | | "R_YM_Tray1", "R_YM_Inbounding1", |
| | | "R_YM_Leisure1", "R_YM_Outbounding1", |
| | | "W_YM_RequestIn1", "W_YM_RequestOut1", |
| | | "R_YM_Tray2", "R_YM_Inbounding2", |
| | | "R_YM_Leisure2", "R_YM_Outbounding2", |
| | | "W_YM_RequestIn2", "W_YM_RequestOut2", |
| | | ]; |
| | | const booleanMap = { |
| | | true: "æ¯", |
| | | false: "å¦" |
| | | // YMåæ®µåç» |
| | | const ymFieldGroups = { |
| | | statusFields: { |
| | | keys: [ |
| | | "R_YM_Tray1", "R_YM_Inbounding1", "R_YM_Leisure1", "R_YM_Outbounding1", |
| | | "R_YM_Tray2", "R_YM_Inbounding2", "R_YM_Leisure2", "R_YM_Outbounding2" |
| | | ], |
| | | map: { true: "æ¯", false: "å¦" } |
| | | }, |
| | | requestFields: { |
| | | keys: [ |
| | | "W_YM_RequestIn1", "W_YM_RequestOut1", |
| | | "W_YM_RequestIn2", "W_YM_RequestOut2" |
| | | ], |
| | | map: { true: "æ¯", false: "å¦" } |
| | | } |
| | | }; |
| | | |
| | | // å¤çæ°æ®ï¼å
å¤çæ®éæ å°ï¼åæ¹éå¤çå
±ç¨æ å°çåæ®µ |
| | | const processData = (rawData) => { |
| | | // å¤çYMåå§æ°æ® |
| | | const processYMData = (rawData) => { |
| | | if (!rawData) return {}; |
| | | const processed = { ...rawData }; |
| | | const processedData = { ...rawData }; |
| | | |
| | | // å¤çæ®éåæ®µæ å° |
| | | Object.keys(statusMap).forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | const map = statusMap[key]; |
| | | processed[key] = map[processed[key]] || processed[key]; |
| | | // å¤çæ ¸å¿ç¶æå段 |
| | | Object.keys(ymStatusMap).forEach(key => { |
| | | if (processedData.hasOwnProperty(key)) { |
| | | processedData[key] = ymStatusMap[key][processedData[key]] || processedData[key]; |
| | | } |
| | | }); |
| | | |
| | | // æ¹éå¤çå
±ç¨æ å°è§åçåæ®µ |
| | | booleanFields.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = booleanMap[processed[key]] || processed[key]; |
| | | } |
| | | // å¤çåç»å段 |
| | | Object.values(ymFieldGroups).forEach(group => { |
| | | group.keys.forEach(key => { |
| | | if (processedData.hasOwnProperty(key)) { |
| | | processedData[key] = group.map[processedData[key]] || processedData[key]; |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | return processed; |
| | | return processedData; |
| | | }; |
| | | |
| | | // å»¶è¿æ´æ°YMæ°æ®ï¼é¿å
é«é¢å·æ° |
| | | const delayedUpdateYMData = (newRawData) => { |
| | | if (updateTimer) { |
| | | clearTimeout(updateTimer); |
| | | } |
| | | |
| | | updateTimer = setTimeout(() => { |
| | | // åªå¤çå
å«YMç¹å¾åæ®µçæ°æ® |
| | | if (newRawData && newRawData.R_YM_Status !== undefined) { |
| | | ymData.value = processYMData(newRawData); |
| | | |
| | | // æ´æ°æ ·å¼ |
| | | nextTick(() => { |
| | | const valueElements = document.getElementsByClassName("xzhi"); |
| | | for (let i = 0; i < valueElements.length; i++) { |
| | | if (valueElements[i].innerHTML === "æ¯") { |
| | | valueElements[i].style.color = "yellow"; |
| | | } else if (valueElements[i].innerHTML === "å¦") { |
| | | valueElements[i].style.color = "red"; |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }, UPDATE_DELAY); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | nextTick(() => { |
| | | setInterval(() => { |
| | | const rawData = store.state.homedata; |
| | | data.value = processData(rawData); |
| | | const xian = document.getElementsByClassName("xzhi"); |
| | | for (let i = 0; i < xian.length; i++) { |
| | | if (xian[i].innerHTML === "æ¯") { |
| | | xian[i].style.color = "yellow"; |
| | | } else if (xian[i].innerHTML === "å¦") { |
| | | xian[i].style.color = "red"; |
| | | } |
| | | // åå§å è½½æ°æ® |
| | | const initialData = store.state.homedata; |
| | | if (initialData && initialData.R_YM_Status !== undefined) { |
| | | ymData.value = processYMData(initialData); |
| | | } |
| | | |
| | | // ç嬿°æ®ååï¼åªå¤çYMæ°æ® |
| | | const unwatch = watch( |
| | | () => store.state.homedata, |
| | | (newData) => { |
| | | if (newData && newData.R_YM_Status !== undefined) { |
| | | delayedUpdateYMData(newData); |
| | | } |
| | | }); |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | |
| | | // ç»ä»¶å¸è½½æ¶æ¸
ç |
| | | onUnmounted(() => { |
| | | unwatch(); |
| | | if (updateTimer) { |
| | | clearTimeout(updateTimer); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | return { |
| | | data, |
| | | ymData |
| | | }; |
| | | } |
| | | }; |
| | |
| | | <template> |
| | | <div id="title"> |
| | | <div id="bkuang" style="border-top: none"> |
| | | <!-- PPä»å åæºç¶æé¢æ¿ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">PPä»å åæº</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_PP_Status">{{ data.R_PP_Status }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Status">{{ ppData.R_PP_Status }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºæèªå¨ç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_PP_AutoStatus">{{ data.R_PP_AutoStatus }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_AutoStatus">{{ ppData.R_PP_AutoStatus }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ£å¨æ§è¡çä»»å¡å·:</div> |
| | | <div class="xzhi" :title="data.R_PP_TaskNum">{{ data.R_PP_TaskNum }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_TaskNum">{{ ppData.R_PP_TaskNum }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºå·¥ä½ç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_PP_WorkStatus">{{ data.R_PP_WorkStatus }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_WorkStatus">{{ ppData.R_PP_WorkStatus }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ä½ä¸ç±»å:</div> |
| | | <div class="xzhi" :title="data.R_PP_WorkType">{{ data.R_PP_WorkType }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_WorkType">{{ ppData.R_PP_WorkType }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æçç±»å:</div> |
| | | <div class="xzhi" :title="data.R_PP_TrayType">{{ data.R_PP_TrayType }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_TrayType">{{ ppData.R_PP_TrayType }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- PPå
³èç«å°ï¼å
¥åº2004+åºåº2005ï¼ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">å
¥åº2004ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">读åç®±ä½ç (读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Boxcode">{{ data.R_PP_Boxcode }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Boxcode">{{ ppData.R_PP_Boxcode || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¡æä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_HandShake4">{{ data.R_PP_HandShake4 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_HandShake4">{{ ppData.R_PP_HandShake4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦èæº(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Online4">{{ data.R_PP_Online4 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Online4">{{ ppData.R_PP_Online4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦ç©ºé²(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Free4">{{ data.R_PP_Free4 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Free4">{{ ppData.R_PP_Free4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Goods4">{{ data.R_PP_Goods4 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Goods4">{{ ppData.R_PP_Goods4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æ
é(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Alarm4">{{ data.R_PP_Alarm4 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Alarm4">{{ ppData.R_PP_Alarm4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_STB4">{{ data.R_PP_STB4 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_STB4">{{ ppData.R_PP_STB4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_ACK4">{{ data.R_PP_ACK4 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_ACK4">{{ ppData.R_PP_ACK4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_PP_STB4">{{ data.W_PP_STB4 }}</div> |
| | | <div class="xzhi" :title="ppData.W_PP_STB4">{{ ppData.W_PP_STB4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_PP_ACK4">{{ data.W_PP_ACK4 }}</div> |
| | | <div class="xzhi" :title="ppData.W_PP_ACK4">{{ ppData.W_PP_ACK4 || '-' }}</div> |
| | | </div> |
| | | |
| | | <div class="zhuname">åºåº2005ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¡æä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_HandShake5">{{ data.R_PP_HandShake5 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_HandShake5">{{ ppData.R_PP_HandShake5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦èæº(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Online5">{{ data.R_PP_Online5 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Online5">{{ ppData.R_PP_Online5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦ç©ºé²(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Free5">{{ data.R_PP_Free5 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Free5">{{ ppData.R_PP_Free5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Goods5">{{ data.R_PP_Goods5 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Goods5">{{ ppData.R_PP_Goods5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æ
é(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Alarm5">{{ data.R_PP_Alarm5 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Alarm5">{{ ppData.R_PP_Alarm5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_STB5">{{ data.R_PP_STB5 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_STB5">{{ ppData.R_PP_STB5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_ACK5">{{ data.R_PP_ACK5 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_ACK5">{{ ppData.R_PP_ACK5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_PP_STB5">{{ data.W_PP_STB5 }}</div> |
| | | <div class="xzhi" :title="ppData.W_PP_STB5">{{ ppData.W_PP_STB5 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_PP_ACK5">{{ data.W_PP_ACK5 }}</div> |
| | | <div class="xzhi" :title="ppData.W_PP_ACK5">{{ ppData.W_PP_ACK5 || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <!-- PPå
³èç«å°ï¼åºåº2016+åºåº2017ï¼ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">åºåº2016ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¡æä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_HandShake6">{{ data.R_PP_HandShake6 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_HandShake6">{{ ppData.R_PP_HandShake6 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦èæº(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Online6">{{ data.R_PP_Online6 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Online6">{{ ppData.R_PP_Online6 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦ç©ºé²(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Free6">{{ data.R_PP_Free6 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Free6">{{ ppData.R_PP_Free6 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Goods6">{{ data.R_PP_Goods6 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Goods6">{{ ppData.R_PP_Goods6 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æ
é(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Alarm6">{{ data.R_PP_Alarm6 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Alarm6">{{ ppData.R_PP_Alarm6 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_STB6">{{ data.R_PP_STB6 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_STB6">{{ ppData.R_PP_STB6 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_ACK6">{{ data.R_PP_ACK6 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_ACK6">{{ ppData.R_PP_ACK6 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_PP_STB6">{{ data.W_PP_STB6 }}</div> |
| | | <div class="xzhi" :title="ppData.W_PP_STB6">{{ ppData.W_PP_STB6 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_PP_ACK6">{{ data.W_PP_ACK6 }}</div> |
| | | <div class="xzhi" :title="ppData.W_PP_ACK6">{{ ppData.W_PP_ACK6 || '-' }}</div> |
| | | </div> |
| | | |
| | | <div class="zhuname">åºåº2017ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¡æä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_HandShake7">{{ data.R_PP_HandShake7 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_HandShake7">{{ ppData.R_PP_HandShake7 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦èæº(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Online7">{{ data.R_PP_Online7 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Online7">{{ ppData.R_PP_Online7 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦ç©ºé²(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Free7">{{ data.R_PP_Free7 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Free7">{{ ppData.R_PP_Free7 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Goods7">{{ data.R_PP_Goods7 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Goods7">{{ ppData.R_PP_Goods7 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦æ
é(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_Alarm7">{{ data.R_PP_Alarm7 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_Alarm7">{{ ppData.R_PP_Alarm7 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_STB7">{{ data.R_PP_STB7 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_STB7">{{ ppData.R_PP_STB7 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(读):</div> |
| | | <div class="xzhi" :title="data.R_PP_ACK7">{{ data.R_PP_ACK7 }}</div> |
| | | <div class="xzhi" :title="ppData.R_PP_ACK7">{{ ppData.R_PP_ACK7 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">请æ±ä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_PP_STB7">{{ data.W_PP_STB7 }}</div> |
| | | <div class="xzhi" :title="ppData.W_PP_STB7">{{ ppData.W_PP_STB7 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ååºä¿¡å·(å):</div> |
| | | <div class="xzhi" :title="data.W_PP_ACK7">{{ data.W_PP_ACK7 }}</div> |
| | | <div class="xzhi" :title="ppData.W_PP_ACK7">{{ ppData.W_PP_ACK7 || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { ref, nextTick } from "vue"; |
| | | import { ref, nextTick, watch, onUnmounted } from "vue"; |
| | | import { useStore } from "vuex"; |
| | | import { onMounted } from "vue"; |
| | | |
| | |
| | | xuan: 0 |
| | | }; |
| | | }, |
| | | methods: { |
| | | }, |
| | | setup() { |
| | | const store = useStore(); |
| | | const data = ref({}); |
| | | // ä»
åå¨PPæ°æ®ï¼é¿å
ä¸ZHæ°æ®æ··æ· |
| | | const ppData = ref({}); |
| | | |
| | | // 1. å®ä¹æ®éåæ®µçæ å°è§å |
| | | // å»¶è¿æ´æ°é
ç½®ï¼è§£å³é«é¢å·æ°å¯¼è´çéªç |
| | | const UPDATE_DELAY = 300; // å»¶è¿300msæ´æ°UI |
| | | let updateTimer = null; // 宿¶å¨å®ä¾ |
| | | |
| | | // PPæ°æ®æ å°è§åï¼ä»
å¤çPPç¸å
³åæ®µï¼ |
| | | const statusMap = { |
| | | R_PP_Status: { |
| | | 1: "æ£å¸¸", |
| | |
| | | 4: "ç¹å¤§æç(4)", |
| | | } |
| | | }; |
| | | const onlines = [ |
| | | "R_PP_Online6","R_PP_Online4", |
| | | "R_PP_Online5","R_PP_Online7" |
| | | ] |
| | | const online = { |
| | | true: "èæº", |
| | | false: "è±æº" |
| | | }; |
| | | const alarms = [ |
| | | "R_PP_Alarm6","R_PP_Alarm4", |
| | | "R_PP_Alarm5","R_PP_Alarm7" |
| | | ] |
| | | const alarm = { |
| | | true: "æ
é", |
| | | false: "æ£å¸¸" |
| | | }; |
| | | const frees = [ |
| | | "R_PP_Free6","R_PP_Free4", |
| | | "R_PP_Free5","R_PP_Free7" |
| | | ] |
| | | const free = { |
| | | true: "空é²", |
| | | false: "ç¹å¿" |
| | | }; |
| | | const goods = [ |
| | | "R_PP_Goods6", "R_PP_Goods4", |
| | | "R_PP_Goods5","R_PP_Goods7" |
| | | ] |
| | | const good = { |
| | | true: "æè´§", |
| | | false: "æ è´§" |
| | | |
| | | // PPç¸å
³å¸å°å段åç» |
| | | const fieldGroups = { |
| | | online: { |
| | | fields: ["R_PP_Online6", "R_PP_Online4", "R_PP_Online5", "R_PP_Online7"], |
| | | map: { true: "èæº", false: "è±æº" } |
| | | }, |
| | | alarm: { |
| | | fields: ["R_PP_Alarm6", "R_PP_Alarm4", "R_PP_Alarm5", "R_PP_Alarm7"], |
| | | map: { true: "æ
é", false: "æ£å¸¸" } |
| | | }, |
| | | free: { |
| | | fields: ["R_PP_Free6", "R_PP_Free4", "R_PP_Free5", "R_PP_Free7"], |
| | | map: { true: "空é²", false: "ç¹å¿" } |
| | | }, |
| | | goods: { |
| | | fields: ["R_PP_Goods6", "R_PP_Goods4", "R_PP_Goods5", "R_PP_Goods7"], |
| | | map: { true: "æè´§", false: "æ è´§" } |
| | | }, |
| | | signal: { |
| | | fields: [ |
| | | "R_PP_HandShake4", "R_PP_STB4", "R_PP_ACK4", "W_PP_STB4", "W_PP_ACK4", |
| | | "R_PP_HandShake5", "R_PP_STB5", "R_PP_ACK5", "W_PP_STB5", "W_PP_ACK5", |
| | | "R_PP_HandShake6", "R_PP_STB6", "R_PP_ACK6", "W_PP_STB6", "W_PP_ACK6", |
| | | "R_PP_HandShake7", "R_PP_STB7", "R_PP_ACK7", "W_PP_STB7", "W_PP_ACK7" |
| | | ], |
| | | map: { true: "æ¯", false: "å¦" } |
| | | } |
| | | }; |
| | | |
| | | // 2. å®ä¹éè¦å
±ç¨æ å°è§åçåæ®µå表å对åºçæ å°è§å |
| | | const booleanFields = [ |
| | | "R_PP_HandShake4", "R_PP_STB4", |
| | | "R_PP_ACK4", "W_PP_STB4", |
| | | "W_PP_ACK4", |
| | | "R_PP_HandShake5", "R_PP_STB5", |
| | | "R_PP_ACK5", "W_PP_STB5", |
| | | "W_PP_ACK5", |
| | | "R_PP_HandShake6", "R_PP_STB6", |
| | | "R_PP_ACK6", "W_PP_STB6", |
| | | "W_PP_ACK6", |
| | | "R_PP_HandShake7", "R_PP_STB7", |
| | | "R_PP_ACK7", "W_PP_STB7", |
| | | "W_PP_ACK7", |
| | | ]; |
| | | const booleanMap = { |
| | | true: "æ¯", |
| | | false: "å¦" |
| | | }; |
| | | |
| | | // å¤çæ°æ®ï¼å
å¤çæ®éæ å°ï¼åæ¹éå¤çå
±ç¨æ å°çåæ®µ |
| | | const processData = (rawData) => { |
| | | // å¤çPPåå§æ°æ® |
| | | const processPPData = (rawData) => { |
| | | if (!rawData) return {}; |
| | | |
| | | // å¤å¶åå§æ°æ®ï¼é¿å
ç´æ¥ä¿®æ¹ |
| | | const processed = { ...rawData }; |
| | | |
| | | // å¤çæ®éåæ®µæ å° |
| | | // å¤çç¶æåæ®µæ å° |
| | | Object.keys(statusMap).forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | const map = statusMap[key]; |
| | | processed[key] = map[processed[key]] || processed[key]; |
| | | processed[key] = statusMap[key][processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | |
| | | // æ¹éå¤çå
±ç¨æ å°è§åçåæ®µ |
| | | booleanFields.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = booleanMap[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | onlines.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = online[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | alarms.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = alarm[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | frees.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = free[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | goods.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = good[processed[key]] || processed[key]; |
| | | } |
| | | // å¤çå¸å°ååæ®µæ å° |
| | | Object.values(fieldGroups).forEach(group => { |
| | | group.fields.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = group.map[processed[key]] || processed[key]; |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | return processed; |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | nextTick(() => { |
| | | setInterval(() => { |
| | | const rawData = store.state.homedata; |
| | | data.value = processData(rawData); |
| | | const xian = document.getElementsByClassName("xzhi"); |
| | | for (let i = 0; i < xian.length; i++) { |
| | | if (xian[i].innerHTML === "æ¯") { |
| | | xian[i].style.color = "yellow"; |
| | | } else if (xian[i].innerHTML === "å¦") { |
| | | xian[i].style.color = "red"; |
| | | // å»¶è¿æ´æ°PPæ°æ®ï¼é¿å
é«é¢å·æ° |
| | | const delayedUpdatePPData = (newRawData) => { |
| | | // æ¸
é¤ä¹åç宿¶å¨ï¼ç¡®ä¿åªæ§è¡æå䏿¬¡æ´æ° |
| | | if (updateTimer) { |
| | | clearTimeout(updateTimer); |
| | | } |
| | | |
| | | // å»¶è¿æå®æ¶é´åæ´æ°æ°æ® |
| | | updateTimer = setTimeout(() => { |
| | | // åªå¤çå
å«PPç¹å¾åæ®µçæ°æ® |
| | | if (newRawData && newRawData.R_PP_Status !== undefined) { |
| | | ppData.value = processPPData(newRawData); |
| | | |
| | | // æ´æ°æ ·å¼ |
| | | nextTick(() => { |
| | | const valueElements = document.getElementsByClassName("xzhi"); |
| | | for (let i = 0; i < valueElements.length; i++) { |
| | | if (valueElements[i].innerHTML === "æ¯") { |
| | | valueElements[i].style.color = "yellow"; |
| | | } else if (valueElements[i].innerHTML === "å¦") { |
| | | valueElements[i].style.color = "red"; |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }, UPDATE_DELAY); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | // åå§å è½½æ°æ® |
| | | const initialData = store.state.homedata; |
| | | if (initialData && initialData.R_PP_Status !== undefined) { |
| | | ppData.value = processPPData(initialData); |
| | | } |
| | | |
| | | // ç嬿°æ®ååï¼åªå¤çPPæ°æ® |
| | | const unwatch = watch( |
| | | () => store.state.homedata, |
| | | (newData) => { |
| | | // ä»
彿°æ®å
å«PPç¹å¾åæ®µæ¶ææ´æ° |
| | | if (newData && newData.R_PP_Status !== undefined) { |
| | | delayedUpdatePPData(newData); |
| | | } |
| | | }); |
| | | }, |
| | | { deep: true } // 深度çå¬å¯¹è±¡å
é¨åå |
| | | ); |
| | | |
| | | // ç»ä»¶å¸è½½æ¶æ¸
çèµæº |
| | | onUnmounted(() => { |
| | | unwatch(); |
| | | if (updateTimer) { |
| | | clearTimeout(updateTimer); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | return { |
| | | data, |
| | | ppData |
| | | }; |
| | | } |
| | | }; |
| | |
| | | border-radius: 10px; |
| | | } |
| | | </style> |
| | | |
| | |
| | | <template> |
| | | <div id="title"> |
| | | <div id="bkuang" style="border-top: none"> |
| | | <!-- ZHä»å åæºç¶æé¢æ¿ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">é»çä»å åæº</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_ZH_Status">{{ data.R_ZH_Status }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_Status">{{ zhData.R_ZH_Status || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºæèªå¨ç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_ZH_AutoStatus">{{ data.R_ZH_AutoStatus }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_AutoStatus">{{ zhData.R_ZH_AutoStatus || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ£å¨æ§è¡çä»»å¡å·:</div> |
| | | <div class="xzhi" :title="data.R_ZH_TaskNum">{{ data.R_ZH_TaskNum }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_TaskNum">{{ zhData.R_ZH_TaskNum || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å åæºå·¥ä½ç¶æ:</div> |
| | | <div class="xzhi" :title="data.R_ZH_WorkStatus">{{ data.R_ZH_WorkStatus }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_WorkStatus">{{ zhData.R_ZH_WorkStatus || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">ä½ä¸ç±»å:</div> |
| | | <div class="xzhi" :title="data.R_ZH_WorkType">{{ data.R_ZH_WorkType }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_WorkType">{{ zhData.R_ZH_WorkType || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æçç±»å:</div> |
| | | <div class="xzhi" :title="data.R_ZH_TrayType">{{ data.R_ZH_TrayType }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_TrayType">{{ zhData.R_ZH_TrayType || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- ZHå
³èç«å°ï¼å
¥åº301+å
¥åº302ï¼ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">å
¥åº301ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦å
许æ¾è´§(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_IsCanPut1">{{ data.R_ZH_IsCanPut1 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_IsCanPut1">{{ zhData.R_ZH_IsCanPut1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦å
许åè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_IsCanTake1">{{ data.R_ZH_IsCanTake1 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_IsCanTake1">{{ zhData.R_ZH_IsCanTake1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">åè´§æçç±»å(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_TakePalletType1">{{ data.R_ZH_TakePalletType1 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_TakePalletType1">{{ zhData.R_ZH_TakePalletType1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§æçç±»å(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutPalletType1">{{ data.W_ZH_PutPalletType1 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutPalletType1">{{ zhData.W_ZH_PutPalletType1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§è¯·æ±(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutRequest1">{{ data.W_ZH_PutRequest1 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutRequest1">{{ zhData.W_ZH_PutRequest1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§å®æ(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutFinish1">{{ data.W_ZH_PutFinish1 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutFinish1">{{ zhData.W_ZH_PutFinish1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å货请æ±(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_TakeRequest1">{{ data.W_ZH_TakeRequest1 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_TakeRequest1">{{ zhData.W_ZH_TakeRequest1 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">åè´§å®æ(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_TakeFinish1">{{ data.W_ZH_TakeFinish1 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_TakeFinish1">{{ zhData.W_ZH_TakeFinish1 || '-' }}</div> |
| | | </div> |
| | | |
| | | <div class="zhuname">å
¥åº302ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦å
许æ¾è´§(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_IsCanPut2">{{ data.R_ZH_IsCanPut2 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_IsCanPut2">{{ zhData.R_ZH_IsCanPut2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦å
许åè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_IsCanTake2">{{ data.R_ZH_IsCanTake2 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_IsCanTake2">{{ zhData.R_ZH_IsCanTake2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">åè´§æçç±»å(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_TakePalletType2">{{ data.R_ZH_TakePalletType2 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_TakePalletType2">{{ zhData.R_ZH_TakePalletType2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§æçç±»å(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutPalletType2">{{ data.W_ZH_PutPalletType2 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutPalletType2">{{ zhData.W_ZH_PutPalletType2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§è¯·æ±(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutRequest2">{{ data.W_ZH_PutRequest2 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutRequest2">{{ zhData.W_ZH_PutRequest2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§å®æ(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutFinish2">{{ data.W_ZH_PutFinish2 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutFinish2">{{ zhData.W_ZH_PutFinish2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å货请æ±(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_TakeRequest2">{{ data.W_ZH_TakeRequest2 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_TakeRequest2">{{ zhData.W_ZH_TakeRequest2 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">åè´§å®æ(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_TakeFinish2">{{ data.W_ZH_TakeFinish2 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_TakeFinish2">{{ zhData.W_ZH_TakeFinish2 || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <!-- ZHå
³èç«å°ï¼åºåº303+åºåº304ï¼ --> |
| | | <div class="skuang"> |
| | | <div class="zhuname">åºåº303ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦å
许æ¾è´§(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_IsCanPut3">{{ data.R_ZH_IsCanPut3 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_IsCanPut3">{{ zhData.R_ZH_IsCanPut3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦å
许åè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_IsCanTake3">{{ data.R_ZH_IsCanTake3 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_IsCanTake3">{{ zhData.R_ZH_IsCanTake3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">åè´§æçç±»å(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_TakePalletType3">{{ data.R_ZH_TakePalletType3 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_TakePalletType3">{{ zhData.R_ZH_TakePalletType3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§æçç±»å(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutPalletType3">{{ data.W_ZH_PutPalletType3 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutPalletType3">{{ zhData.W_ZH_PutPalletType3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§è¯·æ±(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutRequest3">{{ data.W_ZH_PutRequest3 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutRequest3">{{ zhData.W_ZH_PutRequest3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§å®æ(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutFinish3">{{ data.W_ZH_PutFinish3 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutFinish3">{{ zhData.W_ZH_PutFinish3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å货请æ±(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_TakeRequest3">{{ data.W_ZH_TakeRequest3 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_TakeRequest3">{{ zhData.W_ZH_TakeRequest3 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">åè´§å®æ(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_TakeFinish3">{{ data.W_ZH_TakeFinish3 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_TakeFinish3">{{ zhData.W_ZH_TakeFinish3 || '-' }}</div> |
| | | </div> |
| | | |
| | | <div class="zhuname">åºåº304ç«å°</div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦å
许æ¾è´§(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_IsCanPut4">{{ data.R_ZH_IsCanPut4 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_IsCanPut4">{{ zhData.R_ZH_IsCanPut4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¯å¦å
许åè´§(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_IsCanTake4">{{ data.R_ZH_IsCanTake4 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_IsCanTake4">{{ zhData.R_ZH_IsCanTake4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">åè´§æçç±»å(读):</div> |
| | | <div class="xzhi" :title="data.R_ZH_TakePalletType4">{{ data.R_ZH_TakePalletType4 }}</div> |
| | | <div class="xzhi" :title="zhData.R_ZH_TakePalletType4">{{ zhData.R_ZH_TakePalletType4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§æçç±»å(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutPalletType4">{{ data.W_ZH_PutPalletType4 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutPalletType4">{{ zhData.W_ZH_PutPalletType4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§è¯·æ±(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutRequest4">{{ data.W_ZH_PutRequest4 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutRequest4">{{ zhData.W_ZH_PutRequest4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">æ¾è´§å®æ(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_PutFinish4">{{ data.W_ZH_PutFinish4 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_PutFinish4">{{ zhData.W_ZH_PutFinish4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">å货请æ±(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_TakeRequest4">{{ data.W_ZH_TakeRequest4 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_TakeRequest4">{{ zhData.W_ZH_TakeRequest4 || '-' }}</div> |
| | | </div> |
| | | <div class="zhankuang"> |
| | | <div class="xname">åè´§å®æ(å):</div> |
| | | <div class="xzhi" :title="data.W_ZH_TakeFinish4">{{ data.W_ZH_TakeFinish4 }}</div> |
| | | <div class="xzhi" :title="zhData.W_ZH_TakeFinish4">{{ zhData.W_ZH_TakeFinish4 || '-' }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { ref, nextTick } from "vue"; |
| | | import { ref, nextTick, watch, onUnmounted } from "vue"; |
| | | import { useStore } from "vuex"; |
| | | import { onMounted } from "vue"; |
| | | |
| | |
| | | xuan: 0 |
| | | }; |
| | | }, |
| | | methods: { |
| | | }, |
| | | setup() { |
| | | const store = useStore(); |
| | | const data = ref({}); |
| | | // ä»
åå¨ZHæ°æ®ï¼ä¸å
¶ä»æ°æ®é离 |
| | | const zhData = ref({}); |
| | | |
| | | // 1. å®ä¹æ®éåæ®µçæ å°è§å |
| | | const statusMap = { |
| | | // å»¶è¿æ´æ°é
ç½®ï¼è§£å³éªçé®é¢ |
| | | const UPDATE_DELAY = 300; // å»¶è¿300msæ´æ°UI |
| | | let updateTimer = null; // 宿¶å¨å®ä¾ |
| | | |
| | | // ZHæ°æ®æ å°è§å |
| | | const zhStatusMap = { |
| | | R_ZH_Status: { |
| | | 1: "æ£å¸¸", |
| | | 2: "æ
é", |
| | |
| | | } |
| | | }; |
| | | |
| | | // 2. å®ä¹éè¦å
±ç¨æ å°è§åçåæ®µå表å对åºçæ å°è§å |
| | | const booleanFields = [ |
| | | "R_ZH_IsCanPut1", "R_ZH_IsCanTake1", |
| | | "W_ZH_PutRequest1", "W_ZH_PutFinish1", |
| | | "W_ZH_TakeRequest1", "W_ZH_TakeFinish1", |
| | | "R_ZH_IsCanPut2", "R_ZH_IsCanTake2", |
| | | "W_ZH_PutRequest2", "W_ZH_PutFinish2", |
| | | "W_ZH_TakeRequest2", "W_ZH_TakeFinish2", |
| | | "R_ZH_IsCanPut3", "R_ZH_IsCanTake3", |
| | | "W_ZH_PutRequest3", "W_ZH_PutFinish3", |
| | | "W_ZH_TakeRequest3", "W_ZH_TakeFinish3", |
| | | "R_ZH_IsCanPut4", "R_ZH_IsCanTake4", |
| | | "W_ZH_PutRequest4", "W_ZH_PutFinish4", |
| | | "W_ZH_TakeRequest4", "W_ZH_TakeFinish4", |
| | | ]; |
| | | const booleanMap = { |
| | | true: "æ¯", |
| | | false: "å¦" |
| | | // ZHåæ®µåç» |
| | | const zhFieldGroups = { |
| | | permissionFields: { |
| | | keys: ["R_ZH_IsCanPut1", "R_ZH_IsCanTake1", "R_ZH_IsCanPut2", "R_ZH_IsCanTake2", |
| | | "R_ZH_IsCanPut3", "R_ZH_IsCanTake3", "R_ZH_IsCanPut4", "R_ZH_IsCanTake4"], |
| | | map: { true: "æ¯", false: "å¦" } |
| | | }, |
| | | requestFields: { |
| | | keys: ["W_ZH_PutRequest1", "W_ZH_TakeRequest1", "W_ZH_PutRequest2", "W_ZH_TakeRequest2", |
| | | "W_ZH_PutRequest3", "W_ZH_TakeRequest3", "W_ZH_PutRequest4", "W_ZH_TakeRequest4"], |
| | | map: { true: "æ¯", false: "å¦" } |
| | | }, |
| | | finishFields: { |
| | | keys: ["W_ZH_PutFinish1", "W_ZH_TakeFinish1", "W_ZH_PutFinish2", "W_ZH_TakeFinish2", |
| | | "W_ZH_PutFinish3", "W_ZH_TakeFinish3", "W_ZH_PutFinish4", "W_ZH_TakeFinish4"], |
| | | map: { true: "æ¯", false: "å¦" } |
| | | }, |
| | | palletTypeFields: { |
| | | keys: ["R_ZH_TakePalletType1", "R_ZH_TakePalletType2", "R_ZH_TakePalletType3", "R_ZH_TakePalletType4", |
| | | "W_ZH_PutPalletType1", "W_ZH_PutPalletType2", "W_ZH_PutPalletType3", "W_ZH_PutPalletType4"], |
| | | map: { "-1": "空箱(-1)", 1: "å°æç(1)", 2: "䏿ç(2)", 3: "大æç(3)", 4: "ç¹å¤§æç(4)" } |
| | | } |
| | | }; |
| | | |
| | | // å¤çæ°æ®ï¼å
å¤çæ®éæ å°ï¼åæ¹éå¤çå
±ç¨æ å°çåæ®µ |
| | | const processData = (rawData) => { |
| | | // å¤çZHåå§æ°æ® |
| | | const processZHData = (rawData) => { |
| | | if (!rawData) return {}; |
| | | const processed = { ...rawData }; |
| | | const processedData = { ...rawData }; |
| | | |
| | | // å¤çæ®éåæ®µæ å° |
| | | Object.keys(statusMap).forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | const map = statusMap[key]; |
| | | processed[key] = map[processed[key]] || processed[key]; |
| | | // å¤çæ ¸å¿ç¶æå段 |
| | | Object.keys(zhStatusMap).forEach(key => { |
| | | if (processedData.hasOwnProperty(key)) { |
| | | processedData[key] = zhStatusMap[key][processedData[key]] || processedData[key]; |
| | | } |
| | | }); |
| | | |
| | | // æ¹éå¤çå
±ç¨æ å°è§åçåæ®µ |
| | | booleanFields.forEach(key => { |
| | | if (processed.hasOwnProperty(key)) { |
| | | processed[key] = booleanMap[processed[key]] || processed[key]; |
| | | } |
| | | // å¤çåç»å段 |
| | | Object.values(zhFieldGroups).forEach(group => { |
| | | group.keys.forEach(key => { |
| | | if (processedData.hasOwnProperty(key)) { |
| | | processedData[key] = group.map[processedData[key]] || processedData[key]; |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | return processed; |
| | | return processedData; |
| | | }; |
| | | |
| | | // å»¶è¿æ´æ°ZHæ°æ®ï¼é¿å
é«é¢å·æ° |
| | | const delayedUpdateZHData = (newRawData) => { |
| | | if (updateTimer) { |
| | | clearTimeout(updateTimer); |
| | | } |
| | | |
| | | updateTimer = setTimeout(() => { |
| | | // åªå¤çå
å«ZHç¹å¾åæ®µçæ°æ® |
| | | if (newRawData && newRawData.R_ZH_Status !== undefined) { |
| | | zhData.value = processZHData(newRawData); |
| | | |
| | | // æ´æ°æ ·å¼ |
| | | nextTick(() => { |
| | | const valueElements = document.getElementsByClassName("xzhi"); |
| | | for (let i = 0; i < valueElements.length; i++) { |
| | | if (valueElements[i].innerHTML === "æ¯") { |
| | | valueElements[i].style.color = "yellow"; |
| | | } else if (valueElements[i].innerHTML === "å¦") { |
| | | valueElements[i].style.color = "red"; |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }, UPDATE_DELAY); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | nextTick(() => { |
| | | setInterval(() => { |
| | | const rawData = store.state.homedata; |
| | | data.value = processData(rawData); |
| | | const xian = document.getElementsByClassName("xzhi"); |
| | | for (let i = 0; i < xian.length; i++) { |
| | | if (xian[i].innerHTML === "æ¯") { |
| | | xian[i].style.color = "yellow"; |
| | | } else if (xian[i].innerHTML === "å¦") { |
| | | xian[i].style.color = "red"; |
| | | } |
| | | // åå§å è½½æ°æ® |
| | | const initialData = store.state.homedata; |
| | | if (initialData && initialData.R_ZH_Status !== undefined) { |
| | | zhData.value = processZHData(initialData); |
| | | } |
| | | |
| | | // ç嬿°æ®ååï¼åªå¤çZHæ°æ® |
| | | const unwatch = watch( |
| | | () => store.state.homedata, |
| | | (newData) => { |
| | | if (newData && newData.R_ZH_Status !== undefined) { |
| | | delayedUpdateZHData(newData); |
| | | } |
| | | }); |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | |
| | | // ç»ä»¶å¸è½½æ¶æ¸
ç |
| | | onUnmounted(() => { |
| | | unwatch(); |
| | | if (updateTimer) { |
| | | clearTimeout(updateTimer); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | return { |
| | | data, |
| | | zhData |
| | | }; |
| | | } |
| | | }; |
| | |
| | | List<PPStockSelectViewDTO> PPGetPKStockSelectViews(int orderId, string materielCode); |
| | | |
| | | WebResponseContent UpdateExpirationlabel(); |
| | | |
| | | Task T0DingTalkText(string webhookUrl,string secret); |
| | | } |
| | | } |
| | |
| | | using AutoMapper; |
| | | using MailKit.Search; |
| | | using Newtonsoft.Json; |
| | | using OfficeOpenXml.FormulaParsing.Excel.Functions.RefAndLookup; |
| | | using SqlSugar; |
| | | using System; |
| | | using System.Collections.Generic; |
| | | using System.Linq; |
| | | using System.Net.Http; |
| | | using System.Text; |
| | | using System.Threading.Tasks; |
| | | using WIDESEA_Common.StockEnum; |
| | |
| | | try |
| | | { |
| | | var today = DateTime.Today; |
| | | int batchSize = 1000; // æ¹æ¬¡å¤çå¤§å° |
| | | int batchSize = 1000; |
| | | int totalUpdated = 0; |
| | | int skipCount = 0; |
| | | |
| | | // åªæ¥è¯¢éè¦çåæ®µï¼åå°æ°æ®ä¼ è¾åå
åå ç¨ |
| | | var query = BaseDal.Db.Queryable<Dt_StockInfoDetail>() |
| | | .InnerJoin<Dt_StockInfo>((detail, master) => detail.StockId == master.Id) |
| | | .Select((detail, master) => new |
| | |
| | | MasterId = master.Id, |
| | | master.WarehouseId, |
| | | detail.EffectiveDate, |
| | | CurrentExpirationlabel = master.Expirationlabel // ç¨äºå¤ææ¯å¦éè¦æ´æ° |
| | | CurrentExpirationlabel = master.Expirationlabel |
| | | }); |
| | | |
| | | // åæ¹å¤çï¼ä½¿ç¨TakeåSkipå®ç°å页 |
| | | var totalUpdated = 0; |
| | | int skipCount = 0; |
| | | |
| | | while (true) |
| | | { |
| | | // 使ç¨SkipåTakeå®ç°å页è·åæ°æ® |
| | | var batchData = query.Skip(skipCount).Take(batchSize).ToList(); |
| | | if (!batchData.Any()) break; // æ²¡ææ´å¤æ°æ®æ¶éåºå¾ªç¯ |
| | | if (!batchData.Any()) break; |
| | | var groupedData = batchData.GroupBy(item => item.MasterId) |
| | | .Select(g => new |
| | | { |
| | | MasterId = g.Key, |
| | | WarehouseId = g.First().WarehouseId, |
| | | // åææ©çæææ¥æ |
| | | EarliestEffectiveDate = g.Min(item => |
| | | { |
| | | DateTime.TryParse(item.EffectiveDate, out DateTime date); |
| | | return date; |
| | | }), |
| | | CurrentExpirationlabel = g.First().CurrentExpirationlabel |
| | | }) |
| | | .ToList(); |
| | | |
| | | var updateDic = new Dictionary<long, int>(); |
| | | |
| | | foreach (var item in batchData) |
| | | foreach (var group in groupedData) |
| | | { |
| | | if (!DateTime.TryParse(item.EffectiveDate, out DateTime effectiveDate)) |
| | | continue; |
| | | DateTime effectiveDate = group.EarliestEffectiveDate; |
| | | if (effectiveDate == default(DateTime)) // å¤çè§£æå¤±è´¥çæ
åµ |
| | | { |
| | | Console.WriteLine($"主表ID {group.MasterId} 䏿 æææ¥æï¼è·³è¿"); |
| | | continue; |
| | | } |
| | | |
| | | int newLabel; |
| | | if (effectiveDate < today) |
| | | { |
| | | newLabel = ExpirationlabelEnum.è¿æ.ObjToInt(); |
| | | } |
| | | else if (item.WarehouseId == 3) |
| | | else if (group.WarehouseId == 3) |
| | | { |
| | | int daysDiff = (effectiveDate - today).Days; |
| | | newLabel = daysDiff <= 60 ? ExpirationlabelEnum.临æé¢è¦.ObjToInt() : ExpirationlabelEnum.æªä¸´æ.ObjToInt(); |
| | | newLabel = daysDiff < 60 |
| | | ? ExpirationlabelEnum.临æé¢è¦.ObjToInt() |
| | | : ExpirationlabelEnum.æªä¸´æ.ObjToInt(); |
| | | } |
| | | else |
| | | { |
| | | int daysDiff = (effectiveDate - today).Days; |
| | | newLabel = daysDiff <= 30 ? ExpirationlabelEnum.临æé¢è¦.ObjToInt() : ExpirationlabelEnum.æªä¸´æ.ObjToInt(); |
| | | newLabel = daysDiff < 30 |
| | | ? ExpirationlabelEnum.临æé¢è¦.ObjToInt() |
| | | : ExpirationlabelEnum.æªä¸´æ.ObjToInt(); |
| | | } |
| | | |
| | | // åªæ´æ°æååçå¼ï¼å¹¶ä¸å»é |
| | | if (newLabel != item.CurrentExpirationlabel && !updateDic.ContainsKey(item.MasterId)) |
| | | if (newLabel != group.CurrentExpirationlabel && !updateDic.ContainsKey(group.MasterId)) |
| | | { |
| | | updateDic[item.MasterId] = newLabel; |
| | | updateDic[group.MasterId] = newLabel; |
| | | } |
| | | } |
| | | |
| | | if (updateDic.Any()) |
| | | { |
| | | // æå»ºæ¹éæ´æ°è¯å¥ |
| | | var updateBuilder = BaseDal.Db.Updateable<Dt_StockInfo>(); |
| | | foreach (var kvp in updateDic) |
| | | { |
| | | updateBuilder.SetColumns(m => m.Expirationlabel == kvp.Value) |
| | | .Where(m => m.Id == kvp.Key); |
| | | } |
| | | totalUpdated += updateBuilder.ExecuteCommand(); |
| | | var idsToUpdate = updateDic.Keys.ToList(); |
| | | int updateValue = updateDic.First().Value; |
| | | updateBuilder.SetColumns(m => m.Expirationlabel == updateValue) |
| | | .Where(m => idsToUpdate.Contains(m.Id)); |
| | | |
| | | int batchUpdated = updateBuilder.ExecuteCommand(); |
| | | totalUpdated += batchUpdated; |
| | | |
| | | Console.WriteLine($"æ¹æ¬¡æ´æ°ï¼{batchUpdated} æ¡ï¼ç´¯è®¡æ´æ°ï¼{totalUpdated} æ¡ï¼æ´æ°æ¡ä»¶ï¼{JsonConvert.SerializeObject(idsToUpdate)}"); |
| | | } |
| | | skipCount += batchSize; // åå¤è·åä¸ä¸æ¹æ°æ® |
| | | |
| | | skipCount += batchSize; |
| | | } |
| | | |
| | | return WebResponseContent.Instance.OK($"æ´æ°æåï¼å
±æ´æ° {totalUpdated} æ¡è®°å½"); |
| | | } |
| | | catch (Exception ex) |
| | |
| | | return WebResponseContent.Instance.Error("æ´æ°å¤±è´¥ï¼è¯·è系管çå"); |
| | | } |
| | | } |
| | | /// <summary> |
| | | /// ééæºå¨äººæ¶æ¯æ¨éæµè¯ |
| | | /// </summary> |
| | | /// <returns></returns> |
| | | public async Task T0DingTalkText(string webhookUrl, string secret) |
| | | { |
| | | try |
| | | { |
| | | if (webhookUrl == null || secret == null) |
| | | { |
| | | webhookUrl = "https://oapi.dingtalk.com/robot/send?access_token=fbc3aaf4133ea650d8116fb86b3ebfd0c5e0d46775966ce87893a41886bdf9dc"; |
| | | secret = "SECf221842b26356f22ccac84c4e60714e5287408ee8332a8f63503791382c3f5fb"; |
| | | } |
| | | HttpClient httpClient = new HttpClient(); |
| | | ///è·åæ¶é´æ³ |
| | | var timestamp = DateTimeOffset.Now.ToUnixTimeMilliseconds(); |
| | | ///çæç¾å |
| | | var sign = GenerateSign(timestamp,secret); |
| | | // æå»ºè¯·æ±URL |
| | | var url = $"{webhookUrl.Split('?')[0]}?access_token={new Uri(webhookUrl).Query.Split('=')[1]}×tamp={timestamp}&sign={sign}"; |
| | | var requestBody = new |
| | | { |
| | | msgtype = "text", |
| | | text = new { content = "å°æ´ä¸»äººè¯´: å°æ´è¦åå°å¦å¤©ä¸ç¬¬ä¸ææå¥½" }, |
| | | }; |
| | | var jsonBody = JsonConvert.SerializeObject(requestBody); |
| | | var content = new StringContent(jsonBody, Encoding.UTF8, "application/json"); |
| | | |
| | | // åéPOSTè¯·æ± |
| | | var response = await httpClient.PostAsync(url, content); |
| | | if (!response.IsSuccessStatusCode) |
| | | { |
| | | // å¤ç请æ±å¤±è´¥çæ
åµ |
| | | var errorContent = await response.Content.ReadAsStringAsync(); |
| | | throw new Exception($"ééæ¶æ¯åé失败ï¼ç¶æç : {response.StatusCode}ï¼é误å
容: {errorContent}"); |
| | | } |
| | | } |
| | | catch(Exception ex) |
| | | { |
| | | throw new Exception($"ééæ¶æ¯åé失败ï¼é误å
容: {ex.Message}"); |
| | | } |
| | | } |
| | | |
| | | /// <summary> |
| | | /// çæå ç¾ç¾å |
| | | /// </summary> |
| | | /// <param name="timestamp">æ¶é´æ³</param> |
| | | /// <returns>ç¾å</returns> |
| | | private string GenerateSign(long timestamp,string secret) |
| | | { |
| | | var stringToSign = $"{timestamp}\n{secret}"; |
| | | using (var hmacsha256 = new System.Security.Cryptography.HMACSHA256(Encoding.UTF8.GetBytes(secret))) |
| | | { |
| | | var hashBytes = hmacsha256.ComputeHash(Encoding.UTF8.GetBytes(stringToSign)); |
| | | return Convert.ToBase64String(hashBytes).Replace("+", "%2B").Replace("/", "%2F"); |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | { |
| | | return Service.UpdateExpirationlabel(); |
| | | } |
| | | |
| | | /// <summary> |
| | | /// ééæºå¨äººæ¶æ¯æ¨éæµè¯ |
| | | /// </summary> |
| | | /// <param name="saveModel"></param> |
| | | /// <returns></returns> |
| | | [HttpPost, HttpGet, Route("T0DingTalkText"), AllowAnonymous] |
| | | public Task T0DingTalkText(string webhookUrl, string secret) |
| | | { |
| | | return Service.T0DingTalkText(webhookUrl, secret); |
| | | } |
| | | } |
| | | } |