可视化话题详情组件2

src/assets/scss/modules/visual/incident-info.scss

@@ -176,6 +176,8 @@
 }
 
 .m-line {
+    min-width: 400px;
+
     .stat {
         margin: 20px 0 10px;
         display: flex;

src/views/modules/visual/basicinfo/cpts/incident-info.vue

@@ -15,7 +15,12 @@
           <div class="info-title">事件内容</div>
           <div class="info-content">{{ info.eventContent }}</div>
           <div class="info-pics">
-            <img :src="src" :key="src" v-for="src in info.eventImgs" />
+            <img
+              :src="src"
+              :key="src"
+              v-for="src in info.eventImgs"
+              @click="watchImg(src)"
+            />
           </div>
           <div class="info-prop">
             <span>提交时间：</span>
@@ -72,6 +77,7 @@
                 :userName="yanPan.icUserName"
                 :singleList="yanPan.categoryList"
                 @user="toUserInfo"
+                @project="toProjectInfo"
               />
               <screen-loading v-else>加载中</screen-loading>
             </div>
@@ -110,7 +116,7 @@
                   <span>当前处理部门：</span>
                   <span>{{ projectInfo.departmentNameList.join("、") }}</span>
                 </div>
-                <div class="info-prop" v-if="projectCate.length>0">
+                <div class="info-prop" v-if="projectCate.length > 0">
                   <span>分类：</span>
                   <div>
                     <div :key="item.name" v-for="item in projectCate">
@@ -118,7 +124,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="info-prop" v-if="projectTag.length>0">
+                <div class="info-prop" v-if="projectTag.length > 0">
                   <span>标签：</span>
                   <div>
                     <div :key="item.name" v-for="item in projectTag">
@@ -208,31 +214,7 @@ import cptTb from "@/views/modules/visual/cpts/tb";
 import analyse from "@/views/modules/visual/cpts/analyse";
 import dateFormat from "dai-js/tools/dateFormat";
 
-export default {
+function iniData() {
-  name: "demandInfo",
-  props: {
-    resiEventId: {
-      type: String,
-      default: "",
-    },
-    epmetUserIdList: {
-      type: Array,
-      default: [],
-    },
-    icResiUserId: {
-      type: String,
-      default: "",
-    },
-  },
-
-  components: {
-    cptCard,
-    cptTb,
-    analyse,
-    screenLoading,
-  },
-
-  data() {
   return {
     groupList: [
       { label: "研判分析" },
@@ -332,12 +314,42 @@ export default {
       ],
     },
   };
+}
+
+export default {
+  name: "demandInfo",
+  props: {
+    resiEventId: {
+      type: String,
+      default: "",
+    },
+    epmetUserIdList: {
+      type: Array,
+      default: [],
+    },
+    icResiUserId: {
+      type: String,
+      default: "",
+    },
   },
 
+  components: {
+    cptCard,
+    cptTb,
+    analyse,
+    screenLoading,
+  },
+
+  data: iniData,
+
   computed: {},
 
   watch: {
     resiEventId() {
+      let data = iniData();
+      Object.keys(data).forEach((k) => {
+        this[k] = data[k];
+      });
       this.getApiData();
     },
   },
@@ -347,6 +359,10 @@ export default {
   },
 
   methods: {
+    watchImg(src) {
+      window.open(src);
+    },
+
     addStartGroupIndex() {
       const { startGroupIndex, groupList } = this;
       if (startGroupIndex < groupList.length - 9) {
@@ -496,6 +512,7 @@ export default {
                 statusName:
                   subItem.projectStatus == "pending" ? "待处理" : "结案",
                 projectId: subItem.projectId,
+                resiEventId: subItem.resiEventId,
               };
             }),
           };
@@ -512,6 +529,11 @@ export default {
         path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`,
       });
     },
+
+    toProjectInfo(item) {
+      console.log(item)
+      this.resiEventId = item.resiEventId;
+    },
   },
 };
 </script>

src/views/modules/visual/basicinfo/cpts/topic-info.vue

@@ -15,7 +15,12 @@
           <div class="info-title">话题内容</div>
           <div class="info-content">{{ info.topicContent }}</div>
           <div class="info-pics">
-            <img :src="src" :key="src" v-for="src in info.topicImgs" />
+            <img
+              :src="src"
+              :key="src"
+              v-for="src in info.topicImgs"
+              @click="watchImg(src)"
+            />
           </div>
           <div class="info-prop">
             <span>发布时间：</span>
@@ -68,6 +73,7 @@
                 :userName="yanPan.icUserName"
                 :singleList="yanPan.categoryList"
                 @user="toUserInfo"
+                @project="toProjectInfo"
               />
               <screen-loading v-else>加载中</screen-loading>
             </div>
@@ -137,7 +143,10 @@
                   </div>
                 </div>
 
-                <line-chart :list="issueChartData" />
+                <line-chart
+                  v-if="issueChartData.length > 0"
+                  :list="issueChartData"
+                />
               </div>
             </div>
             <div v-else class="m-hint">
@@ -266,32 +275,7 @@ import lineChart from "@/views/modules/visual/cpts/line-chart";
 import analyse from "@/views/modules/visual/cpts/analyse";
 import dateFormat from "dai-js/tools/dateFormat";
 
-export default {
+function iniData() {
-  name: "demandInfo",
-  props: {
-    topicId: {
-      type: String,
-      default: "",
-    },
-    epmetUserIdList: {
-      type: Array,
-      default: [],
-    },
-    icResiUserId: {
-      type: String,
-      default: "",
-    },
-  },
-
-  components: {
-    cptCard,
-    cptTb,
-    analyse,
-    screenLoading,
-    lineChart,
-  },
-
-  data() {
   return {
     groupList: [
       { label: "研判分析" },
@@ -416,12 +400,43 @@ export default {
       ],
     },
   };
+}
+
+export default {
+  name: "demandInfo",
+  props: {
+    topicId: {
+      type: String,
+      default: "",
+    },
+    epmetUserIdList: {
+      type: Array,
+      default: [],
+    },
+    icResiUserId: {
+      type: String,
+      default: "",
+    },
   },
 
+  components: {
+    cptCard,
+    cptTb,
+    analyse,
+    screenLoading,
+    lineChart,
+  },
+
+  data: iniData,
+
   computed: {},
 
   watch: {
     topicId() {
+      let data = iniData();
+      Object.keys(data).forEach((k) => {
+        this[k] = data[k];
+      });
       this.getApiData();
     },
   },
@@ -431,6 +446,10 @@ export default {
   },
 
   methods: {
+    watchImg(src) {
+      window.open(src);
+    },
+
     addStartGroupIndex() {
       const { startGroupIndex, groupList } = this;
       if (startGroupIndex < groupList.length - 9) {
@@ -510,7 +529,7 @@ export default {
         comment: { srcList },
       } = this;
       if (srcList[index] && srcList[index].imageList) {
-        window.open(srcList[index].imageList[0].url);
+        this.watchImg(srcList[index].imageList[0].url);
       }
     },
 
@@ -652,6 +671,7 @@ export default {
                 statusName:
                   subItem.projectStatus == "pending" ? "待处理" : "结案",
                 projectId: subItem.projectId,
+                topicId: subItem.topicId,
               };
             }),
           };
@@ -668,6 +688,11 @@ export default {
         path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`,
       });
     },
+
+    toProjectInfo(item) {
+      console.log(item);
+      this.topicId = item.topicId;
+    },
   },
 };
 </script>

src/views/modules/visual/cpts/line-chart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-chart">
-    <canvas id="myChart" width="400" height="260"></canvas>
+    <canvas id="myChart" :width="width" :height="height" />
   </div>
 </template>
 
@@ -189,6 +189,14 @@ export default {
         return {};
       },
     },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 260,
+    },
   },
   data() {
     return {