安全隐患列表展示自适应

src/views/bigScreen/securityManage/left2.vue

@@ -33,10 +33,8 @@
                   "
                 >
                   <!-- <el-col style="text-align: center" :span="2">序号</el-col>
-                  <el-col style="text-align: center" :span="3">车间名</el-col>
+                  <el-col style="text-align: center" :span="4">车间名称</el-col>
-                  <el-col style="text-align: center" :span="10"
+                  <el-col style="text-align: center" :span="8">隐患内容</el-col>
-                    >安全隐患内容</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> -->
@@ -44,11 +42,7 @@
                     style="text-align: center"
                     v-for="item in troubleTitleList"
                     :key="item.id"
-                    :span="
+                    :span="item.span"
-                      item.name === '隐患内容'
-                        ? getToubleContentSpan(troubleTitleList)
-                        : item.span
-                    "
                     >{{ item.name }}</el-col
                   >
                 </el-row>
@@ -65,94 +59,24 @@
                 <!-- 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: 12px">
-                      <el-col style="text-align: center" :span="2">{{
-                        item.id
-                      }}</el-col>
-
                       <!-- start -->
+                      <!-- <el-col
+                        style="text-align: center"
+                        :span="item.span"
+                        :title="item.value"
+                        >{{ item.span }}</el-col
+                      > -->
                       <el-col
                         style="text-align: center"
-                        :span="
+                        v-for="titem in troubleTitleList"
-                          item.name === '隐患内容'
+                        :span="titem.span"
-                            ? getToubleContentSpan(scrollList)
+                        :title="item[titem.name]"
-                            : item.span
+                        >{{ item[titem.name] }}</el-col
-                        "
-                        :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">
@@ -480,7 +404,6 @@ export default {
               show: false,
             },
             data: mapList.map((e) => {
-              console.log(e);
               return {
                 value: e.count,
                 name: e.category,
@@ -516,23 +439,17 @@ export default {
           let troubleTitleList = [];
           let troubleDataList = [];
 
-          //   troubleTitleList.push({ name: "id", span: 2 });
+          troubleTitleList.push({ name: "序号", 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 });
+            troubleTitleList.push({ name: "车间名称", span: 4 });
           }
 
           if (troubleList.address && troubleList.existProblem) {
-            troubleTitleList.push({ name: "隐患内容", span: 10 });
+            troubleTitleList.push({ name: "隐患内容", span: 8 });
           }
 
           if (troubleList.updateSuggest && troubleList.tempUpdateMethod) {
-            troubleTitleList.push({ name: "措施", span: 4 });
+            troubleTitleList.push({ name: "措施", span: 5 });
           }
 
           if (troubleList.responsiblePerson) {
@@ -542,40 +459,43 @@ export default {
           if (troubleList.category) {
             troubleTitleList.push({ name: "类别", span: 2 });
           }
+
+          // 求隐患内容以外所有列span和，然后修改隐患内容的span
+          let a = this.getToubleContentSpan(troubleTitleList);
+          troubleTitleList.map((e) => {
+            if (e.name.indexOf("隐患内容") > -1) e.span = a;
+          });
+
           this.troubleTitleList = troubleTitleList;
 
           // 处理list得到troubleDataList
           let tmpObj = {};
-          list.map((e) => {
+          list.map((e, i) => {
+            //   let obj = {};
+            tmpObj["序号"] = i;
             if (troubleList.responsibleUnit) {
-              tmpObj.name = "车间名称";
+              tmpObj["车间名称"] = e.responsibleUnit;
-              tmpObj.value = e.responsibleUnit;
-              tmpObj.span = 3;
             }
             if (troubleList.address && troubleList.existProblem) {
-              tmpObj.name = "隐患内容";
+              tmpObj["隐患内容"] = e.address + " " + e.existProblem;
-              tmpObj.value = e.address + "" + e.existProblem;
-              tmpObj.span = 10;
             }
             if (troubleList.updateSuggest && troubleList.tempUpdateMethod) {
-              tmpObj.name = "措施";
+              tmpObj["措施"] = e.updateSuggest + " " + e.tempUpdateMethod;
-              tmpObj.value = e.updateSuggest + "" + e.tempUpdateMethod;
-              tmpObj.span = 4;
             }
             if (troubleList.responsiblePerson) {
-              tmpObj.name = "责任人";
+              tmpObj["责任人"] = e.responsibleUnit;
-              tmpObj.value = e.responsibleUnit;
-              tmpObj.span = 3;
             }
             if (troubleList.category) {
-              tmpObj.name = "类别";
+              tmpObj["类别"] = e.category;
-              tmpObj.value = e.category;
-              tmpObj.span = 2;
             }
             console.log(tmpObj);
 
             troubleDataList.push(tmpObj);
           });
+          console.log("scrollList");
+          console.log(troubleDataList);
+
+          //   得到
 
           this.scrollList = troubleDataList;
           this.listData2 = Array(this.scrollList.length).fill(0);

src/views/chartList/page5/left4.vue

@@ -123,9 +123,13 @@
       width="500px"
     >
       <el-checkbox-group v-model="checkList" @change="handleTroubleItemChanged">
-        <el-checkbox v-for="item in listTitles" :label="item" :key="item">{{
+        <el-checkbox
-          item
+          v-for="item in listTitles"
-        }}</el-checkbox>
+          :label="item"
+          :key="item"
+          :disabled="item === '隐患内容'"
+          >{{ item }}</el-checkbox
+        >
       </el-checkbox-group>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitTroubleItem">确 定</el-button>