定量分析页面增加图标分析

src/views/quality/qcTableDL/index.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="app-container">
-		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px" class="edit-el-form">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="100px"
+      class="edit-el-form"
+    >
       <el-form-item label="订单编码" prop="orderNo">
         <el-input
           v-model="queryParams.orderNo"
@@ -27,7 +35,12 @@
         />
       </el-form-item>
       <el-form-item label="检验类型" prop="typeCode">
-				<el-select v-model="queryParams.typeCode" clearable placeholder="请选择检验类型" @change="getCheckTypeList">
+        <el-select
+          v-model="queryParams.typeCode"
+          clearable
+          placeholder="请选择检验类型"
+          @change="getCheckTypeList"
+        >
           <el-option
             v-for="dict in dict.type.check_type"
             :key="dict.value"
@@ -37,7 +50,12 @@
         </el-select>
       </el-form-item>
       <el-form-item label="检验节点" prop="checkType">
-				<el-select v-model="queryParams.checkType" clearable placeholder="请选择检验节点"  @change="getProjectListFunc">
+        <el-select
+          v-model="queryParams.checkType"
+          clearable
+          placeholder="请选择检验节点"
+          @change="getProjectListFunc"
+        >
           <el-option
             v-for="dict in checkTypeList"
             :key="dict.checkType"
@@ -47,16 +65,28 @@
         </el-select>
       </el-form-item>
       <el-form-item label="定量检测项" prop="projectNoArray">
-				<el-select v-model="queryParams.projectNoArray" multiple collapse-tags placeholder="请选择">
+        <el-select
+          v-model="queryParams.projectNoArray"
+          multiple
+          collapse-tags
+          placeholder="请选择"
+        >
           <el-option
             v-for="item in projectNoOptions"
             :key="item.recordId"
             :label="item.ruleName"
-					:value="item.recordId"></el-option>
+            :value="item.recordId"
+          ></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="统计单位" prop="supplierCode">
-				<el-select v-model="queryParams.supplierCode" clearable placeholder="请选择统计单位" filterable clearable>
+        <el-select
+          v-model="queryParams.supplierCode"
+          clearable
+          placeholder="请选择统计单位"
+          filterable
+          clearable
+        >
           <el-option
             v-for="dict in workCenterList"
             :key="dict.supplierCode"
@@ -72,12 +102,21 @@
           type="datetimerange"
           range-separator="至"
           start-placeholder="开始日期"
-				end-placeholder="结束日期">
+          end-placeholder="结束日期"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item>
-				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button>
+        <el-button
-				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -89,23 +128,47 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-				>导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-s-data"
+          size="mini"
+          @click="handleAnalysis"
+          >图标分析</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="tableList">
       <el-table-column type="expand">
         <template #default="props">
-					<el-table :data="props.row.details" size="mini" style="width: 100%;margin-left: 0%" 
+          <el-table
+            :data="props.row.details"
+            size="mini"
+            style="width: 100%; margin-left: 0%"
             :show-header="false"
             class="expandClass"
           >
             ><!---->
             <el-table-column type="expand" />
-						<el-table-column label="日期" align="center" prop="ymdms" width="150"/>
+            <el-table-column
+              label="日期"
+              align="center"
+              prop="ymdms"
+              width="150"
+            />
             <template v-for="(detail, index) in detailTitleCol2">
-							<el-table-column :prop="detail.col2Id" align="center" 
+              <el-table-column
+                :prop="detail.col2Id"
+                align="center"
                 :key="detail.col2Id"
                 :label="detail.col2Name"
                 :show-overflow-tooltip="true"
@@ -116,13 +179,16 @@
       </el-table-column>
       <el-table-column label="日期" align="center" prop="ymdms" width="150" />
       <template v-for="(column1, index) in titleCol1">
-				<el-table-column align="center" 
+        <el-table-column
+          align="center"
           :prop="column1.col1Id"
           :key="column1.col1Id"
           :label="column1.col1Name"
         >
           <template v-for="(column2, index) in titleCol2">
-						<el-table-column :prop="column1.col1Id+column2.col2Id" align="center" 
+            <el-table-column
+              :prop="column1.col1Id + column2.col2Id"
+              align="center"
               :key="column1.col1Id + column2.col2Id"
               :label="column2.col2Name"
               :show-overflow-tooltip="true"
@@ -131,13 +197,34 @@
         </el-table-column>
       </template>
     </el-table>
+    <!-- 图标分析 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="1880px"
+      append-to-body
+    >
+      <div
+        class="echartbox"
+        id="echart1"
+        style="margin: auto; margin-top: 20px; width: 1820px; height: 545px"
+      ></div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getDLTableAvgInfo,getDLDetailList,getCheckTypeList,getSupplierList,
+import {
-getProjectOptionList
+  getDLTableAvgInfo,
+  getDLDetailList,
+  getCheckTypeList,
+  getSupplierList,
+  getProjectOptionList,
 } from "@/api/quality/qcTable";
+import * as echarts from "echarts";
 import moment from "moment/moment";
 export default {
   name: "qcAnalysis",
@@ -149,7 +236,7 @@ export default {
       // 选择领料单
       selectPrepare: [],
       // 打印
-			formRef: 'form',
+      formRef: "form",
       validateRules: [],
       printDialogVisible: false,
       // 遮罩层
@@ -191,7 +278,7 @@ export default {
         incomeBatchNo: null,
         incomeTimeArray: [],
         ymArrayStart: null,
-				ymArrayEnd:null
+        ymArrayEnd: null,
       },
       workCenterList: [],
       checkTypeList: [],
@@ -201,7 +288,13 @@ export default {
       // 表单校验
       rules: {},
       openReport: false,
-			titleReport : "工单报工详情"
+      titleReport: "工单报工详情",
+      analyzeList: [],
+      legenddata: [],
+      seriesdata: [],
+      xAxisdata: [],
+      detailechartslist: [],
+      titledata: "",
     };
   },
   created() {
@@ -235,40 +328,43 @@ export default {
     },
     /**获取车间数据**/
     getWorkCenterList() {
-			getWorkcenterList(this.queryParams).then(response => {
+      getWorkcenterList(this.queryParams).then((response) => {
-				this.workCenterList = response
+        this.workCenterList = response;
-			})
+      });
     },
     getCheckTypeList(val) {
       //获取检验节点
-			getCheckTypeList(val).then(response => {
+      getCheckTypeList(val).then((response) => {
-				this.checkTypeList = response
+        this.checkTypeList = response;
       });
       //获取统计单位
-            getSupplierList(val).then(response => {
+      getSupplierList(val).then((response) => {
-				this.workCenterList = response
+        this.workCenterList = response;
       });
     },
     //获取定量检测项
     getProjectListFunc(val) {
-			getProjectOptionList(val).then(response => {
+      getProjectOptionList(val).then((response) => {
-				this.projectNoOptions = response
+        this.projectNoOptions = response;
-			})
+      });
     },
     indexMethod(index) {
       return index + 1;
     },
     /** 查询备料单列表 */
     getList() {
-
       this.loading = true;
 
       if (this.queryParams.incomeTimeArray.length > 0) {
-				this.queryParams.ymArrayStart = moment(this.queryParams.incomeTimeArray[0]).format('YYYY-MM-DD');
+        this.queryParams.ymArrayStart = moment(
-				this.queryParams.ymArrayEnd = moment(this.queryParams.incomeTimeArray[1]).format('YYYY-MM-DD');
+          this.queryParams.incomeTimeArray[0]
+        ).format("YYYY-MM-DD");
+        this.queryParams.ymArrayEnd = moment(
+          this.queryParams.incomeTimeArray[1]
+        ).format("YYYY-MM-DD");
       }
 
-			getDLTableAvgInfo(this.queryParams).then(response => {
+      getDLTableAvgInfo(this.queryParams).then((response) => {
         this.titleCol1 = [];
         this.titleCol2 = [];
         this.detailTitleCol2 = [];
@@ -279,13 +375,13 @@ export default {
           var titleobj1 = {};
           titleobj1.col1Id = "mcode" + i;
           titleobj1.col1Name = col1[i];
-					this.titleCol1.push(titleobj1)
+          this.titleCol1.push(titleobj1);
         }
         for (let j = 0; j < col2.length; j++) {
           var titleobj2 = {};
           titleobj2.col2Id = "Pcode" + j;
           titleobj2.col2Name = col2[j];
-					this.titleCol2.push(titleobj2)
+          this.titleCol2.push(titleobj2);
         }
 
         for (let i = 0; i < col1.length; i++) {
@@ -293,14 +389,105 @@ export default {
             var detailTitle = {};
             detailTitle.col2Id = "mcode" + i + "Pcode" + j + "Detail";
             detailTitle.col2Name = col2[j];
-						this.detailTitleCol2.push(detailTitle)
+            this.detailTitleCol2.push(detailTitle);
           }
         }
+        this.analyzeList = response;
+        this.tableList = response.dxData;
 
-				this.tableList = response.dxData
+        this.loading = false;
+      });
+    },
+    getanalyzeList() {
+      if (this.queryParams.incomeTimeArray.length > 0) {
+        this.queryParams.ymArrayStart = moment(
+          this.queryParams.incomeTimeArray[0]
+        ).format("YYYY-MM-DD");
+        this.queryParams.ymArrayEnd = moment(
+          this.queryParams.incomeTimeArray[1]
+        ).format("YYYY-MM-DD");
+      }
 
+      getDLTableAvgInfo(this.queryParams).then((response) => {
+        this.detailechartslist = [];
+        this.seriesdata = [];
+        this.legenddata = [];
+        this.xAxisdata = [];
+        let col1 = response.titleCol1;
+        let col2 = response.titleCol2;
+        // mcode0Pcode0
+        for (let i = 0; i < col1.length; i++) {
+          for (let j = 0; j < col2.length; j++) {
+            var detailTitle = {};
+            detailTitle.col1Id = "mcode" + i + "Pcode" + j;
+            detailTitle.col1Name = col1[i];
+            detailTitle.col1xName = col2[j];
+            this.detailechartslist.push(detailTitle);
+          }
+        }
+        console.log(
+          this.detailechartslist,
+          this.seriesdata,
+          this.legenddata,
+          this.xAxisdata
+        );
 
-				this.loading = false;
+        if (this.detailechartslist.length > 0) {
+          this.analyzeList = response;
+          const datalist = this.detailechartslist.map((item) => {
+            const xdata = this.analyzeList.dxData.map((d) => {
+              return (d.ymdms = moment(d.ymdms, "YYYY-MM-DD AVG").format(
+                "YYYY-MM-DD"
+              ));
+            });
+            const datalist = this.analyzeList.dxData.map((d) => d[item.col1Id]);
+            return {
+              ...item,
+              xdata,
+              datalist,
+            };
+          });
+          this.xAxisdata = datalist[0].xdata;
+          this.titledata = datalist[0].col1xName;
+          datalist.forEach((e, index) => {
+            this.legenddata.push(e.col1Name);
+            if (e.houer) {
+              state.xAxisdata = e.col1Name;
+            }
+            var item = {
+              name: e.col1Name,
+              type: "bar",
+              barGap: 0,
+              label: {
+                show: true,
+                position: "insideBottom",
+                distance: 15,
+                align: "left",
+                verticalAlign: "middle",
+                rotate: 90,
+                formatter: "{c}  {name|{a}}",
+                fontSize: 16,
+                rich: {
+                  name: {},
+                },
+              },
+              emphasis: {
+                focus: "series",
+              },
+              data: e.datalist,
+            };
+
+            this.seriesdata.push(item);
+          });
+          this.initChart1();
+        } else {
+          this.$modal.msgError("数据为空");
+          this.detailechartslist = [];
+          this.seriesdata = [];
+          this.legenddata = [];
+          this.xAxisdata = [];
+          (this.titledata = ""), this.initChart1();
+        }
       });
     },
     // 取消按钮
@@ -330,7 +517,7 @@ export default {
         createTime: null,
         updateBy: null,
         updateTime: null,
-				factoryCode: null
+        factoryCode: null,
       };
       this.resetForm("form");
     },
@@ -347,10 +534,10 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-			this.ids = selection.map(item => item.prepareId)
+      this.ids = selection.map((item) => item.prepareId);
-			this.single = selection.length!==1
+      this.single = selection.length !== 1;
-			this.multiple = !selection.length
+      this.multiple = !selection.length;
-      this.selectPrepare = selection
+      this.selectPrepare = selection;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -361,8 +548,8 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-			const prepareId = row.prepareId || this.ids
+      const prepareId = row.prepareId || this.ids;
-			getPrepare(prepareId).then(response => {
+      getPrepare(prepareId).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改备料单";
@@ -370,16 +557,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-			this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.prepareId != null) {
-						updatePrepare(this.form).then(response => {
+            updatePrepare(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-						addPrepare(this.form).then(response => {
+            addPrepare(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -394,20 +581,104 @@ export default {
       let sr = row;
 
       this.queryParams.orderNo = sr.orderNo;
-			getXJCheckTableDetail(this.queryParams).then(response => {
+      getXJCheckTableDetail(this.queryParams).then((response) => {
         this.pOrderTableList = response;
         this.openReport = true;
         this.titleReport = "过程巡检详情";
       });
-
     },
     /** 导出按钮操作 */
     handleExport() {
-			this.download('quality/staticTable/exportDLTable', {
+      this.download(
-				...this.queryParams
+        "quality/staticTable/exportDLTable",
-			}, `DLTable_${new Date().getTime()}.xlsx`)
+        {
+          ...this.queryParams,
+        },
+        `DLTable_${new Date().getTime()}.xlsx`
+      );
+    },
+    // 图表分析
+    handleAnalysis() {
+      this.title = "图表分析";
+
+      //
+      if (
+        this.queryParams.projectNoArray.length > 0 &&
+        this.queryParams.projectNoArray.length < 2
+      ) {
+        // this.projectNoOptions.forEach((item) => {
+        //   if (item.recordId == this.queryParams.projectNoArray) {
+        //     console.log(item);
+        //   }
+        // });
+        this.open = true;
+        this.getanalyzeList();
+      } else if (this.queryParams.projectNoArray.length < 0) {
+        this.$modal.msgError("请选择定量检测项");
+      } else {
+        this.$modal.msgError("请选择一项定量检测项");
       }
+    },
+    // 取消
+    cancel() {
+      this.open = false;
+    },
+    // 加载图表
+    initChart1() {
+      const _this = this;
+      // mcode0Pcode0  mcode1Pcode0
+      var chartDom = document.getElementById("echart1");
+
+      // 检查是否已经初始化了 ECharts 实例
+      if (echarts.getInstanceByDom(chartDom)) {
+        // 销毁已有的实例
+        echarts.dispose(chartDom);
       }
+      var myChart1 = echarts.init(document.querySelector("#echart1"));
+      var option1 = {
+        title: {
+          text: this.titledata,
+          left: "left",
+        },
+        grid: {
+          left: "0.5%",
+          right: "1%",
+          top: "8%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {
+          top: 10,
+          left: "center",
+          data: this.legenddata,
+        },
+        xAxis: [
+          {
+            axisLabel: {
+              rotate: 45,
+              interval: 0,
+            },
+            type: "category",
+            axisTick: { show: false },
+            data: this.xAxisdata,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: this.seriesdata,
+      };
+      myChart1.setOption(option1);
+    },
+  },
 };
 </script>
 <style>
@@ -420,14 +691,12 @@ export default {
   margin-bottom: 15px;
 }
 .my-print-table {
-
 }
 .my-print-foot {
   margin-top: 20px;
 }
 #.el-table .cell {
   white-space: pre-line !important;
-
 }
 .el-table .cell.el-tooltip {
   white-space: pre-wrap; /*这是重点。文本换行*/
@@ -438,5 +707,4 @@ export default {
 .expandClass .el-table__expand-icon {
   display: none;
 }
-
 </style>