可视化话题详情组件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,6 +214,108 @@ import cptTb from "@/views/modules/visual/cpts/tb";
 import analyse from "@/views/modules/visual/cpts/analyse";
 import dateFormat from "dai-js/tools/dateFormat";
 
+function iniData() {
+  return {
+    groupList: [
+      { label: "研判分析" },
+      { label: "查看回复" },
+      { label: "查看项目" },
+    ],
+    groupIndex: 0,
+    startGroupIndex: 0,
+
+    info: {
+      eventTime: "",
+      eventContent: "",
+      eventAddress: "",
+      gridName: "",
+      isClosed: true,
+      isResolve: true,
+      isRollback: true,
+      eventImgs: [],
+      eventPerson: [],
+      eventOrg: [],
+      eventPeopleName: "",
+      projectInfo: {
+        projectId: "",
+        operationName: "",
+        operationTime: "",
+        projectDeclare: "",
+      },
+    },
+
+    comment: {
+      loading: true,
+      colList: [
+        {
+          align: "center",
+          width: "20%",
+        },
+        {
+          align: "center",
+          width: "30%",
+        },
+        {
+          align: "left",
+          width: "50%",
+        },
+      ],
+      header: ["回复者", "回复时间", "回复内容"],
+      list: [],
+    },
+
+    projectProcess: [],
+
+    projectInfo: {
+      backGround: "",
+      departmentList: [
+        //   { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] },
+      ],
+      departmentNameList: [],
+      internalRemark: "",
+      isSend: false,
+      locateAddress: "",
+      locateDimension: "",
+      locateLongitude: "",
+      origin: "",
+      originId: "",
+      platformIds: [],
+      processable: false,
+      projectId: "",
+      projectStatus: "pending",
+      projectTitle: "",
+      publicReply: "",
+      returnable: false,
+    },
+
+    projectCate: [],
+    projectTag: [],
+
+    yanPan: {
+      loading: false,
+
+      icResiUserId: "",
+      houseId: "",
+      icUserName: "",
+      epmetUserIdList: [],
+      houseUserList: [
+        // {
+        //   icResiUserId: '',
+        //   icUserName: '',
+        // }
+      ],
+      categoryList: [],
+      projectData: [
+        // {
+        //   firstCategoryCode: '',
+        //   firstCategoryName: '',
+        //   projectList: [],
+        // }
+      ],
+    },
+  };
+}
+
 export default {
   name: "demandInfo",
   props: {
@@ -232,112 +340,16 @@ export default {
     screenLoading,
   },
 
-  data() {
+  data: iniData,
-    return {
-      groupList: [
-        { label: "研判分析" },
-        { label: "查看回复" },
-        { label: "查看项目" },
-      ],
-      groupIndex: 0,
-      startGroupIndex: 0,
-
-      info: {
-        eventTime: "",
-        eventContent: "",
-        eventAddress: "",
-        gridName: "",
-        isClosed: true,
-        isResolve: true,
-        isRollback: true,
-        eventImgs: [],
-        eventPerson: [],
-        eventOrg: [],
-        eventPeopleName: "",
-        projectInfo: {
-          projectId: "",
-          operationName: "",
-          operationTime: "",
-          projectDeclare: "",
-        },
-      },
-
-      comment: {
-        loading: true,
-        colList: [
-          {
-            align: "center",
-            width: "20%",
-          },
-          {
-            align: "center",
-            width: "30%",
-          },
-          {
-            align: "left",
-            width: "50%",
-          },
-        ],
-        header: ["回复者", "回复时间", "回复内容"],
-        list: [],
-      },
-
-      projectProcess: [],
-
-      projectInfo: {
-        backGround: "",
-        departmentList: [
-          //   { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] },
-        ],
-        departmentNameList: [],
-        internalRemark: "",
-        isSend: false,
-        locateAddress: "",
-        locateDimension: "",
-        locateLongitude: "",
-        origin: "",
-        originId: "",
-        platformIds: [],
-        processable: false,
-        projectId: "",
-        projectStatus: "pending",
-        projectTitle: "",
-        publicReply: "",
-        returnable: false,
-      },
-
-      projectCate: [],
-      projectTag: [],
-
-      yanPan: {
-        loading: false,
-
-        icResiUserId: "",
-        houseId: "",
-        icUserName: "",
-        epmetUserIdList: [],
-        houseUserList: [
-          // {
-          //   icResiUserId: '',
-          //   icUserName: '',
-          // }
-        ],
-        categoryList: [],
-        projectData: [
-          // {
-          //   firstCategoryCode: '',
-          //   firstCategoryName: '',
-          //   projectList: [],
-          // }
-        ],
-      },
-    };
-  },
 
   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,6 +275,133 @@ import lineChart from "@/views/modules/visual/cpts/line-chart";
 import analyse from "@/views/modules/visual/cpts/analyse";
 import dateFormat from "dai-js/tools/dateFormat";
 
+function iniData() {
+  return {
+    groupList: [
+      { label: "研判分析" },
+      { label: "话题评论" },
+      { label: "查看议题" },
+      { label: "查看项目" },
+    ],
+    groupIndex: 0,
+    startGroupIndex: 0,
+
+    info: {
+      badgeList: [],
+      closeDetail: {
+        closeUserName: "",
+        closeDateTime: "-1",
+        closeReason: "",
+        closeUserHeadPhoto: "",
+      },
+      dimension: "",
+      hiddenDetail: null,
+      issueId: "",
+      longitude: "",
+      releaseAddress: "",
+      releaseTime: "",
+      releaseUserHeadPhoto: "",
+      releaseUserName: "",
+      shiftIssueFlag: true,
+      topicContent: "",
+      topicId: "",
+      topicImgs: [],
+      topicStatus: "discussing",
+    },
+
+    comment: {
+      loading: true,
+      colList: [
+        {
+          align: "center",
+          width: "20%",
+        },
+        {
+          align: "center",
+          width: "20%",
+        },
+        {
+          align: "left",
+          width: "50%",
+        },
+        {
+          align: "left",
+          width: "10%",
+        },
+      ],
+      header: ["评论者", "评论时间", "评论内容", "评论图片"],
+      list: [],
+    },
+
+    issueInfo: {
+      attitude: "",
+      belongsGridName: "",
+      issueIdea: "",
+      issueInitiator: "",
+      issueStatus: "",
+      issueSuggestion: "",
+      issueTitle: "",
+      joinVote: true,
+      projectId: "",
+      projectStatus: false,
+      publishIdeaFlag: false,
+    },
+
+    issueTrend: {},
+    issueChartData: [],
+
+    projectProcess: [],
+
+    projectInfo: {
+      backGround: "",
+      departmentList: [
+        //   { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] },
+      ],
+      departmentNameList: [],
+      internalRemark: "",
+      isSend: false,
+      locateAddress: "",
+      locateDimension: "",
+      locateLongitude: "",
+      origin: "",
+      originId: "",
+      platformIds: [],
+      processable: false,
+      projectId: "",
+      projectStatus: "pending",
+      projectTitle: "",
+      publicReply: "",
+      returnable: false,
+    },
+
+    projectCate: [],
+    projectTag: [],
+
+    yanPan: {
+      loading: false,
+
+      icResiUserId: "",
+      houseId: "",
+      icUserName: "",
+      epmetUserIdList: [],
+      houseUserList: [
+        // {
+        //   icResiUserId: '',
+        //   icUserName: '',
+        // }
+      ],
+      categoryList: [],
+      projectData: [
+        // {
+        //   firstCategoryCode: '',
+        //   firstCategoryName: '',
+        //   projectList: [],
+        // }
+      ],
+    },
+  };
+}
+
 export default {
   name: "demandInfo",
   props: {
@@ -291,137 +427,16 @@ export default {
     lineChart,
   },
 
-  data() {
+  data: iniData,
-    return {
-      groupList: [
-        { label: "研判分析" },
-        { label: "话题评论" },
-        { label: "查看议题" },
-        { label: "查看项目" },
-      ],
-      groupIndex: 0,
-      startGroupIndex: 0,
-
-      info: {
-        badgeList: [],
-        closeDetail: {
-          closeUserName: "",
-          closeDateTime: "-1",
-          closeReason: "",
-          closeUserHeadPhoto: "",
-        },
-        dimension: "",
-        hiddenDetail: null,
-        issueId: "",
-        longitude: "",
-        releaseAddress: "",
-        releaseTime: "",
-        releaseUserHeadPhoto: "",
-        releaseUserName: "",
-        shiftIssueFlag: true,
-        topicContent: "",
-        topicId: "",
-        topicImgs: [],
-        topicStatus: "discussing",
-      },
-
-      comment: {
-        loading: true,
-        colList: [
-          {
-            align: "center",
-            width: "20%",
-          },
-          {
-            align: "center",
-            width: "20%",
-          },
-          {
-            align: "left",
-            width: "50%",
-          },
-          {
-            align: "left",
-            width: "10%",
-          },
-        ],
-        header: ["评论者", "评论时间", "评论内容", "评论图片"],
-        list: [],
-      },
-
-      issueInfo: {
-        attitude: "",
-        belongsGridName: "",
-        issueIdea: "",
-        issueInitiator: "",
-        issueStatus: "",
-        issueSuggestion: "",
-        issueTitle: "",
-        joinVote: true,
-        projectId: "",
-        projectStatus: false,
-        publishIdeaFlag: false,
-      },
-
-      issueTrend: {},
-      issueChartData: [],
-
-      projectProcess: [],
-
-      projectInfo: {
-        backGround: "",
-        departmentList: [
-          //   { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] },
-        ],
-        departmentNameList: [],
-        internalRemark: "",
-        isSend: false,
-        locateAddress: "",
-        locateDimension: "",
-        locateLongitude: "",
-        origin: "",
-        originId: "",
-        platformIds: [],
-        processable: false,
-        projectId: "",
-        projectStatus: "pending",
-        projectTitle: "",
-        publicReply: "",
-        returnable: false,
-      },
-
-      projectCate: [],
-      projectTag: [],
-
-      yanPan: {
-        loading: false,
-
-        icResiUserId: "",
-        houseId: "",
-        icUserName: "",
-        epmetUserIdList: [],
-        houseUserList: [
-          // {
-          //   icResiUserId: '',
-          //   icUserName: '',
-          // }
-        ],
-        categoryList: [],
-        projectData: [
-          // {
-          //   firstCategoryCode: '',
-          //   firstCategoryName: '',
-          //   projectList: [],
-          // }
-        ],
-      },
-    };
-  },
 
   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 {