| package.json | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/router/routes/index.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/dashboard/map/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/dry/bigScreen/BigEqp.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/dry/bigScreen/BigEqpCloud.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/dry/bigScreen/BigFault.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/dry/bigScreen/BigFaultCloud.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/system/loginmini/MiniLogin.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/system/tenant/tenant.api.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
package.json
@@ -34,6 +34,7 @@ "gen:icon": "esno ./build/generate/icon/index.ts" }, "dependencies": { "@amap/amap-jsapi-loader": "^1.0.1", "@ant-design/colors": "^6.0.0", "@ant-design/icons-vue": "^6.1.0", "@dataview/datav-vue3": "^0.0.0-test.1672506674342", @@ -82,6 +83,7 @@ "tinymce": "^5.10.3", "vditor": "^3.8.13", "vue": "^3.2.33", "vue-amap": "^0.5.10", "vue-cropper": "^0.5.6", "vue-cropperjs": "^5.0.0", "vue-i18n": "^9.1.9", src/router/routes/index.ts
@@ -81,6 +81,15 @@ }, } export const BigFault: AppRouteRecordRaw = { path: '/bigFault', name: 'BigFault', component: () => import('/@/views/dry/bigScreen/BigFault.vue'), meta: { title: t('big.screen.fault'), }, } //update-begin---author:wangshuai ---date:20220629 forï¼auth2ç»å½é¡µé¢è·¯ç±------------ export const Oauth2LoginRoute: AppRouteRecordRaw = { path: '/oauth2-app/login', @@ -108,4 +117,4 @@ } // Basic routing without permission export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute,BigScreen,BigScreenN,BigEqp,BigEqpCloud,BigFaultCloud] export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute,BigScreen,BigScreenN,BigEqp,BigEqpCloud,BigFaultCloud,BigFault] src/views/dashboard/map/index.vue
¶Ô±ÈÐÂÎļþ @@ -0,0 +1,233 @@ <template> <div class="home_div"> <div id="container" style="height: 100%; width: 100%"></div> </div> </template> <script setup lang="ts"> import AMapLoader from '@amap/amap-jsapi-loader' import { listAllTenant } from '../../system/tenant/tenant.api' import { onMounted, ref } from 'vue' import { router } from '/@/router' const tenants = ref([]) const points = ref([]) const initMap = () => { window._AMapSecurityConfig = { securityJsCode: 'c1fa6ceb212b62bf9489da9c9986eb5e', } AMapLoader.load({ key: '1582675884a1ef3c90b5ae1769c765a7', // ç³è¯·å¥½çWeb端å¼åè Keyï¼é¦æ¬¡è°ç¨ load æ¶å¿ å¡« version: '2.0', // æå®è¦å è½½ç JSAPI ççæ¬ï¼ç¼ºçæ¶é»è®¤ä¸º 1.4.15 plugins: ['AMap.Scale'], //éè¦ä½¿ç¨ççæ件å表ï¼å¦æ¯ä¾å°º'AMap.Scale'ï¼æ¯ææ·»å å¤ä¸ªå¦ï¼['...','...'] }).then((AMap) => { var map = new AMap.Map('container', { viewMode: '2D', // æ¯å¦ä¸º3Då°å¾æ¨¡å¼ zoom: 5, // å°å¾æ¾ç¤ºç缩æ¾çº§å« zooms: [2, 22], // å°å¾ç¼©æ¾èå´ // center: arr, // å°å¾ä¸å¿ç¹åæ layers: [new AMap.createDefaultLayer()], //设置å¾å±,å¯è®¾ç½®æå å«ä¸ä¸ªæå¤ä¸ªå¾å±çæ°ç» mapStyle: 'amap://styles/whitesmoke', //设置å°å¾çæ¾ç¤ºæ ·å¼ resizeEnable: true, // æ¯å¦çæ§å°å¾å®¹å¨å°ºå¯¸åå }) var clusterIndexSet = { //å®ä¹ç¹èåè§å city: { minZoom: 2, maxZoom: 9, }, district: { minZoom: 9, maxZoom: 11, }, building: { minZoom: 11, maxZoom: 22, }, } function getStyle(context) { var clusterData = context.clusterData // èåä¸å å«æ°æ® var index = context.index // èåçæ¡ä»¶ var count = context.count // èåä¸ç¹çæ»æ° var marker = context.marker // èåç»å¶ç¹ Marker 对象 var color = ['66,130,198', '107,174,214', '78,200,211'] var indexs = ['city', 'district', 'building'] var i = indexs.indexOf(index['mainKey']) var text = clusterData[0][index['mainKey']] var size = Math.round(30 + Math.pow(count / points.value.length, 1 / 5) * 70) if (i <= 1) { var extra = '<span class="showCount">' + context.count + '家</span>' text = '<span class="showName">' + text + '</span>' text += extra } else { size = 12 * text.length + 20 } var style = { bgColor: 'rgba(' + color[i] + ',.8)', borderColor: 'rgba(' + color[i] + ',1)', text: text, size: size, index: i, color: '#ffffff', textAlign: 'center', boxShadow: '0px 0px 3px rgba(0,0,0,0.6)', } return style } function getPosition(context) { var key = context.index.mainKey var dataItem = context.clusterData && context.clusterData[0] var districtName = dataItem[key] if (!district[districtName]) { return null } var center = district[districtName].center.split(',') var centerLnglat = new AMap.LngLat(center[0], center[1]) return centerLnglat } function _customRender(data) { const keys = Object.keys(data.clusterData) let markers = [] for (var i = 0; i < keys.length; i++) { var key = keys[i] var cluster = data.clusterData[key] var position = cluster.data[0].lnglat var marker = new AMap.LabelMarker({ position: position, text: { content: cluster.data.length.toString(), style: { fillColor: '#ffffff', }, }, }) markers.push(marker) } return { type: 'type', layer: null, markers: markers, } } //èåç¹æ ·å¼ // var _renderClusterMarker = function (context) { // //context 为åè°åæ°ï¼ // console.log("context", context) // //å å«å¦ä¸å±æ§ marker:å½åèåç¹ï¼count:å½åèåç¹å çç¹æ°é // var clusterCount = context.count //èåç¹å ç¹æ°é // context.marker.setContent('<div style="background-color:#00ff00">' + clusterCount + '</div>') // } // èªå®ä¹èåç¹æ ·å¼ function _renderClusterMarker(context) { var clusterData = context.clusterData // èåä¸å å«æ°æ® var index = context.index // èåçæ¡ä»¶ var count = context.count // èåä¸ç¹çæ»æ° var marker = context.marker // èåç¹æ 记对象 var styleObj = getStyle(context) // èªå®ä¹ç¹æ è®°æ ·å¼ var div = document.createElement('div') div.className = 'amap-cluster' div.style.backgroundColor = styleObj.bgColor div.style.width = styleObj.size + 'px' if (styleObj.index <= 1) { div.style.height = styleObj.size + 'px' // èªå®ä¹ç¹å»äºä»¶ context.marker.on('click', function (e) { console.log(e) var curZoom = map.getZoom() if (curZoom < 9) { curZoom = 9 } else if (curZoom < 11) { curZoom = 11 } map.setZoomAndCenter(curZoom, e.lnglat) }) } else { // èªå®ä¹ç¹å»äºä»¶ context.marker.on('click', function (e) { let innerText = e.target.dom.innerText; tenants.value.forEach(item => { if(item.companyAddress.includes(innerText)) { //router.push({ path: '/tongjitang/bigworkshop', params: { tenant: item.id } }) // router.push( {path: '/tongjitang/bigworkshop/' + item.id} ) // router.push( '/tongjitang/bigworkshop/' + item.id ) let href = '/tongjitang/bigworkshop/' + item.id; window.open(href, '_blank'); } }) }) console.log(router) } div.style.border = 'solid 1px ' + styleObj.borderColor div.style.borderRadius = styleObj.size + 'px' div.innerHTML = styleObj.text div.style.color = styleObj.color div.style.textAlign = styleObj.textAlign div.style.boxShadow = styleObj.boxShadow context.marker.setContent(div) // èªå®ä¹èåç¹æ è®°æ¾ç¤ºä½ç½® // var position = getPosition(context); // if(position){ // context.marker.setPosition(position); // } context.marker.setAnchor('center') } map.plugin(['AMap.IndexCluster'], function () { console.log('cluster', points.value) var indexCluster = new AMap.IndexCluster(map, points.value, { renderClusterMarker: _renderClusterMarker, //èªå®ä¹èåç¹æ ·å¼ clusterIndexSet: clusterIndexSet, //èåè§å }) }) }) } const getTenants = () => { listAllTenant().then((res) => { tenants.value = res res.forEach((item) => { let point = JSON.parse(item.companyAddress) points.value.push(point) }) initMap() //console.log('points', points.value) }) } getTenants() onMounted(() => {}) </script> <style> .amap-cluster { display: flex; justify-content: center; flex-direction: column; align-items: center; font-size: 12px; } .showName { font-size: 14px; } .showCount, .showName { display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 80%; } </style> <style scoped lang="less"> .home_div { height: 100%; width: 100%; padding: 0px; margin: 0px; position: relative; } </style>
@@ -118,44 +118,235 @@ > {{ statusTxt }} </div> <div v-if="realData?.warning" style=" margin-left: 100px; font-size: 22px; background: sandybrown; <!-- <div v-if="realData?.warning" style=" --> <!-- margin-left: 100px;--> <!-- font-size: 22px;--> <!-- background: sandybrown;--> border-radius: 10px; line-height: 25px; max-width: 500px; padding: 15px; font-weight: bold;" > {{ realData?.warnMsg }} </div> <!-- border-radius: 10px;--> <!-- line-height: 25px;--> <!-- max-width: 500px;--> <!-- padding: 15px;--> <!-- font-weight: bold;" >--> <!-- {{ realData?.warnMsg }}--> <!-- </div>--> <!-- --> <!-- <div--> <!-- v-if="realData?.isError"--> <!-- class="eqpInfoText blingbling outDiv"--> <!-- style="--> <!-- position: absolute;--> <!-- font-size: 30px;--> <!-- max-height: 200px;--> <!-- max-width: 720px;--> <!-- margin-top: 300px;--> <!-- border-radius: 10px;--> <!-- background-color: #ce0000;--> <!-- color: white;--> <!-- padding: 10px 30px;--> <!-- "--> <!-- >--> <!-- <div class="outDiv">--> <!-- <div><Icon icon="bx:error" :size="30" /> </div>--> <!-- <div--> <!-- ><span>{{ realData?.errorMsg }}</span></div--> <!-- >--> <!-- </div>--> <!-- </div>--> </div> </div> <div style="width: 848px; height: 485px; position: absolute;" @click="showFault"> <div v-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="realData?.isError" class="eqpInfoText blingbling outDiv" style=" position: absolute; font-size: 30px; max-height: 200px; max-width: 720px; margin-top: 300px; border-radius: 10px; background-color: #ce0000; color: white; padding: 10px 30px; " > <div class="outDiv"> <div><Icon icon="bx:error" :size="30" /> </div> <div ><span>{{ realData?.errorMsg }}</span></div > <div v-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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-if="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> </dv-border-box7> <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px"> @@ -524,6 +715,40 @@ var efficiencyLineChart: echarts.ECharts var compareChart: 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' @@ -1327,7 +1552,11 @@ statusGif = 'chaiwangban-1' setTimeout(shangliao, 7000) } function showFault () { console.log('showFault') router.push({ path: '/bigFault', query: { num: num } }) } function shangliao() { statusGif = 'shangliao-N' setTimeout(() => { @@ -1726,12 +1955,109 @@ res.isError = false if (res.fault) { res.isError = true res.errorMsg = res.fault res.errorMsg = res.fault; const faults = res.fault; console.log('errorMsg:', res.fault) if (faults.includes('æ¥åæ¥è¦')) { shebeijiting.value = true; } if (faults.includes('å·¦åæ¥å')) { zuoqianjiting.value = true; } if (faults.includes('é¢æ¿æ¥å')) { mianbanjiting.value = true; } if (faults.includes('åºææ¥å')) { chuliaojiting.value = true; } if (faults.includes('温度失æ§')) { wendubaojing.value = true; } if (faults.includes('æ»çå')) { guntongsheng.value = true; } if (faults.includes('æ»çé')) { guntongjiang.value = true; } if (faults.includes('æ»ççµæºè¿æµ')) { guntongguoliu.value = true; } if (faults.includes('é£ç®±å')) { fengxiangsheng.value = true; } if (faults.includes('é£ç®±é')) { fengxiangjiang.value = true; } if (faults.includes('é£ç®±é£æºè¿æµ')) { fengjiguoliu.value = true; } } 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; } if (warnings.includes('å³åé¨')) { youqianmen.value = true; } if (warnings.includes('å·¦åé¨')) { zuohoumen.value = true; } if (warnings.includes('å³åé¨')) { youhoumen.value = true; } if (warnings.includes('æ»çä¸å¨é«ä½')) { guntongbuzaigaowei.value = true; } if (warnings.includes('é£ç®±ä¸å¨ä½ä½')) { fengxiangbuzaidiwei.value = true; } if (warnings.includes('é£ç®±ä¸å¨é«ä½')) { fengxiangbuzaigaowei.value = true; } if (warnings.includes('å çä½ä¼ æå¨')) { jiareweichuanganqi.value = true; } if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { zuoqianfengxianggaowei.value = true; } if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { youqianfengxianggaowei.value = true; } if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { zuohoufengxianggaowei.value = true; } if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { youhoufengxianggaowei.value = true; } if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { zuoqianfengxiangdiwei.value = true; } if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { youqianfengxiangdiwei.value = true; } if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { zuohoufengxiangdiwei.value = true; } if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { youhoufengxiangdiwei.value = true; } if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { zuoqianguntongdiwei.value = true; } if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { youqianguntongdiwei.value = true; } if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { zuohouguntongdiwei.value = true; } if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { youhouguntongdiwei.value = true; } } } else { res = { @@ -1883,7 +2209,7 @@ margin-top: -30px; } .leftTop0 { height: 600px; height: 260px; width: 848px; display: flex; justify-content: center; src/views/dry/bigScreen/BigEqpCloud.vue
@@ -158,189 +158,189 @@ </div> </div> <div style="width: 848px; height: 485px; position: absolute;" @click="showFault"> <div v-if="true | zuoqianjiting" class="error-div" style=" top:309px; left:418px"> <div v-if="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-if="true | shebeijiting" class="error-div" style=" top:111px; left:484px"> <div v-if="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-if="true | chuliaojiting" class="error-div" style=" top:300px; left:129px"> <div v-if="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-if="true | mianbanjiting" class="error-div" style=" top:258px; left:659px"> <div v-if="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-if="true | fengxiangsheng" class="error-div" style=" top:294px; left:517px"> <div v-if="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-if="true | fengxiangjiang" class="error-div" style=" top:319px; left:517px"> <div v-if="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-if="true | fengjiguoliu" class="error-div" style=" top:335px; left:655px"> <div v-if="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-if="true | guntongsheng" class="error-div" style=" top:198px; left:517px"> <div v-if="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-if="true | guntongjiang" class="error-div" style=" top:223px; left:517px"> <div v-if="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-if="true | guntongguoliu" class="error-div" style=" top:209px; left:642px"> <div v-if="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-if="true | wendubaojing" class="error-div" style=" top:234px; left:659px"> <div v-if="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-if="true | zuoqianmen" class="error-div" style=" top:388px; left:415px"> <div v-if="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-if="true | zuohoumen" class="error-div" style=" top:367px; left:587px"> <div v-if="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-if="true | youqianmen" class="error-div" style=" top:388px; left:284px"> <div v-if="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-if="true | youhoumen" class="error-div" style=" top:367px; left:478px"> <div v-if="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-if="true | guntongbuzaigaowei" class="error-div" style=" top:173px; left:517px"> <div v-if="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-if="true | fengxiangbuzaigaowei" class="error-div" style=" top:269px; left:517px"> <div v-if="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-if="true | fengxiangbuzaidiwei" class="error-div" style=" top:343px; left:517px"> <div v-if="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-if="true | jiareweichuanganqi" class="error-div" style=" top:283px; left:642px"> <div v-if="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-if="true | zuoqianfengxianggaowei" class="error-div" style=" top:334px; left:362px"> <div v-if="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-if="true | zuoqianfengxiangdiwei" class="error-div" style=" top:334px; left:362px"> <div v-if="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-if="true | zuohoufengxianggaowei" class="error-div" style=" top:309px; left:642px"> <div v-if="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-if="true | zuohoufengxiangdiwei" class="error-div" style=" top:309px; left:642px"> <div v-if="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-if="true | youqianfengxianggaowei" class="error-div" style=" top:272px; left:300px"> <div v-if="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-if="true | youqianfengxiangdiwei" class="error-div" style=" top:272px; left:300px"> <div v-if="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-if="true | youhoufengxianggaowei" class="error-div" style=" top:246px; left:506px"> <div v-if="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-if="true | youhoufengxiangdiwei" class="error-div" style=" top:246px; left:506px"> <div v-if="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-if="true | zuoqianguntongdiwei" class="error-div" style=" top:175px; left:358px"> <div v-if="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-if="true | zuohouguntongdiwei" class="error-div" style=" top:158px; left:643px"> <div v-if="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-if="true | youqianguntongdiwei" class="error-div" style=" top:150px; left:268px"> <div v-if="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-if="true | youhouguntongdiwei" class="error-div" style=" top:135px; left:506px"> <div v-if="youhouguntongdiwei" class="error-div" style=" top:135px; left:506px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å³åæ»çä¸å¨ä½ä½ @@ -1826,6 +1826,9 @@ res.zhengqi = lastTrend.steam / (res.originWeight - lastTrend.weight) } res.zhengqi = Number(res.zhengqi) if (res.zhengqi < 0) { res.zhengqi = 0 } //eqp.value.steamConsumption = Number(eqp.value.steamConsumption) // res.zhengqi = eqp.value.steamConsumption - 3 // console.log(res); @@ -1851,6 +1854,9 @@ } // res.dian = eqp.value.powerConsumption - 1.5 res.dian = Number(res.dian) if (res.dian < 0) { res.dian = 0 } //eqp.value.powerConsumption = Number(eqp.value.powerConsumption) if (res.dian > res.wattAvg) { console.log("dian::", res.dian,res.wattAvg ) @@ -1952,14 +1958,109 @@ res.isError = false if (res.fault) { res.isError = true res.errorMsg = res.fault console.log("errorMsg:",res.fault) res.errorMsg = res.fault; const faults = res.fault; console.log('errorMsg:', res.fault) if (faults.includes('æ¥åæ¥è¦')) { shebeijiting.value = true; } if (faults.includes('å·¦åæ¥å')) { zuoqianjiting.value = true; } if (faults.includes('é¢æ¿æ¥å')) { mianbanjiting.value = true; } if (faults.includes('åºææ¥å')) { chuliaojiting.value = true; } if (faults.includes('温度失æ§')) { wendubaojing.value = true; } if (faults.includes('æ»çå')) { guntongsheng.value = true; } if (faults.includes('æ»çé')) { guntongjiang.value = true; } if (faults.includes('æ»ççµæºè¿æµ')) { guntongguoliu.value = true; } if (faults.includes('é£ç®±å')) { fengxiangsheng.value = true; } if (faults.includes('é£ç®±é')) { fengxiangjiang.value = true; } if (faults.includes('é£ç®±é£æºè¿æµ')) { fengjiguoliu.value = true; } } if (res.warning) { res.isWarning = true res.warnMsg = res.warning console.log("warnMsg:",res.warning) const warnings = res.warning; console.log('warnMsg:', res.warning) if (warnings.includes('å·¦åé¨')) { zuoqianmen.value = true; } if (warnings.includes('å³åé¨')) { youqianmen.value = true; } if (warnings.includes('å·¦åé¨')) { zuohoumen.value = true; } if (warnings.includes('å³åé¨')) { youhoumen.value = true; } if (warnings.includes('æ»çä¸å¨é«ä½')) { guntongbuzaigaowei.value = true; } if (warnings.includes('é£ç®±ä¸å¨ä½ä½')) { fengxiangbuzaidiwei.value = true; } if (warnings.includes('é£ç®±ä¸å¨é«ä½')) { fengxiangbuzaigaowei.value = true; } if (warnings.includes('å çä½ä¼ æå¨')) { jiareweichuanganqi.value = true; } if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { zuoqianfengxianggaowei.value = true; } if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { youqianfengxianggaowei.value = true; } if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { zuohoufengxianggaowei.value = true; } if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { youhoufengxianggaowei.value = true; } if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { zuoqianfengxiangdiwei.value = true; } if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { youqianfengxiangdiwei.value = true; } if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { zuohoufengxiangdiwei.value = true; } if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { youhoufengxiangdiwei.value = true; } if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { zuoqianguntongdiwei.value = true; } if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { youqianguntongdiwei.value = true; } if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { zuohouguntongdiwei.value = true; } if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { youhouguntongdiwei.value = true; } } } else { res = { src/views/dry/bigScreen/BigFault.vue
¶Ô±ÈÐÂÎļþ @@ -0,0 +1,1372 @@ <template> <dv-full-screen-container> <div class="eqpBox"> <div class="eqpRow"> <div class="eqpImage" :style="{ 'background-position': position + 'px' }"> <div class="leftEqp"> <dv-border-box7 class="leftTop"> <div class="leftTop0"> <div style="padding-top: 20px; padding-left: 10px" @click="back"> <Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" /> </div> <div class="leftTop1"> <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" /> <div> <div class="mainInfo">{{ realData?.totalRemain | 0 }} Min</div> <div class="subhead">å©ä½æ¶é´</div> </div> </div> <div class="leftTop1"> <Icon icon="bi:fan" :size="50" /> <div> <div class="mainInfo">{{ realData?.trendVo?.fanFrequency | 0 }} Hz</div> <div class="subhead">é£æºé¢ç</div> </div> </div> <div class="leftTop3" :style="{ 'background-image': 'url(' + getStatusImageUrl(statusGif) + ')' }"></div> <div class="outDiv eqpStatus"> <div style=" font-size: 28px; color: white; background-color: #1595ea; height: 60px; width: 180px; line-height: 60px; text-align: center; border-radius: 10px; font-weight: bold; " > {{ statusTxt }} </div> </div> </div> <div style="width: 1200px; height: 798px; position: absolute"> <div v-if="zuoqianjiting" class="error-div" style="top: 466px; left: 589px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 70px"> å·¦åæ¥å </div> </div> <div v-if="shebeijiting" class="error-div" style="top: 170px; left: 702px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 106px"> 设å¤æ¥åï¼æ»ï¼ </div> </div> <div v-if="chuliaojiting" class="error-div" style="top: 450px; left: 158px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 70px"> åºææ¥å </div> </div> <div v-if="mianbanjiting" class="error-div" style="top: 398px; left: 978px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 70px"> é¢æ¿æ¥å </div> </div> <div v-if="fengxiangsheng" class="error-div" style="top: 476px; left: 753px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 86px"> é£ç®±åå¼å¸¸ </div> </div> <div v-if="fengxiangjiang" class="error-div" style="top: 502px; left: 753px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 86px"> é£ç®±éå¼å¸¸ </div> </div> <div v-if="fengjiguoliu" class="error-div" style="top: 510px; left: 975px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 70px"> é£æºè¿æµ </div> </div> <div v-if="guntongsheng" class="error-div" style="top: 331px; left: 753px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 86px"> æ»çåå¼å¸¸ </div> </div> <div v-if="guntongjiang" class="error-div" style="top: 356px; left: 753px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 86px"> æ»çéå¼å¸¸ </div> </div> <div v-if="guntongguoliu" class="error-div" style="top: 324px; left: 916px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 70px"> æ»çè¿æµ </div> </div> <div v-if="wendubaojing" class="error-div" style="top: 373px; left: 978px"> <div class="blingbling error-marker"></div> <div class="error-msg" style="width: 70px"> 温度æ¥è¦ </div> </div> <div v-if="zuoqianmen" class="error-div" style="top: 595px; left: 591px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 80px"> å·¦åé¨æ¥è¦ </div> </div> <div v-if="zuohoumen" class="error-div" style="top: 565px; left: 868px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 80px"> å·¦åé¨æ¥è¦ </div> </div> <div v-if="youqianmen" class="error-div" style="top: 593px; left: 396px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 80px"> å³åé¨æ¥è¦ </div> </div> <div v-if="youhoumen" class="error-div" style="top: 565px; left: 697px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 80px"> å³åé¨æ¥è¦ </div> </div> <div v-if="guntongbuzaigaowei" class="error-div" style="top: 304px; left: 753px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 100px"> æ»çä¸å¨é«ä½ </div> </div> <div v-if="fengxiangbuzaigaowei" class="error-div" style="top: 451px; left: 753px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 100px"> é£ç®±ä¸å¨é«ä½ </div> </div> <div v-if="fengxiangbuzaidiwei" class="error-div" style="top: 528px; left: 753px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 100px"> é£ç®±ä¸å¨ä½ä½ </div> </div> <div v-if="jiareweichuanganqi" class="error-div" style="top: 433px; left: 904px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å çä½ä¼ æå¨æ¥è¦ </div> </div> <div v-if="zuoqianfengxianggaowei" class="error-div" style="top: 502px; left: 535px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨é«ä½ </div> </div> <div v-if="zuoqianfengxiangdiwei" class="error-div" style="top: 528px; left: 535px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨ä½ä½ </div> </div> <div v-if="zuohoufengxianggaowei" class="error-div" style="top: 459px; left: 904px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨é«ä½ </div> </div> <div v-if="zuohoufengxiangdiwei" class="error-div" style="top: 484px; left: 904px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨ä½ä½ </div> </div> <div v-if="youqianfengxianggaowei" class="error-div" style="top: 447px; left: 420px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨é«ä½ </div> </div> <div v-if="youqianfengxiangdiwei" class="error-div" style="top: 473px; left: 420px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨ä½ä½ </div> </div> <div v-if="youhoufengxianggaowei" class="error-div" style="top: 383px; left: 805px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨é«ä½ </div> </div> <div v-if="youhoufengxiangdiwei" class="error-div" style="top: 408px; left: 805px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨ä½ä½ </div> </div> <div v-if="zuoqianguntongdiwei" class="error-div" style="top: 343px; left: 530px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å·¦åæ»çä¸å¨ä½ä½ </div> </div> <div v-if="zuohouguntongdiwei" class="error-div" style="top: 296px; left: 916px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å·¦åæ»çä¸å¨ä½ä½ </div> </div> <div v-if="youqianguntongdiwei" class="error-div" style="top: 316px; left: 419px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å³åæ»çä¸å¨ä½ä½ </div> </div> <div v-if="youhouguntongdiwei" class="error-div" style="top: 270px; left: 797px"> <div class="blingbling warn-marker"></div> <div class="warn-msg" style="width: 126px"> å³åæ»çä¸å¨ä½ä½ </div> </div> </div> </dv-border-box7> </div> <div class="rightInfo"> <div class="rightTop"> <dv-border-box7 class="tempMoisChart"> <a-row> <a-col :span="7">æ éå称</a-col> <a-col :span="7">å¼å§æ¶é´</a-col> <a-col :span="7">ç»ææ¶é´</a-col> <a-col :span="3">æç»æ¶é¿</a-col> </a-row> <div ref="scrollContainer" class="scroll-container"> <a-row v-for="item in faultList" :key="item.id"> <a-col :span="7">{{ item.faultName }}</a-col> <a-col :span="7">{{ item.startTime }}</a-col> <a-col :span="7">{{ item.endTime }}</a-col> <a-col :span="3">{{ item.totalTime }}</a-col> </a-row> </div> </dv-border-box7> </div> <div class="rightTwo"> <dv-border-box7 class="infoChart"> <div class="chartTittle"> æ éæ¶é¿ç»è®¡ </div> <!-- <div class="outDiv" style="padding-top: 20px">--> <!-- --> <!-- </div>--> <div :id="'chartDom'" style="width: 340px; height: 280px"></div> </dv-border-box7> <dv-border-box7 class="infoChart"> <div class="chartTittle">æ é次æ°çº¹ </div> <div :id="'chartDom2'" style="width: 340px; height: 280px"></div> </dv-border-box7> <dv-border-box7 class="infoChart"> <div class="chartTittle">è¦åæ¶é¿ç»è®¡</div> <div :id="'chartDom3'" style="width: 340px; height: 280px"></div> </dv-border-box7> <dv-border-box7 class="infoChart"> <div class="chartTittle"> <div> è¦å次æ°ç»è®¡</div> </div> <div :id="'chartDom4'" style="width: 340px; height: 280px"></div> </dv-border-box7> </div> </div> </div> </div> </div> </dv-full-screen-container> </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 { queryByOrderId } from '../dryFaultRecord/DryFaultRecord.api' import { dryEquipment } from '../dataDefine/DryEquipment.data' import { useUserStore } from '/@/store/modules/user' import { getTenantId, getToken } from '/@/utils/auth' const domRef = ref<Nullable<HTMLElement>>(null) const { enter, toggle, exit, isFullscreen } = useFullscreen() const { toggle: toggleDom } = useFullscreen(domRef) const Timer = ref() const Timer2 = ref() const scrollContainer = ref(null) let scrollInterval = null const isScrolling = ref(false) // æ§å¶æ¯å¦æ£å¨æ»å¨ä»¥é²æ¢éå¤è§¦å const eqps = ref([] as dryEquipment[]) 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 || 1) const userStore = useUserStore() const realData = ref({ code: 0, }) 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' // const faultConst = ['æ¥åæ¥è¦','å·¦åæ¥å','é¢æ¿æ¥å','åºææ¥å','温度失æ§','æ»çå','æ»çé','æ»ççµæºè¿æµ','é£ç®±å','é£ç®±é','é£ç®±é£æºè¿æµ'] // const warningConst = ['å·¦åé¨','å³åé¨','å·¦åé¨','å³åé¨','æ»çä¸å¨é«ä½','é£ç®±ä¸å¨ä½ä½','é£ç®±ä¸å¨é«ä½','å çä½ä¼ æå¨','å·¦åé£ç®±é«ä½ä¼ æå¨','å³åé£ç®±é«ä½ä¼ æå¨','å·¦åé£ç®±é«ä½ä¼ æå¨','å³åé£ç®±é«ä½ä¼ æå¨','å·¦åé£ç®±ä½ä½ä¼ æå¨','å³åé£ç®±ä½ä½ä¼ æå¨','å·¦åé£ç®±ä½ä½ä¼ æå¨','å³åé£ç®±ä½ä½ä¼ æå¨','å·¦åæ»çä½ä½ä¼ æå¨','å³åæ»çä½ä½ä¼ æå¨','å·¦åæ»çä½ä½ä¼ æå¨','å³åæ»çä½ä½ä¼ æå¨'] //----------------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) const faultList = ref([]) var chart1: echarts.ECharts var chart2: echarts.ECharts var chart3: echarts.ECharts var chart4: echarts.ECharts // å¨æ读åå¾ç function getHerbImageUrl(name: string) { return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href } // å¨æ读åå¾ç function getStatusImageUrl(name: string) { 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 queryEqp() { queryById({ id: router.currentRoute.value.params.id }).then((res) => { // console.log(`output->res`, res) eqp.value = res eqp.value.dryEfficiency = res.dryEfficiency eqp.value.steamConsumption = res.steamConsumption eqp.value.powerConsumption = res.powerConsumption queryRealTime() }) } function listAllEqp() { listAll({ enable: 'Y' }) .then((result) => { //console.log(`output->result`, result) eqps.value = result // result.forEach((item) => { // eqpCodes.push(item.code) // }) queryRealTime() }) .catch((err) => { //console.log(`output->err`, err) }) } function initCharts() { let chartDom1: HTMLElement = document.getElementById('chartDom') as HTMLElement let chartDom2: HTMLElement = document.getElementById('chartDom2') as HTMLElement let chartDom3: HTMLElement = document.getElementById('chartDom3') as HTMLElement let chartDom4: HTMLElement = document.getElementById('chartDom4') as HTMLElement chart1 = echarts.init(chartDom1) chart2 = echarts.init(chartDom2) chart3 = echarts.init(chartDom3) chart4 = echarts.init(chartDom4) const option2 = { grid: { left: '13%', // 左边è·ï¼ä¹å¯ä»¥æ¯å ·ä½çåç´ å¼ï¼ä¾å¦ 50 right: '6%', // å³è¾¹è· top: '13%', // ä¸è¾¹è· bottom: '35%', // 设置ä¸è¾¹è·ï¼ä¾å¦è¿é设置为15% }, xAxis: { type: 'category', data: [], axisLabel: { rotate: 55, // è¿é设置æ转çè§åº¦ï¼æ£å¼è¡¨ç¤ºé¡ºæ¶éæ转 interval: 0, // 强å¶æ¾ç¤ºæææ ç¾ï¼ä¸è¿è¡é´éæ¾ç¤º color: '#fff', // 设置Xè½´æ ç¾åä½é¢è² }, }, yAxis: { type: 'value', axisLabel: { color: '#fff', // 设置Yè½´æ ç¾åä½é¢è² }, splitLine: { show: false }, // ä¸æ¾ç¤ºYè½´åå²çº¿ï¼ç½æ ¼çº¿ï¼ }, series: [ { data: [], type: 'bar', itemStyle: { color: '#3398DB', // æå®æ±åçé¢è² }, }, ], } const option1 = { tooltip: { trigger: 'item', }, series: [ { data: [], type: 'pie', radius: '50%', emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, label: { show: true, // æ¾ç¤ºæ ç¾ //position: 'outside', // æ ç¾çä½ç½®ï¼å¯ä»¥æ¯ 'outside', 'inside', 'center' //formatter: '{b}: {c} ({d}%)', // æ ç¾å å®¹æ ¼å¼åå½æ°æåç¬¦ä¸²æ¨¡æ¿ fontSize: 12, // 设置åä½å¤§å° // fontWeight: 'bold', // 设置åä½ç²ç» color: '#fff', // 设置åä½é¢è² }, }, ], } const option4 = { grid: { left: '13%', // 左边è·ï¼ä¹å¯ä»¥æ¯å ·ä½çåç´ å¼ï¼ä¾å¦ 50 right: '6%', // å³è¾¹è· top: '13%', // ä¸è¾¹è· bottom: '35%', // 设置ä¸è¾¹è·ï¼ä¾å¦è¿é设置为15% }, xAxis: { type: 'category', data: [], axisLabel: { rotate: 55, // è¿é设置æ转çè§åº¦ï¼æ£å¼è¡¨ç¤ºé¡ºæ¶éæ转 interval: 0, // 强å¶æ¾ç¤ºæææ ç¾ï¼ä¸è¿è¡é´éæ¾ç¤º color: '#fff', // 设置Xè½´æ ç¾åä½é¢è² }, }, yAxis: { type: 'value', axisLabel: { color: '#fff', // 设置Yè½´æ ç¾åä½é¢è² }, splitLine: { show: false }, // ä¸æ¾ç¤ºYè½´åå²çº¿ï¼ç½æ ¼çº¿ï¼ }, series: [ { data: [], type: 'bar', itemStyle: { color: '#3398DB', // æå®æ±åçé¢è² }, }, ], } const option3 = { tooltip: { trigger: 'item', }, series: [ { data: [], type: 'pie', radius: '50%', emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, label: { show: true, // æ¾ç¤ºæ ç¾ //position: 'outside', // æ ç¾çä½ç½®ï¼å¯ä»¥æ¯ 'outside', 'inside', 'center' //formatter: '{b}: {c} ({d}%)', // æ ç¾å å®¹æ ¼å¼åå½æ°æåç¬¦ä¸²æ¨¡æ¿ fontSize: 12, // 设置åä½å¤§å° //fontWeight: 'bold', // 设置åä½ç²ç» color: '#fff', // 设置åä½é¢è² }, }, ], } option1 && chart1.setOption(option1) option2 && chart2.setOption(option2) option3 && chart3.setOption(option3) option4 && chart4.setOption(option4) } var shangliaoFlag = false var statusGif = 'tmrefeng2' var statusTxt = 'æ£å¨å¹²ç¥' function chaiwangban() { statusGif = 'chaiwangban-1' setTimeout(shangliao, 7000) } function shangliao() { statusGif = 'shangliao-N' setTimeout(() => { statusGif = 'zhuangwangban' setTimeout(() => { statusGif = 'guanmen1' setTimeout(() => { shangliaoFlag = false }, 4000) }, 7000) }, 15000) } function back() { router.back() } /** * æ¥è¯¢å®æ¶æ°æ® */ 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) var totalTime = 0 /**æ°´æ»´å¾å«æ°´é */ res.mois = [ (res.trendVo.moisture / 100).toFixed(2), (res.trendVo.moisture / 100 / 1.5).toFixed(2), (res.trendVo.moisture / 100 / 3).toFixed(2), ] /**ç¶æ/gifå¨å¾ */ if (!shangliaoFlag) { if (res.orderStatus == 0) { statusGif = 'zanting' statusTxt = 'åå¤' } else if (res.orderStatus == 1) { 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 === 'æ£å¨å¹²ç¥') { // statusGif = 'tmrefeng2' // } else if (res.level === 'ç¿»æé¶æ®µ') { // statusGif = 'fanliao-N' // } else if (res.level === 'åºæé¶æ®µ') { // statusGif = 'chuliao-N' // } // if (res.state_fan == 1) { statusGif = 'tmrefeng2' statusTxt = 'æ£å¨å¹²ç¥' // } // if (res.state_roller == 4) { // statusGif = 'fanliao-N' // statusTxt = 'æ£å¨ç¿»æ' // } // if (res.state_roller == 5) { // statusGif = 'chuliao-N' // statusTxt = 'æ£å¨åºæ' // } // if (res.state_windbox == 2 || res.state_windbox == 3) { // statusGif = 'fengxiangsheng-1' // statusTxt = 'æ£å¨å¹²ç¥' // } } 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' } res.isError = false 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; } if (faults.includes('å·¦åæ¥å')) { zuoqianjiting.value = true; } if (faults.includes('é¢æ¿æ¥å')) { mianbanjiting.value = true; } if (faults.includes('åºææ¥å')) { chuliaojiting.value = true; } if (faults.includes('温度失æ§')) { wendubaojing.value = true; } if (faults.includes('æ»çå')) { guntongsheng.value = true; } if (faults.includes('æ»çé')) { guntongjiang.value = true; } if (faults.includes('æ»ççµæºè¿æµ')) { guntongguoliu.value = true; } if (faults.includes('é£ç®±å')) { fengxiangsheng.value = true; } if (faults.includes('é£ç®±é')) { fengxiangjiang.value = true; } if (faults.includes('é£ç®±é£æºè¿æµ')) { fengjiguoliu.value = true; } } 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; } if (warnings.includes('å³åé¨')) { youqianmen.value = true; } if (warnings.includes('å·¦åé¨')) { zuohoumen.value = true; } if (warnings.includes('å³åé¨')) { youhoumen.value = true; } if (warnings.includes('æ»çä¸å¨é«ä½')) { guntongbuzaigaowei.value = true; } if (warnings.includes('é£ç®±ä¸å¨ä½ä½')) { fengxiangbuzaidiwei.value = true; } if (warnings.includes('é£ç®±ä¸å¨é«ä½')) { fengxiangbuzaigaowei.value = true; } if (warnings.includes('å çä½ä¼ æå¨')) { jiareweichuanganqi.value = true; } if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { zuoqianfengxianggaowei.value = true; } if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { youqianfengxianggaowei.value = true; } if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { zuohoufengxianggaowei.value = true; } if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { youhoufengxianggaowei.value = true; } if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { zuoqianfengxiangdiwei.value = true; } if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { youqianfengxiangdiwei.value = true; } if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { zuohoufengxiangdiwei.value = true; } if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { youhoufengxiangdiwei.value = true; } if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { zuoqianguntongdiwei.value = true; } if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { youqianguntongdiwei.value = true; } if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { zuohouguntongdiwei.value = true; } if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { youhouguntongdiwei.value = true; } } getRealFault() } else { res = { mois: [], gif: 'tmrefeng2', herbImage: 'yaocai1.png', } } res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0 // console.log(`output->res`, res.detailList[res.detailList.length-1]) realData.value = res }) } } /** * æ¥è¯¢å½åå·¥åæ éæç» */ function getRealFault() { return new Promise(() => { let tenantId = getTenantId() queryByOrderId({ orderId: realData.value.code, tenantId: tenantId }).then((res) => { const faultStats = {} const warningStats = {} // 循ç¯å表ï¼æ ¹æ®ç»ææ¶é´åå¼å§æ¶é´ï¼è®¡ç®æ éæ¶é¿ res.forEach((item) => { const faultName = item.faultName item.totalTime = new Date(item.endTime) - new Date(item.startTime) item.totalTime = item.totalTime / 1000 if (item.faultType === 1) { if (!faultStats[faultName]) { faultStats[faultName] = { count: 0, totalDuration: 0, // æ¯«ç§ } } // æ´æ°ç»è®¡æ°æ® faultStats[faultName].count += 1 faultStats[faultName].totalDuration += item.totalTime } else if (item.faultType === 2) { if (!warningStats[faultName]) { warningStats[faultName] = { count: 0, totalDuration: 0, // æ¯«ç§ } } // æ´æ°ç»è®¡æ°æ® warningStats[faultName].count += 1 warningStats[faultName].totalDuration += item.totalTime } }) console.log(`output->res`, res) faultList.value = res const prepareFault = prepareData(faultStats) const prepareWarning = prepareData(warningStats) console.log('prePareFault', prepareFault) console.log('prePareWarning', prepareWarning) chart1.setOption({ series: [{ data: prepareFault.duration }], }) chart2.setOption({ xAxis: { data: prepareFault.faultNames }, series: [{ data: prepareFault.count }], }) chart3.setOption({ series: [{ data: prepareWarning.duration }], }) chart4.setOption({ xAxis: { data: prepareWarning.faultNames }, series: [{ data: prepareWarning.count }], }) }) }) } // å°ç»è®¡æ°æ®è½¬æ¢ä¸ºéåECharts使ç¨çæ ¼å¼ function prepareData(stats) { const faultNames = Object.keys(stats) const durationSorted = faultNames.sort((a, b) => stats[b].totalDuration - stats[a].totalDuration) const countSorted = faultNames.sort((a, b) => stats[b].count - stats[a].count) return { faultNames: faultNames, duration: durationSorted.map((name) => ({ name, value: stats[name].totalDuration })), count: countSorted.map((name) => ({ name, value: stats[name].count })), } } 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 } } // å¼å§èªå¨æ»å¨ const startAutoScroll = () => { console.log('å¼å§èªå¨æ»å¨') scrollInterval = setInterval(() => { if (isScrolling.value) return isScrolling.value = true const container = scrollContainer.value // æ»å¨å®¹å¨ container.scrollTop += 1 // å½æ»å¨å°åºé¨æ¶ï¼éç½®å°é¡¶é¨ if (container.scrollTop >= container.scrollHeight - container.clientHeight) { setTimeout(() => { container.scrollTop = 0 isScrolling.value = false // ç«å³å 许ä¸ä¸æ¬¡æ»å¨å¼å§ return }, 2000) } if (container.scrollTop < container.scrollHeight - container.clientHeight) { setTimeout(() => { isScrolling.value = false }, 20) // ç¡®ä¿æ¯æ¬¡æ»å¨é´é足å¤é¿ï¼é¿å è¿ç»è§¦å } }, 20) // æ§å¶æ»å¨é度ï¼æ°å¼è¶å°æ»å¨è¶å¿« } // åæ¢èªå¨æ»å¨ const stopAutoScroll = () => { if (scrollInterval) { clearInterval(scrollInterval) } } listAllEqp() //queryEqp() // DOMæè½½å®æå渲æå¾è¡¨ onMounted(() => { Timer.value = setInterval(queryRealTime, 3000) Timer2.value = setInterval(moveImage, 50) startAutoScroll() setTimeout(initCharts, 500) }) onUnmounted(() => { clearInterval(Timer.value) clearInterval(Timer2.value) Timer.value = null Timer2.value = null stopAutoScroll() }) </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: 1200px; 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: 1060px; width: 1200px; 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: 86%; 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: 260px; width: 1200px; display: flex; justify-content: center; align-content: flex-start; flex-wrap: wrap; } .leftTop1 { width: 360px; 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; } .eqpStatus { width: 848px; } .rightInfo { display: flex; flex-wrap: wrap; align-content: flex-start; height: 1060px; width: 700px; } .rightTop { display: flex; height: 340px; padding-left: 10px; } .rightTwo { display: flex; flex-wrap: wrap; } .infoChart { width: 340px; height: 350px; /* 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: 690px; height: 340px; /* 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 1s infinite ease-in-out; animation: scaleout 1s 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; } .scroll-container { height: 280px; /* è®¾ç½®ä½ æ³è¦çé«åº¦ */ overflow: hidden; } </style> src/views/dry/bigScreen/BigFaultCloud.vue
@@ -4,10 +4,14 @@ <div class="eqpRow"> <div class="eqpImage" :style="{ 'background-position': position + 'px' }"> <div class="leftEqp"> <dv-border-box7 class="leftTop"> <div class="leftTop0"> <div style="padding-top: 20px; padding-left: 10px" @click="back"> <Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" /> </div> <div class="leftTop1"> <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" /> <div> <div class="mainInfo">{{ realData?.totalRemain | 0 }} Min</div> @@ -41,241 +45,177 @@ </div> </div> </div> <div style="width: 1200px; height: 798px; position: absolute;"> <div v-if="true | zuoqianjiting" class="error-div" style=" top:466px; left:589px"> <div style="width: 1200px; height: 798px; position: absolute"> <div v-if="zuoqianjiting" class="error-div" style="top: 466px; left: 589px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style="width: 70px;"> å·¦åæ¥å <div class="error-msg" style="width: 70px"> å·¦åæ¥å </div> </div> </div> <div v-if="true | shebeijiting" class="error-div" style=" top:170px; left:702px"> <div v-if="shebeijiting" class="error-div" style="top: 170px; left: 702px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style=" width: 106px;"> 设å¤æ¥åï¼æ»ï¼ <div class="error-msg" style="width: 106px"> 设å¤æ¥åï¼æ»ï¼ </div> </div> </div> <div v-if="true | chuliaojiting" class="error-div" style=" top:450px; left:158px"> <div v-if="chuliaojiting" class="error-div" style="top: 450px; left: 158px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style=" width: 70px;"> åºææ¥å <div class="error-msg" style="width: 70px"> åºææ¥å </div> </div> </div> <div v-if="true | mianbanjiting" class="error-div" style=" top:398px; left:978px"> <div v-if="mianbanjiting" class="error-div" style="top: 398px; left: 978px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style=" width: 70px;"> é¢æ¿æ¥å <div class="error-msg" style="width: 70px"> é¢æ¿æ¥å </div> </div> </div> <div v-if="true | fengxiangsheng" class="error-div" style=" top:476px; left:753px"> <div v-if="fengxiangsheng" class="error-div" style="top: 476px; left: 753px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style=" width: 86px;"> é£ç®±åå¼å¸¸ <div class="error-msg" style="width: 86px"> é£ç®±åå¼å¸¸ </div> </div> </div> <div v-if="true | fengxiangjiang" class="error-div" style=" top:502px; left:753px"> <div v-if="fengxiangjiang" class="error-div" style="top: 502px; left: 753px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style=" width: 86px;"> é£ç®±éå¼å¸¸ <div class="error-msg" style="width: 86px"> é£ç®±éå¼å¸¸ </div> </div> </div> <div v-if="true | fengjiguoliu" class="error-div" style=" top:510px; left:975px"> <div v-if="fengjiguoliu" class="error-div" style="top: 510px; left: 975px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style=" width: 70px;"> é£æºè¿æµ <div class="error-msg" style="width: 70px"> é£æºè¿æµ </div> </div> </div> <div v-if="true | guntongsheng" class="error-div" style=" top:331px; left:753px"> <div v-if="guntongsheng" class="error-div" style="top: 331px; left: 753px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style=" width: 86px;"> æ»çåå¼å¸¸ <div class="error-msg" style="width: 86px"> æ»çåå¼å¸¸ </div> </div> </div> <div v-if="true | guntongjiang" class="error-div" style=" top:356px; left:753px"> <div v-if="guntongjiang" class="error-div" style="top: 356px; left: 753px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style=" width: 86px;"> æ»çéå¼å¸¸ <div class="error-msg" style="width: 86px"> æ»çéå¼å¸¸ </div> </div> </div> <div v-if="true | guntongguoliu" class="error-div" style=" top:324px; left:916px"> <div v-if="guntongguoliu" class="error-div" style="top: 324px; left: 916px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style=" width: 70px;"> æ»çè¿æµ <div class="error-msg" style="width: 70px"> æ»çè¿æµ </div> </div> </div> <div v-if="true | wendubaojing" class="error-div" style=" top:373px; left:978px"> <div v-if="wendubaojing" class="error-div" style="top: 373px; left: 978px"> <div class="blingbling error-marker" ></div> <div class="error-msg" style=" width: 70px;"> 温度æ¥è¦ </div> <div class="error-msg" style="width: 70px"> 温度æ¥è¦ </div> </div> <div v-if="true | zuoqianmen" class="error-div" style=" top:595px; left:591px"> <div v-if="zuoqianmen" class="error-div" style="top: 595px; left: 591px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 80px;"> å·¦åé¨æ¥è¦ <div class="warn-msg" style="width: 80px"> å·¦åé¨æ¥è¦ </div> </div> </div> <div v-if="true | zuohoumen" class="error-div" style=" top:565px; left:868px"> <div v-if="zuohoumen" class="error-div" style="top: 565px; left: 868px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 80px;"> å·¦åé¨æ¥è¦ <div class="warn-msg" style="width: 80px"> å·¦åé¨æ¥è¦ </div> </div> </div> <div v-if="true | youqianmen" class="error-div" style=" top:593px; left:396px"> <div v-if="youqianmen" class="error-div" style="top: 593px; left: 396px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 80px;"> å³åé¨æ¥è¦ <div class="warn-msg" style="width: 80px"> å³åé¨æ¥è¦ </div> </div> </div> <div v-if="true | youhoumen" class="error-div" style=" top:565px; left:697px"> <div v-if="youhoumen" class="error-div" style="top: 565px; left: 697px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 80px;"> å³åé¨æ¥è¦ </div> <div class="warn-msg" style="width: 80px"> å³åé¨æ¥è¦ </div> </div> <div v-if="true | guntongbuzaigaowei" class="error-div" style=" top:304px; left:753px"> <div v-if="guntongbuzaigaowei" class="error-div" style="top: 304px; left: 753px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 100px;"> æ»çä¸å¨é«ä½ <div class="warn-msg" style="width: 100px"> æ»çä¸å¨é«ä½ </div> </div> </div> <div v-if="true | fengxiangbuzaigaowei" class="error-div" style=" top:451px; left:753px"> <div v-if="fengxiangbuzaigaowei" class="error-div" style="top: 451px; left: 753px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 100px;"> é£ç®±ä¸å¨é«ä½ <div class="warn-msg" style="width: 100px"> é£ç®±ä¸å¨é«ä½ </div> </div> </div> <div v-if="true | fengxiangbuzaidiwei" class="error-div" style=" top:528px; left:753px"> <div v-if="fengxiangbuzaidiwei" class="error-div" style="top: 528px; left: 753px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 100px;"> é£ç®±ä¸å¨ä½ä½ <div class="warn-msg" style="width: 100px"> é£ç®±ä¸å¨ä½ä½ </div> </div> </div> <div v-if="true | jiareweichuanganqi" class="error-div" style=" top:433px; left:904px"> <div v-if="jiareweichuanganqi" class="error-div" style="top: 433px; left: 904px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å çä½ä¼ æå¨æ¥è¦ <div class="warn-msg" style="width: 126px"> å çä½ä¼ æå¨æ¥è¦ </div> </div> </div> <div v-if="true | zuoqianfengxianggaowei" class="error-div" style=" top:502px; left:535px"> <div v-if="zuoqianfengxianggaowei" class="error-div" style="top: 502px; left: 535px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å·¦åé£ç®±ä¸å¨é«ä½ <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨é«ä½ </div> </div> </div> <div v-if="true | zuoqianfengxiangdiwei" class="error-div" style=" top:528px; left:535px"> <div v-if="zuoqianfengxiangdiwei" class="error-div" style="top: 528px; left: 535px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å·¦åé£ç®±ä¸å¨ä½ä½ <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨ä½ä½ </div> </div> </div> <div v-if="true | zuohoufengxianggaowei" class="error-div" style=" top:459px; left:904px"> <div v-if="zuohoufengxianggaowei" class="error-div" style="top: 459px; left: 904px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å·¦åé£ç®±ä¸å¨é«ä½ <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨é«ä½ </div> </div> </div> <div v-if="true | zuohoufengxiangdiwei" class="error-div" style=" top:484px; left:904px"> <div v-if="zuohoufengxiangdiwei" class="error-div" style="top: 484px; left: 904px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å·¦åé£ç®±ä¸å¨ä½ä½ <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨ä½ä½ </div> </div> </div> <div v-if="true | youqianfengxianggaowei" class="error-div" style=" top:447px; left:420px"> <div v-if="youqianfengxianggaowei" class="error-div" style="top: 447px; left: 420px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å³åé£ç®±ä¸å¨é«ä½ <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨é«ä½ </div> </div> </div> <div v-if="true | youqianfengxiangdiwei" class="error-div" style=" top:473px; left:420px"> <div v-if="youqianfengxiangdiwei" class="error-div" style="top: 473px; left: 420px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å³åé£ç®±ä¸å¨ä½ä½ <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨ä½ä½ </div> </div> </div> <div v-if="true | youhoufengxianggaowei" class="error-div" style=" top:383px; left:805px"> <div v-if="youhoufengxianggaowei" class="error-div" style="top: 383px; left: 805px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å³åé£ç®±ä¸å¨é«ä½ <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨é«ä½ </div> </div> </div> <div v-if="true | youhoufengxiangdiwei" class="error-div" style=" top:408px; left:805px"> <div v-if="youhoufengxiangdiwei" class="error-div" style="top: 408px; left: 805px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å³åé£ç®±ä¸å¨ä½ä½ <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨ä½ä½ </div> </div> </div> <div v-if="true | zuoqianguntongdiwei" class="error-div" style=" top:343px; left:530px"> <div v-if="zuoqianguntongdiwei" class="error-div" style="top: 343px; left: 530px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å·¦åæ»çä¸å¨ä½ä½ <div class="warn-msg" style="width: 126px"> å·¦åæ»çä¸å¨ä½ä½ </div> </div> </div> <div v-if="true | zuohouguntongdiwei" class="error-div" style=" top:296px; left:916px"> <div v-if="zuohouguntongdiwei" class="error-div" style="top: 296px; left: 916px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å·¦åæ»çä¸å¨ä½ä½ <div class="warn-msg" style="width: 126px"> å·¦åæ»çä¸å¨ä½ä½ </div> </div> </div> <div v-if="true | youqianguntongdiwei" class="error-div" style=" top:316px; left:419px"> <div v-if="youqianguntongdiwei" class="error-div" style="top: 316px; left: 419px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å³åæ»çä¸å¨ä½ä½ <div class="warn-msg" style="width: 126px"> å³åæ»çä¸å¨ä½ä½ </div> </div> </div> <div v-if="true | youhouguntongdiwei" class="error-div" style=" top:270px; left:797px"> <div v-if="youhouguntongdiwei" class="error-div" style="top: 270px; left: 797px"> <div class="blingbling warn-marker" ></div> <div class="warn-msg" style=" width: 126px;"> å³åæ»çä¸å¨ä½ä½ <div class="warn-msg" style="width: 126px"> å³åæ»çä¸å¨ä½ä½ </div> </div> </div> </div> </dv-border-box7> </div> <div class="rightInfo"> <div class="rightTop"> <dv-border-box7 class="tempMoisChart"> <a-row> <a-col :span="7">æ éå称</a-col> <a-col :span="7">å¼å§æ¶é´</a-col> <a-col :span="7">ç»ææ¶é´</a-col> <a-col :span="3">æç»æ¶é¿</a-col> </a-row> <div ref="scrollContainer" class="scroll-container"> <a-row v-for="item in faultList" :key="item.id"> <a-col :span="7">{{ item.faultName }}</a-col> <a-col :span="7">{{ item.startTime }}</a-col> <a-col :span="7">{{ item.endTime }}</a-col> <a-col :span="3">{{ item.totalTime }}</a-col> </a-row> </div> </dv-border-box7> </div> <div class="rightTwo"> <dv-border-box7 class="infoChart"> <div class="chartTittle"> æ éæ¶é¿ç»è®¡ </div> <div class="outDiv" style="padding-top: 20px"> </div> <div class="chartTittle"> æ éæ¶é¿ç»è®¡ </div> <!-- <div class="outDiv" style="padding-top: 20px">--> <!-- --> <!-- </div>--> <div :id="'chartDom'" style="width: 340px; height: 280px"></div> </dv-border-box7> <dv-border-box7 class="infoChart"> <div class="chartTittle" >æ é次æ°çº¹ </div> <div class="outDiv" style="padding-top: 20px"> </div> <div class="chartTittle">æ é次æ°çº¹ </div> <div :id="'chartDom2'" style="width: 340px; height: 280px"></div> </dv-border-box7> <dv-border-box7 class="infoChart"> <div class="chartTittle">è¦åæ¶é¿ç»è®¡</div> <div class="outDiv" style="padding-top: 10px"> </div> <div :id="'chartDom3'" style="width: 340px; height: 280px"></div> </dv-border-box7> <dv-border-box7 class="infoChart"> <div class="chartTittle"> <div> è¦å次æ°ç»è®¡</div> </div> <div class="outDiv" style="padding-top: 20px"> </div> <div :id="'chartDom4'" style="width: 340px; height: 280px"></div> </dv-border-box7> </div> </div> @@ -305,22 +245,26 @@ const { toggle: toggleDom } = useFullscreen(domRef) const Timer = ref() const Timer2 = ref() const scrollContainer = ref(null) let scrollInterval = null const isScrolling = ref(false) // æ§å¶æ¯å¦æ£å¨æ»å¨ä»¥é²æ¢éå¤è§¦å const eqps = ref([] as dryEquipment[]) 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 || 1) const tenant = ref(router.currentRoute.value.query.tenant) const userStore = useUserStore() const realData = ref({}) const realData = ref({ code: 0, }) 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' // const faultConst = ['æ¥åæ¥è¦','å·¦åæ¥å','é¢æ¿æ¥å','åºææ¥å','温度失æ§','æ»çå','æ»çé','æ»ççµæºè¿æµ','é£ç®±å','é£ç®±é','é£ç®±é£æºè¿æµ'] // const warningConst = ['å·¦åé¨','å³åé¨','å·¦åé¨','å³åé¨','æ»çä¸å¨é«ä½','é£ç®±ä¸å¨ä½ä½','é£ç®±ä¸å¨é«ä½','å çä½ä¼ æå¨','å·¦åé£ç®±é«ä½ä¼ æå¨','å³åé£ç®±é«ä½ä¼ æå¨','å·¦åé£ç®±é«ä½ä¼ æå¨','å³åé£ç®±é«ä½ä¼ æå¨','å·¦åé£ç®±ä½ä½ä¼ æå¨','å³åé£ç®±ä½ä½ä¼ æå¨','å·¦åé£ç®±ä½ä½ä¼ æå¨','å³åé£ç®±ä½ä½ä¼ æå¨','å·¦åæ»çä½ä½ä¼ æå¨','å³åæ»çä½ä½ä¼ æå¨','å·¦åæ»çä½ä½ä¼ æå¨','å³åæ»çä½ä½ä¼ æå¨'] //----------------error---------------- const shebeijiting = ref(false) @@ -356,7 +300,11 @@ const youqianguntongdiwei = ref(false) const youhouguntongdiwei = ref(false) const faultList = ref([]) var chart1: echarts.ECharts var chart2: echarts.ECharts var chart3: echarts.ECharts var chart4: echarts.ECharts // å¨æ读åå¾ç function getHerbImageUrl(name: string) { return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href @@ -369,7 +317,6 @@ } else { return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href } } function queryEqp() { queryById({ id: router.currentRoute.value.params.id }).then((res) => { @@ -397,8 +344,145 @@ }) } var num = eqpNum.value function initCharts() { let chartDom1: HTMLElement = document.getElementById('chartDom') as HTMLElement let chartDom2: HTMLElement = document.getElementById('chartDom2') as HTMLElement let chartDom3: HTMLElement = document.getElementById('chartDom3') as HTMLElement let chartDom4: HTMLElement = document.getElementById('chartDom4') as HTMLElement chart1 = echarts.init(chartDom1) chart2 = echarts.init(chartDom2) chart3 = echarts.init(chartDom3) chart4 = echarts.init(chartDom4) const option2 = { grid: { left: '13%', // 左边è·ï¼ä¹å¯ä»¥æ¯å ·ä½çåç´ å¼ï¼ä¾å¦ 50 right: '6%', // å³è¾¹è· top: '13%', // ä¸è¾¹è· bottom: '35%', // 设置ä¸è¾¹è·ï¼ä¾å¦è¿é设置为15% }, xAxis: { type: 'category', data: [], axisLabel: { rotate: 55, // è¿é设置æ转çè§åº¦ï¼æ£å¼è¡¨ç¤ºé¡ºæ¶éæ转 interval: 0, // 强å¶æ¾ç¤ºæææ ç¾ï¼ä¸è¿è¡é´éæ¾ç¤º color: '#fff', // 设置Xè½´æ ç¾åä½é¢è² }, }, yAxis: { type: 'value', axisLabel: { color: '#fff', // 设置Yè½´æ ç¾åä½é¢è² }, splitLine: { show: false }, // ä¸æ¾ç¤ºYè½´åå²çº¿ï¼ç½æ ¼çº¿ï¼ }, series: [ { data: [], type: 'bar', itemStyle: { color: '#3398DB', // æå®æ±åçé¢è² }, }, ], } const option1 = { tooltip: { trigger: 'item', }, series: [ { data: [], type: 'pie', radius: '50%', emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, label: { show: true, // æ¾ç¤ºæ ç¾ //position: 'outside', // æ ç¾çä½ç½®ï¼å¯ä»¥æ¯ 'outside', 'inside', 'center' //formatter: '{b}: {c} ({d}%)', // æ ç¾å å®¹æ ¼å¼åå½æ°æåç¬¦ä¸²æ¨¡æ¿ fontSize: 12, // 设置åä½å¤§å° // fontWeight: 'bold', // 设置åä½ç²ç» color: '#fff', // 设置åä½é¢è² }, }, ], } const option4 = { grid: { left: '13%', // 左边è·ï¼ä¹å¯ä»¥æ¯å ·ä½çåç´ å¼ï¼ä¾å¦ 50 right: '6%', // å³è¾¹è· top: '13%', // ä¸è¾¹è· bottom: '35%', // 设置ä¸è¾¹è·ï¼ä¾å¦è¿é设置为15% }, xAxis: { type: 'category', data: [], axisLabel: { rotate: 55, // è¿é设置æ转çè§åº¦ï¼æ£å¼è¡¨ç¤ºé¡ºæ¶éæ转 interval: 0, // 强å¶æ¾ç¤ºæææ ç¾ï¼ä¸è¿è¡é´éæ¾ç¤º color: '#fff', // 设置Xè½´æ ç¾åä½é¢è² }, }, yAxis: { type: 'value', axisLabel: { color: '#fff', // 设置Yè½´æ ç¾åä½é¢è² }, splitLine: { show: false }, // ä¸æ¾ç¤ºYè½´åå²çº¿ï¼ç½æ ¼çº¿ï¼ }, series: [ { data: [], type: 'bar', itemStyle: { color: '#3398DB', // æå®æ±åçé¢è² }, }, ], } const option3 = { tooltip: { trigger: 'item', }, series: [ { data: [], type: 'pie', radius: '50%', emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, label: { show: true, // æ¾ç¤ºæ ç¾ //position: 'outside', // æ ç¾çä½ç½®ï¼å¯ä»¥æ¯ 'outside', 'inside', 'center' //formatter: '{b}: {c} ({d}%)', // æ ç¾å å®¹æ ¼å¼åå½æ°æåç¬¦ä¸²æ¨¡æ¿ fontSize: 12, // 设置åä½å¤§å° //fontWeight: 'bold', // 设置åä½ç²ç» color: '#fff', // 设置åä½é¢è² }, }, ], } option1 && chart1.setOption(option1) option2 && chart2.setOption(option2) option3 && chart3.setOption(option3) option4 && chart4.setOption(option4) } var shangliaoFlag = false var statusGif = 'tmrefeng2' @@ -421,7 +505,12 @@ }, 7000) }, 15000) } function back() { router.back() } /** * æ¥è¯¢å®æ¶æ°æ® */ function queryRealTime() { if (eqp.value) { eqp.value = eqps.value[eqpNum.value] @@ -432,6 +521,7 @@ defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenant.value, machineid: eqpCode } }).then((res) => { if (res && res.trendVo) { console.log(`output->re11s`, res) var totalTime = 0 /**æ°´æ»´å¾å«æ°´é */ res.mois = [ @@ -439,7 +529,6 @@ (res.trendVo.moisture / 100 / 1.5).toFixed(2), (res.trendVo.moisture / 100 / 3).toFixed(2), ] /**ç¶æ/gifå¨å¾ */ if (!shangliaoFlag) { @@ -512,14 +601,110 @@ if (res.fault) { res.isError = true res.errorMsg = res.fault console.log("errorMsg:",res.fault) const faults = res.fault; console.log('errorMsg:', res.fault) if (faults.includes('æ¥åæ¥è¦')) { shebeijiting.value = true; } if (faults.includes('å·¦åæ¥å')) { zuoqianjiting.value = true; } if (faults.includes('é¢æ¿æ¥å')) { mianbanjiting.value = true; } if (faults.includes('åºææ¥å')) { chuliaojiting.value = true; } if (faults.includes('温度失æ§')) { wendubaojing.value = true; } if (faults.includes('æ»çå')) { guntongsheng.value = true; } if (faults.includes('æ»çé')) { guntongjiang.value = true; } if (faults.includes('æ»ççµæºè¿æµ')) { guntongguoliu.value = true; } if (faults.includes('é£ç®±å')) { fengxiangsheng.value = true; } if (faults.includes('é£ç®±é')) { fengxiangjiang.value = true; } if (faults.includes('é£ç®±é£æºè¿æµ')) { fengjiguoliu.value = true; } } if (res.warning) { res.isWarning = true res.warnMsg = res.warning console.log("warnMsg:",res.warning) const warnings = res.warning; console.log('warnMsg:', res.warning) if (warnings.includes('å·¦åé¨')) { zuoqianmen.value = true; } if (warnings.includes('å³åé¨')) { youqianmen.value = true; } if (warnings.includes('å·¦åé¨')) { zuohoumen.value = true; } if (warnings.includes('å³åé¨')) { youhoumen.value = true; } if (warnings.includes('æ»çä¸å¨é«ä½')) { guntongbuzaigaowei.value = true; } if (warnings.includes('é£ç®±ä¸å¨ä½ä½')) { fengxiangbuzaidiwei.value = true; } if (warnings.includes('é£ç®±ä¸å¨é«ä½')) { fengxiangbuzaigaowei.value = true; } if (warnings.includes('å çä½ä¼ æå¨')) { jiareweichuanganqi.value = true; } if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { zuoqianfengxianggaowei.value = true; } if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { youqianfengxianggaowei.value = true; } if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { zuohoufengxianggaowei.value = true; } if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { youhoufengxianggaowei.value = true; } if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { zuoqianfengxiangdiwei.value = true; } if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { youqianfengxiangdiwei.value = true; } if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { zuohoufengxiangdiwei.value = true; } if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { youhoufengxiangdiwei.value = true; } if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { zuoqianguntongdiwei.value = true; } if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { youqianguntongdiwei.value = true; } if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { zuohouguntongdiwei.value = true; } if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { youhouguntongdiwei.value = true; } } getRealFault() } else { res = { mois: [], @@ -527,30 +712,87 @@ herbImage: 'yaocai1.png', } } var totalTime = 0 res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0 // console.log(`output->res`, res.detailList[res.detailList.length-1]) realData.value = res getRealFault() }) } } /** * æ¥è¯¢å½åå·¥åæ éæç» */ function getRealFault() { return new Promise((resolve, reject) => { return new Promise(() => { queryByOrderId({ orderId: realData.value.code, tenantId: tenant.value }).then((res) => { console.log(`output->res`, res) const faultStats = {} const warningStats = {} // 循ç¯å表ï¼æ ¹æ®ç»ææ¶é´åå¼å§æ¶é´ï¼è®¡ç®æ éæ¶é¿ res.forEach((item) => { item.totalTime = item.endTime - item.startTime const faultName = item.faultName item.totalTime = new Date(item.endTime) - new Date(item.startTime) item.totalTime = item.totalTime / 1000 if (item.faultType === 1) { if (!faultStats[faultName]) { faultStats[faultName] = { count: 0, totalDuration: 0, // æ¯«ç§ } } // æ´æ°ç»è®¡æ°æ® faultStats[faultName].count += 1 faultStats[faultName].totalDuration += item.totalTime } else if (item.faultType === 2) { if (!warningStats[faultName]) { warningStats[faultName] = { count: 0, totalDuration: 0, // æ¯«ç§ } } // æ´æ°ç»è®¡æ°æ® warningStats[faultName].count += 1 warningStats[faultName].totalDuration += item.totalTime } }) console.log(`output->res`, res) faultList.value = res const prepareFault = prepareData(faultStats) const prepareWarning = prepareData(warningStats) console.log('prePareFault', prepareFault) console.log('prePareWarning', prepareWarning) chart1.setOption({ series: [{ data: prepareFault.duration }], }) chart2.setOption({ xAxis: { data: prepareFault.faultNames }, series: [{ data: prepareFault.count }], }) chart3.setOption({ series: [{ data: prepareWarning.duration }], }) chart4.setOption({ xAxis: { data: prepareWarning.faultNames }, series: [{ data: prepareWarning.count }], }) }) }) } // å°ç»è®¡æ°æ®è½¬æ¢ä¸ºéåECharts使ç¨çæ ¼å¼ function prepareData(stats) { const faultNames = Object.keys(stats) const durationSorted = faultNames.sort((a, b) => stats[b].totalDuration - stats[a].totalDuration) const countSorted = faultNames.sort((a, b) => stats[b].count - stats[a].count) return { faultNames: faultNames, duration: durationSorted.map((name) => ({ name, value: stats[name].totalDuration })), count: countSorted.map((name) => ({ name, value: stats[name].count })), } } var move = true function moveImage() { if (move) { @@ -566,8 +808,39 @@ } } function back() { router.back() // å¼å§èªå¨æ»å¨ const startAutoScroll = () => { console.log('å¼å§èªå¨æ»å¨') scrollInterval = setInterval(() => { if (isScrolling.value) return isScrolling.value = true const container = scrollContainer.value // æ»å¨å®¹å¨ container.scrollTop += 1 // å½æ»å¨å°åºé¨æ¶ï¼éç½®å°é¡¶é¨ if (container.scrollTop >= container.scrollHeight - container.clientHeight) { setTimeout(() => { container.scrollTop = 0 isScrolling.value = false // ç«å³å 许ä¸ä¸æ¬¡æ»å¨å¼å§ return }, 2000) } if (container.scrollTop < container.scrollHeight - container.clientHeight) { setTimeout(() => { isScrolling.value = false }, 20) // ç¡®ä¿æ¯æ¬¡æ»å¨é´é足å¤é¿ï¼é¿å è¿ç»è§¦å } }, 20) // æ§å¶æ»å¨é度ï¼æ°å¼è¶å°æ»å¨è¶å¿« } // åæ¢èªå¨æ»å¨ const stopAutoScroll = () => { if (scrollInterval) { clearInterval(scrollInterval) } } listAllEqp() @@ -576,6 +849,8 @@ onMounted(() => { Timer.value = setInterval(queryRealTime, 3000) Timer2.value = setInterval(moveImage, 50) startAutoScroll() setTimeout(initCharts, 500) }) onUnmounted(() => { @@ -583,6 +858,7 @@ clearInterval(Timer2.value) Timer.value = null Timer2.value = null stopAutoScroll() }) </script> @@ -726,7 +1002,6 @@ .eqpStatus { width: 848px; } .rightInfo { display: flex; @@ -738,7 +1013,7 @@ .rightTop { display: flex; height: 440px; height: 340px; padding-left: 10px; } .rightTwo { @@ -748,7 +1023,7 @@ .infoChart { width: 340px; height: 300px; height: 350px; /* background: white; */ margin-left: 10px; margin-top: 10px; @@ -842,7 +1117,7 @@ } .tempMoisChart { width: 690px; height: 440px; height: 340px; /* background: white; */ padding: 20px; @@ -1016,8 +1291,8 @@ justify-items: center; } .blingbling { -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out; -webkit-animation: scaleout 1s infinite ease-in-out; animation: scaleout 1s infinite ease-in-out; } .center { display: flex; @@ -1057,22 +1332,40 @@ } } .error-div { position: absolute; display: flex; align-items: center; position: absolute; display: flex; align-items: center; } .error-marker { width: 18px; height: 18px; background: red; border-radius: 50%; 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 background: gray; border-radius: 5px; font-weight: bold; color: red; } .warn-marker { width: 18px; height: 18px; background: orange; border-radius: 50%; 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; background: gray; border-radius: 5px; font-weight: bold; color: orange; } .scroll-container { height: 280px; /* è®¾ç½®ä½ æ³è¦çé«åº¦ */ overflow: hidden; } </style> src/views/system/loginmini/MiniLogin.vue
@@ -15,7 +15,7 @@ <div v-show="type === 'login'"> <div class="aui-content"> <div class="aui-container"> <div class="aui-form"> <div class="aui-form" style="min-height: 570px;"> <div class="aui-image"> <div>Lanpu</div> <div>ä¸è¯è½¦é´æºè½ç产管çç³»ç»</div> @@ -29,9 +29,9 @@ <div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')" >{{ t('sys.login.signInFormTitle') }} </div> <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')" >{{ t('sys.login.mobileSignInFormTitle') }} </div> <!-- <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"--> <!-- >{{ t('sys.login.mobileSignInFormTitle') }}--> <!-- </div>--> </div> <div class="aui-form-box" style="height: 180px"> <a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick"> @@ -94,43 +94,43 @@ {{ t('sys.login.loginButton') }}</a-button > </div> <div class="aui-flex"> <a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a> </div> <!-- <div class="aui-flex">--> <!-- <a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>--> <!-- </div>--> <div class="aui-flex"> <a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a> </div> </div> </div> <a-form @keyup.enter.native="loginHandleClick"> <div class="aui-flex aui-third-text"> <div class="aui-flex-box aui-third-border"> <span>{{ t('sys.login.otherSignIn') }}</span> </div> </div> <div class="aui-flex" :class="`${prefixCls}-sign-in-way`"> <div class="aui-flex-box"> <div class="aui-third-login"> <a title="github" @click="onThirdLogin('github')"><GithubFilled /></a> </div> </div> <div class="aui-flex-box"> <div class="aui-third-login"> <a title="ä¼ä¸å¾®ä¿¡" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a> </div> </div> <div class="aui-flex-box"> <div class="aui-third-login"> <a title="éé" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a> </div> </div> <div class="aui-flex-box"> <div class="aui-third-login"> <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a> </div> </div> </div> </a-form> <!-- <a-form @keyup.enter.native="loginHandleClick">--> <!-- <div class="aui-flex aui-third-text">--> <!-- <div class="aui-flex-box aui-third-border">--> <!-- <span>{{ t('sys.login.otherSignIn') }}</span>--> <!-- </div>--> <!-- </div>--> <!-- <div class="aui-flex" :class="`${prefixCls}-sign-in-way`">--> <!-- <div class="aui-flex-box">--> <!-- <div class="aui-third-login">--> <!-- <a title="github" @click="onThirdLogin('github')"><GithubFilled /></a>--> <!-- </div>--> <!-- </div>--> <!-- <div class="aui-flex-box">--> <!-- <div class="aui-third-login">--> <!-- <a title="ä¼ä¸å¾®ä¿¡" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>--> <!-- </div>--> <!-- </div>--> <!-- <div class="aui-flex-box">--> <!-- <div class="aui-third-login">--> <!-- <a title="éé" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>--> <!-- </div>--> <!-- </div>--> <!-- <div class="aui-flex-box">--> <!-- <div class="aui-third-login">--> <!-- <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>--> <!-- </div>--> <!-- </div>--> <!-- </div>--> <!-- </a-form>--> </div> </div> </div> src/views/system/tenant/tenant.api.ts
@@ -19,6 +19,7 @@ recycleBinPageList = '/sys/tenant/recycleBinPageList', deleteLogicDeleted = '/sys/tenant/deleteLogicDeleted', revertTenantLogic = '/sys/tenant/revertTenantLogic', listAll = '/sys/tenant/listAll', } /** @@ -174,3 +175,8 @@ handleSuccess(); }) }; export const listAllTenant = (params) => { return defHttp.get({url: Api.listAll, params}); }
