| | |
| | | <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" |
| | |
| | | @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> |
| | |
| | | <!-- 表格实体部分--> |
| | | <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> |
| | |
| | | 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', |
| | |
| | | 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', |
| | |
| | | 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 !== '新疆维吾尔自治区'){ |
| | |
| | | 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() |
| | |
| | | const t = this |
| | | t.search = { |
| | | startTime: '', |
| | | endTime: '' |
| | | endTime: '', |
| | | disasterType: undefined , |
| | | province: '', |
| | | city: '' |
| | | } |
| | | t.timeRange = [] |
| | | t.getData() |