对接首页不满意事项月度趋势分析

src/views/modules/home/index.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div>
     <div class="g-row">
@@ -27,12 +26,12 @@
                          :placeholder="typePlaceholder[searchData.type]
 										"
                          v-model="searchData.searchKey"
-                         @keyup.enter="handleClickSearchBtn" />
+                         @keyup.enter="handleClickSearchBtn"/>
 
                   <div class="close-btn"
                        v-if="searchData.searchKey != ''"
                        @click="searchData.searchKey = ''">
-                    <img src="@/assets/img/shequ/close.png" />
+                    <img src="@/assets/img/shequ/close.png"/>
                   </div>
                 </div>
                 <div class="btn"
@@ -46,19 +45,20 @@
         </div>
         <div class=" m-pan m-box">
           <div class="header">
-            <img src="@/assets/images/index/title-icon-sqzl.png" />
+            <img src="@/assets/images/index/title-icon-sqzl.png"/>
             <span>组织总览</span>
           </div>
           <div class="flex_box">
             <div class="cnt">
               <div class="cnt-left">
                 <div class="subtitle">
-                  <img src="@/assets/images/index/i-sqjj.png" />
+                  <img src="@/assets/images/index/i-sqjj.png"/>
                   <span>组织简介</span>
                 </div>
                 <p>
                   {{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为{{
-										pandectData.underCount }}个{{
+                    pandectData.underCount
+                  }}个{{
                     pandectData.underName
                   }}，</span> 现有房屋{{ pandectData.homeCount }}间，自住房屋{{
                     pandectData.selfStay
@@ -66,11 +66,15 @@
                     pandectData.rentOut
                   }}间、闲置房屋{{
                     pandectData.vacantHouse
-									}}间，现有居民{{pandectData.resiCount}}户、{{pandectData.totalResidents}}人，其中常住人口{{pandectData.permanentResiCount}}人，流动人口{{pandectData.floatingResiCount}}人，各类群体分布如下：
+                  }}间，现有居民{{ pandectData.resiCount }}户、{{
+                    pandectData.totalResidents
+                  }}人，其中常住人口{{ pandectData.permanentResiCount }}人，流动人口{{
+                    pandectData.floatingResiCount
+                  }}人，各类群体分布如下：
                 </p>
 
                 <div class="subtitle">
-                  <img src="@/assets/images/index/i-fxjg.png" />
+                  <img src="@/assets/images/index/i-fxjg.png"/>
                   <span>分析结果</span>
                 </div>
 
@@ -160,11 +164,12 @@
       <div class="g-row-right">
         <div class="m-box m-tx">
           <div class="header">
-            <img src="@/assets/images/index/title-icon-zntx.png" />
+            <img src="@/assets/images/index/title-icon-zntx.png"/>
             <span>智能提醒</span>
           </div>
           <div class="more"
-               @click="toNoticePage">更多></div>
+               @click="toNoticePage">更多>
+          </div>
           <div class="cnt"
                v-if="noticeData.length > 0">
             <div @click="handleClickNotice(item)"
@@ -191,7 +196,7 @@
           <div class="cnt"
                v-else>
             <div class="empty">
-              <img src="~@/assets/images/shuju/renfang/index/empty.png" />
+              <img src="~@/assets/images/shuju/renfang/index/empty.png"/>
               <span>暂无提醒～</span>
             </div>
           </div>
@@ -199,7 +204,7 @@
         <div class="m-box m-tb">
           <div class="wrap">
             <div class="header">
-              <img src="@/assets/images/index/title-icon-zntb.png" />
+              <img src="@/assets/images/index/title-icon-zntb.png"/>
               <span>不满意事项月度趋势分析</span>
             </div>
           </div>
@@ -211,21 +216,21 @@
         </div>
       </div>
     </div>
-    <fastcall ref="fastcall" />
+    <fastcall ref="fastcall"/>
   </div>
 </template>
 <script>
-import { requestPost, requestGet } from "@/js/dai/request";
+import {requestPost, requestGet} from "@/js/dai/request";
 import resiCategoryMap from "@/views/business/resi-category-map.js";
-import { mapGetters } from "vuex";
+import {mapGetters} from "vuex";
 import nextTick from "dai-js/tools/nextTick";
 import fastcall from "@/views/modules/cpts/fastcall";
 import * as echarts from 'echarts';
 
 export default {
-  components: { fastcall },
+  components: {fastcall},
 
-  data () {
+  data() {
     return {
       searchStatus: "ini", //ing over
       searchData: {
@@ -269,63 +274,11 @@ export default {
 
       activeName: 'resi',
 
-      option: {
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          data: ['12345不满意数', '省满意调查不满意数', '社区自评不满意数'],
-          bottom: '10%',
-          icon: 'rect',
-          itemWidth: 20,
-          itemHeight: 5,
-          itemGap: 20,
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '25%',
-          containLabel: true
-        },
-        toolbox: {
-          // feature: {
-          // 	saveAsImage: {}
-          // }
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [
-          {
-            name: '12345不满意数',
-            type: 'line',
-            stack: 'Total',
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: '省满意调查不满意数',
-            type: 'line',
-            stack: 'Total',
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-            name: '社区自评不满意数',
-            type: 'line',
-            stack: 'Total',
-            data: [150, 232, 201, 154, 190, 330, 410]
-          }
-        ]
-      },
       myChart: {}
     }
   },
   computed: {
-    maxTableHeight () {
+    maxTableHeight() {
       // return this.clientHeight - 450;
       return 420;
     },
@@ -347,7 +300,7 @@ export default {
       immediate: true,
     },
   },
-  mounted () {
+  mounted() {
     this.getApiData();
     this.$nextTick(() => {
       this.initChart()
@@ -358,20 +311,65 @@ export default {
     );
   },
   methods: {
-    initChart () {
+    initChart() {
+      this.$http.get('/governance/satisfactionOverview/notSatisfactionTrend').then(({data: {data}}) => {
         this.myChart = echarts.init(document.getElementById('my_chart'));
-      this.myChart.setOption(this.option)
+        let series = []
+        console.log(data,'datadatadata')
+        data.series.forEach(item => {
+          series.push({
+            ...item,
+            type: 'line',
+            stack: 'Total',
+          })
+        })
+        let option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: data.series.map(item => item.name),
+            bottom: '10%',
+            icon: 'rect',
+            itemWidth: 20,
+            itemHeight: 5,
+            itemGap: 20,
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '25%',
+            containLabel: true
+          },
+          toolbox: {
+            // feature: {
+            // 	saveAsImage: {}
+            // }
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: data.monthTimes.map(item => this.$moment(item).format('M') + '月')
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series
+        }
+        this.myChart.setOption(option, true)
         window.addEventListener('resize', this.handleWindowResize);
+      })
+
     },
-    handleWindowResize () {
+    handleWindowResize() {
       if (this.myChart) {
         this.myChart.resize();
       }
     },
-    searchDataTab (str) {
+    searchDataTab(str) {
       this.searchData.type = str;
     },
-    handleClickCategory (item) {
+    handleClickCategory(item) {
       this.$router.push({
         name: "base-resi",
         params: {
@@ -380,18 +378,18 @@ export default {
       });
 
     },
-    async readClearOne (item) {
+    async readClearOne(item) {
       console.log("item", item)
       const url = `/message/intelligentMessage/msg/clearOne/?msgId=${item.id}`
-      const { data, code, msg } = await requestPost(url)
+      const {data, code, msg} = await requestPost(url)
       if (code == 0) {
         this.getNoticeData()
       } else if (code >= 8000) {
         this.$message.error(msg)
       }
     },
-    handleClickNotice (item) {
+    handleClickNotice(item) {
-      const { msgType, targetId } = item;
+      const {msgType, targetId} = item;
       this.readClearOne(item)
       if (msgType == "community_house") {
         this.$refs.fastcall.showHouseInfo(targetId);
@@ -400,13 +398,13 @@ export default {
       }
     },
 
-    toNoticePage () {
+    toNoticePage() {
       this.$router.push({
         path: "/main/home-notice",
       });
     },
 
-    toSearchPage (type, searchKey) {
+    toSearchPage(type, searchKey) {
       this.$router.push({
         path: "/main/shequ-chaxun"
       });
@@ -414,9 +412,9 @@ export default {
       localStorage.setItem('homeSearchKey', searchKey)
     },
 
-    handleClickSearchBtn (str) {
+    handleClickSearchBtn(str) {
       const {
-        searchData: { type, searchKey },
+        searchData: {type, searchKey},
       } = this;
       if (str) {
         this.toSearchPage(type, searchKey);
@@ -426,7 +424,7 @@ export default {
       this.toSearchPage(type, searchKey);
     },
 
-    async getApiData () {
+    async getApiData() {
       await this.getOrgData();
       this.getWarningList();
       this.getZnycList();
@@ -435,14 +433,14 @@ export default {
     },
 
     //加载组织数据
-    async getOrgData () {
+    async getOrgData() {
       const url = "/gov/org/agency/maporg";
       let params = {
         orgId: "",
         level: "",
       };
 
-      const { data, code, msg } = await requestPost(url, params);
+      const {data, code, msg} = await requestPost(url, params);
 
       if (code === 0) {
         this.orgData = data;
@@ -452,14 +450,14 @@ export default {
     },
 
     //加载组织数据
-    async getPandectData () {
+    async getPandectData() {
       const url = "/actual/base/residentHouseMerge/communityOverview";
       let params = {
         // orgId: "",
         // level: "",
       };
 
-      const { data, code, msg } = await requestGet(url, params);
+      const {data, code, msg} = await requestGet(url, params);
 
       if (code === 0) {
         if (data) {
@@ -471,13 +469,13 @@ export default {
     },
 
     //加载组织数据
-    async getNoticeData () {
+    async getNoticeData() {
       const url = "/message/intelligentMessage/list";
       let params = {
         last: "10",
       };
 
-      const { data, code, msg } = await requestGet(url, params);
+      const {data, code, msg} = await requestGet(url, params);
 
       if (code === 0) {
         if (data) {
@@ -489,7 +487,7 @@ export default {
     },
 
     //加载组织数据
-    async getWarningList () {
+    async getWarningList() {
       const url = "/actual/base/resiCategory/categoryCountList";
       let params = {
         // id: this.orgData.id,
@@ -497,7 +495,7 @@ export default {
       };
 
       this.resiCategory.loading = true;
-      const { data, code, msg } = await requestGet(url, params);
+      const {data, code, msg} = await requestGet(url, params);
       this.resiCategory.loading = false;
 
       if (code === 0) {
@@ -520,7 +518,7 @@ export default {
       }
     },
     //加载智能预测数据
-    async getZnycList () {
+    async getZnycList() {
       const url = "/actual/base/resiCategory/intelligentPredictioncategoryCountList";
       // const url = "/actual/base/resiCategory/categoryCountList";
       let params = {
@@ -529,7 +527,7 @@ export default {
       };
 
       this.znycCategory.loading = true;
-      const { data, code, msg } = await requestGet(url, params);
+      const {data, code, msg} = await requestGet(url, params);
       this.znycCategory.loading = false;
 
       if (code === 0) {