UA 新增三通阀运行图片 水冷页面修改 综合页面避开屏缝

whychw

2020-09-30 aa243086477d83efd58227179a865d896609f24f

UA 新增三通阀运行图片 水冷页面修改 综合页面避开屏缝

 src/assets/images/pump1_g.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597114967476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20149" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M602.761 96.995h-4.068c-44.193 0-80.319 32.058-84.316 76.178-4.073-44.12-52.261-64.184-52.261-64.184-24.061-3.997-44.12-11.994-68.253-11.994H265.5a35.991 35.991 0 0 0-25.562 10.511 36 36 0 0 0-10.566 25.542V361.79c0 19.987 15.99 32.054 32.131 32.054h60.182c20.06 0 32.126 15.99 32.126 32.126v393.158c0 20.065 16.063 32.054 32.131 32.054h256.942c20.06 0 32.126-15.99 32.126-32.054V425.897c0-19.987 16.063-31.981 32.13-31.981h52.186c20.063 0 32.13-16.136 32.13-32.126V133.048a31.693 31.693 0 0 0-32.129-32.054l-156.566-3.999zM157.052 64.868c24.133 0 44.191 20.06 44.191 44.12v280.859c-0.234 24.295-19.893 43.921-44.191 44.12-24.268-0.234-43.886-19.852-44.12-44.12V108.988c0-24.06 20.06-44.12 44.12-44.12z m710.721 0c24.06 0 44.12 20.06 44.12 44.12v280.859c-0.234 24.268-19.852 43.886-44.12 44.12-24.294-0.198-43.953-19.824-44.191-44.12V108.988c0-24.06 20.058-44.12 44.191-44.12zM329.756 887.309h373.383a35.983 35.983 0 0 1 36.126 36.122 35.964 35.964 0 0 1-10.539 25.588 35.965 35.965 0 0 1-25.587 10.538H329.756a35.974 35.974 0 0 1-36.199-36.127c0-20.059 12.066-36.121 36.199-36.121z m0 0" p-id="20150" fill="#090"></path></svg>

 src/components/scrollAd.vue

@@ -1,59 +1,191 @@
<template>
    <div id="box">
      <ul id="con1" ref="con1" :class="{anim:animate}">
        <li v-for='(item, idx) in items' :key="idx">{{item.name}}</li>
      </ul>
    <div class="contain" ref="root">
      <div class="inner">
        <div class="wraper" ref="move">
          <ul ref="con1" class="con1 anim clearfix">
            <li v-for='(item, idx) in datalist' :key="'list1_' + idx">{{item.text}}</li>
          </ul>
          <ul ref="con2" class="con1 anim clearfix">
            <li v-for='(item, idx) in datalist' :key="'list2_' + idx">{{item.text}}</li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>

import Timeout from '@/script/Timeout';

// 跑完一屏用的时间 m
const SCREEN_DURATION = 30;
const MINCOUNT = 30;
const REF = ['con1', 'con2'];
let offset = {
  '0': 0,
  '1': 0
};
let idx = 0;
export default {
  name: 'ScrollAd',
  data() {
    return {
      animate:false,
      items:[  //消息列表对应的数组
          {name:"马云"},
          {name:"雷军"},
          {name:"马化腾"}
        ]
        // 余数
        remainder: 0
        ,timer: new Timeout()
      }
    },
    created(){
    setInterval(this.scroll,1000) // 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
    props: {
      datalist: {
        type: Array,
        default () {
          return []
        }
      }
    },
    mounted () {
      // if (this.datalist.length) {
        this.move();
      // }
      const ElRoot = this.$refs.root;
      ElRoot.addEventListener('mouseenter', () => {
        console.log('mouseEnter');
        this.stop();
      });
      ElRoot.addEventListener('mouseleave', () => {
        console.log('mouseleave');
        this.timer.open();
      });
      // console.log(ElRoot, 0);
    },
    updated () {
      console.log('scrollAd  updated');
    },
    methods: {
    scroll(){
     /* let con1 = this.$refs.con1;
      con1.style.marginTop='-30px';
      this.animate=!this.animate;
      setTimeout(function(){
          that.items.push(that.items[0]);
          that.items.shift();
          con1.style.marginTop='0px';
          that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      },500)*/
      getWidth () {
        const ElRoot = this.$refs.root;
        const width = ElRoot.offsetWidth;
        return width;
      }
      ,move () {
        this.timer.start(() => {
          this.scroll();
          this.timer.open();
        }, 1000);
      }
      ,stop () {
        this.timer.stop();
      }
      // translate清零
      ,positionReset () {
        // offset[idx] = 0;
        let _idx = (idx + 1) % 2;

        setTimeout(() => {
          this.$refs[REF[_idx]].style.opacity = 0;
          console.log('position reset', offset[idx]);
          this.$refs[REF[_idx]].style.zIndex = -1;
          offset[_idx] = 0;
          this.$refs[REF[_idx]].style.transform = 'translateX(0)';
          this.$refs[REF[_idx]].style.webkitTransform = 'translateX(0)';
        }, 1000);
      }
      ,scroll () {
        let _idx = (idx + 1) % 2;
        let curObj = this.$refs[REF[idx]];
        let otherObj = this.$refs[REF[_idx]];
        const ElRoot = this.$refs.root;
        const contentWidth = curObj.offsetWidth;

        // console.log(contentWidth, 'content_width_scroll');
        
        const screen_width = ElRoot.offsetWidth;
        let step = Math.ceil(screen_width / SCREEN_DURATION);
        // console.log(step, 'step');
        // 有步长 求余数
        let sum_width = screen_width + contentWidth;
        const remainder = sum_width % step;
        this.remainder = remainder;
        // console.log('余数', remainder);
          offset[idx] -= step;
          // console.log(offset[idx], 'offsetLeft', idx, offset, step);
          curObj.style.transform = 'translateX(' + offset[idx] + 'px)';
          curObj.style.webkitTransform = 'translateX(' + offset[idx] + 'px)';
        // 
        // contentWidth 小于等于一屏 => 头部出屏 otherobj入场
        // contentWidth 大于一屏 => 尾进屏 otherobj入场
        if (offset[_idx] == 0) {
          setTimeout(() => {
            otherObj.style.opacity = 1;
            otherObj.style.zIndex = 0;
          }, 1000);
        }
        if (contentWidth > screen_width + 5 * step) {
          if (Math.abs(offset[idx]) >= contentWidth + step) {
            console.log('尾部进屏了', contentWidth, screen_width);
            offset[_idx] -= step;
            otherObj.style.transform = 'translateX(' + offset[_idx] + 'px)';
            otherObj.style.webkitTransform = 'translateX(' + offset[_idx] + 'px)';
          }
        } else {
          // console.log('尾部入屏了', contentWidth, screen_width);
          if (Math.abs(offset[idx]) >= screen_width + 2 * step) {
            // console.log('头部准备出屏了', contentWidth, screen_width);
            offset[_idx] -= step;
            otherObj.style.transform = 'translateX(' + offset[_idx] + 'px)';
            otherObj.style.webkitTransform = 'translateX(' + offset[_idx] + 'px)';
          }
          
        }
        // 滚出屏 才能切换idx
        if (Math.abs(offset[idx]) >= sum_width) {
          // console.log('尾部出屏了。。。')
          idx++;
          idx %= 2;
          // console.log(idx, 'idx'); 
          this.positionReset();
        }
      }
    }
    ,destroyed () {
      this.stop();
    }
}
</script>

<style scoped>
#box{
  width: 300px;
.contain {
  position: relative;
  width: 100%;
  height: 32px;
  line-height: 30px;
  line-height: 32px;
  font-size: 16px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid black;
  transition: all 0.5s;
  background: rgba(0, 0, 0, .4);
  color: #ff0;
  font-weight: bold;
  /*transition: all 1s;*/
}
.anim{
  transition: all 0.5s;
.inner {
  position: absolute;
  left: 100%;
  top: 0;
  width: 99999999%;
  overflow: visible;
}
#con1 li{
.anim {
  transition: transform 1s linear, -webkit-transform 1s linear;
}
.con1 {
  list-style: none;
  float: left;
  position: absolute;
}
.con1 li {
  list-style: none;
  float: left;
  padding: 0 1em;
  line-height: 30px;
  height: 30px;
}

 src/components/scrollAd1.vue

New file
@@ -0,0 +1,176 @@
<template>
    <div class="contain" ref="root">
      <div class="inner">
        <div class="wraper" :class="{'anim': animate}" ref="move">
          <ul ref="con1" class="con1">
            <li v-for='(item, idx) in List' :key="'list1_' + idx">{{item.name}}</li>
          </ul>
          <ul ref="con2" class="con1 con2">
            <li v-for='(item, idx) in List' :key="'list2_' + idx">{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>

// 跑完一屏用的时间 m
const SCREEN_DURATION = 20;
const MINCOUNT = 30;
export default {
  name: 'ScrollAd',
  data() {
    return {
      animate: true,
      items: [  //消息列表对应的数组
          {name:"马云"},
          {name:"雷军"},
          {name:"马化腾"}
        ]
        ,offsetLeft: 0
        ,List: []
        ,len: 0
        // 余数
        ,remainder: 0
      }
    },
    mounted () {
      // this.List = JSON.parse(JSON.stringify(this.items));
      this.init();
      // console.log(this.getWidth(), 'screen_width');
      setInterval(this.scroll, 1000);
    },
    updated () {
      console.log('updated');
    },
    methods: {
      getWidth () {
        const ElRoot = this.$refs.root;
        const width = ElRoot.offsetWidth;
        return width;
      }
      ,init () {
        let items = this.items;
        this.len = items.length;
        let list = [];
        if (!items.length) {
          this.List = list;
          return;
        }
        // if (items.length < MINCOUNT) {
          const count = Math.ceil(MINCOUNT / items.length);
          for (let i = 0; i < count; i++) {
            items.forEach((v) => {
              list.push(v);
            });
          }
          this.List = list;
        // }
      }
      // translate清零
      ,positionReset (offset) {
        this.animate = false;
        setTimeout(() => {
          this.offsetLeft = offset;
          this.animate=true;
        }, 500);
      }
      // 长度变化时要重新初始化
      ,reset () {
        let con1 = this.$refs.con1;
        const sty = con1.currentStyle || window.getComputedStyle(con1, null)
        // console.log(sty, 'sty');
        const contentWidth = parseFloat(sty.width);
        // console.log(contentWidth, 'content_width');
        const screenW = this.getWidth();
        // 如果内容不够一屏就复制到超过一屏
        if (contentWidth < screenW) {
          let count = Math.ceil(screenW /contentWidth);
          let list = [];
          for (let i = 0; i < count; i++) {
            list.push(...this.items);
          }
          this.List = list;
        }
      }
      ,scroll () {
        let con1 = this.$refs.con1;
        const sty = con1.currentStyle || window.getComputedStyle(con1, null)
        // console.log(sty, 'sty');
        const contentWidth = parseFloat(sty.width);
        // console.log(contentWidth, 'content_width_scroll');
        const $move = this.$refs.move;

        
        const screen_width = this.getWidth();
        let step = Math.ceil(screen_width / SCREEN_DURATION);
        // console.log(step, 'step');
        // 有步长 求余数
        let sum_width = screen_width + contentWidth;
        const remainder = sum_width % step;
        this.remainder = remainder;
        // console.log('余数', remainder);
        
        if (Math.abs(this.offsetLeft) >= sum_width - remainder) {
          // console.log('滚出屏了');
          this.positionReset(remainder - screen_width);
        }else {
          this.offsetLeft -= step;
          // console.log(this.offsetLeft, 'offsetLeft');
          $move.style.transform = 'translateX(' + this.offsetLeft + 'px)';
          $move.style.webkitTransform = 'translateX(' + this.offsetLeft + 'px)';
          $move.style.color = '#f00';
        }
        // this.animate=!this.animate;
        /*setTimeout(() => {
            this.items.push(this.items[0]);
            this.items.shift();
            con1.style.marginTop='0px';
            this.animate=!this.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        },500)*/
      }
    }
}
</script>

<style scoped>
.contain {
  position: relative;
  width: 100%;
  height: 32px;
  line-height: 30px;
  font-size: 16px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid black;
  /*transition: all 1s;*/
}
.inner {
  position: absolute;
  left: 100%;
  top: 0;
  width: 1000000%;


}
.anim {
  transition: all 1s;
}
.con1 {
  list-style: none;
  float: left;
}
.con2 {
  /*color: #0f0;*/
}
.con1 li {
  list-style: none;
  float: left;
  padding: 0 1em;
  line-height: 30px;
  height: 30px;
}
</style>



 src/main.js

@@ -16,6 +16,8 @@
import config from './script/config.js'
import user from './script/user.js'
import filters from './script/filter.js'
import event from './script/event.js'


import './api'

@@ -35,6 +37,7 @@
Vue.prototype.$config = config;
Vue.prototype.$user = user;
Vue.prototype.$G = G;
Vue.prototype.$event = event;
// Vue.prototype.$api = api;

// 注册自定义过滤器

 src/router/routes.js

@@ -141,12 +141,28 @@
                component: (resolve)=>require(['@/views/waterCooling/list.vue'], resolve)
            },
            {
                path: '/watercooling/index/9',
                path: '/watercooling/index/1',
                name: 'WaterCooling',
                meta: {
                    crumb: '水冷系统180kW'
                    crumb: '1号水冷装置'
                },
                component: (resolve)=>require(['@/views/waterCooling/index.vue'], resolve)
                component: (resolve)=>require(['@/views/waterCooling/index1.vue'], resolve)
            },
            {
                path: '/watercooling/index/2',
                name: 'WaterCooling',
                meta: {
                    crumb: '2号水冷装置'
                },
                component: (resolve)=>require(['@/views/waterCooling/index2.vue'], resolve)
            },
            {
                path: '/watercooling/index/3',
                name: 'WaterCooling',
                meta: {
                    crumb: '3号水冷装置'
                },
                component: (resolve)=>require(['@/views/waterCooling/index3.vue'], resolve)
            },
            {
                path: '/watercooling/alarmparam/9',

 src/script/draw_general.js

@@ -4,48 +4,19 @@
function draw_main (context, can) {
  const ctx = can.context;



  /*can.drawGradualLine({
    startX: 176
    ,startY: 340
    ,endX: 226
    ,endY: 340
  });*/
  /*can.drawGradualLine({
    startX: 176
    ,startY: 370
    ,endX: 276
    ,endY: 370
  });*/
  /*can.drawGradualLine({
    startX: 176
    ,startY: 400
    ,endX: 276
    ,endY: 400
  });
  can.drawGradualLine({
    startX: 176
    ,startY: 430
    ,endX: 226
    ,endY: 430
  });*/
  can.drawGradualLine({
    // startX: 226
    startX: 170
    ,startY: 110
    ,endX: 326
    ,endY: 110
  });
  can.drawGradualLine({
    // startX: 276
    startX: 226
    ,startY: 330
    ,startY: 276
    ,endX: 326
    ,endY: 330
    ,endY: 276
  });
  can.drawGradualLine({
    // startX: 276
    startX: 226
    ,startY: 560
    ,endX: 326
@@ -71,15 +42,15 @@
  });
  can.drawGradualLine({
    startX: 470
    ,startY: 294
    ,startY: 240
    ,endX: 540
    ,endY: 294
    ,endY: 240
  });
  can.drawGradualLine({
    startX: 470
    ,startY: 354
    ,startY: 300
    ,endX: 540
    ,endY: 354
    ,endY: 300
  });
  can.drawGradualLine({
    startX: 470
@@ -108,15 +79,15 @@
  });
  can.drawGradualLine({
    startX: 580
    ,startY: 294
    ,startY: 240
    ,endX: 650
    ,endY: 294
    ,endY: 240
  });
  can.drawGradualLine({
    startX: 580
    ,startY: 354
    ,startY: 300
    ,endX: 650
    ,endY: 354
    ,endY: 300
  });
  can.drawGradualLine({
    startX: 580
@@ -145,11 +116,11 @@
  can.drawGradualLine({
    startX: 1220
    ,startY: 75
    ,endX: 1350
    ,endX: 1450
    ,endY: 75
  });
  can.drawGradualLine({
    startX: 760
    startX: 740
    ,startY: 415
    ,endX: 1120
    ,endY: 415
@@ -157,19 +128,19 @@
  can.drawGradualLine({
    startX: 1288
    ,startY: 265
    ,endX: 1350
    ,endX: 1450
    ,endY: 265
  });
  can.drawGradualLine({
    startX: 1288
    ,startY: 455
    ,endX: 1350
    ,endX: 1450
    ,endY: 455
  });
  can.drawGradualLine({
    startX: 1288
    ,startY: 645
    ,endX: 1350
    ,endX: 1450
    ,endY: 645
  });

@@ -182,26 +153,6 @@
    ,endY: 710
  });

  // can.drawGradualLine({
  //   startX: 276
  //   ,startY: 330
  //   ,endX: 276
  //   ,endY: 370
  // });

  // can.drawGradualLine({
  //   startX: 276
  //   ,startY: 400
  //   ,endX: 276
  //   ,endY: 560
  // });

  // can.drawGradualLine({
  //   startX: 226
  //   ,startY: 430
  //   ,endX: 226
  //   ,endY: 710
  // });
  can.drawGradualLine({
    startX: 650
    ,startY: 75
@@ -209,9 +160,9 @@
    ,endY: 576
  });
  can.drawGradualLine({
    startX: 940
    startX: 930
    ,startY: 75
    ,endX: 940
    ,endX: 930
    ,endY: 415
  });
  can.drawGradualLine({
@@ -221,15 +172,15 @@
    ,endY: 645
  });
  can.drawGradualLine({
    startX: 760
    startX: 740
    ,startY: 415
    ,endX: 760
    ,endX: 740
    ,endY: 445
  });
  can.drawGradualLine({
    startX: 880
    startX: 860
    ,startY: 415
    ,endX: 880
    ,endX: 860
    ,endY: 445
  });
  can.drawGradualLine({
@@ -267,7 +218,7 @@
    ,endY: 745
  });
  can.drawWaterLine({
    startX: 1020
    startX: 1030
    ,startY: 741
    ,endX: 1204
    ,endY: 741
@@ -298,7 +249,8 @@
  }, true);
  can.drawPower({
    startX: 320
    ,startY: 270
    // ,startY: 270
    ,startY: 216
    ,label: '2号大功率整流器'
    ,noDraw: true
    ,cbfn_click: function () {
@@ -348,28 +300,28 @@
  can.drawWater({
    startX: 540
    ,startY: 680
    ,label: '1号水冷装置'
    ,label: '3号水冷装置'
    ,noDraw: true
    ,cbfn_click: function () {
      context.$router.push('/watercooling/index/9');
      context.$router.push('/watercooling/index/3');
    }
  }, true);
  can.drawWater({
    startX: 1014
    ,startY: 212
    ,label: '2号水冷装置'
    ,label: '1号水冷装置'
    ,noDraw: true
    ,cbfn_click: function () {
      context.$router.push('/watercooling/index/subsidiary');
      context.$router.push('/watercooling/index/1');
    }
  }, true);
  can.drawWater({
    startX: 933
    startX: 943
    ,startY: 690
    ,label: '3号水冷装置'
    ,label: '2号水冷装置'
    ,noDraw: true
    ,cbfn_click: function () {
      context.$router.push('/watercooling/index/9');
      context.$router.push('/watercooling/index/2');
    }
  }, true);

@@ -413,23 +365,25 @@

  // 画水冷负载
  can.drawLoad({
    startX: 1348
    ,startY: 20
    startX: 1448
    // ,startY: 20
    ,startY: 10
    ,label: '水冷负载1'
    ,cbfn_click: function () {
      context.$router.push('/load/main');
    }
  }, true);
  can.drawLoad({
    startX: 1348
    ,startY: 210
    startX: 1448
    // ,startY: 210
    ,startY: 200
    ,label: '水冷负载2'
    ,cbfn_click: function () {
      context.$router.push('/load/main');
    }
  }, true);
  can.drawLoad({
    startX: 1348
    startX: 1448
    ,startY: 400
    ,label: '水冷负载3'
    ,cbfn_click: function () {
@@ -437,7 +391,7 @@
    }
  }, true);
  can.drawLoad({
    startX: 1348
    startX: 1448
    ,startY: 590
    ,label: '水冷负载4'
    ,cbfn_click: function () {
@@ -460,13 +414,13 @@
  }, true);
  can.drawSwitch({
    startX: 540
    ,startY: 294
    ,startY: 240
    ,fromStart: true
    ,labelBottom: 'Q101    2500A'
  }, true);
  can.drawSwitch({
    startX: 540
    ,startY: 354
    ,startY: 300
    ,fromStart: true
    ,labelBottom: 'QD7    2000A'
  }, true);
@@ -517,7 +471,7 @@
  // 电源2
  can.drawRect({
    startX: 230
    ,startY: 286
    ,startY: 232
    ,width: 80
    ,height: 40
    ,strokeStyle: 'transparent'
@@ -541,25 +495,23 @@

  // 水冷
  can.drawRect({
    startX: 508
    startX: 548
    ,startY: 636
    ,width: 150
    ,width: 80
    ,height: 40
    ,strokeStyle: 'transparent'
  }, true);
  // 3号水冷
  can.drawRect({
    startX: 900
    startX: 950
    ,startY: 644
    ,width: 150
    ,width: 80
    ,height: 40
    ,strokeStyle: 'transparent'
  }, true);
  // 2号水冷
  can.drawRect({
    startX: 980
    ,startY: 334
    ,width: 150
    startX: 950
    ,startY: 164
    ,width: 80
    ,height: 40
    ,strokeStyle: 'transparent'
  }, true);
@@ -567,29 +519,29 @@
  // 负载
  can.drawRect({
    startX: 1344
    ,startY: 164
    ,width: 150
    ,startY: 84
    ,width: 80
    ,height: 40
    ,strokeStyle: 'transparent'
  }, true);
  can.drawRect({
    startX: 1344
    ,startY: 354
    ,width: 150
    ,startY: 274
    ,width: 80
    ,height: 40
    ,strokeStyle: 'transparent'
  }, true);
  can.drawRect({
    startX: 1344
    ,startY: 544
    ,width: 150
    ,startY: 464
    ,width: 80
    ,height: 40
    ,strokeStyle: 'transparent'
  }, true);
  can.drawRect({
    startX: 1344
    ,startY: 734
    ,width: 150
    ,startY: 654
    ,width: 80
    ,height: 40
    ,strokeStyle: 'transparent'
  }, true);
@@ -604,9 +556,9 @@
  }, true);
  can.drawRect({
    startX: 320
    ,startY: 226
    ,startY: 186
    ,width: 150
    ,height: 40
    ,height: 26
    ,strokeStyle: 'transparent'
  }, true);
  can.drawRect({
@@ -619,14 +571,14 @@

  // 电池组信息面板 index 15
  can.drawRect({
    startX: 728
    startX: 708
    ,startY: 512
    ,width: 110
    ,height: 110
    ,strokeStyle: 'transparent'
  }, true);
  can.drawRect({
    startX: 848
    startX: 828
    ,startY: 512
    ,width: 110
    ,height: 110
@@ -667,7 +619,8 @@

  can.drawPower({
    startX: 320
    ,startY: 270
    // ,startY: 270
    ,startY: 216
    ,label: '2号大功率整流器'
    ,noDraw: status.power2 && flag
  });
@@ -690,31 +643,31 @@
  can.drawWater({
    startX: 540
    ,startY: 680
    ,label: '1号水冷装置'
    ,noDraw: status.water1 && flag
    ,label: '3号水冷装置'
    ,noDraw: status.water3 && flag
  });
  can.drawWater({
    startX: 1014
    ,startY: 212
    ,label: '2号水冷装置'
    ,noDraw: status.water2 && flag
    ,label: '1号水冷装置'
    ,noDraw: status.water1 && flag
  });
  can.drawWater({
    startX: 933
    startX: 943
    ,startY: 690
    ,label: '3号水冷装置'
    ,noDraw: status.water3 && flag
    ,label: '2号水冷装置'
    ,noDraw: status.water2 && flag
  });

  // 画电池组
  can.drawBatt({
    startX: 727
    startX: 707
    ,startY: 444
    ,label: '电池组1'
    ,noDraw: status.batt1 && flag
  });
  can.drawBatt({
    startX: 847
    startX: 827
    ,startY: 444
    ,label: '电池组2'
    ,noDraw: status.batt2 && flag

 src/script/draw_water_cooling.js

@@ -5,6 +5,7 @@
import pot1 from '@/assets/images/pot1.svg';
// import pot2 from '@/assets/images/pot2.svg';
import pump1 from '@/assets/images/pump1.svg';
import pump1_g from '@/assets/images/pump1_g.svg';
import pump2 from '@/assets/images/pump2.svg';
import pump2_g from '@/assets/images/pump2_g.svg';
import pump3 from '@/assets/images/pump3.svg';
@@ -41,6 +42,9 @@
let Img_pump1 = new Image();
Img_pump1.src = pump1;

let Img_pump1_g = new Image();
Img_pump1_g.src = pump1_g;

// 水泵2
let Img_pump2 = new Image();
Img_pump2.src = pump2;
@@ -73,13 +77,15 @@
let Img_box = new Image();
Img_box.src = box;


/**
 * 画主体部分
 * @param  {[type]} can EleCircle实例
 * @param  {[type]} isMini 是不是迷你版的（6路）
 * @param  {[type]} type 1 2 3
 * 
 * @return {[type]}     [description]
 */
function draw_main (can, isMini) {
function draw_main (can, type) {
  const ctx = can.context;

  // 水罐1
@@ -104,7 +110,7 @@
    };
  }*/

  // 水泵1
  // 三通
  if (Img_pump1.complete) {
    ctx.drawImage(Img_pump1, 1480, 70, 60, 40);
  } else {
@@ -150,7 +156,7 @@
  }


  if (!isMini) {
  if (2 == type || 1 == type) {
    // 画左侧的长方形7 index:0
    can.drawRect({
      strokeStyle: 'transparent',
@@ -177,7 +183,24 @@
      width: 170,
      height: 200
    }, true);
  } else {
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 690,
      startY: 20,
      width: 200,
      height: 50
      ,subName: 'title'
    }, true);
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 1320,
      startY: 32,
      width: 40,
      height: 40
      ,subName: 'motor'
    }, true);
  }
  if (1 == type) {
    // 水罐1
    if (Img_pot1.complete) {
      ctx.drawImage(Img_pot1, 1330, 570, 80, 80);
@@ -188,19 +211,21 @@
    }

    // 压缩机
    if (Img_compressor.complete) {
    /*if (Img_compressor.complete) {
      ctx.drawImage(Img_compressor, 1070, 268, 82, 60);
    } else {
      Img_compressor.addEventListener('load', () => {
        ctx.drawImage(Img_compressor, 1070, 268, 82, 60);
      });
    }
    }*/

    can.drawText({
      x: 1040,
      y: 304,
      txt: 'P13'
    });



    can.drawLine({
      startX: 1150,
@@ -300,91 +325,121 @@
  /**
   * 画输入框占位
   */
  // index: 9    TT11信息
  // index: 0    TT11信息
  can.drawRect({
    strokeStyle: 'transparent',
    startX: 1090,
    startY: 60,
    width: 100,
    height: 40
    height: 40,
    subName: 'input'
  }, true);
  // index: 10    V019信息
  can.drawRect({
  /*can.drawRect({
    strokeStyle: 'transparent',
    startX: 1502,
    startY: 20,
    width: 100,
    height: 40
  }, true);
  }, true);*/
  // index: 11    v022信息
  can.drawRect({
  /*can.drawRect({
    strokeStyle: 'transparent',
    startX: 790,
    startY: 320,
    width: 100,
    height: 40
  }, true);
  }, true);*/

  // index: 12    露点信息
  can.drawRect({
  /*can.drawRect({
    strokeStyle: 'transparent',
    startX: 620,
    startY: 440,
    width: 100,
    height: 40
  }, true);
  }, true);*/

  // index: 13    目标总流量信息
  can.drawRect({
 /* can.drawRect({
    strokeStyle: 'transparent',
    startX: 780,
    startY: 440,
    width: 100,
    height: 40
  }, true);
  }, true);*/

  // index: 14    PT10信息
  // index: 1    PT10信息 供水压力
  can.drawRect({
    strokeStyle: 'transparent',
    startX: 610,
    startY: 590,
    width: 100,
    height: 40
    ,subName: 'input'
  }, true);
  // index: 15    FIT10信息
  can.drawRect({
    strokeStyle: 'transparent',
    startX: 780,
    startY: 590,
    width: 100,
    height: 40
  }, true);
  // index: 16    QIT01信息
  if (2 == type) {
    // index: 2    FIT10信息 冷却水流量
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 700,
      startY: 420,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);
  }
  if (1 == type) {
    // index: 2    FIT01信息 冷却水流量
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 780,
      startY: 590,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);
  }
  // index: 3    QIT01信息 冷却水电导率
  can.drawRect({
    strokeStyle: 'transparent',
    startX: 910,
    startY: 590,
    width: 100,
    height: 40
    ,subName: 'input'
  }, true);
  // index: 17    TT10信息
  // index: 4    TT10信息 供水温度
  can.drawRect({
    strokeStyle: 'transparent',
    startX: 1040,
    startY: 590,
    width: 100,
    height: 40
    ,subName: 'input'
  }, true);

  if (1 == type) {
    // index: 6    PT11 缓冲罐压力
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 1220,
      startY: 406,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);
  }
  // index: 18    V021信息
  can.drawRect({
  /*can.drawRect({
    strokeStyle: 'transparent',
    startX: 1220,
    startY: 590,
    width: 100,
    height: 40
  }, true);
  }, true);*/

  if (!isMini) {
  if (2 == type || 1 == type) {
    // 画连线
    can.drawLine({
      startX: 95,
@@ -420,14 +475,16 @@
      endX: 210,
      endY: 590
    });
  } else {
    // index: 19    TRT01_T
  }
  if (1 == type) {
    // index: 6    TRT01_T 阀厅温度
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 620,
      startY: 180,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);

    can.drawText({
@@ -436,13 +493,14 @@
      txt: 'TRT01_T(℃)'
    });

    // index: 20    TRT01_R
    // index: 7    TRT01_R 阀厅湿度
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 620,
      startY: 310,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);

    can.drawText({
@@ -452,13 +510,13 @@
    });

    // index: 21    PT11信息
    can.drawRect({
      strokeStyle: 'transparent',
    /*can.drawRect({
      // strokeStyle: 'transparent',
      startX: 1220,
      startY: 410,
      width: 100,
      height: 40
    }, true);
    }, true);*/

    can.drawText({
      x: 1270,
@@ -536,13 +594,30 @@
    endX: 750,
    endY: 280
  });
  // h290
  can.drawLine({
    startX: 750,
    startY: 320,
    endX: 750,
    endY: 610
  });
  if (2 == type) {
    // h290 中竖线 FIT10
    can.drawLine({
      startX: 750,
      startY: 320,
      endX: 750,
      endY: 420
    });
    can.drawLine({
      startX: 750,
      startY: 460,
      endX: 750,
      endY: 610
    });
  }
  if (1 == type) {
    // h290 中竖线 FIT10
    can.drawLine({
      startX: 750,
      startY: 320,
      endX: 750,
      endY: 610
    });
  }
  // 
  can.drawLine({
    startX: 580,
@@ -553,12 +628,6 @@
  // 
  can.drawLine({
    startX: 710,
    startY: 610,
    endX: 780,
    endY: 610
  });
  can.drawLine({
    startX: 880,
    startY: 610,
    endX: 910,
    endY: 610
@@ -572,10 +641,10 @@
  can.drawLine({
    startX: 1140,
    startY: 610,
    endX: 1220,
    endX: 1320,
    endY: 610
  });
  // h210
  // h210  补水泵竖线
  can.drawLine({
    startX: 1180,
    startY: 610,
@@ -612,7 +681,7 @@
    endX: 990,
    endY: 500
  });
  // 长
  // 长 底横
  can.drawLine({
    startX: 1320,
    startY: 610,
@@ -734,35 +803,34 @@
  can.drawText({
    x: 650,
    y: 40,
    txt: isMini ? 'V017' : 'V023'
    txt: 1 == type ? 'V017' : 'V023'
  });

  // 绘文字
  can.drawText({
    x: 820,
    y: 300,
    txt: isMini ? 'V018(%)' : 'V022(%)'
  });
  can.drawText({
    x: 670,
    y: 420,
    txt: '露点(℃)'
  });
  can.drawText({
    x: 830,
    y: 420,
    txt: '目标总流量(T/h)'
    txt: 1 == type ? 'V018' : 'V022'
  });
  can.drawText({
    x: 660,
    y: 572,
    txt: isMini ? 'PT01(bar)' : 'PT10(bar)'
    txt: 1 == type ? 'PT01(bar)' : 'PT10(bar)'
  });
  can.drawText({
    x: 830,
    y: 572,
    txt: isMini ? 'FIT01(T/h)' : 'FIT10(T/h)'
  });
  if (2 == type) {
    can.drawText({
      x: 800,
      y: 400,
      txt: 'FIT10(T/h)'
    });
  }
  if (1 == type) {
    can.drawText({
      x: 830,
      y: 572,
      txt: 'FIT01(T/h)'
    });
  }
  can.drawText({
    x: 960,
    y: 572,
@@ -771,22 +839,18 @@
  can.drawText({
    x: 1090,
    y: 572,
    txt: isMini ? 'TT01(℃)' : 'TT10(℃)'
    txt: 1 == type ? 'TT01(℃)' : 'TT10(℃)'
  });
  can.drawText({
    x: 1270,
    y: 572,
    txt: isMini ? 'V004(%)' : 'V021(%)'
  });
  
  can.drawText({
    x: 1140,
    y: 42,
    txt: isMini ? 'TT08(℃)' : 'TT11(℃)'
    txt: 1 == type ? 'TT08(℃)' : 'TT11(℃)'
  });
  can.drawText({
    x: 1460,
    y: 42,
    txt: isMini ? 'V002(%)' : 'V019(%)'
    txt: 1 == type ? 'V002' : 'V019'
  });
  can.drawText({
    x: 1040,
@@ -798,20 +862,10 @@
    y: 480,
    txt: 'P12'
  });
  /*can.drawText({
    x: 950,
    y: 70,
    txt: 'H02'
  });
  can.drawText({
    x: 950,
    y: 96,
    txt: 'H01'
  });*/
  can.drawText({
    x: 1246,
    y: 144,
    txt: isMini ? 'V504' : 'V501'
    txt: 1 == type ? 'V504' : 'V501'
  });
  can.drawText({
    x: 1382,
@@ -836,127 +890,605 @@
  ctx.closePath();
  ctx.restore();
}
function draw_main_3 (can) {
  const ctx = can.context;
  if (Img_condenser.complete) {
    ctx.drawImage(Img_condenser, 1555, 276, 60, 120);
  } else {
    Img_condenser.addEventListener('load', () => {
      ctx.drawImage(Img_condenser, 1555, 276, 60, 120);
    });
  }

function draw_update (can, status, isMini) {
  // 冷凝箱
  if (Img_box.complete) {
    ctx.drawImage(Img_box, 1660, 280, 80, 120);
  } else {
    Img_box.addEventListener('load', () => {
      ctx.drawImage(Img_box, 1660, 280, 80, 120);
    });
  }

    // 水罐1
    if (Img_pot1.complete) {
      ctx.drawImage(Img_pot1, 730, 280, 180, 120);
    } else {
      Img_pot1.addEventListener('load', () => {
        ctx.drawImage(Img_pot1, 730, 280, 180, 120);
      });
    }

    if (Img_compressor.complete) {
      ctx.drawImage(Img_compressor, 50, 200, 200, 120);
    } else {
      Img_compressor.addEventListener('load', () => {
        ctx.drawImage(Img_compressor, 50, 200, 200, 120);
      });
    }
    
    if (Img_pump1_g.complete) {
      ctx.drawImage(Img_pump1_g, 1480, 70, 60, 40);
    } else {
      Img_pump1_g.addEventListener('load', () => {
        ctx.drawImage(Img_pump1_g, 1480, 70, 60, 40);
      });
    }

    can.drawLine({
      startX: 150,
      startY: 316,
      endX: 150,
      endY: 600
    });
    can.drawLine({
      startX: 150,
      startY: 80,
      endX: 150,
      endY: 210
    });
    can.drawLine({
      startX: 150,
      startY: 80,
      endX: 240,
      endY: 80
    });
    can.drawLine({
      startX: 340,
      startY: 80,
      endX: 440,
      endY: 80
    });
    can.drawLine({
      startX: 540,
      startY: 80,
      endX: 1488,
      endY: 80
    });
    can.drawLine({
      startX: 1532,
      startY: 80,
      endX: 1568,
      endY: 80
    });
    can.drawLine({
      startX: 1600,
      startY: 80,
      endX: 1740,
      endY: 80
    });



    can.drawLine({
      startX: 150,
      startY: 600,
      endX: 240,
      endY: 600
    });
    can.drawLine({
      startX: 340,
      startY: 600,
      endX: 440,
      endY: 600
    });
    can.drawLine({
      startX: 540,
      startY: 600,
      endX: 640,
      endY: 600
    });
    can.drawLine({
      startX: 740,
      startY: 600,
      endX: 840,
      endY: 600
    });
    can.drawLine({
      startX: 940,
      startY: 600,
      endX: 1140,
      endY: 600
    });
    can.drawLine({
      startX: 1240,
      startY: 600,
      endX: 1568,
      endY: 600
    });
    //////////////////////
    can.drawLine({
      startX: 1600,
      startY: 600,
      endX: 1740,
      endY: 600
    });
    //////////////////////
    can.drawLine({
      startX: 1512,
      startY: 108,
      endX: 1512,
      endY: 290
    });
    can.drawLine({
      startX: 1512,
      startY: 330,
      endX: 1512,
      endY: 600
    });
    can.drawLine({
      startX: 1040,
      startY: 260,
      endX: 1040,
      endY: 600
    });
    can.drawLine({
      startX: 820,
      startY: 80,
      endX: 820,
      endY: 294
    });
    can.drawLine({
      startX: 848,
      startY: 340,
      endX: 1040,
      endY: 340
    });
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 1496, 290, 42, 40);
    } else {
      Img_water_valve270_g.addEventListener('load', () => {
        ctx.drawImage(Img_water_valve270_g, 1496, 290, 42, 40);
      });
    }
    
    can.drawText({
      x: 1382,
      y: 104,
      txt: 'P01'
    });
    can.drawText({
      x: 1470,
      y: 308,
      txt: 'V001'
    });
    can.drawLine({
      startX: 1568,
      startY: 80,
      endX: 1568,
      endY: 290
    });
    can.drawLine({
      startX: 1568,
      startY: 380,
      endX: 1568,
      endY: 600
    });
    can.drawLine({
      startX: 1600,
      startY: 80,
      endX: 1600,
      endY: 290
    });
    can.drawLine({
      startX: 1600,
      startY: 380,
      endX: 1600,
      endY: 600
    });

    can.drawLine({
      startX: 1700,
      startY: 80,
      endX: 1700,
      endY: 284
    });

    can.drawLine({
      startX: 1700,
      startY: 392,
      endX: 1700,
      endY: 600
    });

    can.drawRect({
      strokeStyle: 'transparent',
      startX: 240,
      startY: 60,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);

    can.drawText({
      x: 290,
      y: 44,
      txt: 'TT02回水温度'
    });
    can.drawText({
      x: 490,
      y: 44,
      txt: 'PT02回水压力'
    });
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 440,
      startY: 60,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);

    can.drawText({
      x: 490,
      y: 204,
      txt: '环境温度'
    });
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 440,
      startY: 220,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);

    can.drawText({
      x: 490,
      y: 304,
      txt: '环境湿度'
    });
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 440,
      startY: 320,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);

    can.drawText({
      x: 290,
      y: 564,
      txt: 'PT01供水压力'
    });
    can.drawText({
      x: 980,
      y: 240,
      txt: 'P11'
    });
    can.drawText({
      x: 766,
      y: 340,
      txt: 'C11'
    });
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 240,
      startY: 580,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);


    can.drawRect({
      strokeStyle: 'transparent',
      startX: 800,
      startY: 20,
      width: 200,
      height: 50
      ,subName: 'title'
    }, true);

    can.drawRect({
      strokeStyle: 'transparent',
      startX: 1320,
      startY: 32,
      width: 40,
      height: 40
      ,subName: 'motor'
    }, true);

    can.drawText({
      x: 490,
      y: 564,
      txt: 'FIT01冷却水流量'
    });
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 440,
      startY: 580,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);

    can.drawText({
      x: 690,
      y: 564,
      txt: 'TT01供水温度'
    });
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 640,
      startY: 580,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);
    can.drawText({
      x: 890,
      y: 564,
      txt: 'TT21外水温度'
    });
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 840,
      startY: 580,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);
    can.drawText({
      x: 1190,
      y: 564,
      txt: 'PT21外水压力'
    });
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 1140,
      startY: 580,
      width: 100,
      height: 40
      ,subName: 'input'
    }, true);
//////////////////
  can.drawText({
    x: 626,
    y: 98,
    txt: 'H01'
  });
  
    

  ctx.save();
  ctx.beginPath();
  ctx.arc(1740, 80, 4, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(1740, 600, 4, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath();
  ctx.restore();
}
function draw_update (can, status, type) {
  // console.log(status, type);
  const ctx = can.context;
  // 清除画布
  can.clearCanvas();
  // 水阀1
  if (status[0]) {
    if (Img_water_valve1_g.complete) {
      ctx.drawImage(Img_water_valve1_g, 630, 53, 42, 40);
  if (3 != type) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(920, 64, 8, 0, 2 * Math.PI);
    if (status.H02) {
      ctx.fillStyle = '#f00';
    } else {
      ctx.fillStyle = 'gray';
    }
  } else {
    if (Img_water_valve1.complete) {
      ctx.drawImage(Img_water_valve1, 630, 53, 42, 40);
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#fff';
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
  
    ctx.save();
    ctx.beginPath();
    ctx.arc(920, 96, 8, 0, 2 * Math.PI);
    if (status.H01) {
      ctx.fillStyle = '#f00';
    } else {
      ctx.fillStyle = 'gray';
    }
  }
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#fff';
    ctx.closePath();
    ctx.stroke();
    ctx.restore();

  // 水阀2
  if (status[1]) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 736, 280, 42, 40);
    can.drawText({
      fillStyle: '#fff',
      x: 950,
      y: 70,
      txt: 'H02'
    });
    can.drawText({
      fillStyle: '#fff',
      x: 950,
      y: 96,
      txt: 'H01'
    });
    
  
    // 水阀1
    if (status.v017 || status.v023) {
      if (Img_water_valve1_g.complete) {
        ctx.drawImage(Img_water_valve1_g, 630, 53, 42, 40);
      }
    } else {
      if (Img_water_valve1.complete) {
        ctx.drawImage(Img_water_valve1, 630, 53, 42, 40);
      }
    }
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 736, 280, 42, 40);
    }
  }

  // 水阀3
  if (status[2]) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 1266, 120, 42, 40);
    }
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 1266, 120, 42, 40);
    }
  }

  // 水阀4
  if (status[3]) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 1496, 270, 42, 40);
    }
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 1496, 270, 42, 40);
    }
  }
  // P01
  if (status[4]) {
    if (Img_pump2_g.complete) {
      ctx.drawImage(Img_pump2_g, 1350, 30, 60, 60);
    }
  } else {
    if (Img_pump2.complete) {
      ctx.drawImage(Img_pump2, 1350, 30, 60, 60);
    }
  }

  // P11
  if (status[5]) {
    if (Img_pump3_g.complete) {
      ctx.drawImage(Img_pump3_g, 1070, 368, 82, 60);
    }
  } else {
    if (Img_pump3.complete) {
      ctx.drawImage(Img_pump3, 1070, 368, 82, 60);
    }
  }

  // P12
  if (status[6]) {
    if (Img_compressor_g.complete) {
      ctx.drawImage(Img_compressor_g, 1070, 468, 82, 60);
    }
  } else {
    if (Img_compressor.complete) {
      ctx.drawImage(Img_compressor, 1070, 468, 82, 60);
    }
  }

  can.drawText({
    fillStyle: status[7] ? '#090' : '#fff',
    x: 950,
    y: 70,
    txt: 'H02'
  });
  can.drawText({
    fillStyle: status[8] ? '#090' : '#fff',
    x: 950,
    y: 96,
    txt: 'H01'
  });

  if (isMini) {
    // 水阀5
    if (status[4]) {
  
    // 水阀2
    if (status.v018) {
      if (Img_water_valve270_g.complete) {
        ctx.drawImage(Img_water_valve270_g, 1346, 330, 42, 40);
        ctx.drawImage(Img_water_valve270_g, 736, 280, 42, 40);
      }
    } else {
      if (Img_water_valve270.complete) {
        ctx.drawImage(Img_water_valve270, 1346, 330, 42, 40);
        ctx.drawImage(Img_water_valve270, 736, 280, 42, 40);
      }
    }

    // 水阀6
    if (status[3]) {
  
    // 水阀3
    if (status.v054) {
      if (Img_water_valve270_g.complete) {
        ctx.drawImage(Img_water_valve270_g, 1366, 470, 42, 40);
        ctx.drawImage(Img_water_valve270_g, 1266, 120, 42, 40);
      }
    } else {
      if (Img_water_valve270.complete) {
        ctx.drawImage(Img_water_valve270, 1366, 470, 42, 40);
        ctx.drawImage(Img_water_valve270, 1266, 120, 42, 40);
      }
    }
  
    // 水阀4
    if (status.noName) {
      if (Img_water_valve270_g.complete) {
        ctx.drawImage(Img_water_valve270_g, 1496, 270, 42, 40);
      }
    } else {
      if (Img_water_valve270.complete) {
        ctx.drawImage(Img_water_valve270, 1496, 270, 42, 40);
      }
    }
    // P01
    if (status.p01) {
      if (Img_pump2_g.complete) {
        ctx.drawImage(Img_pump2_g, 1350, 30, 60, 60);
      }
    } else {
      if (Img_pump2.complete) {
        ctx.drawImage(Img_pump2, 1350, 30, 60, 60);
      }
    }
  
    // P11
    if (status.p11) {
      if (Img_pump3_g.complete) {
        ctx.drawImage(Img_pump3_g, 1070, 368, 82, 60);
      }
    } else {
      if (Img_pump3.complete) {
        ctx.drawImage(Img_pump3, 1070, 368, 82, 60);
      }
    }
  
    // P12
    if (status.p12) {
      if (Img_compressor_g.complete) {
        ctx.drawImage(Img_compressor_g, 1070, 468, 82, 60);
      }
    } else {
      if (Img_compressor.complete) {
        ctx.drawImage(Img_compressor, 1070, 468, 82, 60);
      }
    }
    // P13
    if (1 == type) {
      if (status.p13) {
        if (Img_compressor_g.complete) {
          ctx.drawImage(Img_compressor_g, 1070, 268, 82, 60);
        }
      } else {
        if (Img_compressor.complete) {
          ctx.drawImage(Img_compressor, 1070, 268, 82, 60);
        }
      }
    }
  
    
  
    if (1 == type) {
      // 水阀5
      if (status.v501) {
        if (Img_water_valve270_g.complete) {
          ctx.drawImage(Img_water_valve270_g, 1346, 330, 42, 40);
        }
      } else {
        if (Img_water_valve270.complete) {
          ctx.drawImage(Img_water_valve270, 1346, 330, 42, 40);
        }
      }
  
      // 水阀6
      if (status.v502) {
        if (Img_water_valve270_g.complete) {
          ctx.drawImage(Img_water_valve270_g, 1366, 470, 42, 40);
        }
      } else {
        if (Img_water_valve270.complete) {
          ctx.drawImage(Img_water_valve270, 1366, 470, 42, 40);
        }
      }
    }
  } else {
    ctx.save();
    ctx.beginPath();
    ctx.arc(660, 96, 8, 0, 2 * Math.PI);
    if (status.H01) {
      ctx.fillStyle = '#f00';
    } else {
      ctx.fillStyle = 'gray';
    }
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#fff';
    ctx.closePath();
    ctx.stroke();
    ctx.restore();

    if (status.p01) {
      if (Img_pump2_g.complete) {
        ctx.drawImage(Img_pump2_g, 1350, 30, 60, 60);
      }
    } else {
      if (Img_pump2.complete) {
        ctx.drawImage(Img_pump2, 1350, 30, 60, 60);
      }
    }

    if (status.p11) {
      if (Img_pump3_g.complete) {
        ctx.drawImage(Img_pump3_g, 1000, 200, 82, 60);
      }
    } else {
      if (Img_pump3.complete) {
        ctx.drawImage(Img_pump3, 1000, 200, 82, 60);
      }
    }



  }
  
}

export default {
  main: draw_main
  ,main_3: draw_main_3
  ,update: draw_update
};

 src/script/drawplus.js

@@ -120,6 +120,11 @@
    // ,strokeStyle: '#fff'
  }
  var opts = deepObjMerge(defaults, options || {});

  if (opts.subName) {
    type += '_' + opts.subName;
  }
  
  this.context.save();
  drawRect(opts, this.context);
  this.context.restore();

 src/script/event.js

New file
@@ -0,0 +1,2 @@
import Vue from 'vue';
export default new Vue();

 src/views/chargePower/main.vue

@@ -649,7 +649,7 @@
        table_name: this.select_date.replace(/-/g, '_'),
        record_time: this.select_date + " 00:00:00"
      };
      console.log(param, 'param');
      // console.log(param, 'param');
      // 显示进度条
      this.progress.show = true;
      // 请求后台
@@ -657,7 +657,7 @@
        this.getProgress();
        this.$api.common.download(param).then((res) => {
          res = JSON.parse(res.data.result);
          console.log(res, 'download res');
          // console.log(res, 'download res');
          if(res.code == 1) {
            // 关闭进度条
            this.progress.show = false;

 src/views/general/index.vue

@@ -24,9 +24,6 @@
    <div class="status" v-for="(item, idx) in status.slice(3)" :key="'status_' + idx" :style="getStyle(item)">
      <label>通讯:</label>
      <span :class="['indicator_css', {'status_normal': item.status, 'status_error': !item.status}]"></span>
      <span class="posR">
        <div v-if="idx > 0 && idx < 4" class="water-tmp">温度:{{'??????'}}℃</div>
      </span>
    </div>
    <!-- 电源状态 -->
    <div class="status" v-for="(item, idx) in status.slice(0, 3)" :key="'status_power_' + idx" :style="getStyle(item)">
@@ -57,10 +54,6 @@
        <div>
          <label>电压:</label>
          <span>{{item.list[1].value | toFixed}}V</span>
        </div>
        <div>
          <label>温度:</label>
          <span>{{"??"}}℃</span>
        </div>
      </div>
    </div>
@@ -109,12 +102,17 @@
  ,'5003': 'water1'
  ,'6001': 'power3'
  ,'6002': 'power3'
  ,'1000004': 'batt1'
  ,'1000005': 'batt2'
  ,'1000006': 'batt3'
  ,'1000007': 'batt4'
};
const DEVIDNAME = {
  '1': 'electric_id'
  ,'2': 'electric_id'
  ,'3': 'motor_id'
  ,'4': 'water_id'
  ,'5': 'BattGroupId'
};
export default {
  name: 'General',
@@ -735,9 +733,9 @@
          this.status[1].status = connects.power2;
          this.status[2].status = connects.power1;
          this.status[3].status = connects.motor;
          this.status[4].status = connects.water1;
          this.status[5].status = connects.water3;
          this.status[6].status = connects.water2;
          this.status[4].status = connects.water3;
          this.status[5].status = connects.water2;
          this.status[6].status = connects.water1;

          this.status[7].status = connects.load1;
          this.status[8].status = connects.load2;
@@ -935,8 +933,8 @@
    ,setLoadData (arr) {
      this.$api.load.getAutoStatus().then((res) => {
        let re = JSON.parse(res.data.result);
        // console.log(re);
        if (re.code) {
          arr = re.data;
          arr.forEach((v, idx) => {
            for (let i = 0, j = re.data.length; i < j; i++) {
              if (re.data[i].dev_id == v.dev_id) {
@@ -1061,12 +1059,14 @@
              arr.forEach((val) => {
                const alarm_id = val[DEVIDNAME[v]];
                this.dev_alarm[DEV[alarm_id]] = true;
                alarm_list.push(val);
                // alarm_list.push(val);
              });
            }
          });
        }
        this.alarm_list = alarm_list;
        // console.log(alarm_list, '====alarm_list');
        // this.alarm_list = alarm_list;
        // this.$event.$emit('update_alarm', alarm_list);
      });
    }
    // 告警重置
@@ -1197,7 +1197,7 @@
      if (this.loadList.length) {
        this.setLoadData(this.loadList);
      } else {
        this.getList().then(() => {
        this.getList().then((res) => {
          this.setLoadData(this.loadList);
        });
      }

 src/views/main.vue

@@ -19,7 +19,7 @@
      </div>
      <!-- 告警滚动 -->
      <div class="">
        <scroll-ad></scroll-ad>
        <scroll-ad :datalist="list"></scroll-ad>
      </div>
    </div>
  </div>
@@ -31,7 +31,34 @@
import ContentBox from '../components/ContentBox'
import MyTree from '../components/tree/Index'
import ScrollAd from '../components/scrollAd'

const DEV = {
  '1': 'electric_id'
  ,'2': 'electric_id'
  ,'3': 'motor_id'
  ,'4': 'water_id'
  ,'5': 'BattGroupId'
};
const DEVIDNAME = {
  '1001': '水冷负载1'
  ,'1002': '水冷负载2'
  ,'1003': '水冷负载3'
  ,'1004': '水冷负载4'
  ,'2001': '加载电机系统'
  ,'4001': '1号2号大功率整流电源A套电源'
  ,'4002': '1号2号大功率整流电源B套电源'
  ,'4003': '1号2号大功率整流电源C套电源'
  ,'4004': '1号2号大功率整流电源D套电源'
  ,'5001': '2号水冷装置'
  ,'5002': '3号水冷装置'
  ,'5003': '1号水冷装置'
  ,'6001': '3号大功率整流电源A机组电源'
  ,'6002': '3号大功率整流电源B机组电源'
  ,'1000004': '蓄电池组1#'
  ,'1000005': '蓄电池组2#'
  ,'1000006': '蓄电池组3#'
  ,'1000007': '蓄电池组4#'
};
let is_water = false;
export default {
  name: 'App',
  components: {
@@ -44,6 +71,7 @@
    return {
      timer: new this.$common.Timeout(),
      status: []
      ,list: []
    }
  },
  methods: {
@@ -66,11 +94,13 @@
        let rs = JSON.parse(res.data.result);
        if(rs.code == 1) {
          let data = rs.data;
          console.log(data, '++++++++')
          let status = [];
          let reg;
          switch (type) {
            case 'watercooling':
              reg = /^50/;
              is_water = true;
              break;
            case 'load':
              reg = /^10/;
@@ -86,23 +116,66 @@
              break;
          }

          let water_status = [];
          data.forEach((v) => {
            if (is_water) {
              switch (v.dev_id) {
                case 5001:
                  water_status[1] = v.connect_en;
                  break;
                case 5002:
                  water_status[2] = v.connect_en;
                  break;
                case 5003:
                  water_status[0] = v.connect_en;
                  break;
              }
            }
            if (reg.test(v.dev_id)) {
              status.push(v.connect_en);
            }
          });

          this.status = status;
          
          this.status = is_water ? water_status : status;
        }
      });
    }
    ,loop () {
      this.timer.start(() => {
        this.getConnect();
        this.getAllRtAlarm();
        this.timer.open();
      }, 1000);
    }
    // 查询所有告警
    ,getAllRtAlarm () {
      this.$api.common.getAllRtAlarm().then((res) => {
        res = JSON.parse(res.data.result);
        // console.log(res, 'rtalarm');
        let alarm_list = [];
        // 告警重置
        if (res.code) {
          let data = res.data;
          Object.keys(data).forEach((v, i, a) => {
            // console.log(v, i, a);
            let arr = data[v];
            if (arr.length) {
              arr.forEach((val) => {
                // 获取告警设备 通过ID
                const alarm_id = val[DEV[v]];
                let devname = DEVIDNAME[alarm_id];
                let alarm_starttime = val.alarm_starttime || val.alm_start_time;
                let alarm_name = val.alarm_name || val.alm_name;
                val['text'] = devname + ' - ' + alarm_starttime + ' - ' + alarm_name;
                alarm_list.push(val);
              });
            }
          });
        }
        // console.log(alarm_list, '====alarm_list');
        this.list = alarm_list;
      });
    }
  },
  mounted () {
    this.loop();

 src/views/waterCooling/index1.vue

New file
@@ -0,0 +1,915 @@
<template>
  <div class="page_watercooling flex_column posA_full">
    <div class="page_title">运行界面</div>
    <div class="btn-group">
      <div class="btn_3d btn-toggle" @click="changeStatus">{{showTable ? '显示运行图' : '显示表格'}}</div>
    </div>
    <div class="page_content" :class="{'turn_end': showTable}">
      <div class="wraper">
        <div class="canvas_container posA_full" ref="container">
          <canvas id="can" width="1800" height="700" ref="can"></canvas>
          <canvas class="can1" id="can1" width="1800" height="700"  ref="can1"></canvas>
          <science-box v-for="(load, key) in loads" :key="'load_' + key" 
            no-header
            class="panel_info"
            :cssWidth="load.position.width"
            :cssHeight="load.position.height"
            :top="load.position.top" :left="load.position.left">
            <div class="posA_full _main">
              <div class="title">{{load.data.title}}</div>
              <div class="content">
                <div class="row">
                  <label>{{load.data.TLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.TAlarm}" disabled size="mini" type="number" v-model="load.data.TValue"></el-input>
                </div>
                <div class="row">
                  <label>{{load.data.PLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.PAlarm}" disabled size="mini" type="number" v-model="load.data.PValue"></el-input>
                </div>
                <div class="row">
                  <label>{{load.data.FLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.FAlarm}" disabled size="mini" type="number" v-model="load.data.FValue"></el-input>
                </div>
                <!-- <div class="row">
                  <label>{{load.data.VLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.VAlarm}" disabled size="mini" type="number" v-model="load.data.VValue"></el-input>
                </div> -->
              </div>
            </div>
          </science-box>
          <science-box v-for="(item, index) in inputList" :key="index" 
            class="panel_input"
            no-header
            :cssWidth="item.position.width"
            :cssHeight="item.position.height"
            :top="item.position.top" :left="item.position.left">
            <el-input class="input transparent" :class="{'alarm': item.alarm}" disabled type="number" v-model="item.value"></el-input>
          </science-box>
          <!-- 运行状态 -->
          <div class="run_info flexR_center" :style="getStyle(run_info)">运行状态: <div :class="['indicator_css', {'status_normal': G_status.Water_system_function, 'status_off': !G_status.Water_system_function}]"></div></div>
          <div class="rotate_motor" :style="getStyle(rotate_motor)">
            <div class="motor" :class="{'motor_run': G_status.p01}"></div>
          </div>
        </div>
      </div>
      <div class="wraper">
        <div class="tab_table posA_full">
          <el-tabs class="inner" type="border-card">
            <el-tab-pane label="实时数据">
              <assemble-table
                :data=tlist.rtData
                :len="4"
                ></assemble-table>
            </el-tab-pane>
            <el-tab-pane label="支路数据">
              <assemble-table
                :data=tlist.branchData
                :len="4"
                ></assemble-table>
            </el-tab-pane>
            <el-tab-pane label="状态数据">
              <assemble-table
              :data=tlist.stateData
              :len="4"
              ></assemble-table>
            </el-tab-pane>
            <el-tab-pane label="故障数据">
              <assemble-table
              :data=tlist.alarmData
              :len="4"
              ></assemble-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <rotate-menu class="menu_contain">
      <div class="main posA_full">菜单</div>
      <ul class="menu" slot="sub">
          <li v-if="!flag"><div class="btn" @click="start">就地启动</div></li>
          <li v-if="flag"><div class="btn" @click="stop">就地停止</div></li>
          <li><div class="btn" @click="go('/watercooling/alarmparam/9')">报警参数</div></li>
          <li><div class="btn" @click="go('/watercooling/function/9')">功能参数</div></li>
          <li><div class="btn" @click="go('/watercooling/operate/9')">手动操作</div></li>
          <li><div class="btn" @click="go('/watercooling/alarmhis/9')">历史报警</div></li>
          <li><div class="btn" @click="go('/watercooling/systemsettings/9')">系统设定</div></li>
      </ul>
    </rotate-menu>
  </div>
</template>

<script>
import RotateMenu from '@/components/RotateMenu';
import ScienceBox from '../../components/ScienceBox'
import EleCircle from '@/script/drawplus'
import draw from '@/script/draw_water_cooling';
import AssembleTable from '@/components/AssembleTable';
import type from '@/script/config_water';

let can, can1, resizeHandler;
// 临时存放格式化后的表格数据
// [0: rtData, 1: branchData, 2: stateData, 3: 告警]
// let list = [[], [], [], []];
// 配置项
const water_type = 1;
const water_id = 5003;
// 支路序号与位置映射
const loadsIdx = {
  '7': 0,
  '4': 1,
  '1': 2,
  '8': 3,
  '5': 4,
  '2': 5,
  '9': 6,
  '6': 7,
  '3': 8
};
export default {
  name: 'WaterCooling',
  components: {
    RotateMenu,
    ScienceBox,
    AssembleTable
  },
  data () {
    return {
      tlist: {
        rtData: [],
        branchData: [],
        stateData: [],
        alarmData: []
      },
      showTable: false,
      timer: new this.$common.Timeout(),
      flag: false,
      // 图中状态 （开关等）
      G_status: {
        v017: false
        ,Water_system_function: false
        ,H01: false
        ,H02: false
        ,p01: false
        ,p11: false
        ,p12: false
        ,p13: false
      },
      loads: [{
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '7#支路'
          ,TLabel: 'TT09(℃)'
          ,PLabel: 'PT08(bar)'
          ,FLabel: 'FIT08(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '4#支路'
          ,TLabel: 'TT05(℃)'
          ,PLabel: 'PT05(bar)'
          ,FLabel: 'FIT05(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '1#支路'
          ,TLabel: 'TT02(℃)'
          ,PLabel: 'PT02(bar)'
          ,FLabel: 'FIT02(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '8#支路'
          ,TLabel: 'TT10(℃)'
          ,PLabel: 'PT09(bar)'
          ,FLabel: 'FIT09(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '5#支路'
          ,TLabel: 'TT06(℃)'
          ,PLabel: 'PT06(bar)'
          ,FLabel: 'FIT06(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '2#支路'
          ,TLabel: 'TT03(℃)'
          ,PLabel: 'PT03(bar)'
          ,FLabel: 'FIT03(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '9#支路'
          ,TLabel: 'TT11(℃)'
          ,PLabel: 'PT10(bar)'
          ,FLabel: 'FIT10(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '6#支路'
          ,TLabel: 'TT07(℃)'
          ,PLabel: 'PT07(bar)'
          ,FLabel: 'FIT07(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '3#支路'
          ,TLabel: 'TT04(℃)'
          ,PLabel: 'PT04(bar)'
          ,FLabel: 'FIT04(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }],
      run_info: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        width: 0,
        height: 0
      },
      rotate_motor: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        width: 0,
        height: 0
      },
      inputList: [{
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }]
    }
  },
  methods: {
    go (path) {
      this.$router.push({path});
    }
    ,start () {

    }
    ,stop () {

    }
    ,changeStatus () {
      this.showTable = !this.showTable;
    }
    ,setLoad () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      for (let i = 0; i < 9; i++) {
        this.loads[i].position = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_' + i));
      }
    }
    ,setInput () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      for (let i = 0; i < 8; i++) {
        this.inputList[i].position = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_input_' + i));
      }
    }
    ,getStyle (obj) {
      return {
        left: obj.left + 'px',
        top: obj.top + 'px',
        width: obj.width + 'px',
        height: obj.height + 'px'
      }
    }
    ,getPos () {
      this.setLoad();
      this.setInput();
      this.getRunInfoPos();
      this.getMotorPos();
    }
    ,getRunInfoPos () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      this.run_info = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_title_0'));
    }
    ,getMotorPos () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      this.rotate_motor = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_motor_0'));
    }
    // 数值数据
    ,getDate () {
      let list = [];
      return this.$api.water.getDate({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        if (!res.code) {
          return;
        }
        let data = res.data[0];
        let rtData = type.type3.rtData;
        // 冷却水流量
        this.inputList[2].value = data.cooling_flow;
        // 冷却水电导率
        this.inputList[3].value = data.Cooling_ser;
        // 供水温度
        this.inputList[4].value = data.supply_tmp;
        // 供水压力
        this.inputList[1].value = data.Supply_pre;
        // 回水温度
        this.inputList[0].value = data.back_tem;

        // PT11 缓冲罐压力 5
        this.inputList[5].value = data.Buffer_tank_pre;
        // TRT01_T 阀厅温度 6
        this.inputList[6].value = data.Tem_chamber;
        // TRT01_R 阀厅湿度 7
        this.inputList[7].value = data.Humidity_chamber;

        Object.keys(data).forEach((v) => {
          if ('num' == v || 'water_id' == v) {
            return;
          }
          list.push({
            text: rtData[v],
            key: v,
            val: data[v],
          });
        });

        this.tlist.rtData = list;
        
      });
    }
    // 支路数据
    ,getInfo () {
      let list = [];

      return this.$api.water.getInfo({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        if (!res.code) {
          return;
        }
        let data = res.data[0];
        let branchData = type.type3.branchData;

        this.loads[0].data.TValue = data.Branch_tmp_7;
        this.loads[0].data.PValue = data.Branch_pre_7;
        this.loads[0].data.FValue = data.Branch_flow_7;

        this.loads[1].data.TValue = data.Branch_tmp_4;
        this.loads[1].data.PValue = data.Branch_pre_4;
        this.loads[1].data.FValue = data.Branch_flow_4;

        this.loads[2].data.TValue = data.Branch_tmp_1;
        this.loads[2].data.PValue = data.Branch_pre_1;
        this.loads[2].data.FValue = data.Branch_flow_1;

        this.loads[3].data.TValue = data.Branch_tmp_8;
        this.loads[3].data.PValue = data.Branch_pre_8;
        this.loads[3].data.FValue = data.Branch_flow_8;

        this.loads[4].data.TValue = data.Branch_tmp_5;
        this.loads[4].data.PValue = data.Branch_pre_5;
        this.loads[4].data.FValue = data.Branch_flow_5;

        this.loads[5].data.TValue = data.Branch_tmp_2;
        this.loads[5].data.PValue = data.Branch_pre_2;
        this.loads[5].data.FValue = data.Branch_flow_2;

        this.loads[6].data.TValue = data.Branch_tmp_9;
        this.loads[6].data.PValue = data.Branch_pre_9;
        this.loads[6].data.FValue = data.Branch_flow_9;

        this.loads[7].data.TValue = data.Branch_tmp_6;
        this.loads[7].data.PValue = data.Branch_pre_6;
        this.loads[7].data.FValue = data.Branch_flow_6;

        this.loads[8].data.TValue = data.Branch_tmp_3;
        this.loads[8].data.PValue = data.Branch_pre_3;
        this.loads[8].data.FValue = data.Branch_flow_3;

        Object.keys(data).forEach((v) => {
          if ('num' == v || 'water_id' == v) {
            return;
          }
          list.push({
            text: branchData[v],
            key: v,
            val: data[v],
          });
        });
        this.tlist.branchData = list;

      });
    }
    // 状态数据
    ,getStatus () {
      let list = [];

      return this.$api.water.getStatus({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        console.log(res, '9999999999999999')
        if (!res.code) {
          return;
        }
        let data = res.data[0];
        let stateData = type.type3.stateData;

        this.G_status.v017 = data.Solenoid_openflag;
        // TODO
        this.G_status.v018 = data.Solenoid_openflag;
        this.G_status.v054 = data.Solenoid_openflag;
        this.G_status.v051 = data.Solenoid_openflag;
        this.G_status.v052 = data.Solenoid_openflag;
        this.G_status.noName = data.Solenoid_openflag;

        this.G_status.Water_system_function = data.Water_system_function;

        this.G_status.H01 = data.H01_electric_heater;
        this.G_status.H02 = data.H02_electric_heater;
        this.G_status.p01 = data.P01_main_pump;
        this.G_status.p11 = data.P11_replenish_pump;
        this.G_status.p12 = data.P12_pretest_pump;
        this.G_status.p13 = data.P13_replenish_pump;

        Object.keys(data).forEach((v) => {
          if ('num' == v || 'water_id' == v) {
            return;
          }
          list.push({
            text: stateData[v],
            key: v,
            val: data[v],
          });
        });
        this.tlist.stateData = list;
      });
    }
    // 告警
    ,getAlarm () {
      let list = [];

      return this.$api.water.getAlarm({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        if (!res.code) {
          return;
        }

        let data = res.data;
        // 没有告警则退出
        if (!data.length) {
          return false;
        }
        for (let i = 0, j = data.length; i < j; i++) {
          // 把告警添加到列表
          list.push({
            text: data[i]['alarm_name'],
            key: '',
            val: '告警',
          });
        }
        this.tlist.alarmData = list;
      });
    }
    ,loop () {
      // 一次所有数据请求完成 才进入下一次轮询
      this.timer.start(() => {
        this.$axios.all([this.getDate(), this.getInfo(), this.getStatus(), this.getAlarm()])
        .then(()=> {
          // this.tlist = [...list[0], ...list[1], ...list[2], ...list[3]];
          // list = [[], [], [], []];
          console.log(this.G_status, '99999999999999990000000000000000000');
          draw.update(can1, this.G_status, water_type);
          
          this.timer.open();
        }).catch((err)=>{
          console.error(err);
          this.timer.open();
        });
          // draw.update(can1, this.G_status, water_type);
      }, 1000);
    }
  },
  mounted () {
    const $container = this.$refs.container;
    // const $can = this.$refs.can;
    // const $can1 = this.$refs.can1;
    can = new EleCircle('can');
    can1 = new EleCircle('can1');
    /*let width = $container.offsetWidth;
    let height = $container.offsetHeight;*/

    // 画图主体部份
    draw.main(can, water_type);
    // 画图更新部份
    // draw.update(can1, this.G_status);
    this.getPos();

    this.loop();

    resizeHandler = () => {
      this.getPos();
    }
    window.addEventListener('resize', resizeHandler);
    // console.log('====can===', can);
  },
  destroyed() {
    window.removeEventListener('resize', resizeHandler);
    this.timer.stop();
  }

}
</script>
<style scoped>
.page_watercooling {
  overflow: hidden;
}
.menu_contain {
  position: fixed;
  width: 80px;
  height: 80px;
  -webkit-border-radius: 100% 0 0.08rem 0;
  border-radius: 100% 0 0.08rem 0;
  background: rgba(18, 196, 209, .8);
  right: 0.1rem;
  /*bottom: 0.08rem;*/
  bottom: 0.4rem;
  cursor: pointer;
}
.menu_contain:hover {
  background: #15e3f3;
}
.main {
  -webkit-border-radius: 100% 0 0.08rem 0;
  border-radius: 100% 0 0.08rem 0;
  padding: 20px 0 0 20px;
  line-height: 60px;
  -webkit-box-shadow: inset 10px 10px  10px -15px #000, inset -15px 0px  10px -15px #000, inset 0px -15px 10px -15px #000;
  box-shadow: inset 10px 10px  10px -15px #000, inset -15px 0px  10px -15px #000, inset 0px -15px 10px -15px #000;
}
.page_title {
  text-align: center;
  font-size: .26rem;
}
.page_content {
  display: -webkit-flex;
  display: flex;
  flex: 1;
  width: 200%;
  -webkit-transition: transform 0.6s;
  transition: transform 0.6s;
  /*overflow: hidden;*/
}
.wraper {
  flex: 1;
  position: relative;
}
.tab_table {
  /*background: gray;*/
  /*flex: 1;*/
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  padding-bottom: .6rem;
}
.tab_table .inner {
  flex: 1;
  /*padding: 0 .2rem;*/
}
.turn_end.page_content {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.canvas_container {
  /* position: relative;
  flex: 1; */
}
canvas {
  display: block;
  /*background: rgba(0,0,0,.1);*/
  width: 100%;
  height: 100%;
  -webkit-object-fit: contain;
  object-fit: contain;  
}
.can1 {
  position: absolute;
  left: 0;
  top: 0;
}
.panel_info ._main {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}
.panel_info .title {
  text-align: center;
}
.panel_info .content {
  flex: 1;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel_info .row {
  flex: 1;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.panel_info .row label {
  flex: 1.6;
  text-align: right;
  margin-right: .4em;
}
.panel_info .row .input {
  flex: 1;
}
.btn-group {
  position: absolute;
  top: 0;
  right: 10px;
}
.btn-toggle {
  margin-top: 4px;
}
.run_info {
  position: absolute;
  /*border: 1px #fff solid;*/
}
.rotate_motor {
  /*border: 1px #fff solid;*/
  position: absolute;
}
.indicator_css {
  width: 32px;
  height: 32px;
  margin-left: .4em;
}
.motor {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: gray;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.motor:before,
.motor:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.motor:before {
  background: radial-gradient(circle, #333 20%, transparent 0) 50% -6% / 50% 50% no-repeat,
              radial-gradient(circle, #333 20%, transparent 0) 50% 106% / 50% 50% no-repeat;
}
.motor:after {
  background: radial-gradient(circle, #333 20%, transparent 0) -6% 50% / 50% 50% no-repeat,
              radial-gradient(circle, #666 20%, transparent 0) 50% 50% / 50% 50% no-repeat,
              radial-gradient(circle, #333 20%, transparent 0) 106% 50% / 50% 50% no-repeat;
}
.motor_run {
  -webkit-animation: rotate_ani 1s linear .2s infinite;
  animation: rotate_ani 1s linear .2s infinite;
}
@-webkit-keyframes rotate_ani {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(720deg);
    transform: translate(-50%, -50%) rotate(720deg);
  }
}
@keyframes rotate_ani {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(720deg);
    transform: translate(-50%, -50%) rotate(720deg);
  }
}

</style>

 src/views/waterCooling/index2.vue

New file
@@ -0,0 +1,1012 @@
<template>
  <div class="page_watercooling flex_column posA_full">
    <div class="page_title">运行界面</div>
    <div class="btn-group">
      <div class="btn_3d btn-toggle" @click="changeStatus">{{showTable ? '显示运行图' : '显示表格'}}</div>
    </div>
    <div class="page_content" :class="{'turn_end': showTable}">
      <div class="wraper">
        <div class="canvas_container posA_full" ref="container">
          <canvas id="can" width="1800" height="700" ref="can"></canvas>
          <canvas class="can1" id="can1" width="1800" height="700"  ref="can1"></canvas>
          <science-box v-for="(load, key) in loads" :key="'load_' + key" 
            no-header
            class="panel_info"
            :cssWidth="load.position.width"
            :cssHeight="load.position.height"
            :top="load.position.top" :left="load.position.left">
            <div class="posA_full _main">
              <div class="title">{{load.data.title}}</div>
              <div class="content">
                <div class="row">
                  <label>{{load.data.TLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.TAlarm}" disabled size="mini" type="number" v-model="load.data.TValue"></el-input>
                </div>
                <div class="row">
                  <label>{{load.data.PLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.PAlarm}" disabled size="mini" type="number" v-model="load.data.PValue"></el-input>
                </div>
                <div class="row">
                  <label>{{load.data.FLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.FAlarm}" disabled size="mini" type="number" v-model="load.data.FValue"></el-input>
                </div>
                <!-- <div class="row">
                  <label>{{load.data.VLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.VAlarm}" disabled size="mini" type="number" v-model="load.data.VValue"></el-input>
                </div> -->
              </div>
            </div>
          </science-box>
          <science-box v-for="(item, index) in inputList" :key="index" 
            class="panel_input"
            no-header
            :cssWidth="item.position.width"
            :cssHeight="item.position.height"
            :top="item.position.top" :left="item.position.left">
            <el-input class="input transparent" :class="{'alarm': item.alarm}" disabled type="number" v-model="item.value"></el-input>
          </science-box>
          <!-- 运行状态 -->
          <div class="run_info flexR_center" :style="getStyle(run_info)">运行状态: <div :class="['indicator_css', {'status_normal': G_status.Water_system_function, 'status_off': !G_status.Water_system_function}]"></div></div>
          <div class="rotate_motor" :style="getStyle(rotate_motor)">
            <div class="motor" :class="{'motor_run': G_status.p01}"></div>
          </div>
        </div>
      </div>
      <div class="wraper">
        <div class="tab_table posA_full">
          <el-tabs class="inner" type="border-card">
            <el-tab-pane label="实时数据">
              <assemble-table
                :data=tlist.rtData
                :len="4"
                ></assemble-table>
            </el-tab-pane>
            <el-tab-pane label="支路数据">
              <assemble-table
                :data=tlist.branchData
                :len="4"
                ></assemble-table>
            </el-tab-pane>
            <el-tab-pane label="状态数据">
              <assemble-table
              :data=tlist.stateData
              :len="4"
              ></assemble-table>
            </el-tab-pane>
            <el-tab-pane label="故障数据">
              <assemble-table
              :data=tlist.alarmData
              :len="4"
              ></assemble-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <rotate-menu class="menu_contain">
      <div class="main posA_full">菜单</div>
      <ul class="menu" slot="sub">
          <li v-if="!flag"><div class="btn" @click="start">就地启动</div></li>
          <li v-if="flag"><div class="btn" @click="stop">就地停止</div></li>
          <li><div class="btn" @click="go('/watercooling/alarmparam/9')">报警参数</div></li>
          <li><div class="btn" @click="go('/watercooling/function/9')">功能参数</div></li>
          <li><div class="btn" @click="go('/watercooling/operate/9')">手动操作</div></li>
          <li><div class="btn" @click="go('/watercooling/alarmhis/9')">历史报警</div></li>
          <li><div class="btn" @click="go('/watercooling/systemsettings/9')">系统设定</div></li>
      </ul>
    </rotate-menu>
  </div>
</template>

<script>
import RotateMenu from '@/components/RotateMenu';
import ScienceBox from '../../components/ScienceBox'
import EleCircle from '@/script/drawplus'
import draw from '@/script/draw_water_cooling';
import AssembleTable from '@/components/AssembleTable';
import type from '@/script/config_water';

let can, can1, resizeHandler;
// 临时存放格式化后的表格数据
// [0: rtData, 1: branchData, 2: stateData, 3: 告警]
// let list = [[], [], [], []];
// 配置项
const water_type = 2;
const water_id = 5001;
// 支路序号与位置映射
const loadsIdx = {
  '7': 0,
  '4': 1,
  '1': 2,
  '8': 3,
  '5': 4,
  '2': 5,
  '9': 6,
  '6': 7,
  '3': 8
};
export default {
  name: 'WaterCooling',
  components: {
    RotateMenu,
    ScienceBox,
    AssembleTable
  },
  data () {
    return {
      tlist: {
        rtData: [],
        branchData: [],
        stateData: [],
        alarmData: []
      },
      showTable: false,
      timer: new this.$common.Timeout(),
      flag: false,
      // 图中状态 （开关等）
      // [0: v023状态, 1: 开关2, 2: 开关3, 3: 开关4, 4: P01, 5: P11, 6: P12, 7: H02, 8: H01]
      G_status: {
        v023: false
        ,Water_system_function: false
        ,H01: false
        ,H02: false
        ,p01: false
        ,p11: false
        ,p12: false
      },
      loads: [{
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '7#支路'
          ,TLabel: 'TT07(℃)'
          ,PLabel: 'PT07(bar)'
          ,FLabel: 'FIT07(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '4#支路'
          ,TLabel: 'TT04(℃)'
          ,PLabel: 'PT04(bar)'
          ,FLabel: 'FIT04(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '1#支路'
          ,TLabel: 'TT01(℃)'
          ,PLabel: 'PT01(bar)'
          ,FLabel: 'FIT01(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '8#支路'
          ,TLabel: 'TT08(℃)'
          ,PLabel: 'PT08(bar)'
          ,FLabel: 'FIT08(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '5#支路'
          ,TLabel: 'TT05(℃)'
          ,PLabel: 'PT05(bar)'
          ,FLabel: 'FIT05(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '2#支路'
          ,TLabel: 'TT02(℃)'
          ,PLabel: 'PT02(bar)'
          ,FLabel: 'FIT02(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '9#支路'
          ,TLabel: 'TT09(℃)'
          ,PLabel: 'PT09(bar)'
          ,FLabel: 'FIT09(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '6#支路'
          ,TLabel: 'TT06(℃)'
          ,PLabel: 'PT06(bar)'
          ,FLabel: 'FIT06(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        data: {
          title: '3#支路'
          ,TLabel: 'TT03(℃)'
          ,PLabel: 'PT03(bar)'
          ,FLabel: 'FIT03(T/h)'
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }],
      run_info: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        width: 0,
        height: 0
      },
      rotate_motor: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        width: 0,
        height: 0
      },
      inputList: [{
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }]
    }
  },
  methods: {
    go (path) {
      this.$router.push({path});
    }
    ,start () {

    }
    ,stop () {

    }
    ,changeStatus () {
      this.showTable = !this.showTable;
    }
    ,setLoad () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      for (let i = 0; i < 9; i++) {
        this.loads[i].position = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_' + i));
      }
    }
    ,setInput () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      for (let i = 0; i < 5; i++) {
        this.inputList[i].position = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_input_' + i));
      }
    }
    ,getStyle (obj) {
      return {
        left: obj.left + 'px',
        top: obj.top + 'px',
        width: obj.width + 'px',
        height: obj.height + 'px'
      }
    }
    ,getPos () {
      this.setLoad();
      this.setInput();
      this.getRunInfoPos();
      this.getMotorPos();
    }
    ,getRunInfoPos () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      this.run_info = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_title_0'));
    }
    ,getMotorPos () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      this.rotate_motor = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_motor_0'));
    }
    // 数值数据
    ,getDate () {
      let list = [];
      return this.$api.water.getDate({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        if (!res.code) {
          return;
        }
        let data = res.data[0];
        let rtData = type.type3.rtData;
        // 冷却水流量 FIT10
        this.inputList[2].value = data.cooling_flow;
        // 冷却水电导率 QIT01
        this.inputList[3].value = data.Cooling_ser;
        // 供水温度 TT10
        this.inputList[4].value = data.supply_tmp;
        // 供水压力 PT10
        this.inputList[1].value = data.Supply_pre;
        // 回水温度 TT11
        this.inputList[0].value = data.back_tem;

        Object.keys(data).forEach((v) => {
          if ('num' == v || 'water_id' == v) {
            return;
          }
          list.push({
            text: rtData[v],
            key: v,
            val: data[v],
          });
        });

        this.tlist.rtData = list;
        
      });
    }
    // 支路数据
    ,getInfo () {
      let list = [];

      return this.$api.water.getInfo({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        if (!res.code) {
          return;
        }
        let data = res.data[0];
        let branchData = type.type3.branchData;

        this.loads[0].data.TValue = data.Branch_tmp_7;
        this.loads[0].data.PValue = data.Branch_pre_7;
        this.loads[0].data.FValue = data.Branch_flow_7;

        this.loads[1].data.TValue = data.Branch_tmp_4;
        this.loads[1].data.PValue = data.Branch_pre_4;
        this.loads[1].data.FValue = data.Branch_flow_4;

        this.loads[2].data.TValue = data.Branch_tmp_1;
        this.loads[2].data.PValue = data.Branch_pre_1;
        this.loads[2].data.FValue = data.Branch_flow_1;

        this.loads[3].data.TValue = data.Branch_tmp_8;
        this.loads[3].data.PValue = data.Branch_pre_8;
        this.loads[3].data.FValue = data.Branch_flow_8;

        this.loads[4].data.TValue = data.Branch_tmp_5;
        this.loads[4].data.PValue = data.Branch_pre_5;
        this.loads[4].data.FValue = data.Branch_flow_5;

        this.loads[5].data.TValue = data.Branch_tmp_2;
        this.loads[5].data.PValue = data.Branch_pre_2;
        this.loads[5].data.FValue = data.Branch_flow_2;

        this.loads[6].data.TValue = data.Branch_tmp_9;
        this.loads[6].data.PValue = data.Branch_pre_9;
        this.loads[6].data.FValue = data.Branch_flow_9;

        this.loads[7].data.TValue = data.Branch_tmp_6;
        this.loads[7].data.PValue = data.Branch_pre_6;
        this.loads[7].data.FValue = data.Branch_flow_6;

        this.loads[8].data.TValue = data.Branch_tmp_3;
        this.loads[8].data.PValue = data.Branch_pre_3;
        this.loads[8].data.FValue = data.Branch_flow_3;

        Object.keys(data).forEach((v) => {
          if ('num' == v || 'water_id' == v) {
            return;
          }
          list.push({
            text: branchData[v],
            key: v,
            val: data[v],
          });
        });
        this.tlist.branchData = list;

      });
    }
    // 状态数据
    ,getStatus () {
      let list = [];

      return this.$api.water.getStatus({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        if (!res.code) {
          return;
        }
        let data = res.data[0];
        let stateData = type.type3.stateData;
        /*v023: false
        ,Water_system_function: false
        ,H01: false
        ,H02: false
        ,p01: false
        ,p11: false
        ,p12: false*/
        this.G_status.Water_system_function = data.Water_system_function;
        this.G_status.v023 = data.Solenoid_openflag;
        this.G_status.p01 = data.P01_main_pump;
        this.G_status.p11 = data.P11_replenish_pump;
        this.G_status.p12 = data.P12_pretest_pump;
        this.G_status.H01 = data.H01_electric_heater;
        this.G_status.H02 = data.H02_electric_heater;
        this.G_status.v501 = data.valve_start;

        Object.keys(data).forEach((v) => {
          if ('num' == v || 'water_id' == v) {
            return;
          }
          list.push({
            text: stateData[v],
            key: v,
            val: data[v],
          });
        });
        this.tlist.stateData = list;
      });
    }
    // 复位所有告警
    ,resetAlarm () {
      // 支路数据告警
      this.loads.forEach((v) => {
        v.data.TAlarm = false;
        v.data.PAlarm = false;
        v.data.FAlarm = false;
        v.data.VAlarm = false;
      });
      // 其他输入框处告警
      this.inputList.forEach((v) => {
        v.alarm = false;
      })
    }
    // 告警
    ,getAlarm () {
      let list = [];

      return this.$api.water.getAlarm({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        if (!res.code) {
          return;
        }

        let data = res.data;
        // data = [{alarm_name: '回水温度变送器故障'}];
        // 没有告警则退出
        if (!data.length) {
          return false;
        }
        // 回水温度
        let reg_t = /(\d+)#\u56DE\u6C34\u6E29\u5EA6/;
        // #支路流量低
        let reg_f = /(\d+)#\u652F\u8DEF\u6D41\u91CF\S?\u4F4E$/;
        // #支路流量变送器故障
        let reg_trans_f = /(\d+)#\u652F\u8DEF\u6D41\u91CF\u53D8\u9001\u5668\u6545\u969C$/;
        // #支路温度变送器故障
        let reg_trans_t = /(\d+)#\u652F\u8DEF\u6E29\u5EA6\u53D8\u9001\u5668\u6545\u969C$/;
        // #支路压力变送器故障
        let reg_trans_p = /(\d+)#\u652F\u8DEF\u538B\u529B\u53D8\u9001\u5668\u6545\u969C$/;

        // 选复位
        this.resetAlarm();
        for (let i = 0, j = data.length; i < j; i++) {
          // 把告警添加到列表
          list.push({
            text: data[i]['alarm_name'],
            key: '',
            val: '告警',
          });

          let alarm_name = data[i].alarm_name
          if (reg_t.test(alarm_name)) {
            let idx = RegExp.$1;
            this.loads[loadsIdx[idx]].data.TAlarm = true;
            continue;
          }
          if (reg_f.test(alarm_name)) {
            let idx = RegExp.$1;
            this.loads[loadsIdx[idx]].data.FAlarm = true;
            continue;
          }
          if (reg_trans_f.test(alarm_name)) {
            let idx = RegExp.$1;
            this.loads[loadsIdx[idx]].data.FAlarm = true;
            continue;
          }
          if (reg_trans_t.test(alarm_name)) {
            let idx = RegExp.$1;
            this.loads[loadsIdx[idx]].data.TAlarm = true;
            continue;
          }
          if (reg_trans_p.test(alarm_name)) {
            let idx = RegExp.$1;
            this.loads[loadsIdx[idx]].data.PAlarm = true;
            continue;
          }

          switch (alarm_name) {
            case "冷却水流量变送器故障":
              this.inputList[6].alarm = true;
              break;
            case "供水温度变送器故障":
              this.inputList[8].alarm = true;
              break;
            case "供水压力变送器故障":
              this.inputList[5].alarm = true;
              break;
            case "回水温度变送器故障":
              this.inputList[0].alarm = true;
              break;
            case "回水压力变送器故障":
              break;
            case "冷却水电导率变送器故障":
              this.inputList[7].alarm = true;
              break;
            case "缓冲罐液位变送器故障":
              break;
            case "缓冲罐压力变送器故障":
              break;
            case "阀厅湿度变送器故障":
              break;
            case "阀厅温度变送器故障":
              break;
            case "外水温度变送器故障":
              this.inputList[3].alarm = true;
              break;
            case "外水压力变送器故障":
              break;
            case "电加热器故障":
            // TODO
              break;
            case "电加热失败":
            // TODO
              break;
            case "补水泵故障":
              break;
            case "三通阀故障":
              // TODO
              break;
            case "冷却水流量低":
              break;
            case "冷却水流量超低":
              break;
            case "供水温度低":
              break;
            case "供水温度高":
              break;
            case "供水温度超高":
              break;
            case "回水温度高":
              break;
            case "回水温度超高":
              break;
            case "供水压力低":
              break;
            case "供水压力超低":
              break;
            case "供水压力高":
              break;
            case "供水压力超高":
              break;
            case "回水压力低":
              break;
            case "回水压力超低":
              break;
            case "外水温度高":
              break;
            case "外水压力低":
              break;
            case "缓冲罐压力低":
              break;
            case "缓冲罐压力超低":
              break;
            case "缓冲罐压力高":
              break;
            case "缓冲罐压力超高":
              break;
            case "冷却水电导率高":
              break;
            case "冷却水电导率超高":
              break;
            default:
              console.info('未知故障: ' + alarm_name);
              break;
          }
        }
        this.tlist.alarmData = list;
      });
    }
    ,loop () {
      // 一次所有数据请求完成 才进入下一次轮询
      this.timer.start(() => {
        this.$axios.all([this.getDate(), this.getInfo(), this.getStatus(), this.getAlarm()])
        .then(()=> {
          // this.tlist = [...list[0], ...list[1], ...list[2], ...list[3]];
          // list = [[], [], [], []];
          draw.update(can1, this.G_status);
          
          this.timer.open();
        }).catch((err)=>{
          console.error(err);
          this.timer.open();
        });
      }, 1000);
    }
  },
  mounted () {
    const $container = this.$refs.container;
    // const $can = this.$refs.can;
    // const $can1 = this.$refs.can1;
    can = new EleCircle('can');
    can1 = new EleCircle('can1');
    /*let width = $container.offsetWidth;
    let height = $container.offsetHeight;*/

    // 画图主体部份
    draw.main(can, water_type);
    // 画图更新部份
    // draw.update(can1, this.G_status);
    this.getPos();

    this.loop();

    resizeHandler = () => {
      this.getPos();
    }
    window.addEventListener('resize', resizeHandler);
    // console.log('====can===', can);
  },
  destroyed() {
    window.removeEventListener('resize', resizeHandler);
    this.timer.stop();
  }

}
</script>
<style scoped>
.page_watercooling {
  overflow: hidden;
}
.menu_contain {
  position: fixed;
  width: 80px;
  height: 80px;
  -webkit-border-radius: 100% 0 0.08rem 0;
  border-radius: 100% 0 0.08rem 0;
  background: rgba(18, 196, 209, .8);
  right: 0.1rem;
  bottom: 0.4rem;
  cursor: pointer;
}
.menu_contain:hover {
  background: #15e3f3;
}
.main {
  -webkit-border-radius: 100% 0 0.08rem 0;
  border-radius: 100% 0 0.08rem 0;
  padding: 20px 0 0 20px;
  line-height: 60px;
  -webkit-box-shadow: inset 10px 10px  10px -15px #000, inset -15px 0px  10px -15px #000, inset 0px -15px 10px -15px #000;
  box-shadow: inset 10px 10px  10px -15px #000, inset -15px 0px  10px -15px #000, inset 0px -15px 10px -15px #000;
}
.page_title {
  text-align: center;
  font-size: .26rem;
}
.page_content {
  display: -webkit-flex;
  display: flex;
  flex: 1;
  width: 200%;
  -webkit-transition: transform 0.6s;
  transition: transform 0.6s;
  /*overflow: hidden;*/
}
.wraper {
  flex: 1;
  position: relative;
}
.tab_table {
  /*background: gray;*/
  /*flex: 1;*/
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  padding-bottom: .6rem;
}
.tab_table .inner {
  flex: 1;
  /*padding: 0 .2rem;*/
}
.turn_end.page_content {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.canvas_container {
  /* position: relative;
  flex: 1; */
}
canvas {
  display: block;
  /*background: rgba(0,0,0,.1);*/
  width: 100%;
  height: 100%;
  -webkit-object-fit: contain;
  object-fit: contain;  
}
.can1 {
  position: absolute;
  left: 0;
  top: 0;
}
.panel_info ._main {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}
.panel_info .title {
  text-align: center;
}
.panel_info .content {
  flex: 1;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel_info .row {
  flex: 1;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.panel_info .row label {
  flex: 1.6;
  text-align: right;
  margin-right: .4em;
}
.panel_info .row .input {
  flex: 1;
}
.btn-group {
  position: absolute;
  top: 0;
  right: 10px;
}
.btn-toggle {
  margin-top: 4px;
}
.run_info {
  position: absolute;
  /*border: 1px #fff solid;*/
}
.rotate_motor {
  /*border: 1px #fff solid;*/
  position: absolute;
}
.indicator_css {
  width: 32px;
  height: 32px;
  margin-left: .4em;
}
.motor {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: gray;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.motor:before,
.motor:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.motor:before {
  background: radial-gradient(circle, #333 20%, transparent 0) 50% -6% / 50% 50% no-repeat,
              radial-gradient(circle, #333 20%, transparent 0) 50% 106% / 50% 50% no-repeat;
}
.motor:after {
  background: radial-gradient(circle, #333 20%, transparent 0) -6% 50% / 50% 50% no-repeat,
              radial-gradient(circle, #666 20%, transparent 0) 50% 50% / 50% 50% no-repeat,
              radial-gradient(circle, #333 20%, transparent 0) 106% 50% / 50% 50% no-repeat;
}
.motor_run {
  -webkit-animation: rotate_ani 1s linear .2s infinite;
  animation: rotate_ani 1s linear .2s infinite;
}
@-webkit-keyframes rotate_ani {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(720deg);
    transform: translate(-50%, -50%) rotate(720deg);
  }
}
@keyframes rotate_ani {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(720deg);
    transform: translate(-50%, -50%) rotate(720deg);
  }
}
</style>

 src/views/waterCooling/index3.vue

New file
@@ -0,0 +1,625 @@
<template>
  <div class="page_watercooling flex_column posA_full">
    <div class="page_title">运行界面</div>
    <div class="btn-group">
      <div class="btn_3d btn-toggle" @click="changeStatus">{{showTable ? '显示运行图' : '显示表格'}}</div>
    </div>
    <div class="page_content" :class="{'turn_end': showTable}">
      <div class="wraper">
        <div class="canvas_container posA_full" ref="container">
          <canvas id="can" width="1800" height="700" ref="can"></canvas>
          <canvas class="can1" id="can1" width="1800" height="700"  ref="can1"></canvas>
          
          <science-box v-for="(item, index) in inputList" :key="index" 
            class="panel_input"
            no-header
            :cssWidth="item.position.width"
            :cssHeight="item.position.height"
            :top="item.position.top" :left="item.position.left">
            <el-input class="input transparent" :class="{'alarm': item.alarm}" disabled type="number" v-model="item.value"></el-input>
          </science-box>
          <!-- 运行状态 -->
          <div class="run_info flexR_center" :style="getStyle(run_info)">运行状态: <div :class="['indicator_css', {'status_normal': G_status.Water_system_function, 'status_off': !G_status.Water_system_function}]"></div></div>
          <div class="rotate_motor" :style="getStyle(rotate_motor)">
            <div class="motor" :class="{'motor_run': G_status.p01}"></div>
          </div>
        </div>
      </div>
      <div class="wraper">
        <div class="tab_table posA_full">
          <el-tabs class="inner" type="border-card">
            <el-tab-pane label="实时数据">
              <assemble-table
                :data=tlist.rtData
                :len="4"
                ></assemble-table>
            </el-tab-pane>
            <el-tab-pane label="支路数据">
              <assemble-table
                :data=tlist.branchData
                :len="4"
                ></assemble-table>
            </el-tab-pane>
            <el-tab-pane label="状态数据">
              <assemble-table
              :data=tlist.stateData
              :len="4"
              ></assemble-table>
            </el-tab-pane>
            <el-tab-pane label="故障数据">
              <assemble-table
              :data=tlist.alarmData
              :len="4"
              ></assemble-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <rotate-menu class="menu_contain">
      <div class="main posA_full">菜单</div>
      <ul class="menu" slot="sub">
          <li v-if="!flag"><div class="btn" @click="start">就地启动</div></li>
          <li v-if="flag"><div class="btn" @click="stop">就地停止</div></li>
          <li><div class="btn" @click="go('/watercooling/alarmparam/9')">报警参数</div></li>
          <li><div class="btn" @click="go('/watercooling/function/9')">功能参数</div></li>
          <li><div class="btn" @click="go('/watercooling/operate/9')">手动操作</div></li>
          <li><div class="btn" @click="go('/watercooling/alarmhis/9')">历史报警</div></li>
          <li><div class="btn" @click="go('/watercooling/systemsettings/9')">系统设定</div></li>
      </ul>
    </rotate-menu>
  </div>
</template>

<script>
import RotateMenu from '@/components/RotateMenu';
import ScienceBox from '../../components/ScienceBox'
import EleCircle from '@/script/drawplus'
import draw from '@/script/draw_water_cooling';
import AssembleTable from '@/components/AssembleTable';
import type from '@/script/config_water';

let can, can1, resizeHandler;
// 临时存放格式化后的表格数据
// [0: rtData, 1: branchData, 2: stateData, 3: 告警]
// let list = [[], [], [], []];
// 配置项
const water_type = 3;
const water_id = 5002;
// 支路序号与位置映射
const loadsIdx = {
  '7': 0,
  '4': 1,
  '1': 2,
  '8': 3,
  '5': 4,
  '2': 5,
  '9': 6,
  '6': 7,
  '3': 8
};
export default {
  name: 'WaterCooling',
  components: {
    RotateMenu,
    ScienceBox,
    AssembleTable
  },
  data () {
    return {
      tlist: {
        rtData: [],
        branchData: [],
        stateData: [],
        alarmData: []
      },
      showTable: false,
      timer: new this.$common.Timeout(),
      flag: false,
      // 图中状态 （开关等）
      G_status: {
        Water_system_function: false
        ,p01: false
        ,p11: false
        ,H01: false
        // ,Solenoid_openflag: false
      },
      run_info: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        width: 0,
        height: 0
      },
      rotate_motor: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        width: 0,
        height: 0
      },
      inputList: [{
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }, {
        position: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          width: 0,
          height: 0
        },
        value: 0
        ,alarm: false
      }]
    }
  },
  methods: {
    go (path) {
      this.$router.push({path});
    }
    ,start () {

    }
    ,stop () {

    }
    ,changeStatus () {
      this.showTable = !this.showTable;
    }
    ,setInput () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      for (let i = 0; i < 9; i++) {
        this.inputList[i].position = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_input_' + i));
      }
    }
    ,getStyle (obj) {
      return {
        left: obj.left + 'px',
        top: obj.top + 'px',
        width: obj.width + 'px',
        height: obj.height + 'px'
      }
    }
    ,getPos () {
      this.setInput();
      this.getRunInfoPos();
      this.getMotorPos();
    }
    ,getRunInfoPos () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      this.run_info = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_title_0'));
    }
    ,getMotorPos () {
      const $container = this.$refs.container;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      this.rotate_motor = this.$common.transSize(width, height, 1800, 700, can.getInfo('rect_motor_0'));
    }
    // 数值数据
    ,getDate () {
      let list = [];
      return this.$api.water.getDate({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        if (!res.code) {
          return;
        }
        let data = res.data[0];
        let rtData = type.type3.rtData;
        // 回水温度
        this.inputList[0].value = data.back_tem;
        // 回水压力
        this.inputList[1].value = data.back_pre;
        // TRT01_T 阀厅温度 2
        this.inputList[2].value = data.Tem_chamber;
        // TRT01_R 阀厅湿度 3
        this.inputList[3].value = data.Humidity_chamber;
        // 供水压力
        this.inputList[4].value = data.Supply_pre;
        // 冷却水流量
        this.inputList[5].value = data.cooling_flow;
        // 供水温度
        this.inputList[6].value = data.supply_tmp;
        // 外水温度
        this.inputList[7].value = data.External_tmp;
        // PT11 外水压力
        this.inputList[8].value = data.External_pre;

        Object.keys(data).forEach((v) => {
          if ('num' == v || 'water_id' == v) {
            return;
          }
          list.push({
            text: rtData[v],
            key: v,
            val: data[v],
          });
        });

        this.tlist.rtData = list;
        
      });
    }

    // 状态数据
    ,getStatus () {
      let list = [];

      return this.$api.water.getStatus({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        if (!res.code) {
          return;
        }
        let data = res.data[0];
        let stateData = type.type3.stateData;

        this.G_status.Water_system_function = data.Water_system_function;
        this.G_status.p01 = data.P01_main_pump;
        this.G_status.p11 = data.P11_replenish_pump;
        this.G_status.H01 = data.H01_electric_heater;
        // this.G_status.Solenoid_openflag = data.Solenoid_openflag;

        Object.keys(data).forEach((v) => {
          if ('num' == v || 'water_id' == v) {
            return;
          }
          list.push({
            text: stateData[v],
            key: v,
            val: data[v],
          });
        });
        this.tlist.stateData = list;
      });
    }
    // 告警
    ,getAlarm () {
      let list = [];

      return this.$api.water.getAlarm({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        if (!res.code) {
          return;
        }

        let data = res.data;
        // data = [{alarm_name: '回水温度变送器故障'}];
        // 没有告警则退出
        if (!data.length) {
          return false;
        }

        for (let i = 0, j = data.length; i < j; i++) {
          // 把告警添加到列表
          list.push({
            text: data[i]['alarm_name'],
            key: '',
            val: '告警',
          });
        }
        this.tlist.alarmData = list;
      });
    }
    ,loop () {
      // 一次所有数据请求完成 才进入下一次轮询
      this.timer.start(() => {
        this.$axios.all([this.getDate(), this.getStatus(), this.getAlarm()])
        .then(()=> {
          // this.tlist = [...list[0], ...list[1], ...list[2], ...list[3]];
          // list = [[], [], [], []];
          draw.update(can1, this.G_status, water_type);
          
          this.timer.open();
        }).catch((err)=>{
          console.error(err);
          this.timer.open();
        });
        // draw.update(can1, this.G_status, water_type);
         this.timer.open();
      }, 1000);
    }
  },
  mounted () {
    const $container = this.$refs.container;
    // const $can = this.$refs.can;
    // const $can1 = this.$refs.can1;
    can = new EleCircle('can');
    can1 = new EleCircle('can1');
    /*let width = $container.offsetWidth;
    let height = $container.offsetHeight;*/

    // 画图主体部份
    draw.main_3(can);
    // 画图更新部份
    // draw.update(can1, this.G_status);
    this.getPos();

    this.loop();

    resizeHandler = () => {
      this.getPos();
    }
    window.addEventListener('resize', resizeHandler);
    // console.log('====can===', can);
  },
  destroyed() {
    window.removeEventListener('resize', resizeHandler);
    this.timer.stop();
  }

}
</script>
<style scoped>
.page_watercooling {
  overflow: hidden;
}
.menu_contain {
  position: fixed;
  width: 80px;
  height: 80px;
  -webkit-border-radius: 100% 0 0.08rem 0;
  border-radius: 100% 0 0.08rem 0;
  background: rgba(18, 196, 209, .8);
  right: 0.1rem;
  bottom: 0.4rem;
  cursor: pointer;
}
.menu_contain:hover {
  background: #15e3f3;
}
.main {
  -webkit-border-radius: 100% 0 0.08rem 0;
  border-radius: 100% 0 0.08rem 0;
  padding: 20px 0 0 20px;
  line-height: 60px;
  -webkit-box-shadow: inset 10px 10px  10px -15px #000, inset -15px 0px  10px -15px #000, inset 0px -15px 10px -15px #000;
  box-shadow: inset 10px 10px  10px -15px #000, inset -15px 0px  10px -15px #000, inset 0px -15px 10px -15px #000;
}
.page_title {
  text-align: center;
  font-size: .26rem;
}
.page_content {
  display: -webkit-flex;
  display: flex;
  flex: 1;
  width: 200%;
  -webkit-transition: transform 0.6s;
  transition: transform 0.6s;
  /*overflow: hidden;*/
}
.wraper {
  flex: 1;
  position: relative;
}
.tab_table {
  /*background: gray;*/
  /*flex: 1;*/
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  padding-bottom: .6rem;
}
.tab_table .inner {
  flex: 1;
  /*padding: 0 .2rem;*/
}
.turn_end.page_content {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.canvas_container {
  /* position: relative;
  flex: 1; */
}
canvas {
  display: block;
  /*background: rgba(0,0,0,.1);*/
  width: 100%;
  height: 100%;
  -webkit-object-fit: contain;
  object-fit: contain;  
}
.can1 {
  position: absolute;
  left: 0;
  top: 0;
}
.panel_info ._main {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}
.panel_info .title {
  text-align: center;
}
.panel_info .content {
  flex: 1;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel_info .row {
  flex: 1;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.panel_info .row label {
  flex: 1.6;
  text-align: right;
  margin-right: .4em;
}
.panel_info .row .input {
  flex: 1;
}
.btn-group {
  position: absolute;
  top: 0;
  right: 10px;
}
.btn-toggle {
  margin-top: 4px;
}
.run_info {
  position: absolute;
  /*border: 1px #fff solid;*/
}
.rotate_motor {
  /*border: 1px #fff solid;*/
  position: absolute;
}
.indicator_css {
  width: 32px;
  height: 32px;
  margin-left: .4em;
}
.motor {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: gray;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.motor:before,
.motor:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.motor:before {
  background: radial-gradient(circle, #333 20%, transparent 0) 50% -6% / 50% 50% no-repeat,
              radial-gradient(circle, #333 20%, transparent 0) 50% 106% / 50% 50% no-repeat;
}
.motor:after {
  background: radial-gradient(circle, #333 20%, transparent 0) -6% 50% / 50% 50% no-repeat,
              radial-gradient(circle, #666 20%, transparent 0) 50% 50% / 50% 50% no-repeat,
              radial-gradient(circle, #333 20%, transparent 0) 106% 50% / 50% 50% no-repeat;
}
.motor_run {
  -webkit-animation: rotate_ani 1s linear .2s infinite;
  animation: rotate_ani 1s linear .2s infinite;
}
@-webkit-keyframes rotate_ani {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(720deg);
    transform: translate(-50%, -50%) rotate(720deg);
  }
}
@keyframes rotate_ani {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(720deg);
    transform: translate(-50%, -50%) rotate(720deg);
  }
}
</style>

 src/views/waterCooling/index_subsidiary.vue

@@ -583,32 +583,26 @@
        this.loads[0].data.TValue = data.Branch_tmp_3;
        this.loads[0].data.PValue = data.Branch_pre_3;
        this.loads[0].data.FValue = data.Branch_flow_3;
        this.loads[0].data.VValue = 1 || '==TODO==';

        this.loads[1].data.TValue = data.Branch_tmp_2;
        this.loads[1].data.PValue = data.Branch_pre_2;
        this.loads[1].data.FValue = data.Branch_flow_2;
        this.loads[1].data.VValue = 1 || '==TODO==';

        this.loads[2].data.TValue = data.Branch_tmp_1;
        this.loads[2].data.PValue = data.Branch_pre_1;
        this.loads[2].data.FValue = data.Branch_flow_1;
        this.loads[2].data.VValue = 1 || '==TODO==';

        this.loads[3].data.TValue = data.Branch_tmp_6;
        this.loads[3].data.PValue = data.Branch_pre_6;
        this.loads[3].data.FValue = data.Branch_flow_6;
        this.loads[3].data.VValue = 1 || '==TODO==';

        this.loads[4].data.TValue = data.Branch_tmp_5;
        this.loads[4].data.PValue = data.Branch_pre_5;
        this.loads[4].data.FValue = data.Branch_flow_5;
        this.loads[4].data.VValue = 1 || '==TODO==';

        this.loads[5].data.TValue = data.Branch_tmp_4;
        this.loads[5].data.PValue = data.Branch_pre_4;
        this.loads[5].data.FValue = data.Branch_flow_4;
        this.loads[5].data.VValue = 1 || '==TODO==';

        let reg = /_[789]$/;
        Object.keys(data).forEach((v) => {
@@ -617,7 +611,7 @@
          }
          // 789支路的数据过滤掉
          if (reg.test(v)) {
            console.log(v);
            // console.log(v);
            return;
          }
          list.push({

 src/views/waterCooling/list.vue

@@ -19,16 +19,21 @@
  },
  methods: {
    go (obj) {
      // console.log(obj, 'water');
      let path = '';
      switch (obj.water_type) {
        case 3:
          path = '/watercooling/index/9';
          // 3号水冷
          path = '/watercooling/index/3';
          // path = '/watercooling/index/subsidiary';
          break;
        case 2:
          path = '/watercooling/index/subsidiary';
          // 2号水冷
          path = '/watercooling/index/2';
          break;
        case 1:
          path = '/watercooling/index/9';
          // 1号水冷
          path = '/watercooling/index/1';
          break;
      }
      this.$router.push({path});