zhouwx
2025-05-19 457f9c817adef8b003ee6379f493798bae5cbb69
src/views/Admin/dataStatistic.vue
@@ -3,8 +3,8 @@
    <div id="charts" style="width: 100%;height: 400px"></div>
    <a-row type="flex" justify="space-between" style="margin-bottom: 20px">
      <a-col :span="20">
        <a-row type="flex" :gutter="18">
          <a-col :span="8">
        <a-row type="flex" :gutter="24">
          <a-col :span="6">
            <a-range-picker
                v-model="timeRange"
                format="YYYY-MM-DD"
@@ -13,6 +13,14 @@
                @ok="timeOk"
                style="width: 100%"
            />
          </a-col>
          <a-col :span="6">
            <a-select v-model="search.disasterType"  style="width: 100%" placeholder="选择灾种类别"  allow-clear>
              <a-select-option v-for="item in typeList" :value="item.value" :key="item.value">{{item.name}}</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <a-cascader :options="areaData" v-model="areaVal" placeholder="选择地理位置" expandTrigger="hover" :fieldNames="fieldNames" changeOnSelect @change="onChange1" style="width: 100%"/>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="searchData">查询</a-button>
@@ -25,7 +33,7 @@
    <!-- 表格实体部分-->
    <div class="table-cont">
      <a-button type="primary" v-if="backButton" @click="backData" :loading="backLoading" style="margin-bottom: 20px">返回上级</a-button>
      <a-table :columns="columns" :data-source="data" bordered :pagination="false" :rowKey="record=>record.name">
      <a-table  :columns="columns" :loading="loading" :data-source="data" bordered :pagination="false" :rowKey="record=>record.name">
        <template #index="text,record,index">
          {{ index + 1 }}
        </template>
@@ -44,6 +52,7 @@
import Cookies from "js-cookie";
import {getUserInfo} from "@/util/storage";
import * as echarts from 'echarts';
import {getDistrictInfo} from "@/api/login";
const columns = [{
  title: '序号',
  dataIndex: 'index',
@@ -84,9 +93,28 @@
  components: {},
  data() {
    return {
      loading: false,
      search:{
        startTime: '',
        endTime: ''
        endTime: '',
        disasterType: undefined ,
        province: '',
        city: ''
      },
      typeList: [
        {name: '地震',value: 1},
        {name: '气象',value: 3},
        {name: '地质灾害',value: 4},
        {name: '水旱',value: 5},
        {name: '森林草原火灾',value: 6}
      ],
      areaData: [],
      areaVal: [],
      fieldNames:{
        label: 'name',
        value: 'id',
        children: 'children'
      },
      timeRange: [],
      category: 'default',
@@ -110,11 +138,13 @@
      t.$router.push(t.$route.path)
    }
    t.getData()
    t.getDistrictInfo()
  },
  methods: {
    async getData(){
      const t = this
      t.backLoading = true
      t.loading = true
      const res = await getTotalStatisticsByArea(t.search)
      if(res.data.code == 100){
        if(t.areaName && t.areaName !== '新疆维吾尔自治区'){
@@ -126,11 +156,57 @@
          t.backButton = false
        }
        t.backLoading = false
        t.loading = false
      }else{
        this.$message.error(res.data.msg)
      }
    },
    async getDistrictInfo(){
      let res = await getDistrictInfo()
      if(res.data.code == 100){
        this.areaData = res.data.data.map(item => ({
          ...item,
          children: item.children?.map(child => ({...child,children:undefined }))
        }))
      } else {
        this.$message.warning(res.data.msg);
      }
    },
    // 根据id查对象
    findCodeById(data,value) {
      for (const node of data) {
        if (node.id === value) {
          return node;
        }
        if (node.children) {
          const foundNode = this.findCodeById(node.children, value);
          if (foundNode) {
            return foundNode;
          }
        }
      }
      return null;
    },
    onChange1(value) {
      const t = this
      t.search.province = ''
      t.search.city = ''
      if(value[0]){
        t.search.province = t.findCodeById(t.areaData,value[0]).name
      }
      if(value[1]){
        t.search.city = t.findCodeById(t.areaData,value[1]).name
      }
      // if(value[2]){
      //   t.search.searchParams.area = t.findCodeById(t.areaData,value[2]).name
      // }
      // if(value[3]){
      //   t.search.searchParams.town = t.findCodeById(t.areaData,value[3]).name
      // }
      console.log('111',t.search.searchParams)
    },
    async getChartsData(){
      const t = this
      const res = await getTotalStatistics()
@@ -212,7 +288,10 @@
      const t = this
      t.search = {
        startTime: '',
        endTime: ''
        endTime: '',
        disasterType: undefined ,
        province: '',
        city: ''
      }
      t.timeRange = []
      t.getData()
@@ -220,4 +299,4 @@
  }
}
</script>
</script>