feat: 新增工单列表筛选功能及优化数据展示

- 在工单列表页面添加了工单类型、受理人、时间范围等筛选条件
- 优化了工单列表的数据展示，包括工单编号、工单类型、工单内容、受理人及受理时间
- 在数据存储模块中添加了工单类型字典的初始化逻辑
- 更新了地图组件中的区域名称展示逻辑，使其动态显示当前区域名称

.env.development

@@ -1,3 +1,4 @@
+
 # 页面标题
 VITE_APP_TITLE = 智能客服中心
 
@@ -6,7 +7,9 @@ VITE_APP_ENV = 'development'
 
 # 若依管理系统/开发环境 http://192.168.1.15:8010/  http://123.56.29.119:8080  http://192.168.1.15:8120/ 1.194.161.64:8120
 
-VITE_APP_BASE_API = 'http://1.194.161.64:8120/'    
+VITE_APP_BASE_API = 'http://192.168.1.15:8120/'  
+
+# VITE_APP_BASE_API = 'http://1.194.161.64:8120/'    
 # VITE_APP_BASE_API = 'http://222.139.29.127:8120/'
 
 
@@ -14,7 +17,7 @@ VITE_APP_BASE_API = 'http://1.194.161.64:8120/'
 # VITE_APP_BASE_WS = 'ws://192.168.1.15:8010/'
 # VITE_APP_BASE_WS = 'ws://192.168.8.17:9000/ws'
 # VITE_APP_BASE_WS = 'ws://222.139.29.127:9000/ws'
-VITE_APP_BASE_WS = 'ws://192.168.1.19:9000/ws'
+# VITE_APP_BASE_WS = 'ws://192.168.1.19:9000/ws'
 
 # VITE_APP_PHONE_TYPE = 'SIP'
 # VITE_APP_CALL_TYPE = 'VIDEO'

package.json

@@ -18,6 +18,7 @@
     "file-saver": "^2.0.5",
     "js-cookie": "^3.0.5",
     "lottie-web": "^5.12.2",
+    "moment": "^2.30.1",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",

src/App.vue

@@ -1,7 +1,19 @@
+
 <template>
   <RouterView />
 </template>
 
+<script setup>
+import { onMounted } from 'vue'
+import { useDataStore } from '@/stores/data'
+
+onMounted(async () => {
+  console.log('App mounted')
+  await useDataStore().initDictorys()
+})
+</script>
+
+
 <style lang="scss">
 * {
   margin: 0;

src/stores/data.js

@@ -1,17 +1,21 @@
 // stores/data.js
 import { defineStore } from 'pinia'
 import axios from 'axios'
+import { getPageListData } from '@/api/index.js'
 
 export const useDataStore = defineStore('data', {
-  state: () => ({
-    trafficData: [],
-    populationData: []
-  }),
-  actions: {
-    async fetchRealTimeData() {
-    //   const res = await axios.get('/api/dashboard')
-    //   this.trafficData = res.data.traffic
-    //   this.populationData = res.data.population
-    }
-  }
+    state: () => ({
+        trafficData: [],
+        populationData: [],
+        orderTypes: [],
+    }),
+    actions: {
+        async fetchRealTimeData() {},
+        async initDictorys() {
+            const dictOrderTypeResult = await getPageListData(
+                '/common/work/type/treeselect'
+            )
+            this.orderTypes = dictOrderTypeResult.data || []
+        },
+    },
 })

src/views/childMap/childMap.vue

@@ -15,7 +15,7 @@
                     <div class="left-title">
                         <div class="tit_left">
                             <span style="cursor: pointer;" @click="goToPage('/')">郑州市</span> /
-                            <span style="cursor: pointer;" @click="goToPage('/childMap')">荥阳市</span>
+                            <span style="cursor: pointer;" @click="goToPage('/childMap')">{{ areaName }}</span>
                         </div>
                         <div class="tit_right">2024-03-25</div>
                     </div>
@@ -81,11 +81,14 @@ import { useDataStore } from '@/stores/data'
 import { getPageListData } from '@/api/index.js'
 import VueWordCloud from 'vuewordcloud';
 import ChildMapChart from '@/views/childMap/cpns/child-map-chart.vue'
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 
 
 
 const router = useRouter()
+const route = useRoute();
+const areaName = ref(route.query.area || '');
+const areaId = ref(route.query.areaId || '');
 const dataStore = useDataStore()
 const currentTime = ref('')
 

src/views/childMap/cpns/child-map-chart.vue

@@ -12,7 +12,7 @@ import * as echarts from 'echarts';
 import { ZZmapData } from '@/utils/zhengzhou.js'
 
 import { getPageListData } from '@/api/index.js'
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 
 const mapRef = ref(null);
 const callRegionData = ref([])
@@ -20,6 +20,9 @@ const orderCountData = ref([])
 const orderObj = ref({})
 let myChart = null
 const router = useRouter()
+const route = useRoute()
+const parentAreaName = ref(route.query.area)
+const parentAreaId = ref(route.query.areaId)
 
 onMounted(async () => {
   
@@ -138,10 +141,11 @@ function setOptionHandle() {
       console.log(params.name)
       router.push({
           path: '/orderList',
-          // query: {
-          //     callNumber:telWSData.Number,
-          //     callid: telWSData.CallID,
-          // }
+          query: {
+              pName: parentAreaName.value,
+              area: params.name,
+              areaId: params.value,
+          }
       });
       // 动态更新选中状态
       // myChart.setOption({

src/views/dashboard/cpns/map-chart.vue

@@ -8,7 +8,7 @@
         <div class="cenItemCon">
           <div>12356话务总量</div>
           <div>
-            <span class="itemSpan1">186</span> <span>个</span> 
+            <span class="itemSpan1">{{ traffic.total || 0 }}</span> <span>个</span> 
           </div>
         </div>
       </div>
@@ -19,9 +19,9 @@
         <div class="cenItemCon">
           <div>八院话务总量</div>
           <div>
-            <span class="itemSpan1">186</span> <span class="itemSpan2">个</span> 
-            <span class="itemSpan3">呼入</span><span class="itemSpan4">186</span> 
-            <span class="itemSpan5">呼出</span><span class="itemSpan6">186</span> 
+            <span class="itemSpan1">{{ eightTraffic.total || 0 }}</span> <span class="itemSpan2">个</span> 
+            <span class="itemSpan3">呼入</span><span class="itemSpan4">{{ eightTraffic.incoming || 0 }}</span> 
+            <span class="itemSpan5">呼出</span><span class="itemSpan6">{{ eightTraffic.exhalation || 0 }}</span> 
           </div>
         </div>
       </div>
@@ -32,9 +32,9 @@
         <div class="cenItemCon">
           <div>九院话务总量</div>
           <div>
-            <span class="itemSpan1">186</span> <span class="itemSpan2">个</span> 
-            <span class="itemSpan3">呼入</span><span class="itemSpan4">186</span> 
-            <span class="itemSpan5">呼出</span><span class="itemSpan6">186</span> 
+            <span class="itemSpan1">{{ nineTraffic.total || 0 }}</span> <span class="itemSpan2">个</span> 
+            <span class="itemSpan3">呼入</span><span class="itemSpan4">{{ nineTraffic.incoming || 0 }}</span> 
+            <span class="itemSpan5">呼出</span><span class="itemSpan6">{{ nineTraffic.exhalation || 0 }}</span> 
           </div>
         </div>
       </div>
@@ -57,6 +57,7 @@ import { useRouter } from 'vue-router';
 const mapRef = ref(null);
 const callRegionData = ref([])
 const orderCountData = ref([])
+
 const orderObj = ref({})
 let myChart = null
 const router = useRouter()
@@ -66,7 +67,8 @@ onMounted(async () => {
   myChart = echarts.init(mapRef.value);
   // 加载区县地图数据，这里假设地图文件名为
   echarts.registerMap('districtMap', ZZmapData);
-  getSelectRegionOrderCount(0)
+  // getSelectRegionOrderCount(0)
+  getStatics();
 
 });
 
@@ -75,23 +77,32 @@ function dataTypeHandle(e) {
   callRegionType.value = e
   getSelectRegionOrderCount(e)
 }
- // 话务统计
-function getSelectRegionOrderCount(type) {
-  getPageListData('/DataAnalysis/selectRegionOrderCount/'+type ).then((res)=>{
-      if (res.state === 'success') {
-        callRegionData.value = []
-        orderCountData.value = res.data
-        res.data.map(item => {
-          if (item.name === '荥阳市') {
-            orderObj.value = item
-          }
-          const obj ={}
-          obj.value = item.callNumber
-          obj.name = item.name
-          callRegionData.value.push(obj)
-        })
-        setOptionHandle()
-      }
+
+const nineTraffic = ref({});
+const eightTraffic = ref({});
+const traffic = ref({});
+const getStatics = () => {
+  getPageListData('/DataAnalysis/selectRegionOrder/0').then((res) => {
+    if (res.state === 'success') {
+      console.log(res.data)
+
+      nineTraffic.value = res.data?.nineTraffic || {};
+      eightTraffic.value = res.data?.eightTraffic || {};
+      traffic.value = res.data?.traffic || {};
+
+      callRegionData.value = []
+      orderCountData.value = res.data?.order
+      res.data?.order.map(item => {
+        if (item.name === '荥阳市') {
+          orderObj.value = item
+        }
+        const obj = {}
+        obj.value = item.callNumber
+        obj.name = item.name
+        callRegionData.value.push(obj)
+      })
+      setOptionHandle()
+    }
   })
 }
 
@@ -178,9 +189,10 @@ function setOptionHandle() {
       console.log(params.name)
       router.push({
           path: '/childMap',
-          // query: {
-          //     params:params.name,
-          // }
+          query: {
+              area: params.name,
+              areaId: params.value,
+          }
       });
 
   });

src/views/dashboard/cpns/pie-top-echart.vue

@@ -9,8 +9,8 @@ import { defineProps, computed } from 'vue'
 import BaseChart from '@/base-ui/echart/BaseChart.vue'
 const props = defineProps({
 	satisfactionPieData: {
-		type: Array,
-		default: [],
+		type: Object,
+		default: {},
 	}
 });
 
@@ -34,7 +34,7 @@ const options = computed(() => {
 		radiusAxis: {
 			type: 'category',
 			show: false, // 隐藏半径轴
-			data: ['a', 'b', 'c']
+			data: ['非常满意', '基本满意', '不满意']
 		},
 		tooltip: {},
 		series: [{
@@ -44,22 +44,22 @@ const options = computed(() => {
 			data: [
 
 				{
-					value: 5,
-					name: 'c',
+					value: props.satisfactionPieData.dissatisfied || 0,
+					name: '不满意',
 					itemStyle: {
 						color: colors[2]
 					}
 				},
 				{
-					value: 10,
-					name: 'b',
+					value: props.satisfactionPieData.basically || 0,
+					name: '基本满意',
 					itemStyle: {
 						color: colors[1]
 					}
 				},
 				{
-					value: 85,
-					name: 'a',
+					value: props.satisfactionPieData.satisfied || 0,
+					name: '非常满意',
 					itemStyle: {
 						color: colors[0]
 					}

src/views/dashboard/dashboard.vue

@@ -56,28 +56,28 @@
                                     <div class="satis_dot" style="background: #64C4FF;"></div>
                                     <div class="satis_item_text">
                                         <span style="width: 50px;">非常满意</span>
-                                        <span>12</span>
-                                        <span>0.70%</span>
+                                        <span>{{ satisfactionData.satisfied }}</span>
+                                        <span>{{ satisfactionData.satisfiedRate }}</span>
                                     </div>
                                 </div>
                                 <div class="satis_text_item">
                                     <div class="satis_dot" style="background: #7AECEA;"></div>
                                     <div class="satis_item_text">
                                         <span style="width: 50px;">基本满意</span>
-                                        <span>12</span>
-                                        <span>0.70%</span>
+                                        <span>{{ satisfactionData.basically }}</span>
+                                        <span>{{ satisfactionData.basicallyRate }}</span>
                                     </div>
                                 </div>
                                 <div class="satis_text_item">
                                     <div class="satis_dot" style="background: #FF935D;"></div>
                                     <div class="satis_item_text">
                                         <span style="width: 50px;">不满意</span>
-                                        <span>12</span>
-                                        <span>0.70%</span>
+                                        <span>{{ satisfactionData.dissatisfied }}</span>
+                                        <span>{{ satisfactionData.dissatisfiedRate }}</span>
                                     </div>
                                 </div>
                             </div>
-                            <PieTopEchart :satisfactionPieData="satisfactionPieData"></PieTopEchart>
+                            <PieTopEchart :satisfactionPieData="satisfactionData"></PieTopEchart>
                         </div>
                     </div>
                 </el-col>
@@ -262,30 +262,30 @@
     }
     // 满意度统计
     const satisfactionData =ref({})
-    const satisfactionPieData =ref([])
+    // const satisfactionPieData =ref([])
     function getSelectSatisfaction() {
         getPageListData('/DataAnalysis/selectSatisfaction' ).then((res)=>{
             if (res.state === 'success') {
                 satisfactionData.value = res.data
-                satisfactionPieData.value = []
-                for (const key in res.data) {
-                    const obj ={}
-                    if (key === 'satisfied') {
-                        obj.value = res.data[key]
-                        obj.name = '非常满意'
-                        satisfactionPieData.value.push(obj)
-                    }
-                    if (key === 'basically') {
-                        obj.value = res.data[key]
-                        obj.name = '基本满意'
-                        satisfactionPieData.value.push(obj)
-                    }
-                    if (key === 'dissatisfied') {
-                        obj.value = res.data[key]
-                        obj.name = '不满意'
-                        satisfactionPieData.value.push(obj)
-                    }
-                }
+                // satisfactionPieData.value = []
+                // for (const key in res.data) {
+                //     const obj ={}
+                //     if (key === 'satisfied') {
+                //         obj.value = res.data[key]
+                //         obj.name = '非常满意'
+                //         satisfactionPieData.value.push(obj)
+                //     }
+                //     if (key === 'basically') {
+                //         obj.value = res.data[key]
+                //         obj.name = '基本满意'
+                //         satisfactionPieData.value.push(obj)
+                //     }
+                //     if (key === 'dissatisfied') {
+                //         obj.value = res.data[key]
+                //         obj.name = '不满意'
+                //         satisfactionPieData.value.push(obj)
+                //     }
+                // }
                 // res.data.map(item => {
                 //     const obj ={}
                 //     obj.value = item.number

src/views/orderList/orderList.vue

@@ -16,41 +16,46 @@
             <div class="child-warp">
                 <div class="center_item2_tit">
                     <span class="btn_tit" @click="goToPage('/')">郑州市</span> /
-                    <span class="btn_tit" @click="goToPage('/childMap')">荥阳市</span>/
-                    <span class="btn_tit" @click="goToPage('/orderList')">广武镇 区域工单</span>
+                    <span class="btn_tit" @click="goToPage('/childMap')">{{ parentName }}</span>/
+                    <span class="btn_tit" @click="goToPage('/orderList')">{{ areaName }} 区域工单</span>
                 </div>
-                <div  class="center_item2_search">
-                    <el-input class="search_item" v-model="queryParams.workordercode" placeholder="请输入编号" clearable/>
-                    <el-input class="search_item" v-model="queryParams.workordercode" placeholder="请输入编号" clearable/>
-                    <el-input class="search_item" v-model="queryParams.workordercode" placeholder="请输入编号" clearable/>
-                    <el-input class="search_item" v-model="queryParams.workordercode" placeholder="请输入编号" clearable/>
+                <div class="center_item2_search">
+                    <el-input class="search_item" v-model="queryParams.workordercode" placeholder="请输入编号" clearable @blur="getWorkorder"/>
+                    <el-input class="search_item" v-model="queryParams.createusername" placeholder="请输入受理人姓名"
+                        clearable @blur="getWorkorder"/>
+                    <el-cascader class="search_item" v-model="queryParams.workordercate" :options="orderTypes"
+                        placeholder="请选择工单类型" :props="{
+                value: 'id',
+                children: 'children',
+            }" @change="getWorkorder" clearable />
+
+                    <el-date-picker class="search_item" v-model="searchTimes" type="datetimerange" range-separator="至"
+                        start-placeholder="开始时间" end-placeholder="结束时间" clearable @change="timeChange"/>
                 </div>
                 <div class="item2_con">
-                    <div class="item2_con_tit">
-                        <div style="width: 50%;">工单类别</div>
-                        <div style="width: 25%;">数量</div>
-                        <div style="width: 25%;">百分比</div>
+                    <div class="item2_con_tit" style="width: 100%;">
+                        <div style="width: 150px;">工单编号</div>
+                        <div style="width: 150px;">工单类型</div>
+                        <div style="width: calc(100vw - 700px);">工单内容</div>
+                        <div style="width: 100px;">受理人</div>
+                        <div style="width: 150px;">受理时间</div>
                     </div>
-                    <div class="scroll-container item2_con_con" ref="scrollContainerRef"
-                        @mouseenter="pauseScroll" @mouseleave="resumeScroll">
+                    <div class="scroll-container item2_con_con" ref="scrollContainerRef" @mouseenter="pauseScroll"
+                        @mouseleave="resumeScroll">
                         <div class="con_list" v-for="item in WorkordeData" :key="item.id">
-                            <div style="width: 50%; color: #50AEF8;">{{ item.workordercode }}</div>
-                            <div style="width: 25%;">{{ item.dealusername }}</div>
-                            <div style="width: 25%;">{{ item.workorderstatename }}</div>
+                            <div style="width: 150px; color: #50AEF8;">{{ item.workordercode }}</div>
+                            <div style="width: 150px;">{{ item.workordercatename }}</div>
+                            <div style="width: calc(100vw - 700px);">{{ item.content }}</div>
+                            <div style="width: 100px;">{{ item.createusername }}</div>
+                            <div style="width: 150px;">{{ item.createtime }}</div>
                         </div>
                     </div>
                 </div>
-                <el-pagination
-                    :background="false"
-                    class="pageEle"
-                    v-show="total > 0"
-                    :total="total"
-                    v-model:current-page="queryParams.pageNum"
-                    v-model:page-size="queryParams.pageSize"
-                    @pagination="getWorkorder"
-                />
+                <el-pagination :background="false" class="pageEle" v-show="total > 0" :total="total"
+                    v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
+                    @pagination="getWorkorder" />
             </div>
-            
+
         </div>
     </div>
 </template>
@@ -59,12 +64,18 @@
 import { ref, onMounted } from 'vue'
 import { useDataStore } from '@/stores/data'
 import { getPageListData } from '@/api/index.js'
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
+import moment from 'moment'
 
 const router = useRouter()
-const dataStore = useDataStore()
+// const dataStore = useDataStore()
 const currentTime = ref('')
 
+const route = useRoute()
+const parentName = ref(route.query.pName || '')
+const areaName = ref(route.query.area || '')
+const areaId = ref(route.query.areaId || '')
+
 
 // 实时时钟
 let timer = null
@@ -72,17 +83,26 @@ const updateTime = () => {
     currentTime.value = new Date().toLocaleString()
 }
 
+const orderTypes = ref([])
+
 // 初始化数据
 onMounted(() => {
     init()
     timer = setInterval(updateTime, 1000)
-    dataStore.fetchRealTimeData()
+    // dataStore.initDictorys()
+
+    orderTypes.value = useDataStore().orderTypes
+    console.log(orderTypes.value, 'orderTypes')
 })
 function init() {
     getWorkorder()
 }
 // 工单列表
 const queryParams = ref({
+    starttime: '',
+    endtime: '',
+    workordercate: '',
+    createusername: '',
     workordercode:'',
     pageNum: 1,
     pageSize: 10,
@@ -91,14 +111,35 @@ const total = ref(0)
 const WorkordeData = ref({})
 function getWorkorder() {
     const params = {
+        area: 24574,//areaId.value,
         pageNum: queryParams.value.pageNum,
         pageSize: queryParams.value.pageSize,
         listType: 0
     }
+
+    if (queryParams.value.workordercode) {
+        params.workordercode = queryParams.value.workordercode
+    }
+
+    if (queryParams.value.createusername) {
+        params.createusername = queryParams.value.createusername
+    }
+
+    if (queryParams.value.workordercate) {
+        params.workordercate = queryParams.value.workordercate[queryParams.value.workordercate.length - 1]
+    }
+
+    if (queryParams.value.createtime) {
+        params.createtime = queryParams.value.createtime
+    }
+    if (queryParams.value.endtime) {
+        params.endtime = queryParams.value.endtime
+    }
+
     getPageListData('/order/workorder', params).then((res) => {
         if (res.state === 'success') {
             WorkordeData.value = res.data
-            total.value = 99
+            total.value = res.total
         }
     })
 }
@@ -111,12 +152,26 @@ function goToPage(params) {
         // }
     });
 }
+const searchTimes = ref([])
+const timeChange = (val) => {
+    console.log(val, 'val')
+    if (val?.length === 2) {
+        queryParams.value.createtime = moment(val[0]).format('YYYY-MM-DD HH:mm:ss')
+        queryParams.value.endtime = moment(val[1]).format('YYYY-MM-DD HH:mm:ss')
+    } else {
+        queryParams.value.createtime = ''
+        queryParams.value.endtime = ''
+    }
+
+    getWorkorder();
+}
 </script>
 
 <style lang="scss" scoped>
 /* 使用 :deep() 穿透作用域样式 */
 :deep() {
   /* 输入框通用样式 */
+  .el-cascader,
   .el-input,
   .el-select,
   .el-date-editor {