|
@@ -1,158 +1,189 @@
|
|
|
-<template >
|
|
|
- <div style="padding: 6px;">
|
|
|
+<template>
|
|
|
+ <div style="padding: 6px">
|
|
|
<div>
|
|
|
<button-group @change="changeHandler">
|
|
|
- <button-group-item> <span style="color: #79e7ff;"> 火灾起数</span> </button-group-item>
|
|
|
- <button-group-item> <span style="color: #79e7ff;"> 死亡人数 </span> </button-group-item>
|
|
|
+ <button-group-item>
|
|
|
+ <span style="color: #79e7ff"> 火灾起数</span>
|
|
|
+ </button-group-item>
|
|
|
+ <button-group-item>
|
|
|
+ <span style="color: #79e7ff"> 死亡人数 </span>
|
|
|
+ </button-group-item>
|
|
|
</button-group>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="row header">
|
|
|
<span class="type">序号</span>
|
|
|
<span class="count">区县</span>
|
|
|
- <span class="time">{{ ['火灾总数', '死亡人数'][idx]}}</span>
|
|
|
+ <span class="time">{{ ["火灾总数", "死亡人数"][idx] }}</span>
|
|
|
<span class="unit">同比</span>
|
|
|
</div>
|
|
|
- <VueSeamlessScroll v-if="reload" :data="list" :class-option="classOption" class="warp">
|
|
|
+ <VueSeamlessScroll
|
|
|
+ v-if="reload"
|
|
|
+ :data="list"
|
|
|
+ :class-option="classOption"
|
|
|
+ class="warp"
|
|
|
+ >
|
|
|
<ul class="item">
|
|
|
- <li class="row" :class="{
|
|
|
- active: item.isActive
|
|
|
- }" v-for="(item, index) in list" :key="index" @click="openBasicModal1(item)">
|
|
|
+ <li
|
|
|
+ class="row"
|
|
|
+ :class="{
|
|
|
+ active: item.isActive,
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ @click="openBasicModal1(item)"
|
|
|
+ >
|
|
|
<span class="type">{{ index + 1 }}</span>
|
|
|
<span class="count">{{ item.qx }}</span>
|
|
|
- <span class="time">{{ [item.bnhzqs, item.bnwrs ][idx] }}</span>
|
|
|
- <span class="unit">{{ [item.hzPercent, item.wrPercent ][idx] }}
|
|
|
- <img v-if="[item.hzIcon, item.wrIcon ][idx]" :src="[item.hzIcon, item.wrIcon ][idx]" alt="" />
|
|
|
+ <span class="time">{{ [item.bnhzqs, item.bnwrs][idx] }}</span>
|
|
|
+ <span class="unit"
|
|
|
+ >{{ [item.hzPercent, item.wrPercent][idx] }}
|
|
|
+ <img
|
|
|
+ v-if="[item.hzIcon, item.wrIcon][idx]"
|
|
|
+ :src="[item.hzIcon, item.wrIcon][idx]"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</VueSeamlessScroll>
|
|
|
</div>
|
|
|
<basic-modal top="120px" ref="basicInfoModal1" name="历史火灾查询">
|
|
|
- <hzfbCont :qy="units" />
|
|
|
- </basic-modal>
|
|
|
+ <hzfbCont :qy="units" />
|
|
|
+ </basic-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import VueSeamlessScroll from "vue-seamless-scroll";
|
|
|
-import upIcon from '../../../assets/images/up-icon.svg';
|
|
|
-import downIcon from '../../../assets/images/down-icon.svg';
|
|
|
-import { fireDistribution } from '@/api/hzfx'
|
|
|
-import { toFirst } from '@/utils'
|
|
|
+import upIcon from "../../../assets/images/up-icon.svg";
|
|
|
+import downIcon from "../../../assets/images/down-icon.svg";
|
|
|
+import { fireDistribution } from "@/api/hzfx";
|
|
|
+import { toFirst } from "@/utils";
|
|
|
import hzfbCont from "./hzfbCont.vue";
|
|
|
|
|
|
export default {
|
|
|
- name: 'FireDistribution',
|
|
|
+ name: "FireDistribution",
|
|
|
components: {
|
|
|
VueSeamlessScroll,
|
|
|
- hzfbCont
|
|
|
+ hzfbCont,
|
|
|
},
|
|
|
props: {
|
|
|
- qx: String
|
|
|
+ qx: String,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
idx: 0,
|
|
|
list: [],
|
|
|
reload: true,
|
|
|
- units:''
|
|
|
+ units: "",
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.loadData()
|
|
|
+ this.loadData();
|
|
|
},
|
|
|
watch: {
|
|
|
qx() {
|
|
|
this.loadData();
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
changeHandler(idx) {
|
|
|
this.idx = idx;
|
|
|
- this.list = toFirst(this.sortData(this.list), this.qx, 'qx')
|
|
|
+ this.list = toFirst(this.sortData(this.list), this.qx, "qx");
|
|
|
},
|
|
|
getPercent(bn, tq) {
|
|
|
if (bn - tq === 0) {
|
|
|
- return '—'
|
|
|
+ return "—";
|
|
|
}
|
|
|
if (tq === 0) {
|
|
|
- return '—'
|
|
|
+ return "—";
|
|
|
}
|
|
|
- return `${(parseInt((Math.abs(bn - tq) / tq).toFixed(2) * 100 ))}%`
|
|
|
+ return `${parseInt((Math.abs(bn - tq) / tq).toFixed(2) * 100)}%`;
|
|
|
},
|
|
|
getIcon(bn, tq) {
|
|
|
- if(tq === 0) {
|
|
|
+ if (tq === 0) {
|
|
|
return null;
|
|
|
}
|
|
|
- if (bn -tq > 0) {
|
|
|
+ if (bn - tq > 0) {
|
|
|
return upIcon;
|
|
|
- } else if (bn - tq < 0){
|
|
|
+ } else if (bn - tq < 0) {
|
|
|
return downIcon;
|
|
|
} else {
|
|
|
return null;
|
|
|
}
|
|
|
},
|
|
|
sortData(tempData) {
|
|
|
- const sub1 = tempData.filter(item => {
|
|
|
- if (this.idx === 0) {
|
|
|
- return item.hzIcon === upIcon
|
|
|
- } else {
|
|
|
- return item.wrIcon === upIcon
|
|
|
- }
|
|
|
- }).sort((a,b) => parseInt(b.hzPercent.replace("%", "")) - parseInt(a.hzPercent.replace("%", "")))
|
|
|
- const sub2 = tempData.filter(item => {
|
|
|
- if (this.idx === 0) {
|
|
|
- return item.hzIcon === null
|
|
|
- } else {
|
|
|
- return item.wrIcon === null
|
|
|
- }
|
|
|
- })
|
|
|
- const sub3 = tempData.filter(item => {
|
|
|
+ const sub1 = tempData
|
|
|
+ .filter((item) => {
|
|
|
+ if (this.idx === 0) {
|
|
|
+ return item.hzIcon === upIcon;
|
|
|
+ } else {
|
|
|
+ return item.wrIcon === upIcon;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .sort(
|
|
|
+ (a, b) =>
|
|
|
+ parseInt(b.hzPercent.replace("%", "")) -
|
|
|
+ parseInt(a.hzPercent.replace("%", ""))
|
|
|
+ );
|
|
|
+ const sub2 = tempData.filter((item) => {
|
|
|
if (this.idx === 0) {
|
|
|
- return item.hzIcon === downIcon
|
|
|
+ return item.hzIcon === null;
|
|
|
} else {
|
|
|
- return item.wrIcon === downIcon
|
|
|
+ return item.wrIcon === null;
|
|
|
}
|
|
|
- }).sort((a,b) => parseInt(a.hzPercent.replace("%", "")) - parseInt(b.hzPercent.replace("%", "")))
|
|
|
- return [...sub1, ...sub2, ...sub3]
|
|
|
+ });
|
|
|
+ const sub3 = tempData
|
|
|
+ .filter((item) => {
|
|
|
+ if (this.idx === 0) {
|
|
|
+ return item.hzIcon === downIcon;
|
|
|
+ } else {
|
|
|
+ return item.wrIcon === downIcon;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .sort(
|
|
|
+ (a, b) =>
|
|
|
+ parseInt(a.hzPercent.replace("%", "")) -
|
|
|
+ parseInt(b.hzPercent.replace("%", ""))
|
|
|
+ );
|
|
|
+ return [...sub1, ...sub2, ...sub3];
|
|
|
},
|
|
|
loadData() {
|
|
|
- this.reload = false
|
|
|
+ this.reload = false;
|
|
|
fireDistribution({
|
|
|
pageSize: 100,
|
|
|
pageNum: 1,
|
|
|
- }).then(res => {
|
|
|
- let tempData = res.data.rows.map(item => ({...item,
|
|
|
+ }).then((res) => {
|
|
|
+ let tempData = res.data.rows.map((item) => ({
|
|
|
+ ...item,
|
|
|
hzPercent: this.getPercent(item.bnhzqs, item.tqhzqs || 0),
|
|
|
wrPercent: this.getPercent(item.bnwrs, item.tqwrs || 0),
|
|
|
hzIcon: this.getIcon(item.bnhzqs, item.tqhzqs || 0),
|
|
|
wrIcon: this.getIcon(item.bnwrs, item.tqwrs || 0),
|
|
|
- isActive: item.qx === this.qx
|
|
|
- }))
|
|
|
- this.list = toFirst(this.sortData(tempData), this.qx, 'qx')
|
|
|
- this.reload = true
|
|
|
- })
|
|
|
+ isActive: item.qx === this.qx,
|
|
|
+ }));
|
|
|
+ this.list = toFirst(this.sortData(tempData), this.qx, "qx");
|
|
|
+ this.reload = true;
|
|
|
+ });
|
|
|
},
|
|
|
openBasicModal1(val) {
|
|
|
- this.units=val.qx
|
|
|
-
|
|
|
- this.showModal("basicInfoModal1");
|
|
|
- }
|
|
|
+ this.units = val.qx;
|
|
|
+ this.showModal("basicInfoModal1");
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
classOption() {
|
|
|
return {
|
|
|
singleHeight: 51,
|
|
|
- autoPlay: this.qx === "重庆市"
|
|
|
+ autoPlay: this.qx === "重庆市",
|
|
|
};
|
|
|
},
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped lang='less'>
|
|
|
-
|
|
|
+<style scoped lang="less">
|
|
|
.warp {
|
|
|
height: 521px;
|
|
|
margin: 0 auto;
|
|
@@ -166,7 +197,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
- color: #61DBFF !important;
|
|
|
+ color: #61dbff !important;
|
|
|
height: 38px !important;
|
|
|
background-color: rgba(0, 163, 255, 0.3) !important;
|
|
|
margin-top: 2px;
|
|
@@ -208,7 +239,7 @@ a {
|
|
|
.time,
|
|
|
.type,
|
|
|
.count,
|
|
|
- .unit{
|
|
|
+ .unit {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
@@ -220,15 +251,15 @@ a {
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
}
|
|
|
-.count{
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis !important; // 超出隐藏
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
+ .count {
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis !important; // 超出隐藏
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
.time {
|
|
|
- color: #61DBFF;
|
|
|
+ color: #61dbff;
|
|
|
}
|
|
|
}
|
|
|
</style>
|