feat: 完成火宅分析模块

app/src/assets/images/down-icon.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25424 15.8707L0.0804425 9.6579C0.0392427 9.60872 0.0124956 9.54809 0.00342935 9.48332C-0.00563693 9.41855 0.00336476 9.35241 0.0293489 9.29289C0.0553331 9.23337 0.0971887 9.18301 0.149863 9.14788C0.202538 9.11276 0.26378 9.09438 0.326198 9.09495H3.12005C3.2064 9.09317 3.28864 9.05595 3.34911 8.99127C3.40957 8.92659 3.44343 8.83962 3.44341 8.74904C3.44415 7.66535 3.38152 6.58264 3.25586 5.50699C3.16629 4.55725 2.89915 3.63534 2.46971 2.79392C2.04026 1.95251 1.45692 1.20809 0.753037 0.603216C0.696757 0.555665 0.657288 0.489713 0.64093 0.415885C0.624572 0.342057 0.632268 0.264611 0.66279 0.195907C0.693312 0.127203 0.7449 0.0712027 0.809319 0.0368446C0.873739 0.0024866 0.947276 -0.00824869 1.01819 0.00635254C6.47009 0.955907 7.62126 7.35184 7.81528 8.82365C7.82479 8.90456 7.86234 8.97898 7.92077 9.03276C7.9792 9.08653 8.05444 9.11591 8.13217 9.1153H10.6738C10.7362 9.11472 10.7975 9.13311 10.8501 9.16823C10.9028 9.20335 10.9447 9.25372 10.9707 9.31324C10.9966 9.37276 11.0056 9.4389 10.9966 9.50367C10.9875 9.56844 10.9608 9.62907 10.9196 9.67825L5.74576 15.891C5.71402 15.9271 5.67521 15.9554 5.63201 15.9742C5.58881 15.993 5.54225 16.0017 5.49553 15.9997C5.4488 15.9978 5.40304 15.9853 5.36138 15.963C5.31973 15.9407 5.28317 15.9092 5.25424 15.8707Z" fill="#009A2B"/>
+</svg>

app/src/assets/images/pie-circle.svg

@@ -0,0 +1,11 @@
+<svg width="148" height="148" viewBox="0 0 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="74" cy="74" r="73.5" stroke="url(#paint0_linear_166_175)"/>
+<defs>
+<linearGradient id="paint0_linear_166_175" x1="132.986" y1="26.2754" x2="25.7391" y2="133.522" gradientUnits="userSpaceOnUse">
+<stop offset="0.00147785" stop-color="#00A3FF"/>
+<stop offset="0.270833" stop-opacity="0"/>
+<stop offset="0.765625" stop-opacity="0"/>
+<stop offset="1" stop-color="#00FFF0"/>
+</linearGradient>
+</defs>
+</svg>

app/src/assets/images/up-icon.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25424 0.1293L0.0804425 6.3421C0.0392427 6.39128 0.0124956 6.45191 0.00342935 6.51668C-0.00563693 6.58145 0.00336476 6.64759 0.0293489 6.70711C0.0553331 6.76663 0.0971887 6.81699 0.149863 6.85212C0.202538 6.88724 0.26378 6.90562 0.326198 6.90505H3.12005C3.2064 6.90683 3.28864 6.94405 3.34911 7.00873C3.40957 7.07341 3.44343 7.16038 3.44341 7.25096C3.44415 8.33465 3.38152 9.41736 3.25586 10.493C3.16629 11.4427 2.89915 12.3647 2.46971 13.2061C2.04026 14.0475 1.45692 14.7919 0.753037 15.3968C0.696757 15.4443 0.657288 15.5103 0.64093 15.5841C0.624572 15.6579 0.632268 15.7354 0.66279 15.8041C0.693312 15.8728 0.7449 15.9288 0.809319 15.9632C0.873739 15.9975 0.947276 16.0082 1.01819 15.9936C6.47009 15.0441 7.62126 8.64816 7.81528 7.17635C7.82479 7.09544 7.86234 7.02102 7.92077 6.96724C7.9792 6.91347 8.05444 6.88409 8.13217 6.8847H10.6738C10.7362 6.88528 10.7975 6.86689 10.8501 6.83177C10.9028 6.79665 10.9447 6.74628 10.9707 6.68676C10.9966 6.62724 11.0056 6.5611 10.9966 6.49633C10.9875 6.43156 10.9608 6.37093 10.9196 6.32175L5.74576 0.108952C5.71402 0.0729389 5.67521 0.0445719 5.63201 0.0258083C5.58881 0.00704384 5.54225 -0.00167084 5.49553 0.000263214C5.4488 0.00219727 5.40304 0.0147343 5.36138 0.0370111C5.31973 0.059288 5.28317 0.0907755 5.25424 0.1293Z" fill="#FF4F4F"/>
+</svg>

app/src/components/Headers.vue

@@ -93,7 +93,7 @@ export default {
           url:'/police'
         },
         {
-          name: "火灾情况",
+          name: "火灾分析",
           id: 6,
           url:'/fire-condition'
         },

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

@@ -0,0 +1,190 @@
+<template >
+  <div>
+    <div class="__top">
+      <ul class="box-items">
+        <li class="item" :class="{active: activeIndex === 0}" @click="clickItemHandler(0)">全部</li>
+        <li class="item" :class="{active: activeIndex === 1}" @click="clickItemHandler(1)">本年</li>
+        <li class="item" :class="{active: activeIndex === 2}" @click="clickItemHandler(2)">本月</li>
+      </ul>
+    </div>
+    <div style="display: flex; justify-content: center;" >
+      <div ref="fireAddressType" class="pie-chart"  style="width:100%;height: 240px;"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'FireAddressType',
+  data() {
+    return {
+      chart: null,
+      data: [
+        {
+          name: "住宅",
+          value: 19
+        },
+        {
+          name: "交通工具",
+          value: 40
+        },
+        {
+          name: '宿舍',
+          value: 20
+        },
+        {
+          name: '餐饮场所',
+          value: 21
+        },
+        {
+          name: '其他',
+          value: 12
+        }],
+      activeIndex: 0
+    }
+  },
+  mounted() {
+    // 初始化起火场所类型
+    this.init()
+  },
+  computed: {
+    legend() {
+      return this.data.map(item => item.name)
+    }
+  },
+  methods: {
+    init() {
+    this.chart = echarts.init(this.$refs.fireAddressType)
+      this.chart.setOption({
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "shadow",
+          },
+          textStyle: {
+            fontSize: 12,
+          },
+          formatter: "{c} <br/>{b}",
+        },
+        legend: {
+          show: true,
+          // right: 0,
+          bottom: 25,
+          itemWidth: 14,
+          itemHeight: 14,
+          itemGap: 8,
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+          data: this.legend,
+        },
+        color: ["#00a2ff", "#4605ff", "#61d266", "#15a3e0", "#15e0d4"],
+        series: [
+          // 数据展示层
+          {
+            name: "存在隐患数",
+            type: "pie",
+            center: ["50%", "45%"],
+            radius: ["6%", "60%"],
+            avoidLabelOverlap: false,
+            label: {
+              normal: {
+                color: "#fff",
+                show: true,
+                formatter: (params) => {
+                  console.log(params)
+                  return `{value|${params.percent}%}`;
+                },
+                alignTo: 'edge',
+                minMargin: 5,
+                edgeDistance: 10,
+                lineHeight: 20,
+                rich: {
+                  value: {
+                    fontSize: 20,
+                    color: '#44F1FF',
+                    padding: [0,0,12, 0]
+                  }
+                },
+              }
+            },
+            labelLine: {
+              length: 15,
+              length2: 0,
+              maxSurfaceAngle: 80,
+              lineStyle: {
+                color: "#fff",
+                type: 'dashed'
+              }
+            },
+            labelLayout:  (params) => {
+              const isLeft = params.labelRect.x < this.chart.getWidth() / 3;
+              const points = params.labelLinePoints;
+              // Update the end point.
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points
+              };
+            },
+            data: this.data,
+          }
+        ]
+      })
+    },
+    reload() {
+      this.chart.setOption({
+         })
+    },
+    clickItemHandler(index) {
+      this.activeIndex = index
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+.__top {
+  display: flex;
+  justify-content: end;
+  margin-top: 10px;
+  margin-right: 10px;
+}
+.box-items {
+  display: flex;
+  width: 128px;
+  height: 28px;
+  padding: 2px 4px;
+  gap: 12px;
+  background-color: rgba(0, 213, 255, .12);
+  align-items: center;
+  justify-content: space-around;
+  cursor: pointer;
+  .item {
+    color: rgba(151, 238, 255, .47)
+  }
+  .item.active {
+    color: #fff;
+  }
+}
+.pie-chart {
+  position: relative;
+}
+.pie-chart::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 120px;
+  height: 120px;
+  transform: translate(-50%, -60%);
+  background: url('../../../assets/images/pie-circle.svg') no-repeat center center;
+  background-size: 100% 100%;
+  pointer-events: none;
+}
+</style>

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

@@ -0,0 +1,142 @@
+<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>
+    </div>
+    <div>
+      <div class="row header">
+        <span class="type">序号</span>
+        <span class="count">区县</span>
+        <span class="time">火灾总数</span>
+        <span class="unit">同比</span>
+      </div>
+      <VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list" :key="index">
+            <span class="type">{{ index + 1 }}</span>
+            <span class="count">{{ item[0] }}</span>
+            <span class="time">{{ item[1] }}</span>
+            <span class="unit">{{ item[2] }}
+              <img :src="item[3]" alt="" />
+            </span>
+          </li>
+        </ul>
+      </VueSeamlessScroll>
+    </div>
+  </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';
+
+export default {
+  name: 'FireDistribution',
+  components: {
+    VueSeamlessScroll
+  },
+  data() {
+    return {
+      list: [
+        ["万州区", "1200", "23%", upIcon],
+        ["九龙坡起", "1598", "35%", upIcon],
+        ["南川区", "1290", "12%", downIcon],
+        ["璧山区", "1198", "8%", downIcon],
+        ["渝北区", "6573", "48%", downIcon],
+        ["渝北区", "6573", "48%", downIcon],
+        ["渝北区", "6573", "48%", downIcon],
+        ["渝北区", "6573", "48%", downIcon],
+        ["渝北区", "6573", "48%", downIcon],
+      ],
+    };
+  },
+  methods: {
+    changeHandler() {
+      console.log("")
+    }
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 51,
+      };
+    },
+  },
+}
+</script>
+
+<style scoped lang='less'>
+
+.warp {
+  height: 521px;
+  margin: 0 auto;
+  overflow: hidden;
+  .item {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    cursor: pointer;
+  }
+}
+
+.header {
+  color: #61DBFF !important;
+  height: 38px !important;
+  background-color: rgba(0, 163, 255, 0.3) !important;
+  margin-top: 2px;
+  letter-spacing: 1px;
+  .is_notice {
+    line-height: 19px;
+    font-size: 10px;
+  }
+}
+
+li.row > span {
+  text-align: center;
+  font-size: 14x;
+  position: relative;
+  display: inline-block;
+}
+
+li.row {
+  box-sizing: border-box;
+}
+
+.row,
+li,
+a {
+  display: block;
+  height: 46px;
+  line-height: 46px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #fff;
+  margin-top: 5px;
+  .time,
+  .type,
+  .count,
+  .unit{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0.25;
+    img {
+      display: inline-block;
+      width: 11px;
+      height: 16px;
+      margin-left: 5px;
+    }
+  }
+
+  .time {
+    color: #61DBFF;
+  }
+}
+</style>

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

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div class="row header">
+      <span class="idx">序号</span>
+      <span class="time">起火时间</span>
+      <span class="name">建筑名称</span>
+      <span class="count">伤亡人数</span>
+      <span class="area">过火面积</span>
+      <span class="reason">起火原因</span>
+    </div>
+    <VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+      <ul class="item">
+        <li class="row" v-for="(item, index) in list" :key="index">
+          <span class="idx">{{ index + 1 }}</span>
+          <span class="time">{{ item[0] }}</span>
+          <span class="name">{{ item[1] }}</span>
+          <span class="count">{{ item[2] }}</span>
+          <span class="area">{{ item[3] }}</span>
+          <span class="reason">{{ item[4] }}</span>
+        </li>
+      </ul>
+    </VueSeamlessScroll>
+  </div>
+</template>
+
+<script>
+import VueSeamlessScroll from "vue-seamless-scroll";
+export default {
+  name: "RegionalComp",
+  components: {
+    VueSeamlessScroll,
+  },
+  data() {
+    return {
+      list: [
+        ["07:50 04/09", "渝北区双子座", "12", "16㎡", "吸烟"],
+        ["08:50 04/12", "江北区体育场", "2", "20㎡", "自燃"],
+        ["09:50 04/15", "渝北区金融大厦", "12", "22㎡", "电气火灾"],
+        ["10:10 04/16", "渝北区金融大厦", "2", "56㎡", "吸烟"],
+        ["07:32 04/01", "渝中区行政中心", "19", "9㎡", "吸烟"],
+        ["07:19 04/02", "江北区双子座", "23", "38㎡", "吸烟"],
+        ["06:50 04/12", "渝北区双子座", "17", "71㎡", "吸烟"],
+      ],
+    };
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 51,
+      };
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.warp {
+  height: 515px;
+  margin: 0 auto;
+  overflow: hidden;
+  .item {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    cursor: pointer;
+  }
+}
+
+.header {
+  color: #61DBFF !important;
+  height: 38px !important;
+  background-color: rgba(0, 163, 255, 0.3) !important;
+  margin-top: 2px;
+  letter-spacing: 1px;
+  .is_notice {
+    line-height: 19px;
+    font-size: 10px;
+  }
+}
+
+li.row > span {
+  text-align: center;
+  font-size: 14x;
+  position: relative;
+  display: inline-block;
+}
+
+li.row {
+  box-sizing: border-box;
+}
+
+.row,
+li,
+a {
+  display: block;
+  height: 46px;
+  line-height: 46px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #fff;
+  margin-top: 5px;
+  .idx,
+  .time,
+  .name,
+  .count,
+  .area,
+  .reason {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .idx {
+    flex: .1;
+  }
+
+  .time {
+    flex: 0.2;
+  }
+  .name {
+    flex: 0.2;
+    font-size: 12px;
+  }
+  .count {
+    flex: 0.2;
+  }
+  .area {
+    flex: 0.15;
+  }
+  .reason {
+    flex: 0.15;
+  }
+}
+</style>

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

@@ -1,5 +1,7 @@
 <template >
-  <div ref="fireReason" ></div>
+  <div style="display: flex; justify-content: center;">
+    <div ref="fireReason" style="width:100%;height: 287px;"></div>
+  </div>
 </template>
 
 <script>
@@ -7,38 +9,48 @@ import * as echarts from 'echarts'
 
 export default {
   name: 'FireReason',
-  props: {
-    data: {
-      type: Array,
-      default: () => [
+  data() {
+    return {
+      chart: null,
+      data: [
         {
           name: "电气火灾",
-          value: "40"
+          value: 40
         },
         {
-          name: "自然",
-          value: "40"
-        }
-      ]
-    }
-  },
-  data() {
-    return {
-      chart: null
+          name: "自燃",
+          value: 21
+        },
+        {
+          name: '吸烟',
+          value: 18
+        },
+        {
+          name: '生活用火不慎',
+          value: 12
+        },
+        {
+          name: '放火',
+          value: 19
+        },
+        {
+          name: '其他',
+          value: 20
+        }]
     }
   },
   mounted() {
     // 初始化起火原因
     this.init()
   },
+  computed: {
+    legend() {
+      return this.data.map(item => item.name)
+    }
+  },
   methods: {
     init() {
-      const chart = echarts.init(this.$refs.fireReason)
-      chart.setOption({
-
-      })
-    },
-    reload() {
+    this.chart = echarts.init(this.$refs.fireReason)
       this.chart.setOption({
         tooltip: {
           trigger: "item",
@@ -50,42 +62,40 @@ export default {
           },
           formatter: "{c} <br/>{b}",
         },
-        title: {
-          formatter: "3276存在隐患数"
-        },
         legend: {
           show: true,
-          right: 0,
-          bottom: 0,
-          itemWidth: 10,
-          itemHeight: 10,
-          itemGap: 4,
+          // right: 0,
+          bottom: 10,
+          itemWidth: 14,
+          itemHeight: 14,
+          itemGap: 8,
           textStyle: {
             color: "#fff",
             fontSize: 14,
           },
-          data: ["待计划整改", "已计划待整改", "已整改"],
+          data: this.legend,
         },
-        color: ["#f27d10", "#00eaff", "#16c843"],
+        color: ["#00a2ff", "#00eaff", "#16c843", "#f4d156", "#6421ba", "#61d266"],
         series: [
           // 数据展示层
           {
             name: "存在隐患数",
             type: "pie",
             center: ["50%", "45%"],
-            radius: ["35%", "50%"],
+            radius: ["25%", "60%"],
             avoidLabelOverlap: false,
             label: {
               normal: {
                 color: "#fff",
                 show: true,
                 formatter: (params) => {
-                  return `{value|${params.value}}`;
+                  console.log(params)
+                  return `{value|${params.percent}%}`;
                 },
                 alignTo: 'edge',
                 minMargin: 5,
                 edgeDistance: 10,
-                lineHeight: 15,
+                lineHeight: 20,
                 rich: {
                   value: {
                     fontSize: 20,
@@ -115,25 +125,12 @@ export default {
                 labelLinePoints: points
               };
             },
-            data: [
-              {
-                value: 615,
-                name: "待计划整改",
-              },
-              {
-                value: 432,
-                name: "已计划待整改",
-              },
-              {
-                value: 2372,
-                name: "已整改",
-              }
-            ],
+            data: this.data,
           },
           {
             type: "pie",
             center: ["50%", "45%"],
-            radius: ["35%", "45%"],
+            radius: ["30%", "55%"],
             hoverAnimation: false,
             z: 10,
             label: {
@@ -142,61 +139,74 @@ export default {
             tooltip: {
               show: false,
             },
-            data: [
-              {
-                value: 615,
-                name: "待计划整改",
-                itemStyle: {
+            data: this.data.map(item => ({
+              ...item,
+              itemStyle: {
                   normal: {
-                    color: 'rgba(0,0,0, .3)'
+                    color: 'rgba(0,0,0, .15)'
                   }
                 }
-              },
-              {
-                value: 432,
-                name: "已计划待整改",
-                itemStyle: {
-                  normal: {
-                    color: 'rgba(0,0,0, .3)'
-                  }
-                }
-              },
-              {
-                value: 2372,
-                name: "已整改",
-                itemStyle: {
+            })),
+            labelLine: {
+              show: false,
+            },
+          },
+          {
+            type: "pie",
+            center: ["50%", "45%"],
+            radius: ["45%", "46%"],
+            hoverAnimation: false,
+            z: 10,
+            label: {
+              show: false
+            },
+            tooltip: {
+              show: false,
+            },
+            data: this.data.map(item => ({
+              ...item,
+              itemStyle: {
                   normal: {
-                    color: 'rgba(0,0,0, .3)'
+                    color: 'rgba(0,255,255)',
+                    opacity: 0.15
                   }
                 }
-              }
-            ],
+            })),
             labelLine: {
               show: false,
             },
-
           },
-          // 外边框虚线
           {
             type: "pie",
-            zlevel: 4,
-            silent: true,
             center: ["50%", "45%"],
-            radius: ["55%", "56%"],
+            radius: ["45%", "46%"],
+            hoverAnimation: false,
+            z: 10,
             label: {
-              normal: {
-                show: false,
-              },
+              show: false
             },
+            tooltip: {
+              show: false,
+            },
+            data: this.data.map(item => ({
+              ...item,
+              itemStyle: {
+                  normal: {
+                    color: 'rgba(0,133,255)',
+                    opacity: 0.15
+                  }
+                }
+            })),
             labelLine: {
-              normal: {
-                show: false,
-              },
+              show: false,
             },
-            data: this.createData(),
-          },
-        ],
+          }
+        ]
       })
+    },
+    reload() {
+      this.chart.setOption({
+         })
     }
   }
 }

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

@@ -0,0 +1,39 @@
+<template >
+  <div ref="fireTime"></div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'FireTime',
+  data() {
+    return {
+      chart: null,
+      data: []
+    }
+  },
+  mounted() {
+    
+  },
+  created() {
+    for(let i = 0; i <= 24; i++) {
+      this.data.push({
+        
+      })
+    }
+  },
+  methods: {
+    init() {
+
+    },
+    reload() {
+
+    }
+  }
+}
+</script>
+
+
+<style scoped lang='less'>
+</style>

app/src/views/FireCondition/components/KeyIndex/KeyChart.vue

@@ -0,0 +1,127 @@
+<template >
+  <div ref="chart" style="height: 200px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'ChartComponent',
+  props: {
+    items: Array
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    // 初始化表格
+    this.init()
+  },
+  watch: {
+    items: {
+      handler() {
+        this.reload()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+          tooltip: {
+            trigger: "axis",
+            formatter: "{b} : {c}",
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+            },
+            backgroundColor: "rgba(0,224,255,0.46)",
+            borderColor: "rgba(0,213,255, .6)",
+            textStyle: {
+              color: '#fff',
+            }
+          },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          axisLabel: {
+            color: '#fff',
+            fontSize: 8
+          },
+          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+        },
+        yAxis: {
+          type: 'value',
+          //坐标轴
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          //分格线
+          splitLine: {
+            lineStyle: {
+              color: "#4784e8",
+              type: 'dashed'
+            },
+          },
+      },
+        grid: {
+          right: '8px',
+          top: '20px'
+        },
+        series: [
+          {
+            data: this.items,
+            type: 'bar',
+            barWidth: 10,
+            barGap: 20,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              normal: {
+                color: '#0085FF'
+              },
+              emphasis: {
+                color: '#00E0FF'
+              }
+            }
+          }
+        ]
+      })
+      this.chart
+    },
+    reload() {
+      // 重载数据
+      if (this.chart) {
+        this.chart.setOption({
+          series: [
+            {
+              data: this.items
+            }
+          ]
+        });
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+</style>

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

@@ -0,0 +1,415 @@
+<template>
+  <div>
+    <div class="fire-list">
+    <!-- 火灾总数 -->
+    <div class="fire">
+      <div>
+        <div>
+          <span class="fire-num">456</span>
+          <span>起</span>
+        </div>
+        <div>火灾总数</div>
+      </div>
+      <div>
+        <img src="../../../../assets/images/Vector (1).png" alt="" />
+        <span class="num up">15%</span>
+      </div>
+    </div>
+    <!--亡人  -->
+    <div class="fire">
+      <div>
+        <div>
+          <span class="fire-num">8</span>
+          <span>人</span>
+        </div>
+        <div>亡人</div>
+      </div>
+      <div>
+        <img src="../../../../assets/images/Vector (2).png" alt="" />
+        <span class="num down">15%</span>
+      </div>
+    </div>
+    <!-- 伤人 -->
+    <div class="fire">
+      <div>
+        <div>
+          <span class="fire-num">46</span>
+          <span>人</span>
+        </div>
+        <div>伤人</div>
+      </div>
+      <div>
+        <img src="../../../../assets/images/Vector (1).png" alt="" />
+        <span class="num up">10%</span>
+      </div>
+    </div>
+    <!-- 直接经济损失 -->
+    <div class="fire">
+      <div>
+        <div>
+          <span class="fire-num">6</span>
+          <span class="money">万元</span>
+          <img src="../../../../assets/images/Vector (1).png" alt="" />
+          <span class="num up">15%</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>
+        <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>
+        <KeyChart :items="data[this.activeIndex]" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import KeyChart from './KeyChart.vue'
+export default {
+  name: 'KeyIndex',
+  components: {
+    KeyChart
+  },
+  data() {
+    return {
+      activeItems: [
+        {name: '火宅总数'},
+        {name: '亡人'},
+        {name: '伤人'},
+        {name: '直接经济损失'},
+        {name: '起火原因'}
+      ],
+      activeIndex: 0,
+      data: [
+        [
+            {
+                "name": "一月",
+                "value": 120
+            },
+            {
+                "name": "二月",
+                "value": 200
+            },
+            {
+                "name": "三月",
+                "value": 150
+            },
+            {
+                "name": "四月",
+                "value": 80
+            },
+            {
+                "name": "五月",
+                "value": 110
+            },
+            {
+                "name": "六月",
+                "value": 130
+            },
+            {
+                "name": "七月",
+                "value": 30
+            },
+            {
+                "name": "八月",
+                "value": 210
+            },
+            {
+                "name": "九月",
+                "value": 220
+            },
+            {
+                "name": "十月",
+                "value": 123
+            },
+            {
+                "name": "十一月",
+                "value": 234
+            },
+            {
+                "name": "十二月",
+                "value": 70
+            }],
+        [ {
+                "name": "一月",
+                "value": 1
+            },
+            {
+                "name": "二月",
+                "value": 3
+            },
+            {
+                "name": "三月",
+                "value": 2
+            },
+            {
+                "name": "四月",
+                "value": 5
+            },
+            {
+                "name": "五月",
+                "value": 5
+            },
+            {
+                "name": "六月",
+                "value": 6
+            },
+            {
+                "name": "七月",
+                "value": 7
+            },
+            {
+                "name": "八月",
+                "value": 8
+            },
+            {
+                "name": "九月",
+                "value": 3
+            },
+            {
+                "name": "十月",
+                "value": 3
+            },
+            {
+                "name": "十一月",
+                "value": 2
+            },
+            {
+                "name": "十二月",
+                "value": 1
+            }],
+        [ {
+                "name": "一月",
+                "value": 12
+            },
+            {
+                "name": "二月",
+                "value": 32
+            },
+            {
+                "name": "三月",
+                "value": 23
+            },
+            {
+                "name": "四月",
+                "value": 12
+            },
+            {
+                "name": "五月",
+                "value": 12
+            },
+            {
+                "name": "六月",
+                "value": 12
+            },
+            {
+                "name": "七月",
+                "value": 11
+            },
+            {
+                "name": "八月",
+                "value": 18
+            },
+            {
+                "name": "九月",
+                "value": 19
+            },
+            {
+                "name": "十月",
+                "value": 2
+            },
+            {
+                "name": "十一月",
+                "value": 4
+            },
+            {
+                "name": "十二月",
+                "value": 6
+            }],
+        [ {
+                "name": "一月",
+                "value": 7
+            },
+            {
+                "name": "二月",
+                "value": 54
+            },
+            {
+                "name": "三月",
+                "value": 43
+            },
+            {
+                "name": "四月",
+                "value": 23
+            },
+            {
+                "name": "五月",
+                "value": 11
+            },
+            {
+                "name": "六月",
+                "value": 12
+            },
+            {
+                "name": "七月",
+                "value": 34
+            },
+            {
+                "name": "八月",
+                "value": 56
+            },
+            {
+                "name": "九月",
+                "value": 78
+            },
+            {
+                "name": "十月",
+                "value": 98
+            },
+            {
+                "name": "十一月",
+                "value": 23
+            },
+            {
+                "name": "十二月",
+                "value": 43
+            }],
+        [ {
+                "name": "一月",
+                "value": 43
+            },
+            {
+                "name": "二月",
+                "value": 34
+            },
+            {
+                "name": "三月",
+                "value": 56
+            },
+            {
+                "name": "四月",
+                "value": 78
+            },
+            {
+                "name": "五月",
+                "value": 23
+            },
+            {
+                "name": "六月",
+                "value": 24
+            },
+            {
+                "name": "七月",
+                "value": 25
+            },
+            {
+                "name": "八月",
+                "value": 26
+            },
+            {
+                "name": "九月",
+                "value": 45
+            },
+            {
+                "name": "十月",
+                "value": 12
+            },
+            {
+                "name": "十一月",
+                "value": 11
+            },
+            {
+                "name": "十二月",
+                "value": 22
+            }]
+      ]
+    }
+  },
+  methods: {
+    activeIndexState(index) {
+      return this.activeIndex === index
+    }
+  },
+  created() {
+    setInterval(() => {
+      this.activeIndex = this.activeIndex + 1 >= this.activeItems.length ? 0 : this.activeIndex + 1
+    }, 10 * 1000)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.charts {
+  .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: transparent;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  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/index.vue

@@ -6,10 +6,13 @@
           style="margin-bottom: 2px"
           title="关键指标"
         >
+            <KeyIndex />
         </border-panel>
         <border-panel height="337px" style="margin-bottom: 2px" title="起火原因">
+            <FireReason />
         </border-panel>
         <border-panel height="313px"  title="起火场所（类型）">
+            <FireAddressType />
         </border-panel>
       </div>
       <div>
@@ -25,27 +28,39 @@
           style="margin-bottom: 7px"
           title="火灾分布"
         >
+          <FireDistribution />
         </border-panel>
         <border-panel
           height="460px"
           title="历史火灾"
         >
+          <FireHistory />
         </border-panel>
       </div>
     </div>
   </template>
   <script>
+  import FireReason from "./components/FireReason.vue";
+  import FireAddressType from "./components/FireAddressType.vue";
+  import KeyIndex from './components/KeyIndex/index.vue'
+  import FireDistribution from './components/FireDistribution.vue'
+  import FireHistory from './components/FireHistory.vue'
+
   export default {
     name: "FireCondition",
-    components: { },
+    components: {
+        FireReason,
+        FireAddressType,
+        KeyIndex,
+        FireDistribution,
+        FireHistory
+     },
   };
   </script>
   
   <style scoped lang="less">
 .center-box {  
   margin-top: 640px;
-  .fire-time {
-  }
 }
 </style>
   

app/src/views/Home/components/FireIndex/Chart.vue

@@ -54,7 +54,8 @@ export default {
             show: false,
           },
           axisLabel: {
-            color: '#fff'
+            color: '#fff',
+            fontSize: 8
           },
           data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
         },

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

@@ -12,7 +12,7 @@
       </div>
       <div>
         <img src="../../../../assets/images/Vector (1).png" alt="" />
-        <span class="num">15%</span>
+        <span class="num up">15%</span>
       </div>
     </div>
     <!--亡人  -->
@@ -26,7 +26,7 @@
       </div>
       <div>
         <img src="../../../../assets/images/Vector (2).png" alt="" />
-        <span class="num">15%</span>
+        <span class="num down">15%</span>
       </div>
     </div>
     <!-- 伤人 -->
@@ -40,7 +40,7 @@
       </div>
       <div>
         <img src="../../../../assets/images/Vector (1).png" alt="" />
-        <span class="num">10%</span>
+        <span class="num up">10%</span>
       </div>
     </div>
     <!-- 直接经济损失 -->
@@ -50,7 +50,7 @@
           <span class="fire-num">6</span>
           <span class="money">万元</span>
           <img src="../../../../assets/images/Vector (1).png" alt="" />
-          <span class="num">15%</span>
+          <span class="num up">15%</span>
         </div>
         <div class="manoue">直接经济损失</div>
       </div>
@@ -391,9 +391,14 @@ export default {
     font-size: 20px;
   }
   .num {
-    color: #fb3636;
     font-size: 16px;
   }
+  .num.up {
+    color: #fb3636;
+  }
+  .num.down {
+    color: #19f34b;
+  }
 }
 img {
   display: inline-block;