MOC

master/src/main/java/com/ruoyi/project/process/controller/TMocController.java

@@ -13,6 +13,7 @@ import com.ruoyi.framework.config.RuoYiConfig;
 import com.ruoyi.project.common.domain.DataEntity;
 import com.ruoyi.project.common.domain.TCommonfile;
 import com.ruoyi.project.common.service.ITCommonfileService;
+import com.ruoyi.project.process.controller.vo.AreaVO;
 import com.ruoyi.project.process.controller.vo.DelayVO;
 import com.ruoyi.project.process.mapper.TMocMapper;
 import com.ruoyi.project.system.domain.SysDept;
@@ -66,6 +67,36 @@ public class TMocController extends BaseController
     @Autowired
     private ITCommonfileService commonfileService;
 
+    // 区域统计
+    @GetMapping("/areaData")
+    public List<DataEntity> areaData(AreaVO areaVO)
+    {
+        List<DataEntity> areaList = tMocMapper.selectAreaData(areaVO);
+        List<SysDictData> dictList = iSysDictTypeService.selectDictDataByType("MOC_AREA");
+        for (DataEntity d: areaList
+        ) {
+            for (SysDictData s: dictList
+            ) {
+                if (StringUtils.isBlank(d.getDataName())){
+                    d.setDataName("未知");
+                    break;
+                }
+                if (s.getDictValue().equals(d.getDataName())){
+                    d.setDataName(s.getDictLabel());
+                    break;
+                }
+            }
+        }
+        return areaList;
+    }
+
+    // MOC编号统计
+    @GetMapping("/mocNoData")
+    public List<DataEntity> mocNoData()
+    {
+        return tMocMapper.selectMocData();
+    }
+
     /**
      * 遍历MOC filelist
      * 设置isEhsCheck、isTrainingset、ispssr

master/src/main/java/com/ruoyi/project/process/controller/vo/AreaVO.java

@@ -0,0 +1,21 @@
+package com.ruoyi.project.process.controller.vo;
+
+/**
+ * @author Wang Zi Wen
+ * @email wangggziwen@163.com
+ * @date 2023/02/17 13:12:47
+ */
+public class AreaVO {
+    private static final long serialVersionUID = 1L;
+
+    /** 临时/永久 */
+    private String timeliness;
+
+    public String getTimeliness() {
+        return timeliness;
+    }
+
+    public void setTimeliness(String timeliness) {
+        this.timeliness = timeliness;
+    }
+}

master/src/main/java/com/ruoyi/project/process/mapper/TMocMapper.java

@@ -5,6 +5,7 @@ import java.util.Map;
 
 import com.ruoyi.framework.aspectj.lang.annotation.DataScope;
 import com.ruoyi.project.common.domain.DataEntity;
+import com.ruoyi.project.process.controller.vo.AreaVO;
 import com.ruoyi.project.process.domain.TMoc;
 
 /**
@@ -73,4 +74,8 @@ public interface TMocMapper
     List<DataEntity> selectCategoryData(Map param);
 
     List<DataEntity> selectRiskData(Map param);
+
+    List<DataEntity> selectMocData();
+
+    List<DataEntity> selectAreaData(AreaVO areaVO);
 }

master/src/main/resources/mybatis/process/TMocMapper.xml

@@ -455,4 +455,25 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         order by dataName
     </select>
 
+    <select id="selectMocData" resultType="com.ruoyi.project.common.domain.DataEntity">
+        SELECT count(1) as dataNum, substr(d.MOC_NO, 7, 4) as dataName FROM t_moc d
+        <where>
+            and d.del_flag = 0
+        </where>
+        GROUP BY substr(d.MOC_NO, 7, 4)
+        order by dataName
+    </select>
+
+    <select id="selectAreaData"
+            parameterType="com.ruoyi.project.process.controller.vo.AreaVO"
+            resultType="com.ruoyi.project.common.domain.DataEntity">
+        SELECT count(1) as dataNum, area as dataName FROM t_moc d
+        <where>
+            d.timeliness = #{timeliness}
+            and d.del_flag = 0
+        </where>
+        GROUP BY area
+        order by dataName
+    </select>
+
 </mapper>

ui/src/api/process/moc.js

@@ -1,5 +1,22 @@
 import request from '@/utils/request'
 
+// 区域统计
+export function areaData(query) {
+  return request({
+    url: '/process/moc/areaData',
+    method: 'get',
+    params: query
+  })
+}
+
+// MOC编号统计
+export function mocNoData() {
+  return request({
+    url: '/process/moc/mocNoData',
+    method: 'get',
+  })
+}
+
 // 查询MOC管理列表
 export function list(query) {
   return request({

ui/src/views/process/moc/chart/areaChart.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <div id="areaChart" :style="{width:width,height:height}"></div>
+  </div>
+</template>
+
+<script>
+  import { areaData } from "@/api/process/moc";
+
+  export default {
+    props: {
+      timeliness: null,
+      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: {
+          timeliness: null,
+        },
+        chart: null,
+        chartData : []
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.queryParams.timeliness = this.timeliness;
+        areaData(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('areaChart'))
+        this.chart.setOption(this.option)
+      }
+    }
+  }
+</script>

ui/src/views/process/moc/chart/mocNoChart.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <div id="mocNoChart" :style="{width:width,height:height}"></div>
+  </div>
+</template>
+
+<script>
+  import { mocNoData } 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: {},
+        chart: null,
+        chartData : []
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        mocNoData().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('mocNoChart'))
+        this.chart.setOption(this.option)
+      }
+    }
+  }
+</script>

ui/src/views/process/moc/chart/mocTypeChart.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <div id="areaChart" :style="{width:width,height:height}"></div>
+  </div>
+</template>
+
+<script>
+  import { areaData } from "@/api/process/moc";
+
+  export default {
+    props: {
+      timeliness: null,
+      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: {
+          timeliness: null,
+        },
+        chart: null,
+        chartData : []
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.queryParams.timeliness = this.timeliness;
+        areaData(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('areaChart'))
+        this.chart.setOption(this.option)
+      }
+    }
+  }
+</script>

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

@@ -290,11 +290,16 @@
       <el-table-column :label="$t('标题')" align="center" width="320" prop="title" :show-overflow-tooltip="true"/>
       <el-table-column prop="mocType" align="center" :show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">
         <template slot="header">
-          <span
-            @click="mocTypeInfo.open = true"
-            id="moc-type">
-            MOC类型
-            <i class="el-icon-question"></i>
+          <span id="moc-type">
+            <span @click="mocTypeChart.open = true">
+              MOC类型
+            </span>
+            <span @click="mocTypeChart.open = true">
+              <i class="el-icon-s-data"></i>
+            </span>
+            <span @click="mocTypeInfo.open = true">
+              <i class="el-icon-question"></i>
+            </span>
           </span>
         </template>
       </el-table-column>
@@ -742,16 +747,23 @@
         <el-button @click="doc.open = false">{{ $t('返 回') }}</el-button>
       </div>
     </el-dialog>
-    <!-- 区域统计对话框 -->
+    <!-- 永久MOC类型统计对话框 -->
+    <el-dialog v-dialogDrag :title="mocTypeChart.title" :visible.sync="mocTypeChart.open" width="500px" append-to-body>
+      <moc-type-chart :timeliness="1"></moc-type-chart>
+      <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="areaChart.title" :visible.sync="areaChart.open" width="500px" append-to-body>
-      <pie-demo></pie-demo>
+      <area-chart :timeliness="1"></area-chart>
       <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>
+      <moc-no-chart></moc-no-chart>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="mocNoChart.open = false">{{ $t('确 定') }}</el-button>
       </div>
@@ -865,12 +877,15 @@ import CategoryData from "./categoryData";
 import RiskData from "./riskData";
 import barDemo from "./chartDemo/barDemo";
 import pieDemo from "./chartDemo/pieDemo";
+import mocNoChart from "../chart/mocNoChart";
+import areaChart from "../chart/areaChart";
+import mocTypeChart from "../chart/mocTypeChart";
 
 import {addCommonfile, allFileList, delCommonfile, updateCommonfile} from "@/api/common/commonfile";
 
 export default {
   name: "PermanentMoc",
-  components: { barDemo, pieDemo, RiskData, CategoryData, ChangeData, TrueStateData, YearChart, Treeselect },
+  components: { mocTypeChart, areaChart, mocNoChart, barDemo, pieDemo, RiskData, CategoryData, ChangeData, TrueStateData, YearChart, Treeselect },
   data() {
     var validateDocUpdate = (rule, value, callback) => {
       if (value == 1) {
@@ -884,9 +899,13 @@ export default {
       }
     };
     return {
+      mocTypeChart: {
+        open: false,
+        title: '永久MOC类型数据统计'
+      },
       areaChart: {
         open: false,
-        title: '区域数据统计'
+        title: '永久MOC区域数据统计'
       },
       mocNoChart: {
         open: false,

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

@@ -288,11 +288,29 @@
               :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" align="center" :show-overflow-tooltip="true" :formatter="mocTypeFormat" width="120">
         <template slot="header">
@@ -786,6 +804,20 @@
         <el-button type="primary" @click="mocTypeInfo.open = false">{{ $t('确 定') }}</el-button>
       </div>
     </el-dialog>
+    <!-- 临时MOC区域统计对话框 -->
+    <el-dialog v-dialogDrag :title="areaChart.title" :visible.sync="areaChart.open" width="500px" append-to-body>
+      <area-chart :timeliness="2"></area-chart>
+      <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>
+      <moc-no-chart></moc-no-chart>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="mocNoChart.open = false">{{ $t('确 定') }}</el-button>
+      </div>
+    </el-dialog>
     <el-drawer
       :title="$t('数据分析')"
       size="600px"
@@ -878,12 +910,14 @@
   import { getToken } from "@/utils/auth";
   import Treeselect from "@riophae/vue-treeselect";
   import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  import mocNoChart from "../chart/mocNoChart";
+  import areaChart from "../chart/areaChart";
 
-  import {addCommonfile, allFileList, delCommonfile, updateCommonfile} from "@/api/common/commonfile";
+  import { addCommonfile, allFileList, delCommonfile, updateCommonfile} from "@/api/common/commonfile";
 
   export default {
     name: "TemporaryMoc",
-    components: { Treeselect },
+    components: { areaChart, mocNoChart, Treeselect },
     data() {
       var validateDocUpdate = (rule, value, callback) => {
         if (value == 1) {
@@ -897,6 +931,14 @@
         }
       };
       return {
+        areaChart: {
+          open: false,
+          title: '临时MOC区域数据统计'
+        },
+        mocNoChart: {
+          open: false,
+          title: 'MOC编号数据统计'
+        },
         mocTypeInfo: {
           open: false,
           title: 'MOC类型说明'