安全大屏安全隐患列表-部门展示列更新

src/views/bigScreen/securityManage/left2.vue

@@ -23,6 +23,7 @@
           <el-col :span="12" style="height: 100%">
             <el-row style="padding: 0 10px">
               <el-col :span="24" style="margin-bottom: 1px">
+                <!-- 车间安全隐患详情列表 -->
                 <el-row
                   style="
                     font-size: 14px;
@@ -31,12 +32,25 @@
                     background: rgba(0, 255, 255, 0.3);
                   "
                 >
-                  <el-col style="text-align: center" :span="3">序号</el-col>
+                  <!-- <el-col style="text-align: center" :span="2">序号</el-col>
-                  <el-col style="text-align: center" :span="12"
+                  <el-col style="text-align: center" :span="3">车间名</el-col>
+                  <el-col style="text-align: center" :span="10"
                     >安全隐患内容</el-col
                   >
                   <el-col style="text-align: center" :span="4">措施</el-col>
                   <el-col style="text-align: center" :span="3">责任人</el-col>
+                  <el-col style="text-align: center" :span="2">类别</el-col> -->
+                  <el-col
+                    style="text-align: center"
+                    v-for="item in troubleTitleList"
+                    :key="item.id"
+                    :span="
+                      item.name === '隐患内容'
+                        ? getToubleContentSpan(troubleTitleList)
+                        : item.span
+                    "
+                    >{{ item.name }}</el-col
+                  >
                 </el-row>
               </el-col>
               <vue-seamless-scroll
@@ -47,10 +61,103 @@
                   singleHeight: 43,
                 }"
               >
+                <!-- 车间安全隐患列表 -->
+                <!-- todo: 数据项已修改 -->
+                <!-- 将list给表单 -->
                 <ul class="item">
+                  <!-- <li v-for="item in scrollList" :key="item.id">
+                    <el-row style="font-size: 12px">
+                      <el-col style="text-align: center" :span="2">{{
+                        1
+                      }}</el-col>
+                      <el-col
+                        style="text-align: center"
+                        :span="3"
+                        :title="item.dangerContent"
+                        >bbbbbbbbb</el-col
+                      >
+                      <el-col
+                        style="text-align: center"
+                        :span="10"
+                        :title="item.dangerContent"
+                        >bbbbbbbbb</el-col
+                      >
+                      <el-col
+                        style="text-align: center"
+                        :span="4"
+                        title="aaaaaaaaaaaaaaaaaaaa"
+                      >
+                        aaaaaaaaaaaaaaaaaaaa
+                      </el-col>
+                      <el-col style="text-align: center" :span="3"
+                        >dddddddddddddddddddddd</el-col
+                      >
+                      <el-col style="text-align: center" :span="2"
+                        >eeeeeeeeeeeeeeeeeeee</el-col
+                      >
+                    </el-row>
+                  </li> -->
                   <li v-for="item in scrollList" :key="item.id">
-                    <el-row style="font-size: 14px">
+                    <el-row style="font-size: 12px">
+                      <el-col style="text-align: center" :span="2">{{
+                        item.id
+                      }}</el-col>
+
+                      <!-- start -->
+                      <el-col
+                        style="text-align: center"
+                        :span="
+                          item.name === '隐患内容'
+                            ? getToubleContentSpan(scrollList)
+                            : item.span
+                        "
+                        :title="item.value"
+                        >{{ item.value }}</el-col
+                      >
+
+                      <!-- end -->
+
+                      <!-- <el-col
+                        style="text-align: center"
+                        :span="12"
+                        :title="item.dangerContent"
+                        >{{ item.dangerContent }}</el-col
+                      >
+                      <el-col style="text-align: center" :span="4">
+                        <section class="box">
+                          <span
+                            v-if="item.measures == '未整改'"
+                            style="
+                              color: #f64f58;
+                              font-size: 25px;
+                              margin-right: 3px;
+                            "
+                            >·</span
+                          >
+                          <span
+                            v-else
+                            style="
+                              color: #6fd1b4;
+                              font-size: 25px;
+                              margin-right: 3px;
+                            "
+                            >·</span
+                          >
+                          <span v-if="item.measures == '未整改'">未整改</span>
+                          <span v-else>已整改</span>
+                        </section>
+                      </el-col>
                       <el-col style="text-align: center" :span="3">{{
+                        item.personLiable
+                      }}</el-col>
+                      <el-col style="text-align: center" :span="2">{{
+                        item.personLiable
+                      }}</el-col> -->
+                    </el-row>
+                  </li>
+                  <!-- <li v-for="item in scrollList" :key="item.id">
+                    <el-row style="font-size: 12px">
+                      <el-col style="text-align: center" :span="2">{{
                         item.id
                       }}</el-col>
                       <el-col
@@ -86,8 +193,11 @@
                       <el-col style="text-align: center" :span="3">{{
                         item.personLiable
                       }}</el-col>
+                      <el-col style="text-align: center" :span="2">{{
+                        item.personLiable
+                      }}</el-col>
                     </el-row>
-                  </li>
+                  </li> -->
                 </ul>
               </vue-seamless-scroll>
             </el-row>
@@ -110,6 +220,7 @@ import vueSeamlessScroll from "vue-seamless-scroll";
 import echarts from "echarts";
 require("echarts/theme/macarons"); // echarts theme
 import resize from "../../dashboard/mixins/resize";
+import { mapList } from "@/api/vehicleMent/map";
 export default {
   mixins: [resize],
   name: "left2",
@@ -123,6 +234,7 @@ export default {
   },
   data() {
     return {
+      troubleItem: {},
       index: 0,
       colorList,
 
@@ -133,6 +245,8 @@ export default {
       chart1: null,
       chart2: null,
       chart3: null,
+
+      troubleTitleList: [],
     };
   },
   watch: {
@@ -155,6 +269,7 @@ export default {
     },
   },
   mounted() {
+    this.getTroubleItem();
     this.$nextTick(() => {
       this.initChart();
       // this.initChart3()
@@ -168,16 +283,30 @@ export default {
     this.chart = null;
   },
   methods: {
+    // 隐患内容列宽
+    getToubleContentSpan(arr) {
+      var sum = 0;
+      for (var i = 0; i < arr.length; i++) {
+        if (arr[i].name.indexOf("隐患内容") > -1) {
+          sum += 0;
+        } else {
+          sum += arr[i].span;
+        }
+      }
+      return 24 - sum;
+    },
+    // 总厂安全隐患柱图
     initChart() {
       this.request({
-        url: "/hx/securityManagement/hiddenDanger/1",
+        url: "/hx/securityManagement/hiddenDanger",
         method: "get",
         // type=1车间/=2总厂
         params: { type: 2 },
       }).then((res) => {
         if (200 == res.code) {
           let { monthList, mapList, category } = res.data;
-          this.initChart2(category);
+          // 饼图
+          this.initChart2(mapList);
           this.chart1 = echarts.init(this.$refs.chart1);
           this.chart1.setOption({
             // legend: {
@@ -186,6 +315,10 @@ export default {
             // 		color: '#fff',
             // 	},
             // },
+            tooltip: {
+              trigger: "item",
+              //   formatter: "{a} <br/>{b}",
+            },
             grid: {
               left: "3%",
               right: "6%",
@@ -195,7 +328,7 @@ export default {
             xAxis: [
               {
                 type: "category",
-                data: monthList,
+                data: monthList.map((e) => e.month),
                 axisPointer: {
                   type: "shadow",
                 },
@@ -261,8 +394,8 @@ export default {
                 textStyle: {
                   color: "#fff",
                 },
-                startValue: this.dataZoomStart(mapList.length, 4, "start"),
+                startValue: this.dataZoomStart(monthList.length, 4, "start"),
-                endValue: this.dataZoomStart(mapList.length, 4, "end"),
+                endValue: this.dataZoomStart(monthList.length, 4, "end"),
               },
               {
                 type: "inside",
@@ -270,11 +403,14 @@ export default {
             ],
             series: [
               {
-                name: "利润",
+                name: "安全隐患柱状图",
                 type: "bar",
                 barWidth: 20,
-                data: mapList.map((e) => e.total),
+                data: monthList.map((e) => e.count),
-                // data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
+                // data: [
+                //   56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0,
+                //   12.4, 23.3,
+                // ],
                 itemStyle: {
                   color: "rgb(118,196,166)",
                 },
@@ -298,7 +434,8 @@ export default {
         }
       });
     },
-    initChart2(category) {
+    // 总厂安全隐患按类型分类饼图
+    initChart2(mapList) {
       this.chart2 = echarts.init(this.$refs.chart2);
       this.chart2.setOption({
         tooltip: {
@@ -321,7 +458,7 @@ export default {
         },
         series: [
           {
-            name: "型号",
+            name: "类型",
             type: "pie",
             radius: ["40%", "60%"],
             center: ["45%", "45%"],
@@ -342,33 +479,105 @@ export default {
             labelLine: {
               show: false,
             },
-            data: category.map((e) => {
+            data: mapList.map((e) => {
+              console.log(e);
               return {
-                value: e.NUMBERCOUNT,
+                value: e.count,
                 name: e.category,
               };
             }),
             // data: [
-            //   { value: 154, name: '型号一' },
+            //   { value: 154, name: "型号一" },
-            //   { value: 775, name: '型号二' },
+            //   { value: 775, name: "型号二" },
-            //   { value: 679, name: '型号三' },
+            //   { value: 679, name: "型号三" },
-            //   { value: 679, name: '型号四' },
+            //   { value: 679, name: "型号四" },
             // ],
           },
         ],
       });
     },
+    // 车间安全隐患列表
     initChart3() {
       this.request({
-        url: "/hx/securityManagement/hiddenDanger/1",
+        url: "/hx/securityManagement/hiddenDanger",
         method: "get",
         // type=1车间/=2总厂
         params: { type: 1 },
       }).then((res) => {
         if (200 == res.code) {
           this.chart3 = echarts.init(this.$refs.chart3);
-          let { list, allWorkshop, mapList } = res.data;
+          // list 列表数据, mapList柱状图数据
-          this.scrollList = list;
+          let { list, mapList } = res.data;
+          // 根据troubleItem处理list
+          //   {"a1": true, "a2": true}
+          let troubleList = this.troubleItem;
+
+          // 最终想要的数据
+          let troubleTitleList = [];
+          let troubleDataList = [];
+
+          //   troubleTitleList.push({ name: "id", span: 2 });
+          //   troubleTitleList.push({ name: "车间名称", span: 4 });
+          //   troubleTitleList.push({ name: "隐患内容", span: 8 });
+          //   troubleTitleList.push({ name: "措施", span: 5 });
+          //   troubleTitleList.push({ name: "责任人", span: 3 });
+          //   troubleTitleList.push({ name: "类别", span: 2 });
+
+          if (troubleList.responsibleUnit) {
+            troubleTitleList.push({ name: "车间名称", span: 3 });
+          }
+
+          if (troubleList.address && troubleList.existProblem) {
+            troubleTitleList.push({ name: "隐患内容", span: 10 });
+          }
+
+          if (troubleList.updateSuggest && troubleList.tempUpdateMethod) {
+            troubleTitleList.push({ name: "措施", span: 4 });
+          }
+
+          if (troubleList.responsiblePerson) {
+            troubleTitleList.push({ name: "责任人", span: 3 });
+          }
+
+          if (troubleList.category) {
+            troubleTitleList.push({ name: "类别", span: 2 });
+          }
+          this.troubleTitleList = troubleTitleList;
+
+          // 处理list得到troubleDataList
+          let tmpObj = {};
+          list.map((e) => {
+            if (troubleList.responsibleUnit) {
+              tmpObj.name = "车间名称";
+              tmpObj.value = e.responsibleUnit;
+              tmpObj.span = 3;
+            }
+            if (troubleList.address && troubleList.existProblem) {
+              tmpObj.name = "隐患内容";
+              tmpObj.value = e.address + "" + e.existProblem;
+              tmpObj.span = 10;
+            }
+            if (troubleList.updateSuggest && troubleList.tempUpdateMethod) {
+              tmpObj.name = "措施";
+              tmpObj.value = e.updateSuggest + "" + e.tempUpdateMethod;
+              tmpObj.span = 4;
+            }
+            if (troubleList.responsiblePerson) {
+              tmpObj.name = "责任人";
+              tmpObj.value = e.responsibleUnit;
+              tmpObj.span = 3;
+            }
+            if (troubleList.category) {
+              tmpObj.name = "类别";
+              tmpObj.value = e.category;
+              tmpObj.span = 2;
+            }
+            console.log(tmpObj);
+
+            troubleDataList.push(tmpObj);
+          });
+
+          this.scrollList = troubleDataList;
           this.listData2 = Array(this.scrollList.length).fill(0);
           this.$refs.seamlessScroll.reset();
           this.chart3.setOption({
@@ -387,7 +596,7 @@ export default {
             xAxis: [
               {
                 type: "category",
-                data: allWorkshop,
+                data: mapList.map((e) => e.unit),
                 // data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'],
                 axisPointer: {
                   type: "shadow",
@@ -463,33 +672,47 @@ export default {
             ],
             series: [
               {
-                name: "利润",
+                name: "安全隐患数量",
                 type: "bar",
                 barWidth: 20,
-                data: mapList.map((e) => e.total),
+                data: mapList.map((e) => e.count),
                 // data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
                 itemStyle: {
                   color: "rgb(118,196,166)",
                 },
                 barGap: "0",
               },
-              {
+              //   {
-                name: "利润目标完成率",
+              //     name: "利润目标完成率",
-                type: "line",
+              //     type: "line",
-                yAxisIndex: 1,
+              //     yAxisIndex: 1,
-                smooth: false,
+              //     smooth: false,
-                data: mapList.map((e) => e.rate),
+              //     data: mapList.map((e) => e.rate),
-                // data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
+              //     // data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
-                itemStyle: {
+              //     itemStyle: {
-                  color: "#7EA7FC ",
+              //       color: "#7EA7FC ",
-                },
+              //     },
-                symbol: "none",
+              //     symbol: "none",
-              },
+              //   },
             ],
           });
         }
       });
     },
+    // 获取安全隐患展示配置
+    getTroubleItem() {
+      this.request({
+        url: "/business/hxTableConfig",
+        method: "get",
+        params: { tableName: "hx_hidden_danger" },
+      }).then((res) => {
+        if (200 == res.code) {
+          // 如何处理列表数据
+          this.troubleItem = JSON.parse(res.data);
+          console.log(this.troubleItem);
+        }
+      });
+    },
   },
 };
 </script>

src/views/chartList/page5/left4.vue

@@ -31,7 +31,6 @@
             icon="el-icon-s-tools"
             >展示列配置</el-button
           >
-          <el-button @click="getTroubleItem">test</el-button>
         </el-col>
       </el-row>