rmLayGaoujU9O46l603ccl_plm-vue/src/views/modules/cdc/collectScreen.vue

<template>
  <div class="echarts" >
    <div class="header " style="display: flex;justify-content: space-between;align-items: center;height: 6%;padding: 5px">
      <div style="width: 20%"><img style="max-width: 30%;max-height: 100%;vertical-align:middle;" src="../../../../static/img/ccl_logo.png" ></div>
      <div style="width: 50%;text-align: center;font-size: 24px;font-weight: 400">CCL Coating 监控大屏/Monitor Platform</div>
      <div style="width: 30%;font-size: 13px">
        <el-row>
          <el-col :span="12" :offset="12">
            <div>当前时间/Time:</div>
            <div>{{dateFormat(newTime)}}</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="content">
      涂布设备-大线/Coating Machine-Line 1#
    </div>
    <div class="pie">
      <div class="pie_left">
        <div class="pie_content" >
          <span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">静电/Static Electricity</span>
        </div>
        <div class="pie_chart" style="text-align: center;font-size: 10px">
          <div v-for="item in line1">
            <div>
              <div>{{ item.deviceDesc.split(';')[0] }}</div>
              <div>{{ item.deviceDesc.split(';')[1] }}</div>
            </div>
            <div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 45px;height: 45px;line-height: 45px;margin: 0 auto`">{{item.itemValue}}</div>
          </div>
        </div>
        <div class="pie_content pie_footer">
          <div>上限/Upper  <span v-if="line1.length !== 0">{{line1[0].maxValue}}</span><span v-else>0</span></div>
<!--          <div>下限/Lower  <span v-if="line1.length !== 0">{{line1[0].minValue}}</span><span v-else>0</span></div>-->
        </div>
      </div>
      <div class="pie_right">
        <div class="pie_content" >
          <span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">浓度/Gas Concentration</span>
        </div>
        <div class="pie_chart" style="text-align: center;font-size: 10px">
          <div v-for="item in lineGC1">
            <div>
              <div>{{ item.deviceDesc.split(';')[0] }}</div>
              <div>{{ item.deviceDesc.split(';')[1] }}</div>
            </div>
            <div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 45px;height: 45px;line-height: 45px;margin: 0 auto`">{{item.itemValue}}</div>
          </div>
        </div>
        <div class="pie_content pie_footer" style="margin-top: 2%">
          <div>上限/Upper  <span v-if="lineGC1.length !== 0">{{lineGC1[0].maxValue}}</span><span v-else>0</span>%</div>
<!--          <div>下限/Lower  <span v-if="lineGC1.length !== 0">{{lineGC1[0].minValue}}</span><span v-else>0</span>%</div>-->
        </div>
      </div>
    </div>
    <div class="content">
      涂布设备-小线/Coating Machine-Line 2#
    </div>
    <div class="pie">
      <div class="pie_left">
        <div class="pie_content">
          <span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">静电/Static Electricity</span>
        </div>
        <div class="pie_chart" style="text-align: center;font-size: 10px">
          <div v-for="item in line2">
            <div >
              <div>{{ item.deviceDesc.split(';')[0] }}</div>
              <div>{{ item.deviceDesc.split(';')[1] }}</div>
            </div>
            <div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 45px;height:45px;line-height: 45px;margin: 0 auto`">{{item.itemValue}}</div>
          </div>
        </div>
        <div class="pie_content pie_footer">
          <div>上限/Upper  <span v-if="line2.length !== 0">{{line2[0].maxValue}}</span><span v-else>0</span></div>
<!--          <div>下限/Lower  <span v-if="line2.length !== 0">{{line2[0].minValue}}</span><span v-else>0</span></div>-->
        </div>
      </div>
      <div class="pie_right">
        <div class="pie_content">
          <span style="padding: 0 5px;border-bottom: 1px solid #2f82d7;color: #2f82d7">浓度/Gas Concentration</span>
        </div>
        <div class="pie_chart" style="text-align: center;font-size: 10px">
          <div v-for="item in lineGC2">
            <div >
              <div>{{ item.deviceDesc.split(';')[0] }}</div>
              <div>{{ item.deviceDesc.split(';')[1] }}</div>
            </div>
            <div :style="`border-radius: 50%;border: 1px solid ${(item.itemValue >= item.maxValue )?'red':'#ccc'};width: 45px;height:45px;line-height: 45px;margin: 0 auto`">{{item.itemValue}}</div>
          </div>
        </div>
        <div class="pie_content pie_footer" style="margin-top: 5px">
          <div>上限/Upper  <span v-if="lineGC2.length !== 0">{{lineGC2[0].maxValue}}</span><span v-else>0</span>%</div>
          <!--          <div>下限/Lower  <span v-if="line2.length !== 0">{{line2[0].minValue}}</span><span v-else>0</span></div>-->
        </div>
      </div>
    </div>
    <div class="content">
      配胶间/Mixing Room
    </div>
    <div style="border: 1px solid #ccc;padding: 0 10px;height: 31%">
      <div style="width: 100%;height: 100%" id="main">

      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {getBaseTime, selectCollectRecordByItemList} from "../../../api/cdc/collect";

export default {
  name: 'collectScreen',
  data(){
    return{
      newTime:null,
      dataList:[],
      timeNum:null,
      option : {
        title: {
          text: '浓度/Gas Concentration',
          left: 'center',
          textStyle:{
            color: '#2f82d7',
            fontWeight:'normal',
            fontSize:12
          }
        },
        grid:{
          top:'14%',
          left:'5%',
          right:'12%',
        },
        color: ['#2f82d7'],
        xAxis: {
          data: ['1#', '2#', '3#', '4#', '5#', '6#', '7#'],
          axisLine: {//y轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#fff",
              width: 1,
              type: "solid"
            },
          },
        },
        yAxis: {

          type: 'value',
          min:0,
          max:30,
          interval:5,
          axisLabel: {
            textStyle: {
              color: "#fff",
              margin: 15
            },
            formatter: function (value, index) {
              return value + "%";
            }
          },
          axisLine: {//y轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#fff",
              width: 1,
              type: "solid"
            },
          },
        },
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25],
            barWidth: '20%',
            label: {
              show: true,
              position: 'top'
            },
            markLine:{
              data : [
                // {
                //   yAxis : 16,
                //   name : '下限/Lower  16%'
                // },
                {
                  yAxis : 20,
                  name : '上限/Upper  20%'
                }
              ],
              label:{
                normal: {
                  show: true,
                  formatter: '2020年目标',
                }
              }
            }
          }
        ],
      }
    }
  },
  computed:{
    line1:{
      get(){
        return this.dataList.filter(item=>item.deviceType === '涂布机器-大线')
      }
    },
    line2:{
      get(){
        return this.dataList.filter(item=>item.deviceType === '涂布机器-小线')
      }
    },
    lineGC1:{
      get(){
        return this.dataList.filter(item=>item.deviceType === '涂布机器-浓度-大线')
      }
    },
    lineGC2:{
      get(){
        return this.dataList.filter(item=>item.deviceType === '涂布机器-浓度-小线')
      }
    },
    line3:{
      get(){
        return this.dataList.filter(item=>item.deviceType === '配胶间设备')
      },
    },
  },
  methods:{
    getDataList(){
      let params = {

      }
      selectCollectRecordByItemList(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.rows;
          this.timeNum = data.time;
          this.initCharts();
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    dateFormat(date){
      return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
    },
    initCharts(){
      let myChart = this.$echarts.init(document.getElementById('main'));

      this.option && myChart.setOption(this.option);
    },

    getBaseTime(){
      let params = {}
      getBaseTime(params).then(({data})=>{
        if (data && data.code === 0){
          this.getDataList();
          this.times = setInterval(() => {
            this.getDataList();
          }, 1000 * data.time);
        }else {
          this.$message.error(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    }
  },
  watch:{
    line3:{
      deep: true,
      handler(val){
        this.option.series[0].data = val.map(item=>item.itemValue)
        if (val.length !== 0){
          this.option.series[0].markLine.data = [
            // {
            //   yAxis : val[0].minValue,
            //   name : `下限/Lower  ${val[0].minValue} %`
            // },
            {
              yAxis : val[0].maxValue,
              name : `上限/Lower  ${val[0].maxValue} %`
            }
          ]
          this.option.series[0].markLine.label.normal.formatter = `上限/Upper ${val[0].maxValue}%`
        }
        this.option.xAxis = val.map(item=>item.deviceDesc)
        this.initCharts()
      },
    },
  },
  created() {
    this.getBaseTime();
  },
  mounted() {
    this.initCharts();
    this.timer = setInterval(()=>{
      this.timeNum += 1000;
      this.newTime = new Date(this.timeNum);
    },1000)
  },
  beforeDestroy() {
    if (this.timer){
      clearInterval(this.timer)
    }
    if (this.times){
      clearInterval(this.times)
    }
  }
}
</script>

<style scoped>
.echarts{
  height:100vh;
  //background: url(../../../../static/img/collect.jpg) no-repeat center/130%;
  background: rgb(17,24,34);
  padding: 10px 5px 5px;
  color: #fff;
}
.pie{
  display: grid;
  //gap: 20px;
  height: 28%;
  grid-gap: 10px;
  //grid-template-columns:  repeat(2, auto);
  grid-template-columns:  63% 36%;

}

.pie_left{
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  //width: 64%
}

.pie_right{
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  //width: 44%
}
.pie_content{
  height: 15%;
  text-align: center;
  padding: 0;
  line-height: 1
}
.pie_footer{
  margin-top: 1%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 10px;
}
.pie_chart{
  //margin-top: 2%;
  margin-top: 3px;
  height: 65%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

</style>