火灾分析

app/src/views/FireCondition/components/FireIndex/index.vue

@@ -1,396 +1,451 @@
 <template>
-  <div>
-    <div class="fire-list">
-    <!-- 火灾总数 -->
-    <div class="fire" @click="openFire">
-      <div>
-        <div>
-          <span class="fire-num">{{ tbData.hzqs }}</span>
-          <span>起</span>
-        </div>
-        <div>火灾总数</div>
-      </div>
-      <div>
-        <img v-if="tbData.hzqstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
-        <img v-if="tbData.hzqstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
-        <span class="num" :class="{
+	<div>
+		<div class="fire-list">
+			<!-- 火灾总数 -->
+			<div class="fire" @click="openFire">
+				<div>
+					<div>
+						<span class="fire-num">{{ tbData.hzqs }}</span>
+						<span>起</span>
+					</div>
+					<div>火灾总数</div>
+				</div>
+				<div>
+					<img v-if="tbData.hzqstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
+					<img v-if="tbData.hzqstb < 0" src="../../../../assets/images/Vector (2).png" alt="" />
+					<span class="num" :class="{
           up: tbData.hzqstb > 0,
           down: tbData.hzqstb < 0,
-        }" >{{ tbData.hzqstb === 0 ? '-' : tbData.hzqsp }}</span>
-      </div>
-    </div>
-    <!--亡人  -->
-    <div class="fire" @click="openFire">
-      <div>
-        <div>
-          <span class="fire-num">{{ tbData.wrs  }}</span>
-          <span>人</span>
-        </div>
-        <div>亡人</div>
-      </div>
-      <div>
-        <img v-if="tbData.wrstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
-        <img v-if="tbData.wrstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
-        <span class="num" :class="{
+        }">{{ tbData.hzqstb === 0 ? '-' : tbData.hzqsp }}</span>
+				</div>
+			</div>
+			<!--亡人  -->
+			<div class="fire" @click="openFire">
+				<div>
+					<div>
+						<span class="fire-num">{{ tbData.wrs  }}</span>
+						<span>人</span>
+					</div>
+					<div>亡人</div>
+				</div>
+				<div>
+					<img v-if="tbData.wrstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
+					<img v-if="tbData.wrstb < 0" src="../../../../assets/images/Vector (2).png" alt="" />
+					<span class="num" :class="{
            up: tbData.wrstb > 0,
           down: tbData.wrstb < 0,
         }">{{ tbData.wrstb === 0 ? '-' : tbData.wrsp }}</span>
-      </div>
-    </div>
-    <!-- 伤人 -->
-    <div class="fire" @click="openFire">
-      <div>
-        <div>
-          <span class="fire-num">{{ tbData.srs  }}</span>
-          <span>人</span>
-        </div>
-        <div>伤人</div>
-      </div>
-      <div>
-        <img v-if="tbData.srstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
-        <img v-if="tbData.srstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
-        <span class="num " :class="{
+				</div>
+			</div>
+			<!-- 伤人 -->
+			<div class="fire" @click="openFire">
+				<div>
+					<div>
+						<span class="fire-num">{{ tbData.srs  }}</span>
+						<span>人</span>
+					</div>
+					<div>伤人</div>
+				</div>
+				<div>
+					<img v-if="tbData.srstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
+					<img v-if="tbData.srstb < 0" src="../../../../assets/images/Vector (2).png" alt="" />
+					<span class="num " :class="{
            up: tbData.srstb > 0,
           down: tbData.srstb < 0,
-        }"  >{{ tbData.srstb === 0 ? '-' : tbData.srsp }}</span>
-      </div>
-    </div>
-    <!-- 直接经济损失 -->
-    <div class="fire" @click="openFire">
-      <div>
-        <div>
-          <span class="fire-num">{{ tbData.zzjjss }}</span>
-          <span class="money">万元</span>
-          <img v-if="tbData.zzjjsstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
-          <img v-if="tbData.zzjjsstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
-          <span class="num" :class="{
+        }">{{ tbData.srstb === 0 ? '-' : tbData.srsp }}</span>
+				</div>
+			</div>
+			<!-- 直接经济损失 -->
+			<div class="fire" @click="openFire">
+				<div>
+					<div>
+						<span class="fire-num">{{ tbData.zzjjss }}</span>
+						<span class="money">万元</span>
+						<img v-if="tbData.zzjjsstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
+						<img v-if="tbData.zzjjsstb < 0" src="../../../../assets/images/Vector (2).png" alt="" />
+						<span class="num" :class="{
           up: tbData.zzjjsstb > 0,
           down: tbData.zzjjsstb < 0,
-        }" >{{ tbData.zzjjsstb === 0 ? '-' : tbData.zzjjssp }}</span>
-        </div>
-        <div class="manoue">直接经济损失</div>
-      </div>
-      <!-- <div>
+        }">{{ tbData.zzjjsstb === 0 ? '-' : tbData.zzjjssp }}</span>
+					</div>
+					<div class="manoue">直接经济损失</div>
+				</div>
+				<!-- <div>
         <img src="../../../assets/images/Vector (1).png" alt="">
         <span class="num">15%</span>
       </div> -->
-    </div>
-    </div>
-    <div class="charts">
-      <div class="top_title">
-        <div>{{ unitLabel }}</div>
-        <ul class="options">
-          <li :class="{
+			</div>
+		</div>
+		<div class="charts">
+			<div class="top_title">
+				<div>{{ unitLabel }}</div>
+				<ul class="options">
+					<li :class="{
             item: true,
             active: activeIndexState(index)
-          }"  @click="activeIndex = index" v-for="(item, index) in activeItems" :key="index">{{ item.name }}</li>
-        </ul>
-      </div>
-      <div>
-        <Chart :items="chartData" :label="chartLabel" />
-      </div>
-    </div>
-    <basic-modal top="120px" ref="basicInfoModal1" name="历史火灾查询">
+          }" @click="activeIndex = index" v-for="(item, index) in activeItems" :key="index">{{ item.name }}</li>
+				</ul>
+			</div>
+			<div>
+				<Chart :items="chartData" :label="chartLabel" />
+			</div>
+		</div>
+		<basic-modal top="120px" ref="basicInfoModal1" name="历史火灾查询">
 			<hzfbCont :qy="qx" />
 		</basic-modal>
-  </div>
+	</div>
 </template>
 
 <script>
-import Chart from './Chart.vue'
-import { getSxzbListToatl, getQhyyListToatl, getHzzbSxzbYoy } from "@/api/index.js";
-import hzfbCont from '../../../FireCondition/components/hzfbCont.vue';
-export default {
-  name: 'FireIndex',
-  components: {
-    Chart,
-    hzfbCont
-  },
-  props: {
-    qx: String,
-    type: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      activeItems: [
-        {name: '火灾总数'},
-        {name: '亡人'},
-        {name: '伤人'},
-        {name: '直接经济损失'},
-        {name: '起火原因'}
-      ],
-      activeIndex: 0,
-      unitLabels: ["起", "人", "人", "万元", "起"],
-      data: [
-        [],
-        [],
-        [],
-        [],
-        []
-      ],
-      params:{
-        pageSize:100,
-        pageNum:1
-      },
-      // 年份横坐标轴标签
-      yearLabel: [],
-      // 年份数据
-      yearData: [],
-      // 月份纵坐标轴标签
-      monthLabel: [],
-      // 月份数据
-      monthData: [],
-      modeType: 0,
-      fireIndexLabel: [],
-      fireIndexData: [],
-      monthTbData: {},
-      yearTbData: {}
-    }
-  },
-  watch: {
-    type: {
-      handler(idx){
-        this.modeType = idx
-      },
-      immediate: true
-    },
-    qx() {
-      this.getFrieList()
-    }
-  },
-  computed: {
-    unitLabel() {
-      return this.unitLabels[this.activeIndex]
-    },
-    chartLabel() {
-      if (this.activeIndex === 4) {
-        return this.fireIndexLabel[this.type]
-      }
-      if (this.type === 0) {
-        return this.monthLabel;
-      } else {
-        return this.yearLabel
-      }
-    },
-    chartData() {
-      if (this.activeIndex === 4) {
-        return this.fireIndexData[this.type]
-      }
-      if (this.type === 0) {
-        return this.monthData[this.activeIndex]
-      } else {
-        return this.yearData[this.activeIndex];
-      }
-    },
-    tbData() {
-      return [this.yearTbData , this.monthTbData][this.modeType]
-    }
-  },
-  methods: {
-    activeIndexState(index) {
-      return this.activeIndex === index
-    },
-    getFrieList(){
-      this.loadQhyyListToatl()
-      this.loadSxzbChartData()
-      this.loadHzzbSxzbYoy()
-    },
-    loadQhyyListToatl() {
-      getQhyyListToatl({
-        ...this.params,
-        qy: this.qx === '重庆市' ? "" : this.qx
-      }).then(res=>{
-        const temp = res.data.data
-        const year =temp.qhyyListByYear
-        const month = temp.qhyyListByMonth
-        this.fireIndexLabel = [
-          month.map(item => item.qhyy),
-          year.map(item => item.qhyy)
-        ]
-        this.fireIndexData = [
-          month.map(item => ({ name: item.qhyy, value: item.hzqs })),
-          year.map(item => ({ name: item.qhyy, value: item.hzqs }))
-        ]
-      })
-    },
-    loadSxzbChartData() {
-      getSxzbListToatl({
-      ...this.params,
-        qy: this.qx === '重庆市' ? "" : this.qx
-      }).then(res => {
-        const temp = res.data.data
-        const year =temp.sxzbYear
-        const month = temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12)
-        this.monthLabel = month.map(item => item.y)
-        this.yearLabel = year.map(item => item.n)
-        this.monthData = [
-          month.map(item => ({ name: item.y, value: item.hzqs })),
-          month.map(item => ({ name: item.y, value: item.wrs })),
-          month.map(item => ({ name: item.y, value: item.sss })),
-          month.map(item => ({ name: item.y, value: (item.zzjjss / 10000).toFixed(0) })),
-          []
-        ]
-        this.yearData = [
-          year.map(item => ({ name: item.y, value: item.hzqs })),
-          year.map(item => ({ name: item.y, value: item.wrs })),
-          year.map(item => ({ name: item.y, value: item.sss })),
-          year.map(item => ({ name: item.y, value: (item.zzjjss / 10000).toFixed(0) })),
-          []
-        ]
-      })
-    },
-    loadHzzbSxzbYoy() {
-      getHzzbSxzbYoy({
-        qy: this.qx === '重庆市' ? "" : this.qx
-      }).then(res => {
-        const temp = res.data.data
-        if (temp['年同比'].length === 1) {
-          let tempData = temp['年同比'][0]
-          this.monthTbData = {
-            wrs: tempData.wrs,
-            srs: tempData.srs,
-            zzjjss: parseInt(tempData.zzjjss / 10000),
-            hzqs: tempData.hzqs,
-            wrstb: tempData.wrstb,
-            srstb: tempData.srstb,
-            zzjjsstb: tempData.zzjjsstb,
-            hzqstb: tempData.hzqstb,
-            wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
-            srsp:  `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
-            zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
-            hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
-          }
-        } else {
-          this.monthTbData = {
-            wrs: 0,
-            srs: 0,
-            zzjjss: 0,
-            hzqs: 0,
-            wrstb: 0,
-            srstb: 0,
-            zzjjsstb: 0,
-            hzqstb: 0,
-            wrsp: `-`,
-            srsp:  `-`,
-            zzjjssp: `-`,
-            hzqsp: `-`
-          }
-        }
-        if (temp['月同比'].length === 1) {
-          let tempData = temp['月同比'][0]
-          this.yearTbData = {
-            wrs: tempData.wrs,
-            srs: tempData.srs,
-            zzjjss: parseInt(tempData.zzjjss / 10000),
-            hzqs: tempData.hzqs,
-            wrstb: tempData.wrstb,
-            srstb: tempData.srstb,
-            zzjjsstb: tempData.zzjjsstb,
-            hzqstb: tempData.hzqstb,
-            wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
-            srsp:  `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
-            zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
-            hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
-          }
-        } else {
-          this.yearTbData = {
-            wrs: 0,
-            srs: 0,
-            zzjjss: 0,
-            hzqs: 0,
-            wrstb: 0,
-            srstb: 0,
-            zzjjsstb: 0,
-            hzqstb: 0,
-            wrsp: `-`,
-            srsp:  `-`,
-            zzjjssp: `-`,
-            hzqsp: `-`
-          }
-        }
-      })
-    },
-    openFire(){
-      this.showModal("basicInfoModal1");
-    }
-  },
-  created() {
-    setInterval(() => {
-      this.activeIndex = this.activeIndex + 1 >= this.activeItems.length ? 0 : this.activeIndex + 1
-    }, 30 * 1000),
-    this.getFrieList()
-  }
-}
+	import Chart from './Chart.vue'
+	import {
+		getSxzbListToatl,
+		getQhyyListToatl,
+		getHzzbSxzbYoy
+	} from "@/api/index.js";
+	import hzfbCont from '../../../FireCondition/components/hzfbCont.vue';
+	export default {
+		name: 'FireIndex',
+		components: {
+			Chart,
+			hzfbCont
+		},
+		props: {
+			qx: String,
+			type: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				activeItems: [{
+						name: '火灾总数'
+					},
+					{
+						name: '亡人'
+					},
+					{
+						name: '伤人'
+					},
+					{
+						name: '直接经济损失'
+					},
+					{
+						name: '起火原因'
+					}
+				],
+				activeIndex: 0,
+				unitLabels: ["起", "人", "人", "万元", "起"],
+				data: [
+					[],
+					[],
+					[],
+					[],
+					[]
+				],
+				params: {
+					pageSize: 100,
+					pageNum: 1
+				},
+				// 年份横坐标轴标签
+				yearLabel: [],
+				// 年份数据
+				yearData: [],
+				// 月份纵坐标轴标签
+				monthLabel: [],
+				// 月份数据
+				monthData: [],
+				modeType: 0,
+				fireIndexLabel: [],
+				fireIndexData: [],
+				monthTbData: {},
+				yearTbData: {}
+			}
+		},
+		watch: {
+			type: {
+				handler(idx) {
+					this.modeType = idx
+				},
+				immediate: true
+			},
+			qx() {
+				this.getFrieList()
+			}
+		},
+		computed: {
+			unitLabel() {
+				return this.unitLabels[this.activeIndex]
+			},
+			chartLabel() {
+				if (this.activeIndex === 4) {
+					return this.fireIndexLabel[this.type]
+				}
+				if (this.type === 0) {
+					return this.monthLabel;
+				} else {
+					return this.yearLabel
+				}
+			},
+			chartData() {
+				if (this.activeIndex === 4) {
+					return this.fireIndexData[this.type]
+				}
+				if (this.type === 0) {
+					return this.monthData[this.activeIndex]
+				} else {
+					return this.yearData[this.activeIndex];
+				}
+			},
+			tbData() {
+				return [this.yearTbData, this.monthTbData][this.modeType]
+			}
+		},
+		methods: {
+			activeIndexState(index) {
+				return this.activeIndex === index
+			},
+			getFrieList() {
+				this.loadQhyyListToatl()
+				this.loadSxzbChartData()
+				this.loadHzzbSxzbYoy()
+			},
+			loadQhyyListToatl() {
+				getQhyyListToatl({
+					...this.params,
+					qy: this.qx === '重庆市' ? "" : this.qx
+				}).then(res => {
+					const temp = res.data.data
+					const year = temp.qhyyListByYear
+					const month = temp.qhyyListByMonth
+					this.fireIndexLabel = [
+						month.map(item => item.qhyy),
+						year.map(item => item.qhyy)
+					]
+					this.fireIndexData = [
+						month.map(item => ({
+							name: item.qhyy,
+							value: item.hzqs
+						})),
+						year.map(item => ({
+							name: item.qhyy,
+							value: item.hzqs
+						}))
+					]
+				})
+			},
+			loadSxzbChartData() {
+				getSxzbListToatl({
+					...this.params,
+					qy: this.qx === '重庆市' ? "" : this.qx
+				}).then(res => {
+					const temp = res.data.data
+					const year = temp.sxzbYear
+					const month = temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12)
+					this.monthLabel = month.map(item => item.y)
+					this.yearLabel = year.map(item => item.n)
+					this.monthData = [
+						month.map(item => ({
+							name: item.y,
+							value: item.hzqs
+						})),
+						month.map(item => ({
+							name: item.y,
+							value: item.wrs
+						})),
+						month.map(item => ({
+							name: item.y,
+							value: item.sss
+						})),
+						month.map(item => ({
+							name: item.y,
+							value: (item.zzjjss / 10000).toFixed(0)
+						})),
+						[]
+					]
+					this.yearData = [
+						year.map(item => ({
+							name: item.y,
+							value: item.hzqs
+						})),
+						year.map(item => ({
+							name: item.y,
+							value: item.wrs
+						})),
+						year.map(item => ({
+							name: item.y,
+							value: item.sss
+						})),
+						year.map(item => ({
+							name: item.y,
+							value: (item.zzjjss / 10000).toFixed(0)
+						})),
+						[]
+					]
+				})
+			},
+			loadHzzbSxzbYoy() {
+				getHzzbSxzbYoy({
+					qy: this.qx === '重庆市' ? "" : this.qx
+				}).then(res => {
+					const temp = res.data.data
+					if (temp['年同比'].length === 1) {
+						let tempData = temp['年同比'][0]
+						this.monthTbData = {
+							wrs: tempData.wrs,
+							srs: tempData.srs,
+							zzjjss: parseInt(tempData.zzjjss / 10000),
+							hzqs: tempData.hzqs,
+							wrstb: tempData.wrstb,
+							srstb: tempData.srstb,
+							zzjjsstb: tempData.zzjjsstb,
+							hzqstb: tempData.hzqstb,
+							wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
+							srsp: `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
+							zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
+							hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
+						}
+					} else {
+						this.monthTbData = {
+							wrs: 0,
+							srs: 0,
+							zzjjss: 0,
+							hzqs: 0,
+							wrstb: 0,
+							srstb: 0,
+							zzjjsstb: 0,
+							hzqstb: 0,
+							wrsp: `-`,
+							srsp: `-`,
+							zzjjssp: `-`,
+							hzqsp: `-`
+						}
+					}
+					if (temp['月同比'].length === 1) {
+						let tempData = temp['月同比'][0]
+						this.yearTbData = {
+							wrs: tempData.wrs,
+							srs: tempData.srs,
+							zzjjss: parseInt(tempData.zzjjss / 10000),
+							hzqs: tempData.hzqs,
+							wrstb: tempData.wrstb,
+							srstb: tempData.srstb,
+							zzjjsstb: tempData.zzjjsstb,
+							hzqstb: tempData.hzqstb,
+							wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
+							srsp: `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
+							zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
+							hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
+						}
+					} else {
+						this.yearTbData = {
+							wrs: 0,
+							srs: 0,
+							zzjjss: 0,
+							hzqs: 0,
+							wrstb: 0,
+							srstb: 0,
+							zzjjsstb: 0,
+							hzqstb: 0,
+							wrsp: `-`,
+							srsp: `-`,
+							zzjjssp: `-`,
+							hzqsp: `-`
+						}
+					}
+				})
+			},
+			openFire() {
+				// this.showModal("basicInfoModal1");
+			}
+		},
+		created() {
+			setInterval(() => {
+					this.activeIndex = this.activeIndex + 1 >= this.activeItems.length ? 0 : this.activeIndex + 1
+				}, 30 * 1000),
+				this.getFrieList()
+		}
+	}
 </script>
 
 <style lang="less" scoped>
-.charts {
-  .top_title {
-    display: flex;
-    justify-content: space-between;
-    margin-left: 30px;
-  }
-  .options {
-    list-style: none;
-    display: flex;
-    gap: 13px;
-    padding: 2px 4px;
-    justify-content: end;
-    .item {
-      color: #828a93;
-      font-size: 12px;
-      cursor: pointer;
-    }
-    .active {
-      color: #00E0FF;
-    }
-  }
-}
-.fire-list {
-  display: flex;
-  justify-content: space-around;
-  margin: 14px 2px 10px 5px;
-  letter-spacing: 1px;
-}
-// 渐变
-.fire {
-  width: 105px;
-  height: 40px;
-  background: #2b3739;
-  font-size: 12px;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  cursor: pointer;
-  padding: 3px 0;
-  border-radius: 2px;
-  .fire-num {
-    color: #ffbf1a;
-    font-size: 20px;
-  }
-  .num {
-    font-size: 16px;
-  }
-  .num.up {
-    color: #fb3636;
-  }
-  .num.down {
-    color: #19f34b;
-  }
-}
-img {
-  display: inline-block;
-  width: 10px;
-  height: 20px;
-}
-.manoue {
-  font-size: 12px !important;
-  margin-right: 10px;
-}
-.money {
-  margin-right: 5px;
-}
-</style>
+	.charts {
+		.top_title {
+			display: flex;
+			justify-content: space-between;
+			margin-left: 30px;
+		}
+
+		.options {
+			list-style: none;
+			display: flex;
+			gap: 13px;
+			padding: 2px 4px;
+			justify-content: end;
+
+			.item {
+				color: #828a93;
+				font-size: 12px;
+				cursor: pointer;
+			}
+
+			.active {
+				color: #00E0FF;
+			}
+		}
+	}
+
+	.fire-list {
+		display: flex;
+		justify-content: space-around;
+		margin: 14px 2px 10px 5px;
+		letter-spacing: 1px;
+	}
+
+	// 渐变
+	.fire {
+		width: 105px;
+		height: 40px;
+		background: #2b3739;
+		font-size: 12px;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		cursor: pointer;
+		padding: 3px 0;
+		border-radius: 2px;
+
+		.fire-num {
+			color: #ffbf1a;
+			font-size: 20px;
+		}
+
+		.num {
+			font-size: 16px;
+		}
+
+		.num.up {
+			color: #fb3636;
+		}
+
+		.num.down {
+			color: #19f34b;
+		}
+	}
+
+	img {
+		display: inline-block;
+		width: 10px;
+		height: 20px;
+	}
+
+	.manoue {
+		font-size: 12px !important;
+		margin-right: 10px;
+	}
+
+	.money {
+		margin-right: 5px;
+	}
+</style>

app/src/views/FireCondition/components/hzfxCont.vue

@@ -73,21 +73,21 @@
 					qx: this.qy === "重庆市" ? "" : this.qy,
 				}).then((res) => {
 					this.options = [res.data];
-					console.log(this.options,'关键指标');
+					// console.log(this.options,'关键指标');
 				});
 				hzfxQhyy({
 					...this.params,
 					qx: this.qy === "重庆市" ? "" : this.qy,
 				}).then((res) => {
 					this.options1 = [res.data];
-					console.log(this.options1,'火灾分布');
+					// console.log(this.options1,'火灾分布');
 				});
 				hzfxQhcs({
 					...this.params,
 					qx: this.qy === "重庆市" ? "" : this.qy,
 				}).then((res) => {
 					this.options2 = [res.data];
-					console.log(this.options2,'起火场所');
+					// console.log(this.options2,'起火场所');
 				});
 			},
 			handleSizeChange(val) {
@@ -146,7 +146,7 @@
 			<div class="maintenance-supervision_header">
 				<div class="select-item">
 					<el-select v-model="value" placeholder="请选择">
-						<el-option :value="item.areaTitle" :label="item.areaTitle" v-for="(item, index) in options"
+						<el-option :value="item.qx" :label="item.qx" v-for="(item, index) in options"
 							:key="index">
 						</el-option>
 					</el-select>

app/src/views/FireCondition/index.vue

@@ -1,17 +1,21 @@
 <template>
 	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
 		<div>
-			<border-panel height="301px" style="margin-bottom: 2px"  title="关键指标" @click="openBasicModal(1)">
-				<FireIndex  />
+			<border-panel height="301px" style="margin-bottom: 2px" title="关键指标">
+				<FireIndex />
 				<template #ext-header>
+					<div class="tabCak" @click="openBasicModal(1)"></div>
 					<button-block :items="['月', '年']" @select-item="selectItemHandler" />
 				</template>
 			</border-panel>
-			<border-panel height="337px" style="margin-bottom: 2px" title="起火原因"  @click="openBasicModal(2)">
+			<border-panel height="337px" style="margin-bottom: 2px" title="起火原因" @click="openBasicModal(2)">
 				<FireReason :qx="qx" />
 			</border-panel>
-			<border-panel height="313px" title="起火场所（类型）"  @click="openBasicModal(3)">
+			<border-panel height="313px" title="起火场所（类型）">
 				<FireAddressType :qx="qx" />
+				<template>
+					<div class="tabCak" @click="openBasicModal(3)"></div>
+				</template>
 			</border-panel>
 		</div>
 		<div>
@@ -42,7 +46,7 @@
 			</border-panel>
 		</div>
 		<basic-modal top="120px" ref="basicInfoModal" name="火灾分析">
-          <hzfxCont :qx="qx" :idx="valNum"  @callback="callback" /> 
+			<hzfxCont :qx="qx" :idx="valNum" @callback="callback" />
 		</basic-modal>
 		<basic-modal top="120px" ref="HistoryModal" name="历史火灾查询">
 			<hzfbCont :qy="qx" />
@@ -83,7 +87,7 @@
 		},
 		data() {
 			return {
-				valNum:1,
+				valNum: 1,
 				qx: '重庆市',
 				type: 1,
 				heatMap: []
@@ -93,7 +97,7 @@
 			this.loadData()
 		},
 		methods: {
-			callback(val){
+			callback(val) {
 				this.valNum = val
 			},
 			selectItemHandler(idx) {
@@ -134,6 +138,14 @@
 </script>
 
 <style scoped lang="less">
+	.tabCak {
+		width: 350px;
+		height: 45px;
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+
 	.center-box {
 		// margin-top: 602px;
 	}