MOC

ui/src/views/process/moc/aquifier/index.vue

@@ -492,10 +492,12 @@
         </template>
       </el-table-column>
       <el-table-column :label="$t('卡具状态')" align="center" width="100" prop="status" :show-overflow-tooltip="true" :formatter="mocStatusFormat"/>
-      <!--<el-table-column prop="mocType" label="":show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">-->
+      <!--<el-table-column prop="mocType" align="center" :show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">-->
         <!--<template slot="header">-->
           <!--MOC类型-->
           <!--<span-->
+            <!--@click="mocTypeInfo.open = true"-->
+            <!--@click="mocTypeInfo.open = true"-->
             <!--@click="mocTypeInfo.open = true"-->
             <!--id="moc-type">-->
             <!--<i class="el-icon-question"></i>-->
@@ -569,7 +571,7 @@
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="el-icon-s-release"
             @click="handleDelay(scope.row)"
             v-hasPermi="['process:moc:edit']"
             v-if="scope.row.extention9 == null && scope.row.status == 1"

ui/src/views/process/moc/facility/index.vue

@@ -304,7 +304,7 @@
       <!--<el-table-column :label="$t('项目号')" align="center" width="120" prop="projectNo" :show-overflow-tooltip="true"/>-->
       <!--<el-table-column :label="$t('区域')" align="center" prop="area" :formatter="areaFormat" />-->
       <el-table-column :label="$t('标题')" align="center" width="320" prop="title" :show-overflow-tooltip="true"/>
-      <!--<el-table-column prop="mocType" label="":show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">-->
+      <!--<el-table-column prop="mocType" align="center" :show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">-->
         <!--<template slot="header">-->
           <!--MOC类型-->
           <!--<span-->

ui/src/views/process/moc/interlock/index.vue

@@ -312,7 +312,7 @@
       <!--<el-table-column :label="$t('项目号')" align="center" width="120" prop="projectNo" :show-overflow-tooltip="true"/>-->
       <!--<el-table-column :label="$t('区域')" align="center" prop="area" :formatter="areaFormat" />-->
       <el-table-column :label="$t('标题')" align="center" width="320" prop="title" :show-overflow-tooltip="true"/>
-      <!--<el-table-column prop="mocType" label="":show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">-->
+      <!--<el-table-column prop="mocType" align="center" :show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">-->
       <!--<template slot="header">-->
       <!--MOC类型-->
       <!--<span-->

ui/src/views/process/moc/permanentMoc/chartDemo/barDemo.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div id="yearChart" :style="{width:width,height:height}"></div>
+  </div>
+</template>
+
+<script>
+  import { yearData } from "@/api/process/moc";
+
+  export default {
+    props: {
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '200px'
+      },
+    },
+    data() {
+      return {
+        option: {
+          color: ['#3398DB'],
+          /* 周围边距 */
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '1%',
+            top: '15%',
+            containLabel: true
+          },
+          /* 标识 */
+          legend: {
+            data: ['永久/临时MOC'],
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              mark: {show: true},
+              magicType: {
+                show: true,
+                type: ['pie', 'funnel']
+              },
+              restore: {show: true},
+              saveAsImage: {show: true}
+            }
+          },
+          /* 坐标轴显示 */
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              /*type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'*/
+              type: 'cross',
+              label: {
+                backgroundColor: '#a0a0a0'
+              }
+            }
+          },
+          xAxis: {
+            data: [],
+          },
+          yAxis: {
+          },
+          series: [{
+            name: '永久/临时MOC',
+            type: 'bar',
+            barWidth: '40%',
+            data: []
+          }]
+        },
+
+        // 查询参数
+        queryParams: {
+          item: 1,
+        },
+        chart: null,
+        chartData : []
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        yearData(this.queryParams).then(response => {
+          this.chartData = response
+          for(let i = 0 ; i <this.chartData.length ; i++){
+            if(this.chartData[i].dataName!= null && this.chartData[i].dataName!= ''){
+              this.option.xAxis.data.push(this.chartData[i].dataName)
+              this.option.series[0].data.push(this.chartData[i].dataNum)
+            }
+          }
+          this.initChart()
+        });
+      })
+    },
+    methods: {
+      /** 获取当前年份 */
+      getNowTime() {
+        var now = new Date();
+      },
+      initChart() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart = this.echarts.init(document.getElementById('yearChart'))
+        this.chart.setOption(this.option)
+      }
+    }
+  }
+</script>

ui/src/views/process/moc/permanentMoc/chartDemo/pieDemo.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div id="trueStateChart" :style="{width:width,height:height}"></div>
+  </div>
+</template>
+
+<script>
+  import { trueStateData } from "@/api/process/moc";
+
+  export default {
+    props: {
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '200px'
+      },
+    },
+    data() {
+      return {
+        option: {
+          title: {
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: []
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              mark: {show: true},
+              magicType: {
+                show: true,
+                type: ['pie', 'funnel']
+              },
+              restore: {show: true},
+              saveAsImage: {show: true}
+            }
+          },
+          series: [
+            {
+              label: {
+                formatter: '{b}: ({d}%)'
+              },
+              name: this.$t('实施情况'),
+              type: 'pie',
+              radius: ['50%', '70%'],
+              selectedMode: 'single',
+              data: [
+                {value: 335, name: this.$t('直接访问')},
+              ],
+              emphasis: {
+                label: {
+                  show: true,
+                  // fontSize: '21',
+                  fontWeight: 'bold'
+                }
+              },
+            }
+          ]
+        },
+
+        // 查询参数
+        queryParams: {
+          item: 1,
+        },
+        chart: null,
+        chartData : [
+          {dataName: '裂解', dataNum: '10'},
+          {dataName: '分离', dataNum: '21'},
+          {dataName: '压缩', dataNum: '7'},
+        ]
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        trueStateData(this.queryParams).then(response => {
+          // this.chartData = response
+          for(let i = 0 ; i <this.chartData.length ; i++){
+            this.option.legend.data[i] = this.chartData[i].dataName
+            this.option.series[0].data[i] = {value:this.chartData[i].dataNum , name: this.chartData[i].dataName }
+          }
+          this.initChart()
+        });
+      })
+    },
+    methods: {
+      /** 获取当前年份 */
+      getNowTime() {
+        var now = new Date();
+      },
+      initChart() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart = this.echarts.init(document.getElementById('trueStateChart'))
+        this.chart.setOption(this.option)
+      }
+    }
+  }
+</script>

ui/src/views/process/moc/permanentMoc/index.vue

@@ -251,31 +251,49 @@
           <!--v-hasPermi="['process:moc:export']"-->
         <!--&gt;{{ $t('导出') }}</el-button>-->
       <!--</el-col>-->
-      <!--<el-col :span="1.5">-->
-        <!--<el-button-->
-          <!--type="primary"-->
-          <!--icon="el-icon-s-data"-->
-          <!--size="mini"-->
-          <!--@click="handleData"-->
-        <!--&gt;{{ $t('数据分析') }}</el-button>-->
-      <!--</el-col>-->
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-s-data"
+          size="mini"
+          @click="handleData"
+        >{{ $t('数据分析') }}</el-button>
+      </el-col>
 	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="mocList" @selection-change="handleSelectionChange" :cell-style="tableCellStyle" :cell-class-name="tableCellClassName" :height="clientHeight" border>
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column :label="$t('MOC编号')" align="center" width="120" prop="mocNo" :show-overflow-tooltip="true"/>
+      <el-table-column align="center" width="120" prop="mocNo" :show-overflow-tooltip="true" >
+        <template slot="header">
+          <span
+            @click="mocNoChart.open = true"
+            id="moc-no">
+            MOC编号
+            <i class="el-icon-s-data"></i>
+          </span>
+        </template>
+      </el-table-column>
       <!--<el-table-column :label="$t('装置编号')" align="center" width="120" prop="plantNumber" :show-overflow-tooltip="true"/>-->
       <el-table-column :label="$t('公司MOC编号')" align="center" width="120" prop="companyMocNo" :show-overflow-tooltip="true"/>
       <el-table-column :label="$t('项目号')" align="center" width="120" prop="projectNo" :show-overflow-tooltip="true"/>
-      <el-table-column :label="$t('区域')" align="center" prop="area" :formatter="areaFormat" />
+      <el-table-column :label="$t('区域')" align="center" prop="area" :formatter="areaFormat">
+        <template slot="header">
+          <span
+            @click="areaChart.open = true"
+            id="area">
+            区域
+            <i class="el-icon-s-data"></i>
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column :label="$t('标题')" align="center" width="320" prop="title" :show-overflow-tooltip="true"/>
-      <el-table-column prop="mocType" label="":show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">
+      <el-table-column prop="mocType" align="center" :show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">
         <template slot="header">
-          MOC类型
           <span
             @click="mocTypeInfo.open = true"
             id="moc-type">
+            MOC类型
             <i class="el-icon-question"></i>
           </span>
         </template>
@@ -724,6 +742,20 @@
         <el-button @click="doc.open = false">{{ $t('返 回') }}</el-button>
       </div>
     </el-dialog>
+    <!-- 区域统计对话框 -->
+    <el-dialog v-dialogDrag :title="areaChart.title" :visible.sync="areaChart.open" width="500px" append-to-body>
+      <pie-demo></pie-demo>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="areaChart.open = false">{{ $t('确 定') }}</el-button>
+      </div>
+    </el-dialog>
+    <!-- MOC编号统计对话框 -->
+    <el-dialog v-dialogDrag :title="mocNoChart.title" :visible.sync="mocNoChart.open" width="500px" append-to-body>
+      <bar-demo></bar-demo>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="mocNoChart.open = false">{{ $t('确 定') }}</el-button>
+      </div>
+    </el-dialog>
     <!-- MOC类型说明对话框 -->
     <el-dialog v-dialogDrag :title="mocTypeInfo.title" :visible.sync="mocTypeInfo.open" width="1000px" append-to-body>
       <el-image
@@ -831,12 +863,14 @@ import TrueStateData from "./trueStateData";
 import ChangeData from "./changeData";
 import CategoryData from "./categoryData";
 import RiskData from "./riskData";
+import barDemo from "./chartDemo/barDemo";
+import pieDemo from "./chartDemo/pieDemo";
 
 import {addCommonfile, allFileList, delCommonfile, updateCommonfile} from "@/api/common/commonfile";
 
 export default {
   name: "PermanentMoc",
-  components: {RiskData, CategoryData, ChangeData, TrueStateData, YearChart, Treeselect},
+  components: { barDemo, pieDemo, RiskData, CategoryData, ChangeData, TrueStateData, YearChart, Treeselect },
   data() {
     var validateDocUpdate = (rule, value, callback) => {
       if (value == 1) {
@@ -850,6 +884,14 @@ export default {
       }
     };
     return {
+      areaChart: {
+        open: false,
+        title: '区域数据统计'
+      },
+      mocNoChart: {
+        open: false,
+        title: 'MOC编号数据统计'
+      },
       mocTypeInfo: {
         open: false,
         title: 'MOC类型说明'
@@ -1629,9 +1671,15 @@ export default {
 };
 </script>
 <style>
+  #area:hover{
+    cursor: pointer;
+  }
   #moc-type:hover{
     cursor: pointer;
   }
+  #moc-no:hover{
+    cursor: pointer;
+  }
   .text {
     font-size: 14px;
   }

ui/src/views/process/moc/summary/index.vue

@@ -270,12 +270,12 @@
       <el-table-column :label="$t('项目号')" align="center" width="120" prop="projectNo" :show-overflow-tooltip="true"/>
       <el-table-column :label="$t('区域')" align="center" prop="area" :formatter="areaFormat" />
       <el-table-column :label="$t('标题')" align="center" width="320" prop="title" :show-overflow-tooltip="true"/>
-      <el-table-column prop="mocType" label="":show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">
+      <el-table-column prop="mocType" align="center" :show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">
         <template slot="header">
-          MOC类型
           <span
             @click="mocTypeInfo.open = true"
             id="moc-type">
+            MOC类型
             <i class="el-icon-question"></i>
           </span>
         </template>

ui/src/views/process/moc/temporaryMoc/index.vue

@@ -294,12 +294,12 @@
       <el-table-column :label="$t('项目号')" align="center" width="120" prop="projectNo" :show-overflow-tooltip="true"/>
       <el-table-column :label="$t('区域')" align="center" prop="area" :formatter="areaFormat" />
       <el-table-column :label="$t('标题')" align="center" width="320" prop="title" :show-overflow-tooltip="true"/>
-      <el-table-column prop="mocType" label="":show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">
+      <el-table-column prop="mocType" align="center" :show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">
         <template slot="header">
-          MOC类型
           <span
             @click="mocTypeInfo.open = true"
             id="moc-type">
+            MOC类型
             <i class="el-icon-question"></i>
           </span>
         </template>