From 82008a07191354da957173b9ec9ce11ca789f9aa Mon Sep 17 00:00:00 2001 From: baoshiwei <baoshiwei@shlanbao.cn> Date: 星期四, 24 七月 2025 14:49:55 +0800 Subject: [PATCH] feat(bigScreen): 新增大屏展示页面 --- src/views/dry/repair/DryRepairRecords.api.ts | 70 + src/views/dry/bigScreen/BigEqp-tjt.vue | 94 + src/enums/pageEnum.ts | 4 src/views/dry/repair/DryRepairRecords.data.ts | 305 +++++ src/views/dry/repair/DryRepairRecords_menu_insert.sql | 26 src/views/dry/repair/components/DryRepairRecordsForm.vue | 70 + src/assets/images/dry/bg/223.png | 0 src/views/dry/bigScreen/BigWorkShop-tjt.vue | 736 +++++++++++++ src/router/guard/permissionGuard.ts | 6 src/views/dry/repair/DryRepairRecordsList.vue | 211 +++ src/views/dry/repair/components/DryRepairRecordsModal.vue | 74 + src/views/dry/bigScreen/BigWorkShop.vue | 23 src/views/dry/bigScreen/EqpSplit.vue | 1723 ++++++++++++++++++++++++++++++ src/views/dry/bigScreen/BigEqp.vue | 5 src/router/routes/index.ts | 4 15 files changed, 3,339 insertions(+), 12 deletions(-) diff --git a/src/assets/images/dry/bg/223.png b/src/assets/images/dry/bg/223.png new file mode 100644 index 0000000..6740dab --- /dev/null +++ b/src/assets/images/dry/bg/223.png Binary files differ diff --git a/src/enums/pageEnum.ts b/src/enums/pageEnum.ts index 7c48680..adae3bf 100644 --- a/src/enums/pageEnum.ts +++ b/src/enums/pageEnum.ts @@ -1,6 +1,10 @@ export enum PageEnum { // basic login path BASE_LOGIN = '/login', + + BIG_SCREEN = '/bigScreen', + + BIG_EQP = '/bigEqp', // basic home path BASE_HOME = '/dashboard/workshop', // error page path diff --git a/src/router/guard/permissionGuard.ts b/src/router/guard/permissionGuard.ts index b4c1767..d535e68 100644 --- a/src/router/guard/permissionGuard.ts +++ b/src/router/guard/permissionGuard.ts @@ -12,6 +12,10 @@ import { isOAuth2AppEnv } from '/@/views/sys/login/useLogin'; const LOGIN_PATH = PageEnum.BASE_LOGIN; + +const BIG_SCREEN_PATH = PageEnum.BIG_SCREEN; + +const BIG_EQP_PATH = PageEnum.BIG_EQP; //auth2鐧诲綍璺敱 const OAUTH2_LOGIN_PAGE_PATH = PageEnum.OAUTH2_LOGIN_PAGE_PATH; @@ -22,7 +26,7 @@ //update-begin---author:wangshuai ---date:20220629 for锛歔issues/I5BG1I]vue3涓嶆敮鎸乤uth2鐧诲綍------------ //update-begin---author:wangshuai ---date:20221111 for: [VUEN-2472]鍒嗕韩鍏嶇櫥褰�------------ -const whitePathList: PageEnum[] = [LOGIN_PATH, OAUTH2_LOGIN_PAGE_PATH,SYS_FILES_PATH]; +const whitePathList: PageEnum[] = [LOGIN_PATH, OAUTH2_LOGIN_PAGE_PATH,SYS_FILES_PATH,BIG_SCREEN_PATH, BIG_EQP_PATH]; //update-end---author:wangshuai ---date:20221111 for: [VUEN-2472]鍒嗕韩鍏嶇櫥褰�------------ //update-end---author:wangshuai ---date:20220629 for锛歔issues/I5BG1I]vue3涓嶆敮鎸乤uth2鐧诲綍------------ diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts index 3d24577..faef76e 100644 --- a/src/router/routes/index.ts +++ b/src/router/routes/index.ts @@ -42,7 +42,7 @@ export const BigScreen: AppRouteRecordRaw = { path: '/bigScreen', name: 'BigScreen', - component: () => import('/@/views/dry/bigScreen/BigWorkShop.vue'), + component: () => import('/@/views/dry/bigScreen/BigWorkShop-tjt.vue'), meta: { title: t('big.screen.workshop'), }, @@ -58,7 +58,7 @@ export const BigEqp: AppRouteRecordRaw = { path: '/bigEqp', name: 'BigEqp', - component: () => import('/@/views/dry/bigScreen/BigEqp.vue'), + component: () => import('/src/views/dry/bigScreen/BigEqp-tjt.vue'), meta: { title: t('big.screen.eqp'), }, diff --git a/src/views/dry/bigScreen/BigEqp-tjt.vue b/src/views/dry/bigScreen/BigEqp-tjt.vue new file mode 100644 index 0000000..bf99859 --- /dev/null +++ b/src/views/dry/bigScreen/BigEqp-tjt.vue @@ -0,0 +1,94 @@ +<template> + <dv-full-screen-container> + <div class="eqpBox"> + <div class="eqpRow"> + <div class="eqpImage" :style="{ 'background-position': position + 'px' }"> + <eqp-split :num="eqpNum"></eqp-split> + <div style="width: 10px"></div> + <eqp-split :num="eqpNum2"></eqp-split> + + </div> + </div> + </div> + </dv-full-screen-container> +</template> + +<script setup lang="ts"> + import { useFullscreen } from '@vueuse/core' + import { router } from '/@/router' + import { onMounted, ref, onUnmounted } from 'vue' + + import { dryEquipment } from '../dataDefine/DryEquipment.data' + import EqpSplit from "/@/views/dry/bigScreen/EqpSplit.vue"; + + + const domRef = ref<Nullable<HTMLElement>>(null) + const { enter, toggle, exit, isFullscreen } = useFullscreen() + + const { toggle: toggleDom } = useFullscreen(domRef) + const position = ref(1) + const Timer2 = ref() + + + console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query) + const eqp = ref({} as dryEquipment) + const eqpNum = ref(router.currentRoute.value.query.num || 0) + const eqpNum2 = ref(parseInt(router.currentRoute.value.query.num) + 1 || 1) + + + + var move = true + function moveImage() { + if (move) { + position.value -= 0.3 + } else { + position.value += 0.3 + } + if (position.value < -240) { + move = false + } + if (position.value > -1) { + move = true + } + } + + function back() { + router.back() + } + //queryEqp() + // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛� + onMounted(() => { + + Timer2.value = setInterval(moveImage, 50) + }) + + onUnmounted(() => { + + clearInterval(Timer2.value) + + Timer2.value = null + }) +</script> + +<style scoped> + .eqpBox { + height: 100%; + } + .eqpRow { + } + .eqpImage { + height: 1080px; + width: 1920px; + background-image: url(/src/assets/images/dry/bg.png); + background-repeat: no-repeat; + color: white; + /*background-position: 160px 280px; */ + /* background-color: red; */ + background-size: 120%; + padding: 10px; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + } + +</style> diff --git a/src/views/dry/bigScreen/BigEqp.vue b/src/views/dry/bigScreen/BigEqp.vue index 584a7c7..e6cb79e 100644 --- a/src/views/dry/bigScreen/BigEqp.vue +++ b/src/views/dry/bigScreen/BigEqp.vue @@ -572,7 +572,7 @@ import 'echarts-liquidfill' import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index' import { defHttp } from '/@/utils/http/axios' - import { queryById, listAll } from '../api/DryEquipment.api' + import { queryById } from '../api/DryEquipment.api' import { dryEquipment } from '../dataDefine/DryEquipment.data' import { useUserStore } from '/@/store/modules/user' import { getTenantId, getToken } from '/@/utils/auth' @@ -1499,7 +1499,8 @@ } function listAllEqp() { - listAll({ enable: 'Y' }) + let tenantId = getTenantId() + defHttp.get({ url: '/dry/real/queryAllEqps', params: { tenantId: tenantId,enable: 'Y' } }) .then((result) => { //console.log(`output->result`, result) eqps.value = result diff --git a/src/views/dry/bigScreen/BigWorkShop-tjt.vue b/src/views/dry/bigScreen/BigWorkShop-tjt.vue new file mode 100644 index 0000000..b80dbe9 --- /dev/null +++ b/src/views/dry/bigScreen/BigWorkShop-tjt.vue @@ -0,0 +1,736 @@ +<template> + <dv-full-screen-container> + <div class="fbg"> + <div class="bgImage"> + <div class="head"> + <div style="width: 600px; height: 50px"> <dv-decoration-8 style="width: 500px; height: 50px" /></div> + + <div class="title"> + <span>{{ title }}</span> + + <dv-decoration-5 :dur="20" style="margin-top: -40px; width: 700px; height: 80px" /> + </div> + <div style="width: 600px; height: 50px; display: flex; justify-content: end"> + <dv-decoration-8 :reverse="true" style="width: 500px; height: 50px" + /></div> + </div> + <div class="body"> + <div class="humiture"> + <div style="display: flex; width: 120px"> + <Icon style="color: #ba9853" icon="mdi:home-temperature-outline" :size="28" /> + + <div style="font-size: 20px; line-height: 26px"> {{ envTemp }} 鈩� </div> + </div> + <div style="display: flex"> + <Icon style="color: #ba9853" icon="wi:humidity" :size="28" /> + + <div style="font-size: 20px; line-height: 26px"> {{ envHum }} %rh </div> + </div> + </div> + <div class="feed"> + <div style="width: 700px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between"> + <div style="display: flex; flex-wrap: wrap; justify-content: space-between"> + <dv-border-box7 style="width: 210px; height: 100px; padding: 10px"> + <div class="statistics putincolor"> + <div class="stat_label font16"> 鎬绘姇鏂欓噺 </div> + <div class="stat_value"> + {{ originWeight?.toFixed(2) || 0 }} + <span class="font16"> Kg </span> + </div> + <div class="stat_avg"> + <div> 棰勮浜ч噺 </div> + <div> {{ totalYield?.toFixed(2) || 0 }} kg </div> + </div> + </div> + </dv-border-box7> + <dv-border-box7 style="width: 210px; height: 100px; padding: 10px"> + <div class="statistics putincolor"> + <div class="stat_label font16"> 鐢甸噺娑堣�� </div> + <div class="stat_value"> + {{ watt?.toFixed(2) || 0 }} + <span class="font16"> Kwh </span> + </div> + <div class="stat_avg"> + <div> 骞冲潎鐢佃�� </div> + <div> {{ wattAvg?.toFixed(2) || 0 }} Kwh/kg </div> + </div> + </div> + </dv-border-box7> + <dv-border-box7 style="width: 210px; height: 100px; padding: 10px"> + <div class="statistics putincolor"> + <div class="stat_label font16"> 钂告苯娑堣�� </div> + <div class="stat_value"> + {{ steam?.toFixed(2) || 0 }} + <span class="font16"> m鲁 </span> + </div> + <div class="stat_avg"> + <div> 骞冲潎姹借�� </div> + <div> {{ steamAvg?.toFixed(2) || 0 }} m鲁/kg </div> + </div> + </div> + </dv-border-box7> + <!-- <div class="statistics putincolor"> + <div class="stat_label font16">棰勮浜ч噺</div> + <div class="stat_value">3000</div> + + <div class="font16"> + <br/> + Kg + </div> + </div> --> + </div> + + <div> + <!-- <div class="statistics electroncolor"> + <div class="stat_label font16">鐢甸噺娑堣��</div> + <div class="stat_value">500</div> + <div class="font16"> + <br/> + Kwh + </div> + + </div> + <div class="statistics steamcolor"> + <div class="stat_label font16">钂告苯娑堣��</div> + <div class="stat_value">300</div> + <div class="font16"> + <br/> + m鲁 + </div> + + </div> + + <div class="statistics electroncolor"> + <div class="stat_label font16">骞冲潎鐢佃��</div> + <div class="stat_value">12</div> + <div class="font16"> + <br/> + Kwh/kg + </div> + + </div> + <div class="statistics steamcolor"> + <div class="stat_label font16">骞冲潎姹借��</div> + <div class="stat_value">300</div> + <div class="font16"> + <br/> + m鲁/kg + </div> + + </div> --> + </div> + </div> + <!-- <div style="padding-right: 100px;"> + <div class="statistics"> + <div class="stat_label font16">骞叉枡浜ч噺</div> + <div class="stat_value">300</div> + <div class="font16"> + <br/> + kg + </div> + + </div> + </div> --> + </div> + <div class="up"> + <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }"> + <div class="eqpInfoup" @click="gotoeqp(num - 1)"> + <div class="eqp-title"> + <div class="herb_weight"> + <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div> + <div>{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div> + </div> + <!-- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '棰勭暀' }}</div> --> + <!-- <div class="process"> </div> --> + <Progress + :stroke-color="{ + from: '#108ee9', + to: '#87d068', + }" + :percent="parseFloat(realTime.get(eqpCodes[num - 1])?.percent || '0')" + status="active" + trailColor="#2b2b2b2b" + :show-info="false" + /> + <div class="eqp-timer"> + <div + ><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" /> + {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture?.toFixed(1) || '0' }} % + </div> + <div + ><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" /> + {{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} 鈩� + </div> + <div + ><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> + {{ realTime.get(eqpCodes[num - 1])?.totalRemain || 0 }} min + </div> + </div> + </div> + <div class="eqp-info-up"> + <!-- <div class="herb"> + <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div> + + </div> --> + </div> + <!-- <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div> --> + + <div class="weight" + ><div class="herb"> + {{ showInfo(realTime.get(eqpCodes[num - 1])) }} + </div></div + > + <div class="water"> + <div class="eqp_num">{{ num }}</div> + <!-- <div class="temp"> + <div style="line-height: 28px"><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div> + <div class="font"> + <span class="value"> {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture || '0' }}</span> % + </div> + </div> + <div class="temp"> + <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div> + <div class="font"> + <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp || '0' }} </span> 鈩� + </div> + </div> --> + </div> + </div> + </div> + </div> + <div class="down"> + <div v-for="num in eqpNum2" :key="num" :class="{ two: num === 1, three: num === 2, four_down: num === 3 }"> + <div class="eqpInfodown" @click="gotoeqp(num + 3)"> + <!-- <div class="eqp-info-down"> + <div class="herb">{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div> + </div> + <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg </div></div> --> + <div class="weight" + ><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div + > + <div class="water"> + <div class="eqp_num">{{ num - 2 * num + 3 * num + 1 }}</div> + <!-- <div class="temp"> + <div style="line-height: 28px"> + <Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> + </div> + <div class="font"> + <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture || '0' }}</span> % + </div> + </div> + <div class="temp"> + <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div> + <div class="font"> + <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> 鈩� + </div> + </div> --> + </div> + + <div style="height: 40px"></div> + <div class="eqp-title"> + <div class="herb_weight"> + <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div> + <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div> + </div> + + <Progress + :stroke-color="{ + from: '#108ee9', + to: '#87d068', + }" + :percent="parseFloat(realTime.get(eqpCodes[num + 3])?.percent || '0')" + status="active" + trailColor="#2b2b2b2b" + :show-info="false" + /> + <!-- <div class="eqp-name">50%</div> --> + <div class="eqp-timer"> + <div + ><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" /> + {{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture?.toFixed(1) || '0' }} % + </div> + <div + ><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" /> + {{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} 鈩� + </div> + <!-- <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" /> + {{realTime.get(eqpCodes[num + 3])?.dryTime || 0}} min + </div> --> + <div + ><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> + {{ realTime.get(eqpCodes[num + 3])?.totalRemain || 0 }} min + </div> + </div> + </div> + </div> + </div> + </div> + + <div class="footer"> + <div>{{ nowDate }}</div> + <div>{{ nowTime }}</div> + </div> + </div> + </div> + </div> + <div style="position: absolute; width: 10px; height: 10px; border: 1px red solid; z-index: 1000"> </div> + </dv-full-screen-container> +</template> + +<script setup lang="ts"> + import { Progress } from 'ant-design-vue' + import { onMounted, ref, onUnmounted } from 'vue' + import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index' + import { listAll } from '../api/DryEquipment.api' + import { dryEquipment } from '../dataDefine/DryEquipment.data' + import { router } from '/@/router' + import { defHttp } from '/@/utils/http/axios' + import { useUserStore } from '/@/store/modules/user' + import { setAuthCache } from '/@/utils/auth' + import { TENANT_ID } from '/@/enums/cacheEnum' + const eqpNum = ref(4) + const eqpNum2 = ref(3) + const eqpMap = ref(new Map()) + const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007']) + const eqps = ref([] as dryEquipment[]) + const title = ref('鏅鸿兘骞茬嚗杞﹂棿') + + const userStore = useUserStore() + const tenantId = ref(router.currentRoute.value.query.tenantId | userStore.getTenant) + setAuthCache(TENANT_ID, tenantId.value) + console.log('tenantId1', router.currentRoute.value.query.tenantId) + console.log('tenantId2', userStore.getTenant) + const envHum = ref(0) + const envTemp = ref(0) + const originWeight = ref(0) + const totalYield = ref(0) + const dryReduce = ref(0) + const steam = ref(0) + const watt = ref(0) + + const steamAvg = ref(0) + const wattAvg = ref(0) + console.log(userStore.dictItems.title) + userStore.dictItems.title?.forEach((element) => { + if (element.value === 'bigscreentitle') { + title.value = element.text + } + }) + const Timer = ref() + + const realTime = ref(new Map()) + const nowTime = ref() + const nowDate = ref() + + function listAllEqp() { + defHttp + .get({ url: '/dry/real/queryAllEqps', params: { tenantId: tenantId.value, enable: 'Y' } }) + .then((result) => { + console.log(`output->result`, result) + eqps.value = result + + result.forEach((item) => { + eqpMap.value.set(item.code, item) + }) + updateRealTime() + }) + .catch((err) => { + console.log(`output->err`, err) + }) + } + + function updateRealTime() { + //console.log(`output->瀹氭椂鍒锋柊鏁版嵁`) + + queryWorkShopStatistics() + + eqps.value.forEach((item) => { + queryRealTime(item) + }) + } + + function queryWorkShopStatistics() { + defHttp.get({ url: '/dry/real/workshopStatistics', params: { tenantid: tenantId.value } }).then((res) => { + console.log(`output->res`, res) + steam.value = res.steam + watt.value = res.watt + envHum.value = res.envHum + envTemp.value = res.envTemp + originWeight.value = res.originWeight + totalYield.value = res.yield + dryReduce.value = res.reduce + if (res.reduce > 0) { + steamAvg.value = res.steam / res.reduce + wattAvg.value = res.watt / res.reduce + } + }) + } + + function queryRealTime(eqp: dryEquipment) { + let eqpCode = eqp.code + let queryRealTimeUrl = '/dry/real/getRealTimeData' + defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId.value, machineid: eqpCode } }).then((res) => { + if (res && res.trendVo) { + res.tempValue = [res.windTemp, 100] + res.totalRemain = res.remain + if (res.detailList && res.detailList.length > 0) { + // 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級 + res.totalRemain = res.remain - (res.dryTime - res.detailList[res.detailList.length - 1].totalTime) + } else { + res.totalRemain = res.remain - res.dryTime + } + if (res.totalRemain < 0) { + res.totalRemain = 0 + } + + res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2) + } else { + res = { + tempValue: [0, 100], + percent: 0, + mois: [], + } + } + + realTime.value.set(eqp.code, res) + }) + } + function gotoeqp(num) { + console.log('璺宠浆鏈哄彴', num) + if (num < eqpCodes.value.length) { + router.push({ path: '/bigEqp', query: { num: num } }) + } + } + + function getNowTime() { + var date = new Date() + nowDate.value = + date.getFullYear() + + '/' + + (date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + + '/' + + (date.getDay() < 10 ? '0' + date.getDay() : date.getDay()) + nowTime.value = + '' + + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + + ':' + + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + } + + function showInfo(data) { + return data ? (data.fault ? data.fault : data.warning ? data.warning : data.level ? data.level : '绌洪棽') : '绌洪棽' + } + + getNowTime() + listAllEqp() + onMounted(() => { + Timer.value = setInterval(updateRealTime, 3000) + setInterval(getNowTime, 10000) + }) + + onUnmounted(() => { + clearInterval(Timer.value) + Timer.value = null + }) +</script> + +<style scoped> + .fbg { + height: 1080px; + width: 1920px; + background-image: url(/src/assets/images/dry/bg/bg5.png); + background-repeat: no-repeat; + } + .bgImage { + height: 1080px; + width: 1920px; + background-image: url(/src/assets/images/dry/bg/223.png); + background-repeat: no-repeat; + background-size: 104%; + background-position: 0px 257px; + } + + .head { + display: flex; + align-content: center; + justify-content: center; + } + + .body { + height: 980px; + width: 100%; + margin-top: -100px; + font-size: 20px; + } + .title { + height: 200px; + padding: 20px; + font-size: 30px; + font-weight: bold; + text-align: center; + color: white; + } + + .humiture { + height: 0px; + justify-content: center; + color: white; + display: flex; + } + + .feed { + display: flex; + height: 0px; + color: gray; + padding-top: 20px; + justify-content: space-between; + } + + .up { + display: flex; + + align-content: center; + justify-content: flex-start; + } + .down { + padding-left: 554px; + margin-top: -760px; + display: flex; + + align-content: center; + justify-content: flex-start; + } + .eqpInfoup { + width: 304px; + height: 400px; + position: relative; + display: flex; + flex-direction: column; + } + + .eqpInfodown { + width: 300px; + height: 430px; + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-start; + } + + .one { + margin: 278px 10px; + } + + .two { + margin: 208px 23px; + } + + .three { + margin: 110px 158px; + } + + .four { + margin: 16px 10px; + } + + .four_down { + margin: 4px 74px; + } + + .eqp-title { + height: 125px; + + width: 100%; + + padding: 10px 20px; + } + + .eqp-name { + line-height: 30px; + text-align: center; + color: white; + margin-top: -30px; + } + + .eqp-timer { + line-height: 30px; + text-align: center; + color: white; + margin-top: 6px; + justify-content: space-between; + display: flex; + } + + .eqp-name-down { + line-height: 40px; + text-align: center; + color: white; + } + + .process { + width: 50%; + height: 100%; + overflow: hidden; + border-radius: 20px; + background: #3f4c6b; + } + + .eqp-info-up { + flex: 1; + padding-top: 108px; + display: flex; + } + + .weight { + flex: 1; + display: flex; + margin-left: 46px; + font-size: 20px; + } + + .eqp-info-down { + flex: 1; + padding-top: 70px; + display: flex; + } + + .herb { + height: 32px; + background: #3f4c6b; + color: white; + line-height: 30px; + padding: 0 10px; + } + .water { + height: 120px; + width: 110px; + margin: 58px 158px; + display: flex; + flex-wrap: wrap; + } + + .temp { + display: flex; + } + .font { + line-height: 26px; + } + + .footer { + height: 160px; + display: flex; + padding: 10px 20px; + font-size: 30px; + flex-direction: column-reverse; + align-items: flex-end; + color: white; + line-height: 40px; + margin-top: -150px; + } + :deep() .progress { + padding: 25px 25px; + + width: 360px; + display: flex; + } + :deep() .ant-progress-bg { + height: 25px !important; + } + :deep() .ant-progress-inner { + background-color: rgb(197 197 197 / 84%) !important; + } + + .statistics { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + .stat_label { + width: 45px; + } + + .stat_value { + font-size: 28px; + } + + .herb_weight { + padding: 0 10px; + color: white; + display: flex; + justify-content: space-between; + } + .eqp_num { + font-weight: bold; + width: 40px; + height: 40px; + background: #a0782e; + border-radius: 50px; + /* text-align: center; */ + font-size: 23px; + color: white; + display: flex; + justify-content: center; + align-items: center; + } + + .putincolor { + color: antiquewhite; + } + + .electroncolor { + color: aquamarine; + } + + .steamcolor { + color: sandybrown; + } + .font16 { + font-size: 16px; + } + .stat_avg { + width: 100%; + font-size: 16px; + display: flex; + color: rgb(176, 176, 176); + justify-content: space-between; + border-top: 1px solid; + margin-top: 6px; + } + @keyframes flowLight { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } + } + @keyframes flowLightUp { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } + } + .up .eqp-title::after { + content: ""; + position: absolute; + left: 90px; + top: 34%; + width: 65px; + height: 6px; + background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px); + transform: rotate(105deg) translateY(-107%); + + background-size: 200% 100%; + animation: flowLightUp 10s infinite linear; + + } + + .down .eqp-title::after { + content: ""; + position: absolute; + left: 99px; + top: 57%; + width: 128px; + height: 6px; + background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px); + transform: rotate(105deg) translateY(-107%); + background-size: 200% 100%; + animation: flowLight 15s infinite linear; + } + +</style> diff --git a/src/views/dry/bigScreen/BigWorkShop.vue b/src/views/dry/bigScreen/BigWorkShop.vue index 1ed239e..aa59bc9 100644 --- a/src/views/dry/bigScreen/BigWorkShop.vue +++ b/src/views/dry/bigScreen/BigWorkShop.vue @@ -285,12 +285,19 @@ import { router } from '/@/router' import { defHttp } from '/@/utils/http/axios' import { useUserStore } from '/@/store/modules/user' + import {setAuthCache} from "/@/utils/auth"; + import {TENANT_ID} from "/@/enums/cacheEnum"; const eqpNum = ref(4) const eqpMap = ref(new Map()) const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007', 'GM008']) const eqps = ref([] as dryEquipment[]) const title = ref('鏅鸿兘骞茬嚗杞﹂棿') + const userStore = useUserStore() + const tenantId = ref(router.currentRoute.value.query.tenantId | userStore.getTenant) + setAuthCache(TENANT_ID, tenantId.value) + console.log('tenantId1', router.currentRoute.value.query.tenantId) + console.log('tenantId2', userStore.getTenant) const envHum = ref(0) const envTemp = ref(0) const originWeight = ref(0) @@ -314,7 +321,7 @@ const nowDate = ref() function listAllEqp() { - listAll({ enable: 'Y' }) + defHttp.get({ url: '/dry/real/queryAllEqps', params: { tenantId: tenantId.value,enable: 'Y' } }) .then((result) => { console.log(`output->result`, result) eqps.value = result @@ -340,8 +347,8 @@ } function queryWorkShopStatistics() { - let tenantId = userStore.getTenant - defHttp.get({ url: '/dry/real/workshopStatistics', params: { tenantid: tenantId } }).then((res) => { + + defHttp.get({ url: '/dry/real/workshopStatistics', params: { tenantid: tenantId.value } }).then((res) => { console.log(`output->res`, res) steam.value = res.steam watt.value = res.watt @@ -358,17 +365,19 @@ } function queryRealTime(eqp: dryEquipment) { - let tenantId = userStore.getTenant + let eqpCode = eqp.code let queryRealTimeUrl = '/dry/real/getRealTimeData' - defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => { + defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId.value, machineid: eqpCode } }).then((res) => { if (res && res.trendVo) { res.tempValue = [res.windTemp, 100] res.totalRemain = res.remain - if (res.detailList) { + if (res.detailList && res.detailList.length > 0) { // 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級 res.totalRemain = res.remain - (res.dryTime - res.detailList[res.detailList.length - 1].totalTime) - } + } else { + res.totalRemain = res.remain - res.dryTime + } if (res.totalRemain < 0) { res.totalRemain = 0 } diff --git a/src/views/dry/bigScreen/EqpSplit.vue b/src/views/dry/bigScreen/EqpSplit.vue new file mode 100644 index 0000000..b923bac --- /dev/null +++ b/src/views/dry/bigScreen/EqpSplit.vue @@ -0,0 +1,1723 @@ +<template> + <div class="leftEqp"> + <div class="leftTop"> + <dv-border-box-7 > + <div style="display:flex;justify-content: center;flex-wrap: wrap;align-content: flex-start;"> + <div style="display: flex;"> + <div class="leftTop0"> + + <div> + <div class="mainInfo" style="padding-top: 20px;padding-left:80px;font-size: 26px">{{ eqp?.name }}</div> + <dv-decoration-8 style="width:300px;height:50px;padding-top: 0px" /> + + </div> + <div style="display: flex; width: 500px; justify-content: space-between"> + <div style="padding-top: 20px; width: 150px; height: 160px"> + <dv-border-box-7 style="padding: 10px"> + <div style="display: flex; flex-direction: column;justify-content: space-between; height: 100%"> + <div style="font-size: 20px">鍚按鐜�</div> + + <div style="font-size: 35px; text-align: center"> {{ realData?.trendVo?.moisture || 0 }} <span style="font-size: 20px">%</span></div> + <div style="font-size: 16px; display: flex;justify-content: space-between"> <div>{{ realData?.initial || 0 }} %</div> <div> -> </div> <div>{{ realData?.target || 0 }} %</div></div> + </div> + </dv-border-box-7> + </div> + <div style="padding-top: 20px; width: 150px; height: 160px"> + <dv-border-box-7 style="padding: 10px; "> + <div style="display: flex; flex-direction: column;justify-content: space-between; height: 100%"> + <div style="font-size: 20px">閲嶉噺</div> + <div style="font-size: 35px; text-align: center"> {{ realData?.trendVo?.weight || 0 }} <span style="font-size: 20px">kg</span></div> + <div style="font-size: 16px"> 鍒濆 {{ realData?.originWeight }} kg</div> + </div> + </dv-border-box-7> + </div> + <div style="padding-top: 20px; width: 150px; height: 160px"> + <dv-border-box-7 style="padding: 10px"> + <div style="display: flex; flex-direction: column;justify-content: space-between; height: 100%"> + <div style="font-size: 20px">鐑</div> + <div style="font-size: 35px; text-align: center"> {{ realData?.trendVo?.bellowsTemp || 0 }} <span style="font-size: 20px">掳C</span></div> + <div style="font-size: 16px"> 璁剧疆 {{ realData?.windTemp || 0 }} 掳C</div> + </div> + </dv-border-box-7> + </div> + </div> + + <div class="eqp-title" style="width:500px; font-size: 24px;padding-top: 20px"> + <div style="position: absolute; z-index: 999;font-size: 22px; padding-left: 26px; padding-top: 7px" > 骞茬嚗 {{ realData?.dryTime }} Min</div> + + <Progress + :stroke-color="{ + from: '#108ee9', + to: '#87d068', + }" + :percent="parseFloat((realData?.dryTime/realData?.totalTime)*100 || '0')" + status="active" + trailColor="#2b2b2b2b" + :show-info="false" + /> + <div class="eqp-timer" style="display: flex; justify-content: space-between"> + <div> + 棰勮 {{ realData?.totalTime }} Min + </div> + <div> + 鍓╀綑 {{ realData?.totalRemain | 0 }} Min + </div> + </div> + </div> + <div class="outDiv eqpStatus"> + <div + style=" + font-size: 26px; + color: white; + background-color: #1595ea; + width: 180px; + line-height: 60px; + text-align: center; + border-radius: 10px; + font-weight: bold; + " + > + </div> + </div> + </div> + <div style="width:420px; height: 400px; padding-top: 20px;padding-left: 20px"> + <div :id="'moisChart'+props.num" style="width: 420px; height: 380px"></div> + </div> + </div> + <dv-decoration-11 style="width:360px;height:70px;font-size: 26px;">{{ realData?.herbName || '鏆傛棤' }}</dv-decoration-11> + <div style="width: 100%; height: 440px"> + <div class="ganzaoji" @click="showFault" :style="{ 'background-image': 'url(' + getStatusImageUrl(statusGif) + ')' }"> + <div v-show="zuoqianjiting" class="error-div" style=" top:309px; left:418px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style="width: 70px;"> + 宸﹀墠鎬ュ仠 + </div> + </div> + <div v-show="shebeijiting" class="error-div" style=" top:111px; left:484px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style=" width: 106px;"> + 璁惧鎬ュ仠锛堟�伙級 + </div> + </div> + <div v-show="chuliaojiting" class="error-div" style=" top:300px; left:129px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style=" width: 70px;"> + 鍑烘枡鎬ュ仠 + </div> + </div> + <div v-show="mianbanjiting" class="error-div" style=" top:258px; left:659px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style=" width: 70px;"> + 闈㈡澘鎬ュ仠 + </div> + </div> + <div v-show="fengxiangsheng" class="error-div" style=" top:294px; left:517px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style=" width: 86px;"> + 椋庣鍗囧紓甯� + </div> + </div> + <div v-show="fengxiangjiang" class="error-div" style=" top:319px; left:517px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style=" width: 86px;"> + 椋庣闄嶅紓甯� + </div> + </div> + <div v-show="fengjiguoliu" class="error-div" style=" top:335px; left:655px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style=" width: 70px;"> + 椋庢満杩囨祦 + </div> + </div> + <div v-show="guntongsheng" class="error-div" style=" top:198px; left:517px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style=" width: 86px;"> + 婊氱瓛鍗囧紓甯� + </div> + </div> + <div v-show="guntongjiang" class="error-div" style=" top:223px; left:517px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style=" width: 86px;"> + 婊氱瓛闄嶅紓甯� + </div> + </div> + <div v-show="guntongguoliu" class="error-div" style=" top:209px; left:642px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style=" width: 70px;"> + 婊氱瓛杩囨祦 + </div> + </div> + <div v-show="wendubaojing" class="error-div" style=" top:234px; left:659px"> + <div class="blingbling error-marker" ></div> + <div class="error-msg" style=" width: 70px;"> + 娓╁害鎶ヨ + </div> + </div> + + <div v-show="zuoqianmen" class="error-div" style=" top:388px; left:415px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 80px;"> + 宸﹀墠闂ㄦ姤璀� + </div> + </div> + <div v-show="zuohoumen" class="error-div" style=" top:367px; left:587px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 80px;"> + 宸﹀悗闂ㄦ姤璀� + </div> + </div> + <div v-show="youqianmen" class="error-div" style=" top:388px; left:284px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 80px;"> + 鍙冲墠闂ㄦ姤璀� + </div> + </div> + <div v-show="youhoumen" class="error-div" style=" top:367px; left:478px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 80px;"> + 鍙冲悗闂ㄦ姤璀� + </div> + </div> + + <div v-show="guntongbuzaigaowei" class="error-div" style=" top:173px; left:517px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 100px;"> + 婊氱瓛涓嶅湪楂樹綅 + </div> + </div> + <div v-show="fengxiangbuzaigaowei" class="error-div" style=" top:269px; left:517px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 100px;"> + 椋庣涓嶅湪楂樹綅 + </div> + </div> + <div v-show="fengxiangbuzaidiwei" class="error-div" style=" top:343px; left:517px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 100px;"> + 椋庣涓嶅湪浣庝綅 + </div> + </div> + <div v-show="jiareweichuanganqi" class="error-div" style=" top:283px; left:642px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 鍔犵儹浣嶄紶鎰熷櫒鎶ヨ + </div> + </div> + <div v-show="zuoqianfengxianggaowei" class="error-div" style=" top:334px; left:362px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 宸﹀墠椋庣涓嶅湪楂樹綅 + </div> + </div> + <div v-show="zuoqianfengxiangdiwei" class="error-div" style=" top:334px; left:362px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 宸﹀墠椋庣涓嶅湪浣庝綅 + </div> + </div> + <div v-show="zuohoufengxianggaowei" class="error-div" style=" top:309px; left:642px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 宸﹀悗椋庣涓嶅湪楂樹綅 + </div> + </div> + <div v-show="zuohoufengxiangdiwei" class="error-div" style=" top:309px; left:642px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 宸﹀悗椋庣涓嶅湪浣庝綅 + </div> + </div> + <div v-show="youqianfengxianggaowei" class="error-div" style=" top:272px; left:300px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 鍙冲墠椋庣涓嶅湪楂樹綅 + </div> + </div> + <div v-show="youqianfengxiangdiwei" class="error-div" style=" top:272px; left:300px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 鍙冲墠椋庣涓嶅湪浣庝綅 + </div> + </div> + <div v-show="youhoufengxianggaowei" class="error-div" style=" top:246px; left:506px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 鍙冲悗椋庣涓嶅湪楂樹綅 + </div> + </div> + <div v-show="youhoufengxiangdiwei" class="error-div" style=" top:246px; left:506px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 鍙冲悗椋庣涓嶅湪浣庝綅 + </div> + </div> + <div v-show="zuoqianguntongdiwei" class="error-div" style=" top:175px; left:358px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 宸﹀墠婊氱瓛涓嶅湪浣庝綅 + </div> + </div> + <div v-show="zuohouguntongdiwei" class="error-div" style=" top:158px; left:643px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 宸﹀悗婊氱瓛涓嶅湪浣庝綅 + </div> + </div> + <div v-show="youqianguntongdiwei" class="error-div" style=" top:150px; left:268px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 鍙冲墠婊氱瓛涓嶅湪浣庝綅 + </div> + </div> + <div v-show="youhouguntongdiwei" class="error-div" style=" top:135px; left:506px"> + <div class="blingbling warn-marker" ></div> + <div class="warn-msg" style=" width: 126px;"> + 鍙冲悗婊氱瓛涓嶅湪浣庝綅 + </div> + </div> + + </div> + </div> + <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 20px; font-size: 20px;"> + <div>鐢佃兘娑堣�楋細 {{realData?.watt | 0}} Kwh</div> + <dv-decoration-7 style="width:300px;height:80px;font-size: 26px;">{{ statusTxt }}</dv-decoration-7> + <div>钂告苯娑堣�楋細 {{realData?.steam | 0}} m鲁</div> + </div> + </div> + </dv-border-box-7> + </div> + + </div> +</template> + +<script setup lang="ts"> + + + import { useFullscreen } from '@vueuse/core' + import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3' + import { router } from '/@/router' + import { onMounted, ref, onUnmounted } from 'vue' + import { Progress } from 'ant-design-vue' + import * as echarts from 'echarts' + import 'echarts-liquidfill' + import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index' + import { defHttp } from '/@/utils/http/axios' + import { queryById, listAll } from '../api/DryEquipment.api' + import { dryEquipment } from '../dataDefine/DryEquipment.data' + import { useUserStore } from '/@/store/modules/user' + import { getTenantId, getToken } from '/@/utils/auth' + + // 澹板悕浠庝笂绾т紶閫掔殑鍙傛暟 + const props = defineProps({ + num: { + type: Number, + default: 0, + }, + }) + + const domRef = ref<Nullable<HTMLElement>>(null) + const { enter, toggle, exit, isFullscreen } = useFullscreen() + + const { toggle: toggleDom } = useFullscreen(domRef) + const Timer = ref() + + const isError = ref(false) + const isWarning = ref(false) + const eqps = ref([] as dryEquipment[]) + + const eqp = ref({} as dryEquipment) + console.log('props.num', props.num) + const eqpNum = ref(props.num || 0) + + const userStore = useUserStore() + const realData = ref({}) + const standard = ref({ + xiaolv: 220, + xlMin: 200, + zhengqi: 50, + zqMin: 45, + dian: 8, + dMin: 7.5, + }) + + const position = ref(1) + //realData.value.tempValue = [0, 100] + realData.value.mois = [0.5, 0.35, 0.2] + statusGif = 'tmrefeng2' + realData.value.herbImage = 'yaocai1.png' + var moisChart: echarts.ECharts + + //----------------error---------------- + const shebeijiting = ref(false) + const chuliaojiting = ref(false) + const zuoqianjiting = ref(false) + const mianbanjiting = ref(false) + const fengxiangsheng = ref(false) + const fengxiangjiang = ref(false) + const fengjiguoliu = ref(false) + const guntongsheng = ref(false) + const guntongjiang = ref(false) + const guntongguoliu = ref(false) + const wendubaojing = ref(false) + //--------------warning------------ + const zuoqianmen = ref(false) + const zuohoumen = ref(false) + const youqianmen = ref(false) + const youhoumen = ref(false) + const guntongbuzaigaowei = ref(false) + const fengxiangbuzaigaowei = ref(false) + const fengxiangbuzaidiwei = ref(false) + const jiareweichuanganqi = ref(false) + const zuoqianfengxianggaowei = ref(false) + const zuohoufengxianggaowei = ref(false) + const youqianfengxianggaowei = ref(false) + const youhoufengxianggaowei = ref(false) + const zuoqianfengxiangdiwei = ref(false) + const zuohoufengxiangdiwei = ref(false) + const youqianfengxiangdiwei = ref(false) + const youhoufengxiangdiwei = ref(false) + const zuoqianguntongdiwei = ref(false) + const zuohouguntongdiwei = ref(false) + const youqianguntongdiwei = ref(false) + const youhouguntongdiwei = ref(false) + + function initCharts() { + let domId = 'moisChart'+props.num + + let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement + + moisChart = echarts.init(chartDom) + + + const option = { + color: ['green', 'red'], + title: { + text: '鍚按鐜�/娓╁害瓒嬪娍', + textStyle: { + color: '#fff', + fontSize: 20, + }, + }, + tooltip: { + trigger: 'axis', + }, + grid: { + left: 50, + right: 70, + top: 50, + bottom: 60, + }, + legend: { + right: 60, + textStyle: { + color: '#fff', + fontSize: 20, + }, + }, + // toolbox: { + // show: true, + // feature: { + // dataZoom: { + // yAxisIndex: 'none', + // }, + // dataView: { readOnly: false }, + // magicType: { type: ['line', 'bar'] }, + // restore: {}, + // saveAsImage: {}, + // }, + // }, + xAxis: { + type: 'value', + axisLabel: { + color: '#fff', + fontSize: 17, + }, + //boundaryGap: false, + // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + min: 0, + max: function (value) { + if (value.max < 100) { + return 100 + } else { + return value.max + } + }, + splitLine: { + lineStyle: { + type: 'dashed', + color: ['#8d8d8d'], + }, + }, + }, + yAxis: { + type: 'value', + boundaryGap: ['10%', '10%'], + axisLabel: { + color: '#fff', + fontSize: 17, + }, + splitLine: { + lineStyle: { + type: 'dashed', + color: ['#8d8d8d'], + }, + }, + // min: 0, + // max: function (value) { + // if (value.max < 100) { + // return 100 + // } else { + // return value.max + // } + // }, + }, + // yAxis: { + // type: 'value', + // axisLabel: { + // formatter: '{value} 掳C', + // }, + // }, + series: [ + { + name: '鍚按鐜�', + type: 'line', + smooth: true, + symbol: 'none', + data: [ + + ], + lineStyle: { + width: 1, + }, + markLine: { + data: [{ type: 'average', name: 'Avg' }], + }, + areaStyle: { + opacity: 0.2, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgb(128, 255, 165)', + }, + { + offset: 1, + color: 'rgb(1, 191, 236)', + }, + ]), + }, + }, + { + name: '娓╁害', + type: 'line', + smooth: true, + symbol: 'none', + data: [ + + ], + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.2, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgb(255, 0, 135)', + }, + { + offset: 1, + color: 'rgb(135, 0, 157)', + }, + ]), + }, + // markLine: { + // data: [ + // { type: 'average', name: 'Avg' }, + // [ + // { + // symbol: 'none', + // x: '90%', + // yAxis: 'max', + // }, + // { + // symbol: 'circle', + // label: { + // position: 'start', + // formatter: 'Max', + // }, + // type: 'max', + // name: '鏈�楂樼偣', + // }, + // ], + // ], + // }, + }, + ], + } + + option && moisChart.setOption(option) + + } + + // 鍔ㄦ�佽鍙栧浘鐗� + function getStatusImageUrl(name: string) { + // + if (isWarning.value || isError.value) { + return new URL(`/src/assets/images/dry/ganzaoji-x.png`, import.meta.url).href + } else if (name =='zanting') { + return new URL(`/src/assets/images/dry/${name}.png`, import.meta.url).href + } else { + return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href + } + + } + + function listAllEqp() { + let tenantId = getTenantId() + defHttp.get({ url: '/dry/real/queryAllEqps', params: { tenantId: tenantId,enable: 'Y' } }) + .then((result) => { + //console.log(`output->result`, result) + eqps.value = result + // result.forEach((item) => { + // eqpCodes.push(item.code) + // }) + queryRealTime() + setTimeout(initCharts, 500) + }) + .catch((err) => { + //console.log(`output->err`, err) + }) + } + + var num = eqpNum.value + + function changeEqp() { + //console.log("changeEqp::",eqps.value.length); + num++ + if (eqps.value.length > 0) { + var i = num % eqps.value.length + //eqp.value = eqps.value[i] + // console.log("777",i); + eqpNum.value = i + //console.log("888",eqp.value); + queryRealTime() + //setTimeout(initCharts, 500) + } + } + + // function queryEqpsReal() { + + // if (eqps.value.length > 0) { + // var i = num%eqps.value.length + // eqp.value = eqps[i] + // console.log("777",i); + // console.log("888",eqp.value); + // queryRealTime() + // //setTimeout(initCharts, 500) + // } + // num ++; + // } + + var shangliaoFlag = false + var statusGif = 'tmrefeng2' + var statusTxt = '姝e湪骞茬嚗' + + function chaiwangban() { + statusGif = 'chaiwangban-1' + setTimeout(shangliao, 7000) + } + function showFault () { + console.log('showFault') + router.push({ path: '/bigFault', query: { num: num } }) + + } + function shangliao() { + statusGif = 'shangliao-N' + setTimeout(() => { + statusGif = 'zhuangwangban' + setTimeout(() => { + statusGif = 'guanmen1' + setTimeout(() => { + shangliaoFlag = false + }, 4000) + }, 7000) + }, 15000) + } + + function queryRealTime() { + if (eqp.value) { + eqp.value = eqps.value[eqpNum.value] + // console.log("888",eqp.value); + let tenantId = getTenantId() + let eqpCode = eqp.value.code + let queryRealTimeUrl = '/dry/real/getRealTimeData' + defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => { + if (res && res.trendVo) { + //console.log(`output->re11s`, res) + // res.tempValue = [res.windTemp, 100] + //res.percent = ((res.dryTime / res.et) * 100).toFixed(2) + /**姘存淮鍥惧惈姘撮噺 */ + res.mois = [ + (res.trendVo.moisture / 100).toFixed(2), + (res.trendVo.moisture / 100 / 1.5).toFixed(2), + (res.trendVo.moisture / 100 / 3).toFixed(2), + ] + + /**娓╁害鐜舰鍥� */ + + /**椋庢満棰戠巼鐜舰鍥� */ + // if (fanFreqChart) { + // fanFreqChart.setOption({ + // series: [ + // { + // data: [ + // { + // value: res.trendVo.fanFrequency, + // }, + // ], + // }, + // ], + // }) + // } + /**骞茬嚗杩涘害銆佽蛋鍔夸笌闃舵鏁堢巼鍜岄樁娈垫秷鑰� */ + if (res && res.detailList) { + var progressSeries = [] + + var zhengQiXiaoHao = [] + var dianNengXiaoHao = [] + var ganZaoXiaoLv = [] + var totalTime = 0 + var beforeWeight = 0 + res.moisList = [] + beforeWeight = res.originWeight + //console.log(`output->res`, res) + res.detailList.forEach((item) => { + //console.log(`output->bef`, beforeWeight) + //console.log(`output->cur`, item.weight) + res.moisList.push([item.totalTime, item.moisture]) + // console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime) + var curDryTime = item.totalTime - totalTime + + if (curDryTime > 0) { + progressSeries.push({ + name: item.moisture, + type: 'bar', + stack: 'total', + label: { + show: true, + }, + emphasis: { + focus: 'series', + }, + data: [item.totalTime - totalTime], + }) + ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)]) + + totalTime = item.totalTime + } + beforeWeight = item.weight + }) + + if (res.remain) { + if (res.dryTime - totalTime > 0) { + progressSeries.push({ + name: '褰撳墠', + type: 'bar', + stack: 'total', + label: { + show: true, + }, + emphasis: { + focus: 'series', + }, + data: [ + { + value: res.dryTime - totalTime, + }, + ], + }) + } + + // ganZaoXiaoLv.push([totalTime + res.remain,eqp.value.dryEfficiency]) + // console.log(`output->res.remain`, res.remain) + // console.log(`output->res.dryTime`, res.dryTime) + // console.log(`output->totalTime`, totalTime) + // 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級 + res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0 + progressSeries.push({ + name: '鍓╀綑', + type: 'bar', + stack: 'total', + label: { + show: true, + }, + emphasis: { + focus: 'series', + }, + data: [ + { + value: res.remain - (res.dryTime - totalTime), + itemStyle: { + color: '#c0c0c0', + }, + }, + ], + }) + } + + /**骞茬嚗杩涘害 */ + + + res.totalTime = totalTime + res.remain + console.log("efficAvg::",res.efficAvg); + /**骞茬嚗鏁堢巼銆佹秷鑰� */ + + + res.moisList.push([res.dryTime, res.trendVo.moisture]) + } + + /**娓╁害瓒嬪娍 */ + if (res && res.bellowsTemp) { + Array.from(Object.entries(res.bellowsTemp)) + var arr = Object.keys(res.bellowsTemp) + var temArr = [] + arr.forEach((item) => { + temArr.push([item * 1, res.bellowsTemp[item]]) + }) + + //console.log(`output->arr` + JSON.stringify(temArr)) + res.tempArr = temArr + } + + /**骞茬嚗杩囩▼瓒嬪娍 */ + if (moisChart) { + //console.log(`output->鏇存柊chart`) + moisChart.setOption({ + series: [ + { + data: res.moisList, + markLine: { + symbol: 'none', + data: [ + { + name: '鐩爣', + yAxis: res.target, + }, + ], + label: { + formatter: '{b}\n{c}%', + color: '#fff', + fontSize: 20, + }, + }, + }, + { + data: res.tempArr, + }, + ], + }) + } + + let lastTrend = res.detailList[res.detailList.length-1] + /**鏁堢巼瀵规瘮鍥� */ + if (res.originWeight - lastTrend.weight <= 0) { + res.xiaolv = 0 + } else { + res.xiaolv = ((res.originWeight - lastTrend.weight) / lastTrend.totalTime) * 60 + } + res.xiaolv = Number(res.xiaolv) + //eqp.value.dryEfficiency = Number(eqp.value.dryEfficiency) + if (res.xiaolv > res.efficAvg) { + console.log("xiaolv:",res , eqp); + res.xlgood = true + res.xlsHeight = (res.efficAvg / res.xiaolv) * 100 + '%' + res.xlrHeight = '100%' + } else if (res.xiaolv < res.efficAvg * 0.9) { + res.xlbad = true + res.xlsHeight = '100%' + res.xlrHeight = (res.xiaolv / res.efficAvg) * 100 + '%' + } else { + res.xlsHeight = '100%' + res.xlrHeight = (res.xiaolv / res.efficAvg) * 100 + '%' + } + + /** 钂告苯娑堣�� */ + if (res.originWeight - lastTrend.weight <= 0) { + res.zhengqi = 0 + } else { + res.zhengqi = lastTrend.steam / (res.originWeight - lastTrend.weight) + } + res.zhengqi = Number(res.zhengqi) + //eqp.value.steamConsumption = Number(eqp.value.steamConsumption) + // res.zhengqi = eqp.value.steamConsumption - 3 + // console.log(res); + // console.log('zhengqi:', res.zhengqi); + if (res.zhengqi > res.steamAvg) { + res.zqbad = true + res.zqsHeight = (res.steamAvg / res.zhengqi) * 100 + '%' + res.zqrHeight = '100%' + } else if (res.zhengqi < res.steamAvg * 0.9) { + res.zqgood = true + res.zqsHeight = '100%' + res.zqrHeight = (res.zhengqi / res.steamAvg) * 100 + '%' + } else { + res.zqsHeight = '100%' + res.zqrHeight = (res.zhengqi / res.steamAvg) * 100 + '%' + } + + /** 鐢佃兘娑堣�� */ + if (res.originWeight - lastTrend.weight <= 0) { + res.dian = 0 + } else { + res.dian = lastTrend.watt / (res.originWeight - lastTrend.weight) + } + // res.dian = eqp.value.powerConsumption - 1.5 + res.dian = Number(res.dian) + //eqp.value.powerConsumption = Number(eqp.value.powerConsumption) + if (res.dian > res.wattAvg) { + console.log("dian::", res.dian,res.wattAvg ) + res.dnbad = true + res.dnsHeight = (res.wattAvg / res.dian) * 100 + '%' + res.dnrHeight = '100%' + } else if (res.dian < res.wattAvg * 0.9) { + res.dngood = true + res.dnsHeight = '100%' + res.dnrHeight = (res.dian / res.wattAvg) * 100 + '%' + } else { + res.dnsHeight = '100%' + res.dnrHeight = (res.dian / res.wattAvg) * 100 + '%' + } + + //console.log('state:::fan::', res.state_fan, 'roller::', res.state_roller, 'windbox::', res.state_windbox) + //console.log('===========================') + //console.log("state:::state_windbox::", res.state_windbox); + + /**鐘舵��/gif鍔ㄥ浘 */ + if (!shangliaoFlag) { + if (res.orderStatus == 0) { + statusGif = 'zanting' + statusTxt = '鍑嗗' + } else if (res.orderStatus == 1) { + //todo 瀹為檯鐢熶骇鐐瑰嚮涓�閿共鐕ュ悗鎵嶄細鏈夊伐鍗曠姸鎬佸彂涓婃潵锛岄偅鏃跺凡缁忎笂瀹屾枡锛岄渶瑕佺‘璁ゅ伐鍗曠姸鎬� + shangliaoFlag = true + statusGif = 'kaimen1' + statusTxt = '涓婃枡' + setTimeout(chaiwangban, 4000) + } else if (res.orderStatus == 2) { + statusTxt = res.level + statusGif = 'zanting' + if (res.level === '鍑嗗闃舵') { + console.log("鍑嗗闃舵" + statusGif); + statusGif = 'zanting' + } else if (res.level === '骞茬嚗闃舵' || res.level === '姝e湪骞茬嚗') { + statusGif = 'tmrefeng2' + } else if (res.level === '缈绘枡闃舵') { + statusGif = 'fanliao-N' + } else if (res.level === '鍑烘枡闃舵') { + statusGif = 'chuliao-N' + } + // if (res.state_fan == 1) { + // statusGif = 'tmrefeng2' + // statusTxt = '姝e湪骞茬嚗' + // } + + // if (res.state_roller == 4) { + // statusGif = 'fanliao-N' + // statusTxt = '姝e湪缈绘枡' + // } + + // if (res.state_roller == 5) { + // statusGif = 'chuliao-N' + // statusTxt = '姝e湪鍑烘枡' + // } + + // if (res.state_windbox == 2 || res.state_windbox == 3) { + // statusGif = 'fengxiangsheng-1' + // statusTxt = '姝e湪骞茬嚗' + // } + } else if (res.orderStatus == 3) { + statusGif = 'zanting' + statusTxt = '鏆傚仠' + } else if (res.orderStatus == 4) { + statusGif = 'zanting' + statusTxt = '骞茬嚗瀹屾垚' + } + } + + + + res.herbImage = 'yaocai1.png' + + if (res.herbName == '鐧借姳铔囪垖鑽�') { + res.herbImage = 'baihuasheshecao.png' + } else if (res.herbName == '绯ョɑ鏍�') { + res.herbImage = 'nuodaogen.png' + } else if (res.herbName == '娣緤钘�') { + res.herbImage = 'yinyanghuo.png' + } else if (res.herbName == '椹娇鑻�') { + res.herbImage = 'machixian.png' + } else if (res.herbName == '澧ㄦ棻鑾�') { + res.herbImage = 'mohanlian.png' + } else if (res.herbName == '妗戠櫧鐨�') { + res.herbImage = 'sangbaipi.png' + } + + + if (res.fault) { + res.isError = true + res.errorMsg = res.fault; + const faults = res.fault; + console.log('errorMsg:', res.fault) + if (faults.includes('鎬ュ仠鎶ヨ')) { + shebeijiting.value = true; + } else { + shebeijiting.value = false; + } + if (faults.includes('宸﹀墠鎬ュ仠')) { + zuoqianjiting.value = true; + } else { + zuoqianjiting.value = false; + } + if (faults.includes('闈㈡澘鎬ュ仠')) { + mianbanjiting.value = true; + } else { + mianbanjiting.value = false; + } + if (faults.includes('鍑烘枡鎬ュ仠')) { + chuliaojiting.value = true; + } else { + chuliaojiting.value = false; + } + if (faults.includes('娓╁害澶辨帶')) { + wendubaojing.value = true; + } else { + wendubaojing.value = false; + } + if (faults.includes('婊氱瓛鍗�')) { + guntongsheng.value = true; + } else { + guntongjiang.value = false; + } + if (faults.includes('婊氱瓛闄�')) { + guntongjiang.value = true; + } else { + guntongjiang.value = false; + } + if (faults.includes('婊氱瓛鐢垫満杩囨祦')) { + guntongguoliu.value = true; + } else { + guntongguoliu.value = false; + } + if (faults.includes('椋庣鍗�')) { + fengxiangsheng.value = true; + } else { + fengxiangsheng.value = false; + } + if (faults.includes('椋庣闄�')) { + fengxiangjiang.value = true; + } else { + fengxiangjiang.value = false; + } + if (faults.includes('椋庣椋庢満杩囨祦')) { + fengjiguoliu.value = true; + } else { + fengjiguoliu.value = false; + } + } + else { + res.isError = false + shebeijiting.value = false + chuliaojiting.value = false + zuoqianjiting.value = false + mianbanjiting.value = false + fengxiangsheng.value = false + fengxiangjiang.value = false + fengjiguoliu.value = false + guntongsheng.value = false + guntongjiang.value = false + guntongguoliu.value = false + wendubaojing.value = false + } + + if (res.warning) { + res.isWarning = true + res.warnMsg = res.warning + const warnings = res.warning; + console.log('warnMsg:', res.warning) + if (warnings.includes('宸﹀墠闂�')) { + zuoqianmen.value = true; + } else { + zuoqianmen.value = false; + } + if (warnings.includes('鍙冲墠闂�')) { + youqianmen.value = true; + } else { + youqianmen.value = false; + } + if (warnings.includes('宸﹀悗闂�')) { + zuohoumen.value = true; + } else { + zuohoumen.value = false; + } + if (warnings.includes('鍙冲悗闂�')) { + youhoumen.value = true; + } else { + youhoumen.value = false; + } + if (warnings.includes('婊氱瓛涓嶅湪楂樹綅')) { + guntongbuzaigaowei.value = true; + } else { + guntongbuzaigaowei.value = false; + } + if (warnings.includes('椋庣涓嶅湪浣庝綅')) { + fengxiangbuzaidiwei.value = true; + } else { + fengxiangbuzaidiwei.value = false; + } + if (warnings.includes('椋庣涓嶅湪楂樹綅')) { + fengxiangbuzaigaowei.value = true; + } else { + fengxiangbuzaigaowei.value = false; + } + if (warnings.includes('鍔犵儹浣嶄紶鎰熷櫒')) { + jiareweichuanganqi.value = true; + } else { + jiareweichuanganqi.value = false; + } + if (warnings.includes('宸﹀墠椋庣楂樹綅浼犳劅鍣�')) { + zuoqianfengxianggaowei.value = true; + } else { + zuoqianfengxianggaowei.value = false; + } + if (warnings.includes('鍙冲墠椋庣楂樹綅浼犳劅鍣�')) { + youqianfengxianggaowei.value = true; + } else { + youqianfengxianggaowei.value = false; + } + if (warnings.includes('宸﹀悗椋庣楂樹綅浼犳劅鍣�')) { + zuohoufengxianggaowei.value = true; + } else { + zuohoufengxianggaowei.value = false; + } + if (warnings.includes('鍙冲悗椋庣楂樹綅浼犳劅鍣�')) { + youhoufengxianggaowei.value = true; + } else { + youhoufengxianggaowei.value = false; + } + if (warnings.includes('宸﹀墠椋庣浣庝綅浼犳劅鍣�')) { + zuoqianfengxiangdiwei.value = true; + } else { + zuoqianfengxiangdiwei.value = false; + } + if (warnings.includes('鍙冲墠椋庣浣庝綅浼犳劅鍣�')) { + youqianfengxiangdiwei.value = true; + } else { + youqianfengxiangdiwei.value = false; + } + if (warnings.includes('宸﹀悗椋庣浣庝綅浼犳劅鍣�')) { + zuohoufengxiangdiwei.value = true; + } else { + zuohoufengxiangdiwei.value = false; + } + if (warnings.includes('鍙冲悗椋庣浣庝綅浼犳劅鍣�')) { + youhoufengxiangdiwei.value = true; + } else { + youhoufengxiangdiwei.value = false; + } + if (warnings.includes('宸﹀墠婊氱瓛浣庝綅浼犳劅鍣�')) { + zuoqianguntongdiwei.value = true; + } else { + zuoqianguntongdiwei.value = false; + } + if (warnings.includes('鍙冲墠婊氱瓛浣庝綅浼犳劅鍣�')) { + youqianguntongdiwei.value = true; + } else { + youqianguntongdiwei.value = false; + } + if (warnings.includes('宸﹀悗婊氱瓛浣庝綅浼犳劅鍣�')) { + zuohouguntongdiwei.value = true; + } else { + zuohouguntongdiwei.value = false; + } + if (warnings.includes('鍙冲悗婊氱瓛浣庝綅浼犳劅鍣�')) { + youhouguntongdiwei.value = true; + } else { + youhouguntongdiwei.value = false; + } + } + else { + res.isWarning = false + zuoqianmen.value = false; + zuohoumen.value = false; + youqianmen.value = false; + youhoumen.value = false; + guntongbuzaigaowei.value = false; + fengxiangbuzaigaowei.value = false; + fengxiangbuzaidiwei.value = false; + jiareweichuanganqi.value = false; + zuoqianfengxianggaowei.value = false; + zuohoufengxianggaowei.value = false; + youqianfengxianggaowei.value = false; + youhoufengxianggaowei.value = false; + zuoqianfengxiangdiwei.value = false; + zuohoufengxiangdiwei.value = false; + youqianfengxiangdiwei.value = false; + youhoufengxiangdiwei.value = false; + zuoqianguntongdiwei.value = false; + zuohouguntongdiwei.value = false; + youqianguntongdiwei.value = false; + youhouguntongdiwei.value = false; + } + isError.value = res.isError + isWarning.value = res.isWarning + } else { + res = { + mois: [], + gif: 'tmrefeng2', + herbImage: 'yaocai1.png', + } + } + + // console.log(`output->res`, res.detailList[res.detailList.length-1]) + realData.value = res + }) + } + } + + + + function back() { + router.back() + } + + listAllEqp() + //queryEqp() + // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛� + onMounted(() => { + Timer.value = setInterval(queryRealTime, 3000) + + }) + + onUnmounted(() => { + clearInterval(Timer.value) + + Timer.value = null + + }) +</script> + +<style scoped> + .eqpBox { + height: 100%; + } + .eqpRow { + } + .eqpImage { + height: 1080px; + width: 1920px; + background-image: url(/src/assets/images/dry/bg.png); + background-repeat: no-repeat; + color: white; + /*background-position: 160px 280px; */ + /* background-color: red; */ + background-size: 120%; + padding: 10px; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + } + + .leftEqp { + height: 1080px; + width: 945px; + border: 1px solid black; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + + /* background-color: white; + background-image: url(/src/assets/images/dry/shebei1.png); + background-repeat: no-repeat; + background-size: 125%; + border-radius: 10px; + background-position: -119px 293px; */ + } + + .leftTop { + height: 990px; + width: 945px; + display: flex; + justify-content: center; + align-content: flex-start; + //background-image: url(/src/assets/images/dry/ganzaoji-x.png); + background-repeat: no-repeat; + background-size: 79%; + border-radius: 10px; + flex-wrap: wrap; + background-position: 85px 279px; + } + .leftMid { + width: 850px; + height: 300px; + /* border: 1px solid; */ + margin-top: 10px; + border-radius: 10px; + /* background: white; */ + } + .mainInfo { + line-height: 33px; + padding-left: 10px; + font-size: 30px; + color: white; + } + .subhead { + color: #a19f9c; + font-size: 16px; + padding-left: 10px; + } + + .mainInfo2 { + line-height: 20px; + padding-left: 0px; + font-size: 16px; + } + .subhead2 { + color: #a19f9c; + font-size: 10px; + padding-left: 0px; + } + .zhengqi { + height: 180px; + width: 200px; + background-image: url(/src/assets/images/dry/liuliangji.png); + background-repeat: no-repeat; + background-size: 160px; + /* border-radius: 10px; */ + background-position: 17px -6px; + } + + .liuliangji { + } + .leftData { + height: 250px; + width: 120px; + } + .rightChart { + height: 270px; + width: 170px; + margin-top: -30px; + } + .leftTop0 { + height: 400px; + width: 500px; + padding-left: 10px; + display: flex; + justify-content: space-between; + align-content: flex-start; + flex-wrap: wrap; + } + .leftTop1 { + width: 250px; + height: 200px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + font-size: 30px; + color: #727272; + } + .leftTop2 { + width: 250px; + height: 200px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + font-size: 30px; + color: #727272; + } + .leftTop3 { + width: 340px; + height: 200px; + /* background-image: url(/src/assets/images/dry/fanliao.gif); */ + background-repeat: no-repeat; + background-position: 0px 20px; + background-size: 300px; + border-radius: 50px; + } + + .ganzaoji { + background-repeat: no-repeat; + background-position: 110px 15px; + background-size: 685px; + width: 960px; + height: 440px; + position: absolute; + } + + .eqpStatus { + width: 960px; + + } + .rightInfo { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + height: 1060px; + width: 700px; + } + + .rightTop { + display: flex; + height: 300px; + padding-left: 10px; + } + .rightTwo { + display: flex; + flex-wrap: wrap; + } + + .infoChart { + width: 340px; + height: 300px; + /* background: white; */ + margin-left: 10px; + margin-top: 10px; + border-radius: 10px; + } + .chartTittle { + width: 340px; + height: 30px; + font-size: 16px; + display: flex; + justify-content: space-between; + padding: 15px 15px; + } + .chartInfo { + width: 60px; + height: 180px; + } + + .compareBar { + width: 55px; + height: 140px; + } + .margintop-30 { + margin-top: -30px; + } + + .barTop { + width: 55px; + height: 30px; + } + .barBack { + width: 30px; + height: 100px; + /* border: 1px solid black; */ + display: flex; + flex-wrap: wrap; + align-content: flex-end; + } + .barDiv { + width: 100%; + + background-color: #1595ea; + } + .bad { + background-color: #973535; + } + .rightLabel { + width: 110px; + display: flex; + justify-content: space-between; + } + .label { + color: white; + text-align: center; + width: 50px; + border-radius: 4px; + height: 20px; + font-size: 10px; + line-height: 21px; + } + .good { + background-color: #0d6e24; + } + + .mainInfo3 { + font-size: 24px; + } + .herbInfo { + width: 340px; + height: 440px; + color: #727272; + } + + .curEqp { + width: 340px; + height: 170px; + + /* background: white; + border-radius: 10px; */ + } + .curHerb { + margin-top: 10px; + width: 340px; + height: 260px; + /* background: white; + border-radius: 10px; */ + + background-repeat: no-repeat; + background-size: 200px; + background-position: 0px 10px; + } + .tempMoisChart { + width: 500px; + height: 300px; + /* background: white; */ + + padding: 20px; + border-radius: 10px; + } + .topLeft { + margin: 20px 40px 60px 20px; + padding: 15px; + /* background: white; */ + border-radius: 10px; + height: 325px; + width: 440px; + /* background-image: url(/src/assets/images/dry/yaocai.jpg); */ + background-repeat: no-repeat; + background-size: 164px 132px; + background-position: 239px 65px; + display: flex; + } + .topMid { + margin: 20px 20px 60px 40px; + /* background: white; */ + border-radius: 10px; + background-image: url(/src/assets/images/dry/fanliao.gif); + background-repeat: no-repeat; + background-position: 0px 20px; + background-size: 400px; + width: 400px; + + padding: 20px; + } + .topRight { + margin: 20px 20px 60px 20px; + /* background: white; */ + border-radius: 10px; + width: 700px; + padding: 20px; + } + .midLeft { + height: 450px; + width: 600px; + display: flex; + padding: 0 20px 20px 20px; + } + .midMid { + width: 500px; + padding-top: 50px; + } + + .midRight { + background-image: url(/src/assets/images/dry/fengjixz.gif); + background-repeat: no-repeat; + background-position: 150px 260px; + background-size: 120px 120px; + width: 600px; + } + + .shangJianTou { + margin-left: 140px; + width: 70px; + height: 100px; + background-image: url(/src/assets/images/dry/shangjiantoutou.gif); + background-repeat: no-repeat; + background-position: 0px 0px; + background-size: 70px 100px; + } + + .zoujiantou { + margin-left: 225px; + margin-top: 30px; + width: 100px; + height: 70px; + background-image: url(/src/assets/images/dry/zuojiantou.gif); + background-repeat: no-repeat; + background-position: 0px 0px; + background-size: 100px 70px; + } + .fault { + padding: 10px; + height: 60px; + font-size: 26px; + width: 100%; + text-align: right; + color: red; + } + .eqpName { + padding: 20px; + + height: 160px; + } + + .formula { + display: flex; + width: 340px; + height: 40px; + padding: 0 20px; + justify-content: space-around; + justify-items: center; + } + + .formulaItem { + display: flex; + justify-content: center; + width: 85px; + height: 40px; + } + + .eqpInfoText { + font-size: 18px; + font-weight: bold; + } + + :deep() .ant-slider-mark-text { + padding-left: 15px; + font-size: 10px; + } + :deep() .ant-slider-mark-text::before { + content: ''; + display: block; + width: 6px; + height: 1px; + background-color: #1890ff; + + position: absolute; + top: 10px; + left: 0px; + } + :deep() .ant-slider-rail { + width: 10px !important; + border-radius: 6px 6px 0 0; + background: linear-gradient(to top, #ce0000 0%, #ce0000 40%, #ce0000 75%, rgb(160, 160, 160) 100%); + } + :deep() .ant-slider-track { + background: rgb(216, 216, 216); + + height: 20px; + width: 10px !important; + border-radius: 6px 6px 0 0; + } + :deep() .ant-slider-track:hover { + } + :deep() .ant-slider-handle { + display: none; + } + :deep() .ant-slider-dot { + display: none; + } + :deep() .ant-slider-step { + width: 10px !important; + } + :deep() .ant-slider-step > :first-child { + display: block !important; + width: 30px !important; + height: 30px !important; + bottom: -26px !important; + left: -6px; + border: none; + background: #ce0000; + } + :deep() .progress { + padding: 25px 25px; + + width: 360px; + display: flex; + } + :deep() .ant-progress-bg { + height: 25px !important; + } + .outDiv { + display: flex; + justify-content: center; + justify-items: center; + } + .blingbling { + -webkit-animation: scaleout 1.5s infinite ease-in-out; + animation: scaleout 1.5s infinite ease-in-out; + } + .center { + display: flex; + justify-content: center; + justify-items: center; + align-items: center; + flex-wrap: wrap; + text-align: center; + } + + .centerText { + width: 100%; + text-align: center; + } + + @-webkit-keyframes scaleout { + 0% { + -webkit-transform: scale(1); + } + + 100% { + -webkit-transform: scale(1.1); + opacity: 0; + } + } + + @keyframes scaleout { + 0% { + transform: scale(1); + -webkit-transform: scale(1); + } + + 100% { + transform: scale(1.1); + -webkit-transform: scale(1.1); + opacity: 0; + } + } + + .error-div { + position: absolute; display: flex; align-items: center; + } + .error-marker { + width: 18px; height: 18px; background: red; border-radius: 50%; + } + .error-msg { + margin-left: 6px; + height: 24px; + background: gray; border-radius: 5px; font-weight: bold; color: red + } + .warn-marker { + width: 18px; height: 18px; background: orange; border-radius: 50%; + } + .warn-msg { + margin-left: 6px; + height: 24px; + background: gray; border-radius: 5px; font-weight: bold; color: orange; + } + + :deep() .progress { + padding: 25px 25px; + + width: 360px; + display: flex; + } + :deep() .ant-progress-bg { + height: 36px !important; + } + :deep() .ant-progress-inner { + background-color: rgb(197 197 197 / 84%) !important; + } +</style> diff --git a/src/views/dry/repair/DryRepairRecords.api.ts b/src/views/dry/repair/DryRepairRecords.api.ts new file mode 100644 index 0000000..5b09f13 --- /dev/null +++ b/src/views/dry/repair/DryRepairRecords.api.ts @@ -0,0 +1,70 @@ +import {defHttp} from '/src/utils/http/axios'; +import { useMessage } from "/src/hooks/web/useMessage"; + +const { createConfirm } = useMessage(); + +enum Api { + list = '/dry/dryRepairRecords/list', + save='/dry/dryRepairRecords/add', + edit='/dry/dryRepairRecords/edit', + deleteOne = '/dry/dryRepairRecords/delete', + deleteBatch = '/dry/dryRepairRecords/deleteBatch', + importExcel = '/dry/dryRepairRecords/importExcel', + exportXls = '/dry/dryRepairRecords/exportXls', + generateRepairNo = '/dry/dryRepairRecords/generateRepairNo', +} +/** + * 瀵煎嚭api + * @param params + */ +export const getExportUrl = Api.exportXls; +/** + * 瀵煎叆api + */ +export const getImportUrl = Api.importExcel; +/** + * 鍒楄〃鎺ュ彛 + * @param params + */ +export const list = (params) => + defHttp.get({url: Api.list, params}); + +/** + * 鍒犻櫎鍗曚釜 + */ +export const deleteOne = (params,handleSuccess) => { + return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => { + handleSuccess(); + }); +} +/** + * 鎵归噺鍒犻櫎 + * @param params + */ +export const batchDelete = (params, handleSuccess) => { + createConfirm({ + iconType: 'warning', + title: '纭鍒犻櫎', + content: '鏄惁鍒犻櫎閫変腑鏁版嵁', + okText: '纭', + cancelText: '鍙栨秷', + onOk: () => { + return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => { + handleSuccess(); + }); + } + }); +} +/** + * 淇濆瓨鎴栬�呮洿鏂� + * @param params + */ +export const saveOrUpdate = (params, isUpdate) => { + let url = isUpdate ? Api.edit : Api.save; + return defHttp.post({url: url, params}); +} + +/** + * 鐢熸垚缁翠慨鍗曞彿 + */ +export const generateRepairNo = () => defHttp.get({url: Api.generateRepairNo}, { successMessageMode: 'none' }); diff --git a/src/views/dry/repair/DryRepairRecords.data.ts b/src/views/dry/repair/DryRepairRecords.data.ts new file mode 100644 index 0000000..985d8d1 --- /dev/null +++ b/src/views/dry/repair/DryRepairRecords.data.ts @@ -0,0 +1,305 @@ +import {BasicColumn} from '/@/components/Table'; +import {FormSchema} from '/@/components/Table'; +import { rules} from '/@/utils/helper/validator'; +import { render } from '/@/utils/common/renderUtils'; +import { rule } from 'postcss'; +//鍒楄〃鏁版嵁 +export const columns: BasicColumn[] = [ + { + title: '缁翠慨鍗曞彿', + align:"center", + dataIndex: 'orderNumber' + }, + { + title: '璁惧缂栧彿', + align:"center", + dataIndex: 'equId_dictText' + }, + { + title: '鏁呴殰鏃堕棿', + align:"center", + dataIndex: 'faultTime', + + }, + { + title: '鎶ヤ慨浜�', + align:"center", + dataIndex: 'reporter' + }, + { + title: '缁翠慨寮�濮嬫椂闂�', + align:"center", + dataIndex: 'startTime', + + }, + { + title: '缁翠慨缁撴潫鏃堕棿', + align:"center", + dataIndex: 'endTime', + + }, + { + title: '缁翠慨浜哄憳', + align:"center", + dataIndex: 'technician' + }, + { + title: '鏁呴殰绫诲瀷', + align:"center", + dataIndex: 'faultType', + customRender: ({text}) => { + const options = { + '0': '鏈烘鏁呴殰', + '1': '鐢垫皵鏁呴殰', + '2': '鍏朵粬鏁呴殰' + }; + return options[text] || text; + } + }, + { + title: '鏁呴殰鎻忚堪', + align:"center", + dataIndex: 'description' + }, + { + title: '缁翠慨鎺柦', + align:"center", + dataIndex: 'solution' + }, + { + title: '鏇存崲閰嶄欢', + align:"center", + dataIndex: 'parts' + }, + { + title: '缁翠慨璐圭敤', + align:"center", + dataIndex: 'cost' + }, + { + title: '缁翠慨鐘舵��', + align:"center", + dataIndex: 'status', + customRender: ({text}) => { + const options = { + '0': '寰呯淮淇�', + '1': '缁翠慨涓�', + '2': '宸插畬鎴�' + }; + return options[text] || text; + } + }, +]; +//鏌ヨ鏁版嵁 +export const searchFormSchema: FormSchema[] = [ + { + label: "璁惧缂栧彿", + field: 'equId', + component: 'JDictSelectTag', + componentProps:{ + dictCode:"dry_equipment,name,id" + }, + colProps: {span: 6}, + }, + { + label: '鏁呴殰鏃堕棿', + field: 'faultTime', + component: 'DatePicker', + componentProps: { + showTime: true, + valueFormat: 'YYYY-MM-DD HH:mm:ss' + }, + }, + { + label: "鎶ヤ慨浜�", + field: 'reporter', + component: 'Input', + colProps: {span: 6}, + }, + { + label: "缁翠慨浜哄憳", + field: 'technician', + component: 'Input', + colProps: {span: 6}, + }, + { + label: "鏁呴殰绫诲瀷", + field: 'faultType', + component: 'Select', + componentProps:{ + options: [ + { label: '鏈烘鏁呴殰', value: '0' }, + { label: '鐢垫皵鏁呴殰', value: '1' }, + { label: '鍏朵粬鏁呴殰', value: '2' } + ] + }, + colProps: {span: 6}, + }, + { + label: "缁翠慨鐘舵��", + field: 'status', + component: 'Select', + componentProps:{ + options: [ + { label: '寰呯淮淇�', value: '0' }, + { label: '缁翠慨涓�', value: '1' }, + { label: '宸插畬鎴�', value: '2' } + ] + }, + colProps: {span: 6}, + }, +]; +//琛ㄥ崟鏁版嵁 +export const formSchema: FormSchema[] = [ + { + label: '缁翠慨鍗曞彿', + field: 'orderNumber', + component: 'Input', + dynamicDisabled:true + }, + { + label: '璁惧缂栧彿', + field: 'equId', + component: 'JDictSelectTag', + componentProps:{ + dictCode:"dry_equipment,name,id" + }, + rules: [{ required: true, message: '璇烽�夋嫨璁惧缂栧彿' }], + }, + { + label: '鏁呴殰鏃堕棿', + field: 'faultTime', + component: 'DatePicker', + componentProps: { + showTime: true, + valueFormat: 'YYYY-MM-DD HH:mm:ss' + }, + rules: [{ required: true, message: '璇烽�夋嫨鏁呴殰鏃堕棿' }], + }, + { + label: '鎶ヤ慨浜�', + field: 'reporter', + component: 'Input', + }, + { + label: '缁翠慨鏃堕棿', + field: 'startTime', + component: 'DatePicker', + componentProps: { + showTime: true, + valueFormat: 'YYYY-MM-DD HH:mm:ss' + }, + dynamicRules: ({values}) => { + return [ + { required: true, + validator: (_, value) => { + const faultTime = values.faultTime; + if (faultTime && value && new Date(value).getTime() < new Date(faultTime).getTime()) { + return Promise.reject('缁翠慨寮�濮嬫椂闂翠笉鑳芥棭浜庢晠闅滄椂闂�'); + } + return Promise.resolve(); + } + } + ] + } + + }, + { + label: '缁撴潫鏃堕棿', + field: 'endTime', + component: 'DatePicker', + componentProps: { + showTime: true, + valueFormat: 'YYYY-MM-DD HH:mm:ss' + }, + dynamicRules: ({values}) => { + return [ + { required: true, + validator: (_, value) => { + const startTime = values.startTime; + if (startTime && value && new Date(value).getTime() < new Date(startTime).getTime()) { + return Promise.reject('缁翠慨缁撴潫鏃堕棿涓嶈兘鏃╀簬缁翠慨寮�濮嬫椂闂�'); + } + return Promise.resolve(); + } + } + ] + } + + }, + + { + label: '缁翠慨浜哄憳', + field: 'technician', + component: 'Input', + rules: [{ required: true, message: '璇疯緭鍏ョ淮淇汉鍛�' }], + }, + { + label: '鏁呴殰绫诲瀷', + field: 'faultType', + component: 'Select', + componentProps:{ + options: [ + { label: '鏈烘鏁呴殰', value: '0' }, + { label: '鐢垫皵鏁呴殰', value: '1' }, + { label: '鍏朵粬鏁呴殰', value: '2' } + ] + }, + rules: [{ required: true, message: '璇烽�夋嫨鏁呴殰绫诲瀷' }], + }, + { + label: '鏁呴殰鎻忚堪', + field: 'description', + component: 'InputTextArea', + }, + { + label: '缁翠慨鎺柦', + field: 'solution', + component: 'InputTextArea', + }, + { + label: '鏇存崲閰嶄欢', + field: 'parts', + component: 'InputTextArea', + }, + { + label: '缁翠慨璐圭敤', + field: 'cost', + component: 'Input', + rules: [{ + pattern: /^\d+(\.\d+)?$/, + message: '璇疯緭鍏ユ暟瀛�', + trigger: 'blur' + }], + }, + { + label: '缁翠慨鐘舵��', + field: 'status', + component: 'Select', + componentProps:{ + options: [ + { label: '寰呯淮淇�', value: '0' }, + { label: '缁翠慨涓�', value: '1' }, + { label: '宸插畬鎴�', value: '2' } + ] + }, + }, + // TODO 涓婚敭闅愯棌瀛楁锛岀洰鍓嶅啓姝讳负ID + { + label: '', + field: 'id', + component: 'Input', + show: false + }, +]; + + + +/** +* 娴佺▼琛ㄥ崟璋冪敤杩欎釜鏂规硶鑾峰彇formSchema +* @param param +*/ +export function getBpmFormSchema(_formData): FormSchema[]{ + // 榛樿鍜屽師濮嬭〃鍗曚繚鎸佷竴鑷� 濡傛灉娴佺▼涓厤缃簡鏉冮檺鏁版嵁锛岃繖閲岄渶瑕佸崟鐙鐞唂ormSchema + return formSchema; +} \ No newline at end of file diff --git a/src/views/dry/repair/DryRepairRecordsList.vue b/src/views/dry/repair/DryRepairRecordsList.vue new file mode 100644 index 0000000..6417674 --- /dev/null +++ b/src/views/dry/repair/DryRepairRecordsList.vue @@ -0,0 +1,211 @@ +<template> + <div> + <!--寮曠敤琛ㄦ牸--> + <BasicTable @register="registerTable" :rowSelection="rowSelection"> + <!--鎻掓Ы:table鏍囬--> + <template #tableTitle> + <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 鏂板</a-button> + <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 瀵煎嚭</a-button> + <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">瀵煎叆</j-upload-button> + <a-dropdown v-if="selectedRowKeys.length > 0"> + <template #overlay> + <a-menu> + <a-menu-item key="1" @click="batchHandleDelete"> + <Icon icon="ant-design:delete-outlined"></Icon> + 鍒犻櫎 + </a-menu-item> + </a-menu> + </template> + <a-button>鎵归噺鎿嶄綔 + <Icon icon="mdi:chevron-down"></Icon> + </a-button> + </a-dropdown> + </template> + <!--鎿嶄綔鏍�--> + <template #action="{ record }"> + <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/> + </template> + <!--瀛楁鍥炴樉鎻掓Ы--> + <template #htmlSlot="{text}"> + <div v-html="text"></div> + </template> + + <template #fileSlot="{text}"> + <span v-if="!text" style="font-size: 12px;font-style: italic;">鏃犳枃浠�</span> + <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">涓嬭浇</a-button> + </template> + </BasicTable> + <!-- 琛ㄥ崟鍖哄煙 --> + <DryRepairRecordsModal @register="registerModal" @success="handleSuccess"></DryRepairRecordsModal> + </div> + <!--瀛愯〃琛ㄦ牸tab--> + <a-tabs defaultActiveKey="1" style="margin: 10px"> + <a-tab-pane tab="浣跨敤澶囦欢鍒楄〃" key="1" forceRender> + <DrySpareStockLogListRepair /> + </a-tab-pane> + </a-tabs> + <!-- 琛ㄥ崟鍖哄煙 --> + <DryRepairRecordsModal @register="registerModal" @success="handleSuccess"></DryRepairRecordsModal> +</template> + +<script lang="ts" name="dry-dryRepairRecords" setup> + import {ref, computed, unref, provide} from 'vue'; + import {BasicTable, useTable, TableAction} from '/@/components/Table'; + import {useModal} from '/@/components/Modal'; + import { useListPage } from '/@/hooks/system/useListPage' + import DryRepairRecordsModal from './components/DryRepairRecordsModal.vue' + import DrySpareStockLogListRepair from './DrySpareStockLogListRepair.vue'; + import {columns, searchFormSchema} from './DryRepairRecords.data'; + import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './DryRepairRecords.api'; + import { downloadFile } from '/@/utils/common/renderUtils'; + const checkedKeys = ref<Array<string | number>>([]); + const selectedRows = ref<Array<any>>([]); // 鏂板锛氱敤浜庡瓨鍌ㄩ�変腑鐨勮鏁版嵁 + //娉ㄥ唽model + const [registerModal, {openModal}] = useModal(); + //娉ㄥ唽table鏁版嵁 + const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({ + tableProps:{ + title: '缁翠慨璁板綍', + api: list, + columns, + canResize:false, + formConfig: { + //labelWidth: 120, + schemas: searchFormSchema, + autoSubmitOnEnter:true, + showAdvancedButton:true, + fieldMapToNumber: [ + ], + fieldMapToTime: [ + ], + }, + actionColumn: { + width: 120, + fixed:'right' + }, + rowSelection: { + type: 'radio', + onChange: (selectedRowKeyList: (string | number)[], selectedRowList: any[]) => { + selectedRowKeys.value = selectedRowKeyList; + selectedRows.value = selectedRowList; // 鏇存柊閫変腑鐨勮鏁版嵁 + }, + }, + customRow: (record) => { + return { + onClick: () => { + if (selectedRowKeys.value.includes(record.id)) { + selectedRowKeys.value = []; + selectedRows.value = []; + + } else { + selectedRowKeys.value = [record.id]; + selectedRows.value = [record]; + } + }, + }; + }, // 纭繚涓昏〃鏄崟閫� + }, + exportConfig: { + name:"缁翠慨璁板綍", + url: getExportUrl, + }, + importConfig: { + url: getImportUrl, + success: handleSuccess + }, + }) + + const [registerTable, {reload, updateTableDataRecord},{ rowSelection, selectedRowKeys }] = tableContext + + const orderNumber = computed(() => ( + unref(selectedRows).length > 0 ? unref(selectedRows)[0].orderNumber : '1')) // 淇敼锛氫紶閫抩rderNumber锛屽鏋滀负绌哄垯浼犻�掔┖瀛楃涓� + ; + //涓嬪彂 orderNumber,瀛愮粍浠舵帴鏀� + provide('orderNumber', orderNumber); + + /** + * 鏂板浜嬩欢 + */ + function handleAdd() { + openModal(true, { + isUpdate: false, + showFooter: true, + }); + } + /** + * 缂栬緫浜嬩欢 + */ + function handleEdit(record: Recordable) { + openModal(true, { + record, + isUpdate: true, + showFooter: true, + }); + } + /** + * 璇︽儏 + */ + function handleDetail(record: Recordable) { + openModal(true, { + record, + isUpdate: true, + showFooter: false, + }); + } + /** + * 鍒犻櫎浜嬩欢 + */ + async function handleDelete(record) { + await deleteOne({id: record.id}, handleSuccess); + } + /** + * 鎵归噺鍒犻櫎浜嬩欢 + */ + async function batchHandleDelete() { + await batchDelete({ids: selectedRowKeys.value}, () => { + selectedRowKeys.value = []; + reload(); + }); + } + /** + * 鎴愬姛鍥炶皟 + */ + function handleSuccess() { + (selectedRowKeys.value = []) && reload(); + } + /** + * 鎿嶄綔鏍� + */ + function getTableAction(record){ + return [ + { + label: '缂栬緫', + onClick: handleEdit.bind(null, record), + }, + { + label: '鍒犻櫎', + popConfirm: { + title: '鏄惁纭鍒犻櫎', + confirm: handleDelete.bind(null, record), + } + } + ] + } + /** + * 涓嬫媺鎿嶄綔鏍� + */ + function getDropDownAction(record){ + return [ + { + label: '璇︽儏', + onClick: handleDetail.bind(null, record), + } + ] + } + + +</script> + +<style scoped> + +</style> diff --git a/src/views/dry/repair/DryRepairRecords_menu_insert.sql b/src/views/dry/repair/DryRepairRecords_menu_insert.sql new file mode 100644 index 0000000..e971f1e --- /dev/null +++ b/src/views/dry/repair/DryRepairRecords_menu_insert.sql @@ -0,0 +1,26 @@ +-- 娉ㄦ剰锛氳椤甸潰瀵瑰簲鐨勫墠鍙扮洰褰曚负views/dry鏂囦欢澶逛笅 +-- 濡傛灉浣犳兂鏇存敼鍒板叾浠栫洰褰曪紝璇蜂慨鏀箂ql涓璫omponent瀛楁瀵瑰簲鐨勫�� + + +INSERT INTO sys_permission(id, parent_id, name, url, component, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_route, is_leaf, keep_alive, hidden, hide_tab, description, status, del_flag, rule_flag, create_by, create_time, update_by, update_time, internal_or_external) +VALUES ('2025072104372230580', NULL, '缁翠慨璁板綍', '/dry/dryRepairRecordsList', 'dry/maint/DryRepairRecordsList', NULL, NULL, 0, NULL, '1', 0.00, 0, NULL, 1, 0, 0, 0, 0, NULL, '1', 0, 0, 'admin', '2025-07-21 16:37:58', NULL, NULL, 0); + +-- 鏉冮檺鎺у埗sql +-- 鏂板 +INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external) +VALUES ('2025072104372230581', '2025072104372230580', '娣诲姞缁翠慨璁板綍', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_repair_records:add', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2025-07-21 16:37:58', NULL, NULL, 0, 0, '1', 0); +-- 缂栬緫 +INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external) +VALUES ('2025072104372230582', '2025072104372230580', '缂栬緫缁翠慨璁板綍', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_repair_records:edit', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2025-07-21 16:37:58', NULL, NULL, 0, 0, '1', 0); +-- 鍒犻櫎 +INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external) +VALUES ('2025072104372230583', '2025072104372230580', '鍒犻櫎缁翠慨璁板綍', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_repair_records:delete', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2025-07-21 16:37:58', NULL, NULL, 0, 0, '1', 0); +-- 鎵归噺鍒犻櫎 +INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external) +VALUES ('2025072104372230584', '2025072104372230580', '鎵归噺鍒犻櫎缁翠慨璁板綍', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_repair_records:deleteBatch', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2025-07-21 16:37:58', NULL, NULL, 0, 0, '1', 0); +-- 瀵煎嚭excel +INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external) +VALUES ('2025072104372230585', '2025072104372230580', '瀵煎嚭excel_缁翠慨璁板綍', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_repair_records:exportXls', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2025-07-21 16:37:58', NULL, NULL, 0, 0, '1', 0); +-- 瀵煎叆excel +INSERT INTO sys_permission(id, parent_id, name, url, component, is_route, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_leaf, keep_alive, hidden, hide_tab, description, create_by, create_time, update_by, update_time, del_flag, rule_flag, status, internal_or_external) +VALUES ('2025072104372230586', '2025072104372230580', '瀵煎叆excel_缁翠慨璁板綍', NULL, NULL, 0, NULL, NULL, 2, 'dry:dry_repair_records:importExcel', '1', NULL, 0, NULL, 1, 0, 0, 0, NULL, 'admin', '2025-07-21 16:37:58', NULL, NULL, 0, 0, '1', 0); diff --git a/src/views/dry/repair/components/DryRepairRecordsForm.vue b/src/views/dry/repair/components/DryRepairRecordsForm.vue new file mode 100644 index 0000000..6f4fe5d --- /dev/null +++ b/src/views/dry/repair/components/DryRepairRecordsForm.vue @@ -0,0 +1,70 @@ +<template> + <div style="min-height: 400px"> + <BasicForm @register="registerForm"></BasicForm> + <div style="width: 100%;text-align: center" v-if="!formDisabled"> + <a-button @click="submitForm" pre-icon="ant-design:check" type="primary">鎻� 浜�</a-button> + </div> + </div> +</template> + +<script lang="ts"> + import {BasicForm, useForm} from '/@/components/Form/index'; + import {computed, defineComponent} from 'vue'; + import {defHttp} from '/@/utils/http/axios'; + import { propTypes } from '/@/utils/propTypes'; + import {getBpmFormSchema} from '../DryRepairRecords.data'; + import {saveOrUpdate} from '../DryRepairRecords.api'; + + export default defineComponent({ + name: "DryRepairRecordsForm", + components:{ + BasicForm + }, + props:{ + formData: propTypes.object.def({}), + formBpm: propTypes.bool.def(true), + }, + setup(props){ + const [registerForm, { setFieldsValue, setProps, getFieldsValue }] = useForm({ + labelWidth: 150, + schemas: getBpmFormSchema(props.formData), + showActionButtonGroup: false, + baseColProps: {span: 12} + }); + + const formDisabled = computed(()=>{ + if(props.formData.disabled === false){ + return false; + } + return true; + }); + + let formData = {}; + const queryByIdUrl = '/dry/dryRepairRecords/queryById'; + async function initFormData(){ + let params = {id: props.formData.dataId}; + const data = await defHttp.get({url: queryByIdUrl, params}); + formData = {...data} + //璁剧疆琛ㄥ崟鐨勫�� + await setFieldsValue(formData); + //榛樿鏄鐢� + await setProps({disabled: formDisabled.value}) + } + + async function submitForm() { + let data = getFieldsValue(); + let params = Object.assign({}, formData, data); + console.log('琛ㄥ崟鏁版嵁', params) + await saveOrUpdate(params, true) + } + + initFormData(); + + return { + registerForm, + formDisabled, + submitForm, + } + } + }); +</script> \ No newline at end of file diff --git a/src/views/dry/repair/components/DryRepairRecordsModal.vue b/src/views/dry/repair/components/DryRepairRecordsModal.vue new file mode 100644 index 0000000..fdca7b0 --- /dev/null +++ b/src/views/dry/repair/components/DryRepairRecordsModal.vue @@ -0,0 +1,74 @@ +<template> + <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="896" @ok="handleSubmit"> + <BasicForm @register="registerForm"/> + </BasicModal> +</template> + +<script lang="ts" setup> + import {ref, computed, unref} from 'vue'; + import {BasicModal, useModalInner} from '/@/components/Modal'; + import {BasicForm, useForm} from '/@/components/Form/index'; + import {formSchema} from '../DryRepairRecords.data'; + import {saveOrUpdate, generateRepairNo} from '../DryRepairRecords.api'; + // Emits澹版槑 + const emit = defineEmits(['register','success']); + const isUpdate = ref(true); + //琛ㄥ崟閰嶇疆 + const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({ + //labelWidth: 150, + schemas: formSchema, + showActionButtonGroup: false, + baseColProps: {span: 12} + }); + //琛ㄥ崟璧嬪�� + const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => { + //閲嶇疆琛ㄥ崟 + await resetFields(); + console.log("registerModal:::","repair") + setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter}); + isUpdate.value = !!data?.isUpdate; + if (unref(isUpdate)) { + //琛ㄥ崟璧嬪�� + await setFieldsValue({ + ...data.record, + }); + } else { + // 鏂板妯″紡涓嬭嚜鍔ㄧ敓鎴愮淮淇崟鍙� + const res = await generateRepairNo(); + console.log("鑾峰彇缁翠慨鍗曞彿res锛氾細",res); + await setFieldsValue({ + orderNumber: res + }); + } + // 闅愯棌搴曢儴鏃剁鐢ㄦ暣涓〃鍗� + setProps({ disabled: !data?.showFooter }) + }); + //璁剧疆鏍囬 + const title = computed(() => (!unref(isUpdate) ? '鏂板' : '缂栬緫')); + //琛ㄥ崟鎻愪氦浜嬩欢 + async function handleSubmit(v) { + try { + let values = await validate(); + setModalProps({confirmLoading: true}); + //鎻愪氦琛ㄥ崟 + await saveOrUpdate(values, isUpdate.value); + //鍏抽棴寮圭獥 + closeModal(); + //鍒锋柊鍒楄〃 + emit('success'); + } finally { + setModalProps({confirmLoading: false}); + } + } +</script> + +<style lang="less" scoped> + /** 鏃堕棿鍜屾暟瀛楄緭鍏ユ鏍峰紡 */ + :deep(.ant-input-number){ + width: 100% + } + + :deep(.ant-calendar-picker){ + width: 100% + } +</style> -- Gitblit v1.9.3