设备数据分析界面绘制以及各个配置界面新增，编辑的时候备注框的输入值限制字数

zhuzhuanzhuan

2023-07-28 c69f5f4004ad81cb76e0732bff8d67a19a6d8d50

设备数据分析界面绘制以及各个配置界面新增，编辑的时候备注框的输入值限制字数

 src/views/mdc/base/ComparativeAnalysis.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,75 @@
<template>
  <a-card :bordered="false">
    <div style="width: 100%; height: 100%;overflow: hidden">
      <a-row type="flex" :gutter="16">
        <!--<a-col :md="5" :sm="24">-->
          <!--<base-tree @getCurrSelected="changeSelectionNode"></base-tree>-->
        <!--</a-col>-->
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
            <a-tab-pane key="2" tab="部门层级">
              <depart-tree @getCurrSelectedDD="changeSelectionNodedd"
              ></depart-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="24-5" :sm="24">
          <!--<statistical-analysis-main :equip="selectEquementnode"></statistical-analysis-main>-->
          <!--<device-repair-list ref="DeviceRepairList" :nodeTree='selectEquement'  :nodePeople='selectPeople' :Type="slectTypeTree" />-->
          <comparative-analysismain  ref="comparativeAnalysismain" :nodeTree='selectEquement'  :nodePeople='selectPeople' :Type="slectTypeTree"></comparative-analysismain>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script>
  import BaseTree from '../common/BaseTree'
  import comparativeAnalysismain from './modules/comparativeAnalysis/comparativeAnalysismain'
  export default {
    name: 'ComparativeAnalysis',
    components:{
      BaseTree,
      comparativeAnalysismain
    },
    data() {
      return {
        activeKey: '1',
        description: '设备信息',
        selectEquementId: '',
        selectEquement: {},
        selectPeople:{},
        slectTypeTree: '',
        url: {
          equipmentStatistics: '/mdc/equipment/equipmentStatistics'
        }
      }
    },
    methods: {
      tabChange(val) {
        // console.log(val)
        this.activeKey = val
        this.slectTypeTree = val
      },
      /*      changeSelection(val) {
              this.selectEquementId = val
              this.$refs.DeviceRepairList.pQuery(val)
            },*/
      changeSelectionNode(val) {
        this.selectEquement = val
        this.slectTypeTree = '1'
      },
      changeSelectionNodedd(val) {
        this.selectPeople = val
        this.slectTypeTree = '2'
      }
    }
  }
</script>

<style scoped>

</style>

 src/views/mdc/base/modules/HolidayManagement/HolidayManagementModal.vue

@@ -29,7 +29,7 @@
        <a-row :gutter="24">
          <a-col :span="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea   v-decorator="['notes', validatorRules.notes]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea  :maxLength="20" v-decorator="['notes', validatorRules.notes]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
          </a-col>
        </a-row>

 src/views/mdc/base/modules/HolidayManagement/HolidayManagementModalEdit.vue

@@ -36,7 +36,7 @@
        </a-row>
        <a-row :gutter="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea  :disabled="disableSubmit"  v-decorator="['notes', validatorRules.notes]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20" :disabled="disableSubmit"  v-decorator="['notes', validatorRules.notes]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
        </a-row>
      </a-form>

 src/views/mdc/base/modules/MdcplancloseList/MdcplancloseForm.vue

@@ -28,7 +28,7 @@
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea v-model="model.remark" placeholder="请输入备注"  ></a-textarea>
              <a-textarea :maxLength="20" v-model="model.remark" placeholder="请输入备注"  ></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>

 src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue

@@ -135,7 +135,7 @@
      this.queryParams.collectTime = collectTime;

      this.queryParams.dateTime = this.queryParams.collectTime.format('YYYYMMDD')
      this.initEquipmentNode('-1')
      this.initEquipmentNode()
      this.queryStatistical();
      // this.getTime(37800);
    },
@@ -411,12 +411,14 @@
        this.queryParams.collectTime = val.format('YYYY-MM-DD');

      },
      initEquipmentNode(id) {
      initEquipmentNode() {
        let _this = this
        getAction(this.url.getBaseTree).then((res) => {
          if (res.success) {
            // console.log(res.result[0].entity.tierName)
            _this.$set(this.queryParam, 'tierName', res.result[0].title)
            _this.$set(this.queryParams, 'parentId', res.result[0].key)
            _this.queryStatistical()
          } else {
            this.$message.warn(res.message)
          }

 src/views/mdc/base/modules/TorqueconfigurationList/TorqueconfigurationModal.vue

@@ -28,7 +28,7 @@
        <a-row :gutter="24">
          <a-col :span="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea   v-decorator="['notes', validatorRules.notes]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20"  v-decorator="['notes', validatorRules.notes]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
          </a-col>
        </a-row>

 src/views/mdc/base/modules/TorqueconfigurationList/TorqueconfigurationModalEdit.vue

@@ -35,7 +35,7 @@
        </a-row>
        <a-row :gutter="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea  :disabled="disableSubmit"  v-decorator="['notes', validatorRules.notes]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20" :disabled="disableSubmit"  v-decorator="['notes', validatorRules.notes]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
        </a-row>
      </a-form>

 src/views/mdc/base/modules/UnplannedDowntimemManager/UnplannedDowntimemManagerModal.vue

@@ -37,7 +37,7 @@
        <a-row :gutter="24">
          <a-col :span="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea  :disabled="disableSubmit"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20" :disabled="disableSubmit"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
          </a-col>
        </a-row>

 src/views/mdc/base/modules/UnplannedDowntimemManager/UnplannedDowntimemManagerModalEdit.vue

@@ -44,7 +44,7 @@
        </a-row>
        <a-row :gutter="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea  :disabled="disableSubmit"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20" :disabled="disableSubmit"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
        </a-row>
      </a-form>

 src/views/mdc/base/modules/comparativeAnalysis/comparativeAnalysisBar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,344 @@
<template>
    <div class="comparative_Bar" style="width: 100%;height: 700px;display: flex;flex-direction: column;overflow: scroll">
      <div id="compAnalBar1" style="flex: 1;"></div>
      <div id="compAnalBar2" style="flex: 1;"></div>
    </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'comparativeAnalysisBar',
    propa:{},
    data(){
      return{
        openRate:0,
        utilizationRate:0,
        openLong:0,
        closeLong:0
      }
    },
    created(){

    },
    mounted() {
      this.drawTu()
    },
    methods:{
      drawTu(){
       let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons');
       let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons');
       let compAnalBarOption1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: "shadow",
              textStyle: {
                color: "#fff"
              }

            }
          },
          legend: {
            x: '4%',
            top: '11%',
            textStyle: {
              color: '#90979c'
            },
            data: ['开机率', '利用率']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true,name:'设备运行效率对比分析图'}
            }
          },
          calculable: true,
          grid: {
            borderWidth: 0,
            top: 110,
            bottom: 95,
            textStyle: {
              color: "#fff"
            }
          },
          xAxis: [
            {
              type: 'category',
              splitLine: {
                "show": false
              },
              axisTick: {
                "show": false
              },
              splitArea: {
                show: false
              },
              boundaryGap : true,
              axisLabel : {
                interval : 0,
                rotate : 0,
                show: true,
                wigth:20,
                splitNumber: 8,
                textStyle: {
                  fontFamily: "微软雅黑",
                  fontSize: 12
                }
              },
              data : [0]
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#90979c'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                interval: 0

              },
              splitArea: {
                show: false
              }
            }
          ],
          dataZoom: [{
            show: true,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,
            start: 0,
            end: 100,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: "#d3dee5"
            },
            textStyle: {
              color: "#fff"
            },
            borderColor: "#90979c"
          }, {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }],
          series: [
            {
              name: '开机率',
              type: 'bar',
              //barWidth: 30,
              itemStyle: {
                normal: {
                  color: '#4169E1'
                }
              },
              data: [0],
              barCategoryGap: '20%',
              barGap : '-10%',
              markPoint : {
                data : [
                  {type : 'max', name: '最大值',symbolSize:70},
                  {type : 'min', name: '最小值',symbolSize:70}
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
                ]
              }
            },
            {
              name: '利用率',
              type: 'bar',
              //barWidth: 30,
              barCategoryGap: '20%',
              barGap : '-10%',
              itemStyle: {
                normal: {
                  color: '#00ee00'
                }
              },
              data: [0],
              markPoint : {
                data : [
                  {type : 'max', name: '最大值',symbolSize:70},
                  {type : 'min', name: '最小值',symbolSize:70}
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
                ]
              }
            }
          ]
        };
       let compAnalBarOption2 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: "shadow",
              textStyle: {
                color: "#fff"
              }

            }
          },
          legend: {
            x: '4%',
            top: '11%',
            textStyle: {
              color: '#90979c'
            },
            data: ['开机时间', '关机时间']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true,name:'设备运行时间对比分析图'}
            }
          },
          calculable: true,
          grid: {
            borderWidth: 0,
            top: 110,
            bottom: 95,
            textStyle: {
              color: "#fff"
            }
          },
          xAxis: [
            {
              type: 'category',
              splitLine: {
                "show": false
              },
              axisTick: {
                "show": false
              },
              splitArea: {
                show: false
              },
              boundaryGap : true,
              axisLabel : {
                interval : 0,
                rotate : 0,
                show: true,
                wigth:20,
                splitNumber: 8,
                textStyle: {
                  fontFamily: "微软雅黑",
                  fontSize: 12
                }
              },
              data : [0]
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#90979c'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                interval: 0

              },
              splitArea: {
                show: false
              }
            }
          ],
          dataZoom: [{
            show: true,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,
            start: 0,
            end: 100,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: "#d3dee5"
            },
            textStyle: {
              color: "#fff"
            },
            borderColor: "#90979c"
          }, {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }],
          series: [
            {
              name: '开机时间',
              type: 'bar',
              //barWidth: 30,
              stack: 'sum',
              barCategoryGap: '20%',
              itemStyle: {
                normal: {
                  color: '#4169E1'
                }
              },
              data: [0]
            },
            {
              name: '关机时间',
              type: 'bar',
              //barWidth: 30,
              stack: 'sum',
              barCategoryGap: '20%',
              itemStyle: {
                normal: {
                  color: '#A8A8A8'
                }
              },
              data: [0]
            }
          ]
        };
        compAnalBar1.setOption(compAnalBarOption1);
        compAnalBar2.setOption(compAnalBarOption2);
        window.addEventListener('resize', function() {
          compAnalBar1.resize()
          compAnalBar2.resize()
        })
      }
    }
  }
</script>

<style scoped>

</style>

 src/views/mdc/base/modules/comparativeAnalysis/comparativeAnalysisGauge.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,714 @@
<template>
  <div class="comparative_Gauge" style="width: 100%;height: 700px;display: flex;flex-direction: column;overflow: scroll">
    <div style="flex: 1;text-align:center;display: flex;flex-direction: column">
      <h3 style="height: 18px;margin: 0 auto;">利用率 Top 5</h3>

      <div style="flex: 1;display: flex;">
        <div id="top1Gauge" class="div-inline"></div>
        <div id="top2Gauge" class="div-inline"></div>
        <div id="top3Gauge" class="div-inline"></div>
        <div id="top4Gauge" class="div-inline"></div>
        <div id="top5Gauge" class="div-inline"></div>
      </div>
    </div>
    <div style="flex: 1;text-align:center;display: flex;flex-direction: column">
      <h3 style="height: 18px; margin: 0 auto;">利用率 Last 5</h3>

      <div style="flex: 1;display: flex;">
        <div id="last1Gauge" class="div-inline"></div>
        <div id="last2Gauge" class="div-inline"></div>
        <div id="last3Gauge" class="div-inline"></div>
        <div id="last4Gauge" class="div-inline"></div>
        <div id="last5Gauge" class="div-inline"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'comparativeAnalysisGauge',
    props:{},
    data(){
      return{
        utilizationRateTopOne:0,
        utilizationRateTopTwo:0,
        utilizationRateTopThree:0,
        utilizationRateTopFour:0,
        utilizationRateTopFive:0,
        utilizationRateLastOne:0,
        utilizationRateLastTwo:0,
        utilizationRateLastThree:0,
        utilizationRateLastFour:0,
        utilizationRateLastFive:0
      }
    },
    mounted(){
      this.draw();
    },
    methods:{
      draw(){
       let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'),'macarons');
       let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'),'macarons');
       let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'),'macarons');
       let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'),'macarons');
       let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'),'macarons');
       let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'),'macarons');
       let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'),'macarons');
        let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'),'macarons');
        let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'),'macarons');
        let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'),'macarons');
        let gaugeTopOption1 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP1'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series : [
            {
              name:'TOP1',
              type:'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {           // åæ ‡è½´æ–‡æœ¬æ ‡ç­¾ï¼Œè¯¦è§axis.axisLabel
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto'
                }
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              },
              title : {
                show : false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                }
              },
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        let  gaugeTopOption2 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP2'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series : [
            {
              name:'TOP2',
              type:'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {           // åæ ‡è½´æ–‡æœ¬æ ‡ç­¾ï¼Œè¯¦è§axis.axisLabel
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto'
                }
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              },
              title : {
                show : false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                }
              },
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        let gaugeTopOption3 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP3'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series : [
            {
              name:'TOP3',
              type:'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {           // åæ ‡è½´æ–‡æœ¬æ ‡ç­¾ï¼Œè¯¦è§axis.axisLabel
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto'
                }
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              },
              title : {
                show : false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                }
              },
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        let gaugeTopOption4 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP4'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series : [
            {
              name:'TOP4',
              type:'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {           // åæ ‡è½´æ–‡æœ¬æ ‡ç­¾ï¼Œè¯¦è§axis.axisLabel
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto'
                }
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              },
              title : {
                show : false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                }
              },
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        let gaugeTopOption5 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'TOP5'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series : [
            {
              name:'TOP5',
              type:'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {           // åæ ‡è½´æ–‡æœ¬æ ‡ç­¾ï¼Œè¯¦è§axis.axisLabel
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto'
                }
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              },
              title : {
                show : false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                }
              },
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        let gaugeLessOption1 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST1'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series : [
            {
              name:'LAST1',
              type:'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {           // åæ ‡è½´æ–‡æœ¬æ ‡ç­¾ï¼Œè¯¦è§axis.axisLabel
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto'
                }
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              },
              title : {
                show : false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                }
              },
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        let gaugeLessOption2 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST2'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series : [
            {
              name:'LAST2',
              type:'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {           // åæ ‡è½´æ–‡æœ¬æ ‡ç­¾ï¼Œè¯¦è§axis.axisLabel
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto'
                }
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              },
              title : {
                show : false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                }
              },
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        let gaugeLessOption3 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST3'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series : [
            {
              name:'LAST3',
              type:'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {           // åæ ‡è½´æ–‡æœ¬æ ‡ç­¾ï¼Œè¯¦è§axis.axisLabel
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto'
                }
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              },
              title : {
                show : false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                }
              },
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        let gaugeLessOption4 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST4'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series : [
            {
              name:'LAST4',
              type:'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {           // åæ ‡è½´æ–‡æœ¬æ ‡ç­¾ï¼Œè¯¦è§axis.axisLabel
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto'
                }
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              },
              title : {
                show : false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                }
              },
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        let gaugeLessOption5 = {
          title : {
            x : 'center',
            y : 'bottom',
            text : 'LAST5'
          },
          tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series : [
            {
              name:'LAST5',
              type:'gauge',
              splitNumber: 10,       // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º5
              axisLine: {            // åæ ‡è½´çº¿
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                  width: 8
                }
              },
              axisTick: {            // åæ ‡è½´å°æ ‡è®°
                splitNumber: 10,   // æ¯ä»½split细分多少段
                length :12,        // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle控制线条样式
                  color: 'auto'
                }
              },
              axisLabel: {           // åæ ‡è½´æ–‡æœ¬æ ‡ç­¾ï¼Œè¯¦è§axis.axisLabel
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto'
                }
              },
              splitLine: {           // åˆ†éš”线
                show: true,        // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§show控制显示与否
                length :30,         // å±žæ€§length控制线长
                lineStyle: {       // å±žæ€§lineStyle（详见lineStyle）控制线条样式
                  color: 'auto'
                }
              },
              pointer : {
                width : 5
              },
              title : {
                show : false,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  fontWeight: 'bolder'
                }
              },
              detail : {
                formatter:'{value}%',
                offsetCenter: [0, '60%'],
                textStyle: {       // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
                  color: 'auto',
                  fontWeight: 'bolder',
                  fontSize:20
                }
              },
              data:[{value: 0, name: '利用率'}]
            }
          ]
        };
        gaugeTopChart1.setOption(gaugeTopOption1);
        gaugeTopChart2.setOption(gaugeTopOption2);
        gaugeTopChart3.setOption(gaugeTopOption3);
        gaugeTopChart4.setOption(gaugeTopOption4);
        gaugeTopChart5.setOption(gaugeTopOption5);
        gaugeLastChart1.setOption(gaugeLessOption1);
        gaugeLastChart2.setOption(gaugeLessOption2);
        gaugeLastChart3.setOption(gaugeLessOption3);
        gaugeLastChart4.setOption(gaugeLessOption4);
        gaugeLastChart5.setOption(gaugeLessOption5);
        window.addEventListener('resize', function() {
          gaugeTopChart1.resize()
          gaugeTopChart2.resize()
          gaugeTopChart3.resize()
          gaugeTopChart4.resize()
          gaugeTopChart5.resize()
          gaugeLastChart1.resize()
          gaugeLastChart2.resize()
          gaugeLastChart3.resize()
          gaugeLastChart4.resize()
          gaugeLastChart5.resize()
        })
      }

    }
  }
</script>

<style scoped>
  .div-inline{
    flex: 1;
  }
</style>

 src/views/mdc/base/modules/comparativeAnalysis/comparativeAnalysismain.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,599 @@
<template>
  <a-card :bordered="false" class="device_list">
    <div class="com_box">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="5" :sm="5">
            <a-form-item label="名称">
              <a-input placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParam.tierName"></a-input>
            </a-form-item>
          </a-col>
          <!--<a-col :md="4" :sm="4">-->
          <!--<a-form-model-item label="驱动类型" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
            <!--<j-dict-select-tag :disabled="true" :readOnly="disableSubmit" placeholder="请选择驱动类型"-->
                               <!--:triggerChange="true" dictCode="mdc_driveType"-->
                               <!--v-model="model.driveType" allow-clear/>-->
          <!--</a-form-model-item>-->
        <!--</a-col>-->
          <a-col :md="9" :sm="9" :xs="4">
            <a-form-item label="时间">
              <a-range-picker @change="dateParamChange" v-model="dates"  format="YYYY-MM-DD"/>
            </a-form-item>
          </a-col>
          <a-col :md="2" :sm="3" :xs="3">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
          </a-col>
          <a-col :md="2" :sm="2" :xs="2">
            <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div id="DeviceList">
      <a-tabs :activeKey="activeKey" @change="tabChange" tabPosition="top">
        <a-tab-pane key="1" tab="图形" force-render>
          <comparative-analysis-bar></comparative-analysis-bar>
          <!--<log-list :dataList='normalList' ref="logList" :loadingequip='loadingstayus'></log-list>-->
        </a-tab-pane>
        <a-tab-pane key="2" tab="仪表">
          <comparative-analysis-gauge></comparative-analysis-gauge>
          <!--<work-log-list :dataList='runList' ref="workLogList" :loadingrun="loadingrunStatus"></work-log-list>-->
        </a-tab-pane>
        <a-tab-pane key="3" tab="饼图">
          <conparative-analysis-pie></conparative-analysis-pie>
          <!--<alarm-log-list :dataList='waringList' ref="alarmLogList" :loadingwarn="loadingwarnStatus"></alarm-log-list>-->
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- table区域-end -->
    </div>
  </a-card>
</template>

<script>
  import moment from 'moment'
  import $ from 'jquery'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import JDate from '../../../../../components/jeecg/JDate'
  import {
    requestPut,
    deleteAction,
    getAction
  } from '@/api/manage'
  import comparativeAnalysisBar from './comparativeAnalysisBar'
  import comparativeAnalysisGauge from'./comparativeAnalysisGauge'
  import conparativeAnalysisPie from './conparativeAnalysisPie'
  import '@/components/table2excel/table2excel'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import Tooltip from 'ant-design-vue/es/tooltip'
  import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
  export default {
    name: 'comparativeAnalysismain',
    mixins: [JeecgListMixin],
    components: {
      Tooltip,
      comparativeAnalysisBar,
      comparativeAnalysisGauge,
      conparativeAnalysisPie,
      JDictSelectTag,
      JInput,
      JDate,
      JEllipsis
    },
    props: {  nodeTree: '', Type:'',nodePeople: '' },
    data() {
      return {
        activeKey: '1',
        typeTree:"",
        typeParent:1,
        typeEquipment:1,
        dates: [],
        xianshi:"",
        readOnly:true,
        queryParam: {},
        queryParams:{},
        queryParamEquip:{},
        queryParamPeople:{},
        dataStartsoucre:[],
        columns: [
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId'
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
            defaultSortOrder:'descend',
            sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1}
          },
          {
            title: '维修类型',
            align: 'center',
            dataIndex: 'mdcRepairTypeDictText'
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'startTime',
            // scopedSlots:{customRender:'startTime'},
            // customRender:(text,row,index) => {
            //   return moment(text).format("YYYY-MM-DD HH:mm:ss")
            // }
          },
          {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 150
          }
        ],
        url: {
          list: '/mdc/mdcEquipmentRepair/pageList',
          deleteBatch: '/mdc/mdcEquipmentRepair/delete',
          getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
        }
      }
    },
    watch:{
      Type(valmath){
        this.dataList = [];
        this.queryParams.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
      nodeTree(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId) {
            this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId =  ""
            this.queryParams.equipmentId = val.equipmentId
            this.queryParamEquip.equipmentId = val.equipmentId
          } else {
            this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId = val.key
            this.queryParams.equipmentId = ''
          }
          this.searchQuery()
        }
      },
      nodePeople(val){
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId) {
            this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId =  ""
            this.queryParams.equipmentId = val.equipmentId
            this.queryParamEquip.equipmentId = val.equipmentId
          } else {
            this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamPeople.parentId = val.key
            this.queryParams.equipmentId = ''
          }
          this.searchQuery()
        }
      }
    },
    methods: {
      initEquipmentNode(id) {
        let _this = this
        getAction(this.url.getBaseTree).then((res) => {
          if (res.success) {
            // console.log(res.result[0].entity.tierName)
            _this.$set(this.queryParam, 'tierName', res.result[0].title)
            _this.$set(this.queryParams, 'parentId', res.result[0].key)
            // _this.queryStatistical()
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
        // getAction(this.url.getEquipmentByPid, { pid: id }).then((res) => {
        //   if (res.success) {
        //     if (res.result) {
        //       _this.$set(this.queryParam, 'tierName', res.result.tierName)
        //       _this.$set(this.queryParam, 'equipmentId', res.result.equipmentId)
        //       // _this.quip = res.result
        //       _this.searchQuery()
        //     } else {
        //       _this.$message.warning('请配置设备！')
        //     }
        //   }
        // })
      },
      tabChange(val) {
        this.activeKey = val
      },
      dateParamChange(v1, v2) {
        // console.log(v1,v2)
        this.queryParam.startTime = v2[0]
        this.queryParam.endTime = v2[1]
        // console.log(v2[0],v2[1])
      },
      onChange(value, dateString) {
        // console.log('Selected Time: ', value);
        // console.log('Formatted Selected Time: ', dateString);
      },
      onOk(value) {
        console.log('onOk: ', value);
      },
      searchReset() {
        if(this.queryParams.typeTree == "1"){
          this.typeTree = this.queryParams.typeTree
          this.typeParent =  this.queryParams.parentId
          this.typeEquipment = this.queryParams.equipmentId
          this.queryParams = {}
          this.queryParam = {}
          this.dates = []
          this.queryParams.typeTree = this.typeTree
          this.queryParams.parentId = this.typeParent
          if(this.queryParams.parentId !=  ""){
            this.queryParams.equipmentId =  ""
          }else{
            if(this.queryParams.equipmentId == this.queryParamEquip.equipmentId){
              this.queryParams.equipmentId =  this.typeEquipment
            }else{
              this.queryParams.equipmentId = this.queryParamEquip.equipmentId
            }

          }

          this.ipagination.current = 1
          this.ResetloadData();
        }else{
          this.typeTree = this.queryParams.typeTree
          this.typeParent =  this.queryParams.parentId
          // this.typeEquipment = this.queryParams.equipmentId
          this.queryParams = {}
          this.queryParam = {}
          this.dates = []
          this.queryParams.typeTree = this.typeTree
          this.queryParams.parentId = this.typeParent
          // this.queryParams.equipmentId =  this.typeEquipment
          this.ipagination.current = 1
          this.ResetloadData();
        }

      },
      ResetloadData() {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        var params = this.getQueryParams();//查询条件
        if(!params){
          return false;
        }
        params.typeTree = this.queryParams.typeTree
        params.parentId = this.queryParams.parentId
        params.equipmentId = this.queryParams.equipmentId
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            // this.initDeviceType(this.dataSource)
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            // this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      handleEdit: function (record) {
        this.$refs.modalFormedit.edit(record);
        this.$refs.modalFormedit.title = "编辑";
        this.$refs.modalFormedit.disableSubmit = false;
      },
      handleTableChange(pagination, filters, sorter) {
        this.dataSource = []
        //分页、排序、筛选变化时触发
        //TODO ç­›é€‰
        // console.log(pagination)
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParams, this.isorter ,this.filters);
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        param.field = this.getQueryField();
        param.parentId = this.queryParams.parentId;
        param.equipmentId = this.queryParams.equipmentId;
        param.startTime = this.queryParam.startTime;
        param.endTime =  this.queryParam.endTime;
        getAction(this.url.list,param).then((res) => {
          if(res.success){
            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      searchQueryEdit(){
        if(this.queryParams.typeTree == "1"){
          this.queryParams.parentId =  this.queryParamEquip.parentId
        }else{
          this.queryParams.parentId = this.queryParamPeople.parentId
          this.queryParams.equipmentIds = ""
        }
        this.dataSource = [];
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParams, this.isorter ,this.filters);
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        param.field = this.getQueryField();
        param.parentId = this.queryParams.parentId;
        param.equipmentId = this.queryParams.equipmentId;
        param.startTime = this.queryParam.startTime;
        param.endTime =  this.queryParam.endTime;
        getAction(this.url.list,param).then((res) => {
          if(res.success){
            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      searchQuery(){
        if(this.queryParams.typeTree == "1"){
          this.queryParams.parentId =  this.queryParamEquip.parentId
          // this.queryParams.equipmentId =  this.queryParamEquip.equipmentId

        }else{
          this.queryParams.parentId = this.queryParamPeople.parentId

          // this.queryParams.equipmentId = ""
        }
        this.dataSource = [];
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParams, this.isorter ,this.filters);
        param.pageNo = 1;
        param.pageSize = this.ipagination.pageSize;
        param.field = this.getQueryField();
        param.parentId = this.queryParams.parentId;
        param.equipmentId = this.queryParams.equipmentId;
        param.startTime = this.queryParam.startTime;
        param.endTime =  this.queryParam.endTime;
        // console.log(param);
        getAction(this.url.list,param).then((res) => {
          if(res.success){
            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        if(!params){
          return false;
        }
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            // this.initDeviceType(this.dataSource)
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            // this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      modalFormOk(val) {
        // æ–°å¢ž/修改 æˆåŠŸæ—¶ï¼Œé‡è½½åˆ—表
        this.searchQueryEdit();
        // this.$emit('openBasetree','')
        this.selectedRowKeys = []
      },
      handleDelete: function (id) {
        if(!this.url.deleteBatch){
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.deleteBatch, {id: id}).then((res) => {
          if (res.success) {
            //重新计算分页问题
            that.reCalculatePage(1)
            that.$message.success(res.message);
            that.searchQuery();
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      handleAdd() {
        this.$refs.modalForm.add(this.node)
        this.$refs.modalForm.title = '新增'
        this.$refs.modalForm.disableSubmit = false
      },
      handleAddXIU() {
        this.$refs.modalFormadd.add()
        this.$refs.modalFormadd.title = '新增'
        this.$refs.modalFormadd.disableSubmit = false
      },
      pQuery(parentId) {
        this.queryParam.parentId = parentId[0]
        if(this.selectedRowKeys.length >= 1) {
          this.selectedRowKeys.length = 0
        }
        this.loadData()
      },
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      initEquipment(id) {
        let _this = this
        getAction(this.url.getEquipmentByPid, { pid: id }).then((res) => {
          if (res.success) {
            if (res.result) {
              _this.$set(this.queryParams, 'equipmentName', res.result.equipmentName)
              _this.$set(this.queryParams, 'equipmentId', res.result.equipmentId)
              _this.equipment = res.result
              _this.searchQuery()
            } else {
              _this.$message.warning('请配置设备！')
            }
          }
        })
      },
      exportExcel() {
        $("#DeviceList").table2excel({
          exclude: ".noExl",
          name: "Excel Document Name",
          filename: "设备维修详情",
          exclude_img: true,
          fileext: ".xls",
          exclude_links: true,
          exclude_inputs: true
        });
      },
    },
    created() {
      this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)]
      this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
      this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
      this.queryParam.typeTree = "1";
      this.initEquipmentNode()
    }
  }
</script>

<style lang="less" scoped>
  /*@import '~@assets/less/common.less';*/

  @media screen and (min-width: 1920px){
    .device_list{
      height: 811px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .device_list{
      height: 811px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .device_list{
      height: 663px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .device_list{
      height: 564px!important;
      overflow: scroll;
    }
  }
  @media screen and (max-width: 1280px){
    .device_list{
      height: 564px!important;
      overflow: scroll;
    }
  }
  /*.device_list{*/
    /*display: flex;*/
  /*}*/
  /*.device_list .table-page-search-wrapper{*/
    /**/
  /*}*/
  /deep/ .ant-card-body{
    height: 100%!important;
  }
   .device_list .com_box{
    display: flex!important;
    height: 100%!important;
    flex-direction: column!important;
  }
  .device_list .table-page-search-wrapper{
    height: 6%!important;
  }
  .device_list #DeviceList{
   height: 90%!important;
  }
</style>

 src/views/mdc/base/modules/comparativeAnalysis/conparativeAnalysisPie.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,121 @@
<template>
  <div class="comparative_pie" style="width: 100%;height: 600px;display: flex;overflow: scroll">
    <div id="compAnalPie1" style="flex: 1;"></div>
    <div id="compAnalPie2" style="flex: 1;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'conparativeAnalysisPie',
    propa:{},
    data(){
      return{
        closeRate:0,
        openRate:0,
        usedRate:0,
        waitRate:0,
      }
    },
    created(){

    },
    mounted() {
      this.drawTu()
    },
    methods:{
      drawTu(){
       let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'),'macarons');
       let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'),'macarons');
       let pieCompChartOption1 = {
          title: {
            x: 'center',
            subtext: '开机效率'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            y: 'bottom',
            data: ['开机率', '关机率']
          },
          calculable: true,
          series: [{
            name: '开机效率',
            type: 'pie',
            radius: '70%',
            center: ['55%', '55%'],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#4169E1', '#A8A8A8'];
                  return colorList[params.dataIndex]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}'
                }
              }
            },
            data: [{value: 0, name: '开机率'},
              {value: 0, name: '关机率'}]
          }]
        };
       let pieCompChartOption2 = {
          title: {
            x: 'center',
            subtext: '运行效率'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            y: 'bottom',
            data: ['加工率', '待机率', '关机率']
          },
          calculable: true,
          series: [{
            name: '运行效率',
            type: 'pie',
            radius: '70%',
            center: ['55%', '55%'],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#00ee00', '#FCCE10', '#A8A8A8'];
                  return colorList[params.dataIndex]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}'
                }
              }
            },
            data: [{value: 0, name: '加工率'},
              {value: 0, name: '待机率'},
              {value: 0, name: '关机率'}]
          }]
        };
        pieCompChart1.setOption(pieCompChartOption1);
        pieCompChart2.setOption(pieCompChartOption2);
        window.addEventListener('resize', function() {
          pieCompChart1.resize()
          pieCompChart2.resize()
        })
      }
    }
  }
</script>

<style scoped>

</style>

 src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue

@@ -323,7 +323,7 @@
        exclude_img: true,
        fileext: ".xls",
        exclude_links: true,
        exclude_inputs: true
        exclude_inputs: false
      });
    },
    showIdentifying() {

 src/views/mdc/base/modules/mdcPassRate/mdcPassRateEdit.vue

@@ -33,7 +33,7 @@
        </a-row>
        <a-row :gutter="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea  :disabled="disableSubmit"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20" :disabled="disableSubmit"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
        </a-row>
      </a-form>
@@ -242,27 +242,55 @@
          if (!err) {
            that.confirmLoading = true
            let formData = Object.assign(this.model, values)
            let obj
            if (!this.model.id) {
              obj = postAction(this.url.add, formData)
            } else {
              obj = requestPut(this.url.edit, formData, {
                id: this.model.id
            let stat = formData.processQuantity
            let end = formData.unqualifiedQuantity
            if(end>stat){
              that.$message.warning("不合格数量必须小于等于加工数量");
              that.confirmLoading = false
            }else{
              let obj
              if (!this.model.id) {
                obj = postAction(this.url.add, formData)
              } else {
                obj = requestPut(this.url.edit, formData, {
                  id: this.model.id
                })
              }
              obj.then((res) => {
                if (res.success) {
                  that.$message.success("添加成功")
                  // that.$message.success(res.message)
                  that.$emit('ok', res.result)
                } else {
                  that.$message.warning(res.message)
                }
              }).finally(() => {
                that.confirmLoading = false
                that.close()
              })
            }
            obj.then((res) => {
              if (res.success) {
                that.$message.success("修改成功")
                // that.$message.success(res.message)
                that.$emit('ok', res.result)
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
            // let start = moment(formData.startTime).format('YYYY-MM-DD HH:mm:ss');
            // let end = moment(formData.endTime).format('YYYY-MM-DD HH:mm:ss');
            // let startOne = start.replace(/:/g,'');
            // let endOne = end.replace(/:/g,'');
            // var data = new Date();
            // let stertDate = moment(data).format("YYYY-MM-DD HH:mm:ss");
            // let dataStart = stertDate.replace(/:/g,'');
            // if(startOne < dataStart){
            //   that.$message.warning("开始时间不能小于当前时间")
            //   that.confirmLoading = false
            // }else{
            //   if(startOne>=endOne){
            //     that.$message.warning("结束时间不能小于开始时间");
            //     // console.log(this.model)
            //     // this.endTime = ''
            //     that.confirmLoading = false
            //   }else{

          }
          // }

          // }
        })
      },
      handleCancel() {

 src/views/mdc/base/modules/mdcPassRate/mdcPassRateModal.vue

@@ -33,7 +33,7 @@
        <a-row :gutter="24">
          <a-col :span="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea   v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注" :maxLength    ="20" ></a-textarea>
          </a-form-item>
          </a-col>
        </a-row>

 src/views/mdc/base/modules/mdcProcessQuantity/mdcProcessQuantityModal.vue

@@ -57,7 +57,7 @@
        <a-row :gutter="24">
          <a-col :span="24">
          <a-form-item label="备注" :labelCol="labelColLong1" :wrapperCol="wrapperColLong1">
            <a-textarea   v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
          </a-col>
        </a-row>

 src/views/mdc/base/modules/mdcProcessQuantity/mdcProcessQuantityModelEdit.vue

@@ -60,7 +60,7 @@
        <a-row :gutter="24">
          <a-col :span="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea  :disabled="disableSubmit"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20"  :disabled="disableSubmit"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
          </a-col>
        </a-row>

 src/views/mdc/base/modules/mdcStandardProcessDuration/MdcStandardProcessDurationEdit.vue

@@ -44,7 +44,7 @@
        </a-row>
        <a-row :gutter="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea  :disabled="disableSubmit"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20" :disabled="disableSubmit"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
        </a-row>
      </a-form>

 src/views/mdc/base/modules/mdcStandardProcessDuration/MdcStandardProcessDurationModal.vue

@@ -38,7 +38,7 @@
        <a-row :gutter="24">
          <a-col :span="24">
          <a-form-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
            <a-textarea   v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
            <a-textarea :maxLength="20"  v-decorator="['remark', validatorRules.remark]" placeholder="请输入备注"  ></a-textarea>
          </a-form-item>
          </a-col>
        </a-row>