11/22/17:20 民意感知1.5

大屏地图

src/api/data/basicScreen.ts

@@ -70,3 +70,14 @@ export function getProblemBusinessRate(times) {
 }
 
 
+/**
+ * 地图数据
+ */
+
+export function getGobalMap(times) {
+    return request.get({
+        url: `/datav/dataGobalScreen/getMap?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+

src/api/screen/jwpy.ts

@@ -97,3 +97,43 @@ export function GetDITU() {
         body: formData
     });
 }
+
+
+
+export function GetMyPeriod() {
+    let formData = new FormData();
+    formData.append("PeriodId", 6);
+    formData.append("PeriodSonID", -1);
+    formData.append("OrgNo", 4301);
+    formData.append("TaskID", 2);
+    return outrequest.post({
+        url: `/out-police-service/api/DSJ/GetMyPeriod`,
+        body: formData
+    });
+}
+
+
+
+export function GetCustomOffLineSonPeriodSet() {
+    let formData = new FormData();
+    formData.append("PeriodId", 6);
+    formData.append("PeriodSonID", -1);
+    formData.append("OrgNo", 4301);
+    formData.append("TaskID", 2);
+    return outrequest.post({
+        url: `/out-police-service/api/Survey/GetCustomOffLineSonPeriodSet`,
+        body: formData
+    });
+}
+
+export function qx_get() {
+    let formData = new FormData();
+    formData.append("PeriodId", 6);
+    formData.append("PeriodSonID", -1);
+    formData.append("OrgNo", 4301);
+    formData.append("TaskID", 2);
+    return outrequest.post({
+        url: `/out-police-service/api/ShareSystem/qx_get`,
+        body: formData
+    });
+}

src/views/datav/Gobal.vue

@@ -145,17 +145,16 @@ import {
   getAllGobalCount,
   getBusinessRate,
   getGobalRecentlyTrendByMonth,
-  getOrganizationRank, getProblemBusinessRate, getStrongProblemRate
+  getOrganizationRank, getProblemBusinessRate, getStrongProblemRate, getGobalMap
 } from "@/api/data/basicScreen.ts";
-// region  各种数据
+// region  各种数据变量
 const activeOrgTab = ref("1");
 const fxsjlist = ref([]);  // 分县市区机构问题排名
 const jsdwlist = ref([]);  // 局属单位机构问题排名
 const ywzblist = ref([]);  // 业务类型占比
 const wtlxlist = ref([]);  // 问题类型占比
 const tcwtlist = ref([]);  // 突出问题排名
-const mapData = ref([]);  // 地图数据
-let gobalTempMapVoList = ref([
+const gobalTempMapVoList = ref([
   {
     "name": "天心分局",
     "totalPro": 11,
@@ -166,10 +165,8 @@ let gobalTempMapVoList = ref([
     "reviewPro": 11
   }
 ]);  // 地图临时测试数据
-// endregion
 const router = useRouter();
-
-
+// endregion
 
 
 // region问题趋势线状图
@@ -315,7 +312,6 @@ function getData() {
   });
   getAllGobalCount(time.value).then((res) => {
     overview.value = res.overview;
-    gobalTempMapVoList.value = res.gobalTempMapVoList;
   });
   getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => {
     proTrend.value.xAxis.data = res.monthList;
@@ -327,6 +323,9 @@ function getData() {
   getProblemBusinessRate(time.value).then((res) => {
     wtlxlist.value = res.wtlxlist;
   });
+  getGobalMap(time.value).then(res => {
+    gobalTempMapVoList.value = res.gobalTempMapVoList;
+  })
 }
 
 onMounted(() => {
@@ -337,6 +336,7 @@ watch(time, () => {
 });
 // endregion
 
+
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -352,8 +352,6 @@ const colors = [
   },
 ];
 
-
-
 // region 地图相关
 echarts.registerMap("changsha", changshaMap);
 const option = ref({
@@ -411,7 +409,6 @@ const option = ref({
       color: "#fff",
     },
     calculable: true,
-
   },
   series: [
     {
@@ -439,7 +436,6 @@ const option = ref({
           name: item.name,
           value: item.totalPro,
         };
-        console.log(item.totalPro); // 打印每个数据项
         return data;
       })
     }

src/views/datav/Jwpy.vue

@@ -10,7 +10,7 @@
                 <el-col :span="5">
                   <div class="descriptions_cell text-center margin-top-30">
                     <div class="descriptions_content">
-                      {{ reviewOk[0].State2 }}
+                      {{ reviewOk[0].dczl }}
                     </div>
                     <div class="descriptions_label">
                       调查总量
@@ -49,7 +49,7 @@
                 </el-col>
                 <el-col :span="4">
                   <div class="descriptions_cell text-center margin-top-30">
-                    <div class="descriptions_content">
+                    <div class="descriptions_content yellow">
                       {{ reviewOk[0].bmys }}
                     </div>
                     <div class="descriptions_label">
@@ -73,7 +73,7 @@
                         </div>
                       </div>
                       <div class="descriptions_cell text-center height-118">
-                        <div class="descriptions_content">
+                        <div class="descriptions_content yellow">
                           {{ dcmyd.length > 0 && dcmyd[0] && dcmyd[0].FinalRP !== undefined ? dcmyd[0].FinalRP : '0' }}
                         </div>
                         <div class="descriptions_label ">
@@ -95,15 +95,16 @@
             <div style="background-color:#04144E; ">
               <h3 style="color: white">业务满意率</h3>
               <el-table
+                  :highlight-current-row="false"
+                  :highlight-hover-row='false'
                   :data="tableData"
-                  height="300"
+                  height="350"
                   :summary-cell-style="summaryCellStyle"
                   :summary-method="getSummaries"
                   :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
                   :header-cell-style="headerCellStyle"
                   :row-style="tableRowStyle"
                   :show-summary='true'
-                  :highlight-current-row="false"
               >
                 <el-table-column prop="Name" label="单项业务" width="82px"/>
                 <el-table-column prop="sdcl" label="有效数" width="72px"/>
@@ -114,27 +115,65 @@
                 </el-table-column>
                 <el-table-column prop="sbmys" label="不满意数" width="72px"/>
                 <el-table-column prop="smyl" label="满意率" width="72px"/>
-                <el-table-column prop="smyltb" label="同比" width="86px"/>
+                <el-table-column prop="smyltb" label="同比" width="86px">
+                  <template v-slot="scope">
+                    <span :style="getCellStyle(scope.row.smyltb)">{{ scope.row.smyltb }}</span>
+                  </template>
+                </el-table-column>
               </el-table>
             </div>
           </el-col>
 
           <el-col :span="12">
-            <div class="datav-col">
-              <el-row :gutter="6">
+            <el-row justify="center" :gutter="20" class="mt-16">
               <el-col :span="4">
-                  <!--                  <datav-select></datav-select>-->
+                <el-select v-model="selectYear" placeholder="请选择" class="custom-select" @change="handleYearChange">
+                  <el-option
+                      v-for="item in years"
+                      :key="item.ID"
+                      :label="item.PeriodName"
+                      :value="item.ID">
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="4">
+                <el-select v-model="selectMonth" placeholder="请选择">
+                  <el-option
+                      v-for="item in months"
+                      :key="item.ID"
+                      :label="item.SonPeriodName"
+                      :value="item.ID">
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="6">
+                <el-tree-select
+                    v-model="selectOrg"
+                    :data="org"
+                    check-strictly
+                    :props="treeProps"
+                    :expand-on-click-node="false"
+                    node-key="id"
+                    :style="{ fontSize: '12px', }"
+                    @check-change="handleCheckChange"
+                />
+              </el-col>
+              <el-col :span="4">
+                <el-select v-model="text" placeholder="请选择">
+                  <el-option
+                      v-for="item in content"
+                      :key="item"
+                      :label="item"
+                      :value="item">
+                  </el-option>
+                </el-select>
               </el-col>
-
             </el-row>
-
-            </div>
             <v-charts
                 style="height: 450px"
                 :option="option"
                 autoresize
             />
-
             <datav-card title="综合滿意度排名">
               <div class="common-layout">
                 <el-container>
@@ -144,12 +183,12 @@
                       <div style="background-color:#04144E; ">
                         <el-table
                             :data="tableData1"
-                            height="106"
+                            height="70"
                             :summary-cell-style="summaryCellStyle"
                             :summary-method="getSummaries"
                             :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
                             :header-cell-style="headerCellStyle"
-                            :row-style="tableRowStyle"
+                            :row-style="tableRowStyleTableData1"
                             :show-summary='false'
                             :highlight-current-row='false'
                         >
@@ -157,7 +196,11 @@
                           <el-table-column prop="OrganizeName" label="市州考评" width="149"/>
                           <el-table-column prop="FinalRP" label="滿意度" width="65"/>
                           <el-table-column prop="TBRp" label="上期满意度" width="65"/>
-                          <el-table-column prop="TBRpts" label="同比上期" width="65"/>
+                          <el-table-column prop="TBRpts" label="同比上期" width="86px">
+                            <template v-slot="scope">
+                              <span :style="getCellStyle(scope.row.TBRpts)">{{ scope.row.TBRpts }}</span>
+                            </template>
+                          </el-table-column>
                         </el-table>
                       </div>
                     </el-header>
@@ -170,15 +213,18 @@
                             :summary-method="getSummaries"
                             :style="{ width: '100%', marginTop: '70px', fontSize: fontSize + 'px'  }"
                             :header-cell-style="headerCellStyle"
-                            :row-style="tableRowStyle"
+                            :row-style="tableRowStyleTableData2"
                             :show-summary='false'
-                            :highlight-current-row='false'
                         >
                           <el-table-column prop="MydRanking" label="排名"/>
                           <el-table-column prop="OrganizeName" label="县市考评"/>
                           <el-table-column prop="FinalRP" label="滿意度"/>
                           <el-table-column prop="TBRp" label="上期满意度"/>
-                          <el-table-column prop="TBRpts" label="同比上期"/>
+                          <el-table-column prop="TBRpts" label="同比上期" width="86px">
+                            <template v-slot="scope">
+                              <span :style="getCellStyle(scope.row.TBRpts)">{{ scope.row.TBRpts }}</span>
+                            </template>
+                          </el-table-column>
                         </el-table>
                       </div>
                     </el-main>
@@ -200,14 +246,17 @@
                         <el-table-column prop="OrganizeName" label="区"/>
                         <el-table-column prop="FinalRP" label="滿意度"/>
                         <el-table-column prop="TBRp" label="上期满意度"/>
-                        <el-table-column prop="TBRpts" label="同比上期"/>
+                        <el-table-column prop="TBRpts" label="同比上期" width="86px">
+                          <template v-slot="scope">
+                            <span :style="getCellStyle(scope.row.TBRpts)">{{ scope.row.TBRpts }}</span>
+                          </template>
+                        </el-table-column>
                       </el-table>
                     </div>
                   </el-aside>
                 </el-container>
               </div>
             </datav-card>
-
           </el-col>
 
           <el-col :span="6">
@@ -233,7 +282,7 @@
               </h3>
               <el-table
                   :data="tableData4"
-                  height="300"
+                  height="350"
                   :summary-cell-style="summaryCellStyle"
                   :summary-method="getSummaries"
                   :style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px'  }"
@@ -245,6 +294,7 @@
                 <el-table-column prop="sdcl" label="有效数"/>
                 <el-table-column prop="bmyzs" label="省不满意数"/>
                 <el-table-column prop="LastDayQACount" label="新增调查数"/>
+
               </el-table>
             </div>
           </el-col>
@@ -261,21 +311,66 @@
 import vCharts from "vue-echarts";
 import changshaMap from "@/assets/data/changsha.json";
 import * as echarts from "echarts/core";
-import {GetBMYYBQS, GetDCQK, GetDITU, GetDXFX, GetGLFW, GetRCSQQK, GetZHMYLPM, GetZRSJXF} from "@/api/screen/jwpy.ts";
-
-
-// region   左边
+import {
+  GetBMYYBQS, GetCustomOffLineSonPeriodSet,
+  GetDCQK,
+  GetDITU,
+  GetDXFX,
+  GetGLFW,
+  GetMyPeriod,
+  GetRCSQQK,
+  GetZHMYLPM,
+  GetZRSJXF, qx_get
+} from "@/api/screen/jwpy.ts";
+
+
+// region  变量
 // 调查情况
 const reviewOk = ref([{}]);
 // 调查滿意度
 const dcmyd = ref([]);
-// endregion
-
-// region   右边
+// 不满意样本趋势
 const bmyybqs = ref([]);
+// 单项分析
 const dxfx = ref([]);
+// 地图
+const tempMap = ref([])
+// 年份
+const years = ref([{}])
+const selectYear = ref();
+const tempMonths = ref([{}])
+const months = ref([{}])
+const selectMonth = ref();
+// 组织机构
+const org = ref([])
+const text = ref("省（全市）")
+const content = ["省（全市）"]
+const selectOrg=ref()
 // endregion
 
+// 监听年份变化，更新月份数据
+watch(selectYear, (newYearID) => {
+  if (newYearID) {
+    months.value = tempMonths.value.filter(item => item.PeriodID === newYearID);
+    selectMonth.value = null;  // 重置月份选择
+  } else {
+    months.value = [];           // 清空月份数据
+  }
+});
+
+
+// 树形节点的映射字段
+const treeProps = {
+  label: 'text',
+  children: 'children'
+};
+
+// 选中节点变化的处理函数
+const handleCheckChange = (checkedNodes, checkedKeys) => {
+  console.log('选中的节点:', checkedNodes);
+  console.log('选中的节点ID:', checkedKeys);
+};
+
 
 echarts.registerMap("changsha", changshaMap);
 let mapDataList = reactive([
@@ -301,30 +396,9 @@ const option = {
     },
   },
   tooltip: {
-    show: true,
+    show: false,
     trigger: "item",
     position: "right",
-    formatter: function (params) {
-      if (typeof params.data === "undefined") {
-        console.log(params);
-      } else {
-        console.log(params);
-        return `<div class="tooltip">
-          <div class="tooltip-title">${params.name}</div>
-          <div class="tooltip-content">
-            <ul class="tooltip-ul">
-              <li>信访总件数 <span>${params.data.todaysum}</span></li>
-              <li>国家信访 <span>${params.data.allsum}</span>
-              </li>
-              <li>公安部信访 <span>${params.data.completed}</span>
-              </li>
-              <li>局长信箱 <span>${params.data.completedrate}</span></li>
-              <li>12337信访 <span>${params.data.resolvedrate}</span></li>
-            </ul>
-          </div>
-        </div>`;
-      }
-    },
     backgroundColor: "#031577", //
     borderColor: "#0A2F86",
     borderWidth: 0, // 设置边框宽度为1像素
@@ -334,6 +408,7 @@ const option = {
     shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
   },
   visualMap: {
+    show: false,
     type: "piecewise",
     bottom: 10,
     pieces: [
@@ -369,8 +444,14 @@ const option = {
 const option1 = ref({
   xAxis: {
     type: "category",
-    boundaryGap: false,
+    boundaryGap: true,
     data: [],
+    axisLabel: {
+      interval: 0, // 隔一个显示一个标签
+    },
+    axisTick: {
+      show: false // 隐藏x轴的刻度
+    }
   },
   yAxis: {
     type: "value",
@@ -379,7 +460,11 @@ const option1 = ref({
       lineStyle: {
         color: "#193775",
       },
-    }
+    },
+    axisLabel: {
+      margin: 20,
+    },
+
   },
   tooltip: {
     trigger: 'axis',
@@ -398,39 +483,34 @@ const option1 = ref({
         show: false
       },
       lineStyle: {
-        color: "#28E6FF",
+        color: "#FFDB31",
         width: 4,
       },
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: "rgba(40,230,255,0.47)", // 渐变起始颜色
+            color: "rgba(255,218,51,0.25)", // 渐变起始颜色
           },
           {
             offset: 1,
-            color: "rgba(40,230,255,0)", // 渐变结束颜色
+            color: "rgba(255,219,49,0)", // 渐变结束颜色
           },
         ]),
       },
       data: [],
     },
   ],
-  grid: {left: '10%', right: '10%', top: '10%', bottom: '20%', containLabel: true},
+  grid: {left: '5%', right: '5%', top: '10%', bottom: '20%', containLabel: true},
 })
 const option2 = ref({
   xAxis: {
     type: "category",
-    boundaryGap: false,
-    data: [
-      "9/10",
-      "9/11",
-      "9/12",
-      "9/13",
-      "9/13",
-      "9/13",
-
-    ],
+    boundaryGap: true,
+    data: [],
+    axisTick: {
+      show: false // 隐藏x轴的刻度
+    },
   },
   yAxis: {
     type: "value",
@@ -439,7 +519,11 @@ const option2 = ref({
       lineStyle: {
         color: "#193775",
       },
-    }
+    },
+    axisLabel: {
+      margin: 20,
+    },
+
   },
   tooltip: {
     trigger: 'axis',
@@ -459,7 +543,6 @@ const option2 = ref({
       },
       lineStyle: {
         color: "#6FDBA0",
-
         width: 4,
       },
       areaStyle: {
@@ -469,17 +552,10 @@ const option2 = ref({
         }, {offset: 1, color: 'rgba(109, 221, 159, 0)'}])
       },
 
-      data: [
-        79,
-        88,
-        82,
-        77,
-        69,
-        90,
-      ],
+      data: [],
     },
   ],
-  grid: {left: '10%', right: '10%', top: '10%', bottom: '20%', containLabel: true},
+  grid: {left: '5%', right: '5%', top: '10%', bottom: '20%', containLabel: true},
 })
 const option3 = ref({
   tooltip: {},
@@ -489,16 +565,29 @@ const option3 = ref({
       color: '#fff',
     },
   },
-  grid: {
-    left: '10%',
-    right: '10%', top: '10%', bottom: '10%'
-  },
+
   xAxis: {
     type: 'category',
-    data: []
+    data: [],
+    axisLabel: {
+      interval: 0, // 隔一个显示一个标签
+      fontSize: 5,
+      color: '#fff',
+    },
+
   },
   yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      margin: 10,
+    },
+    splitLine: {
+      show: true, lineStyle: {
+        color: ['#193775'], // 设置x轴分割线的颜色
+        width: 1, // 线条宽度
+        type: 'solid' // 线条样式，可以是 'solid', 'dashed', 'dotted'
+      }
+    }
   },
   series: [
     {
@@ -535,22 +624,22 @@ const option3 = ref({
         }, {offset: 1, color: '#6FDBA0'}])
       }
     }
-  ]
-
+  ],
+  grid: {left: '8%', right: '0%', top: '10%', bottom: '10%'},
 });
 
 
 // region 表格数据
-const tableData = ref([])
-const tableData1 = ref([])
+const tableData = ref([])    // 业务满意率
+const tableData1 = ref([])   // 综合满意度排名
 const tableData2 = ref([])
 const tableData3 = ref([])
-const tableData4 = ref([])
+const tableData4 = ref([])   // 单项调查情况
 // endregion
 
-
+// region 初始化
 onMounted(() => {
-  getData();
+  // getData();
 });
 
 function getData() {
@@ -570,7 +659,7 @@ function getData() {
   // 业务满意率
   GetZRSJXF().then((res) => {
     let temp = res.lstCity
-    temp= temp.filter(item => item.Name === null);
+    temp = temp.filter(item => item.Name !== null);
     tableData.value = temp
   });
 
@@ -603,16 +692,41 @@ function getData() {
     option3.value.series[2].data = dxfx.value[2].lstson.map(item => item.FinalRP);
   });
 
+  // 单项调查情况
   GetRCSQQK().then((res) => {
     let text = res
     text = text.filter(item => item.Name !== null)
     tableData4.value = text
   });
 
-  // GetZRSJXF().then((res) => {  });
+  // 年
+  GetMyPeriod().then((res)=>{
+    let tempYear = res
+    years.value = tempYear.map(item => ({
+      ID: item.ID,
+      PeriodName: item.PeriodName
+    }));
+  })
+  // 月
+  GetCustomOffLineSonPeriodSet().then((res)=>{
+    let month = res
+    tempMonths.value = month.map((item) => {
+      return {
+        ID: item.ID,
+        SonPeriodName: item.SonPeriodName,
+        PeriodID: item.PeriodID,
+      }
+    })
+  })
+  // 组织机构
+  qx_get().then((res)=>{
+    let tempOrgs = res
+    org.value = tempOrgs
+  })
   // GetDITU().then((res) => {  });
 }
 
+// endregion
 
 // region 表格样式
 const fontSize = ref(11)
@@ -620,16 +734,32 @@ const headerCellStyle = ref({
   fontSize: '11px', /* 设置表头字体大小 */
   color: '#24D2EE', /* 设置表头字体颜色 */
   backgroundColor: '#04144E', /* 设置表头背景颜色 */
-  height: '60px', /* 设置表头高度 */
+  height: '0px', /* 设置表头高度 */
   padding: '0 0 0 0', /* 设置表头内边距 */
-  lineHeight: '60px',
+  lineHeight: '0px',
 });
 const tableRowStyle = (row) => {
   return {
     backgroundColor: '#04144E',
-    color: "#FFFFFF"
+    color: "#FFFFFF",
+    height: '40px',
+  };
+};
+const tableRowStyleTableData1 = (row) => {
+  return {
+    backgroundColor: '#04144E',
+    color: "#FFFFFF",
+    height: '50px',
   };
 };
+const tableRowStyleTableData2 = () => {
+  return {
+    backgroundColor: '#04144E',
+    color: "#FFFFFF",
+    height: '50px',
+  };
+}
+
 // 自定义总合行样式
 const summaryCellStyle = () => {
   return {
@@ -663,13 +793,21 @@ const getSummaries = (param) => {
   });
   return sums;
 };
-
 const calculateSatisfaction = (row) => {
   const validCount = row.sdcl || 0 // 有效数
   const dissatisfiedCount = row.sbmys || 0 // 不满意数
   return validCount - dissatisfiedCount // 返回基本满意数
 }
+const getCellStyle = (smyltb) => {
+  if (smyltb > 0) {
+    return {color: 'green'};
+  } else {
+    return {color: 'red'};
+  }
+}
 // endregion
+
+
 </script>
 
 
@@ -689,6 +827,19 @@ const calculateSatisfaction = (row) => {
     padding: 0;
     text-align: center;
   }
+
+  .el-table .el-table__row:hover {
+    //background-color: transparent !important;
+  }
+
+  .el-table {
+    --el-table-row-hover-bg-color: transparent;
+    --el-table-border-color: #193775;
+  }
+
+
+
+
 }
 
 .dropdown-container {
@@ -704,7 +855,7 @@ const calculateSatisfaction = (row) => {
 }
 
 .descriptions_content {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 700;
 }
 
@@ -741,5 +892,9 @@ h3 {
   margin-bottom: 0px;
 }
 
+.yellow {
+  color: #ffd04b;
+}
+
 
 </style>