Merge branch 'master' into sunke

app/src/api/index.js

@@ -0,0 +1,10 @@
+import {request} from '@zhgkpt/utils'
+/**
+ * 请求首页数据
+ * 
+ * @url /order/totaldata
+ * @method get
+ */
+export function totaldata() {
+  return request.get('/order/totaldata')
+}

app/src/assets/css/main.css

@@ -22,3 +22,42 @@ html,body {
 .Ads_adsClose_vIw-Kb img {
   display: none;
 }
+
+
+
+.el-select-dropdown.el-popper {
+  background-color: #4167a0;
+}
+.el-select-dropdown.el-popper .el-select-dropdown__empty{
+  color: #fff;
+}
+.el-popper[x-placement^=bottom] .popper__arrow::after  {
+  border-bottom-color: #4167a0 !important;
+}
+.el-select-dropdown.el-popper {
+  border: 1px solid rgba(0, 213, 255, 0.6) !important;
+}
+.el-select-dropdown.el-popper li.el-select-dropdown__item span {
+  color: #fff;
+}
+.el-select-dropdown.el-popper
+  li.el-select-dropdown__item.selected
+  span {
+  color: #2f7df2;
+}
+.el-select-dropdown.el-popper .el-select-dropdown__item.hover {
+  background-color: #2f7df2;
+}
+.el-select-dropdown.el-popper
+  li.el-select-dropdown__item.hover.selected
+  span {
+  color: #fff !important;
+}
+
+
+.amap-logo { 
+  display: none !important;
+}
+.amap-copyright {
+  display: none !important;
+}

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/Camera.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="camera-continer">
+
+  </div>
+</template>
+<script>
+
+export default {
+  name: "CameraContainer",
+  components: {},
+  data() {
+    return {
+        url: null
+    };
+  },
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    getData() {
+        
+    }
+  },
+};
+</script>
+
+<style scoped lang="less">
+.camera-continer {
+    width: 100%;
+    height: 100%;
+}
+</style>

app/src/components/Headers.vue

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

app/src/components/Map.vue

@@ -0,0 +1,391 @@
+<template>
+  <div class="map">
+    <div id="map-container"></div>
+    <!-- 信息弹窗 -->
+    <div class="info-window" ref="infoWindow" v-if="firePoint">
+      <div class="info-content">
+        <div class="title">
+          <div class="txt">重点部位提醒</div>
+          <div class="close" @click="closeInfoWindow"></div>
+        </div>
+        <div class="content">
+          <div class="row blue">
+            {{ firePoint.buildName }}存在{{ firePoint.depts.length }}个重点部位
+          </div>
+          <div class="row" v-for="(item, i) in firePoint.depts" :key="i">
+            {{ item }}
+          </div>
+        </div>
+        <div class="l-t"></div>
+        <div class="r-t"></div>
+        <div class="l-b"></div>
+        <div class="r-b"></div>
+        <div class="c-b"></div>
+      </div>
+      <div class="info-bottom"></div>
+    </div>
+  </div>
+</template>
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+import mapIconBuild from "../assets/images/map-icon-build.png";
+import mapIconPressure from "../assets/images/map-icon-pressure.png";
+import mapIconCar from "../assets/images/map-icon-car.png";
+import mapIconCamera from "../assets/images/map-icon-camera.png";
+import mapIconMicstation from "../assets/images/map-icon-micstation.png";
+import mapIconStation from "../assets/images/map-icon-119.png";
+import mapIconFire from "../assets/images/map-icon-fire.png";
+
+export default {
+  name: "MapContainer",
+  components: {},
+  data() {
+    return {
+      center: [],
+      markers: [],
+      firePoint: null,
+      icons: {
+        build: {
+          image: mapIconBuild,
+          size: [43, 60],
+          imageSize: [43, 60],
+        },
+        pressure: {
+          image: mapIconPressure,
+          size: [43, 60],
+          imageSize: [43, 60],
+        },
+        car: {
+          image: mapIconCar,
+          size: [70, 46],
+          imageSize: [70, 46],
+        },
+        camera: {
+          image: mapIconCamera,
+          size: [69, 69],
+          imageSize: [69, 69],
+        },
+        micstation: {
+          image: mapIconMicstation,
+          size: [99, 107],
+          imageSize: [99, 107],
+        },
+        station: {
+          image: mapIconStation,
+          size: [99, 107],
+          imageSize: [99, 107],
+        },
+      },
+    };
+  },
+  props: {
+    id: {
+      type: Number,
+      default: 1,
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      console.log(this.id);
+      // to-do
+      // 通过id调用接口获取数据
+      // 地图中心
+      this.center = [105.602725, 37.076636];
+      // 标志物
+      this.markers = [
+        {
+          icon: "build",
+          position: [105.582725, 37.076636],
+          anchor: "bottom-center",
+        },
+        {
+          icon: "pressure",
+          position: [105.612725, 37.06636],
+          anchor: "bottom-center",
+        },
+        {
+          icon: "car",
+          position: [105.602725, 37.079636],
+          anchor: "bottom-center",
+        },
+        {
+          icon: "camera",
+          position: [105.604725, 37.089636],
+          anchor: "bottom-center",
+        },
+        {
+          icon: "micstation",
+          position: [105.605725, 37.069636],
+          anchor: "bottom-center",
+        },
+        {
+          icon: "station",
+          position: [105.606725, 37.079636],
+          anchor: "bottom-center",
+        },
+      ];
+      // 着火点
+      this.firePoint = {
+        position: [105.602725, 37.076636],
+        buildName: "地矿大厦1栋",
+        depts: ["1楼：存在大量氧气罐", "2楼：存在乙醇、乙丙等可燃物品"],
+      };
+
+      if (this.firePoint) {
+        this.center = this.firePoint.position;
+      }
+
+      this.initMap();
+    },
+    initMap() {
+      AMapLoader.load({
+        key: "4776c927b5ebe35e9e33e5b14ec78b8f", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      })
+        .then((AMap) => {
+          this.map = new AMap.Map("map-container", {
+            //设置地图容器id
+            // viewMode: "3D", //是否为3D地图模式
+            zoom: 15, //初始化地图级别
+            center: this.center, //初始化地图中心点位置
+            mapStyle: "amap://styles/grey",
+          });
+
+          // 设置覆盖物
+          if (this.markers && this.markers.length > 0) {
+            this.markers.forEach((p) => {
+              const icon = this.icons[p.icon];
+              icon.size = new AMap.Size(icon.size[0], icon.size[1]);
+              icon.imageSize = new AMap.Size(
+                icon.imageSize[0],
+                icon.imageSize[1]
+              );
+              p.icon = new AMap.Icon(icon);
+              var marker = new AMap.Marker(p);
+              this.map.add(marker);
+            });
+          }
+
+          // 设置着火点
+          if (this.firePoint) {
+            this.addFirePoint();
+          }
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    addFirePoint() {
+      if (!this.firePoint) {
+        return;
+      }
+      const self = this;
+      // 着火点
+      var markerFire = new AMap.Marker({
+        icon: mapIconFire,
+        position: this.firePoint.position,
+        anchor: "center",
+      });
+      markerFire.on("click", function () {
+        self.addInfoWindow();
+      });
+      this.map.add(markerFire);
+
+      // 范围
+      var circle = new AMap.Circle({
+        center: new AMap.LngLat(
+          this.firePoint.position[0],
+          this.firePoint.position[1]
+        ), // 圆心位置
+        radius: 800, // 半径
+        strokeColor: "rgba(255, 0, 61)", // 线颜色
+        strokeOpacity: 0.6, // 线透明度
+        strokeWeight: 1, // 线粗细度
+        fillColor: "rgba(255, 0, 61)", // 填充颜色
+        fillOpacity: 0.08, // 填充透明度
+      });
+      this.map.add(circle);
+
+      // 信息窗口
+      this.addInfoWindow();
+    },
+    addInfoWindow() {
+      if (!this.firePoint) {
+        return;
+      }
+      // 弹窗
+      var infoWindow = new AMap.InfoWindow({
+        isCustom: true,
+        content: this.$refs.infoWindow,
+        offset: new AMap.Pixel(0, -45),
+        position: this.center,
+      });
+      infoWindow.open(
+        this.map,
+        new AMap.LngLat(this.firePoint.position[0], this.firePoint.position[1])
+      );
+    },
+    closeInfoWindow() {
+      this.map.clearInfoWindow();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.map {
+  width: 100%;
+  height: 100%;
+
+  #map-container {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
+  .info-window {
+    width: 434px;
+    height: auto;
+
+    .info-content {
+      width: 100%;
+      height: auto;
+      background: rgba(0, 0, 0, 0.82);
+      border: 1px solid rgba(61, 115, 255, 0.72);
+      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
+      position: relative;
+
+      .title {
+        width: 100%;
+        height: 56px;
+        background: url("../assets/images/map-infowindow-title-bg.png") center
+          center no-repeat;
+        background-size: cover;
+        border-bottom: 1px solid rgba(61, 115, 255, 0.5);
+        padding: 16px 16px 16px 32px;
+        display: flex;
+        box-sizing: border-box;
+
+        .txt {
+          flex-grow: 1;
+          font-family: "Abel";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 24px;
+          line-height: 24px;
+          color: #ffb800;
+        }
+
+        .close {
+          width: 24px;
+          height: 24px;
+          background: url(../assets/images/map-icon-close.png) center center
+            no-repeat;
+          background-size: 24px 24px;
+          cursor: pointer;
+        }
+      }
+
+      .content {
+        width: 100%;
+        height: auto;
+        min-height: 50px;
+        padding: 14px 32px;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+
+        .row {
+          width: 100%;
+          height: 24px;
+          margin-bottom: 8px;
+          font-family: "Abel";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
+
+          &.blue {
+            color: #7ea2ff;
+          }
+        }
+      }
+
+      .border-bottom {
+        width: 100%;
+        height: 2px;
+        display: flex;
+        background: linear-gradient(
+          90deg,
+          #2d53dd 0.62%,
+          #5c80ff 47.56%,
+          #355ce9 94.62%
+        );
+        position: relative;
+      }
+
+      .l-t {
+        width: 16px;
+        height: 2px;
+        left: 0;
+        top: 0;
+        background: #7b90ff;
+        position: absolute;
+      }
+
+      .r-t {
+        width: 16px;
+        height: 2px;
+        right: 0;
+        top: 0;
+        background: #7b90ff;
+        position: absolute;
+      }
+
+      .l-b {
+        width: 16px;
+        height: 2px;
+        left: 0;
+        bottom: 0;
+        background: #7b90ff;
+        position: absolute;
+      }
+
+      .r-b {
+        width: 16px;
+        height: 2px;
+        right: 0;
+        bottom: 0;
+        background: #7b90ff;
+        position: absolute;
+      }
+
+      .c-b {
+        width: calc(100% - 32px);
+        height: 2px;
+        left: 16px;
+        bottom: 0;
+        background: linear-gradient(
+          90deg,
+          #2d53dd 0.62%,
+          #5c80ff 47.56%,
+          #355ce9 94.62%
+        );
+        position: absolute;
+      }
+    }
+
+    .info-bottom {
+      width: 100%;
+      height: 24px;
+      margin-top: -2px;
+      background: url(../assets/images/map-infowindow-arrow.png) center center
+        no-repeat;
+      background-size: 39px 23px;
+    }
+  }
+}
+</style>

app/src/components/rate3D.vue

@@ -1,5 +1,7 @@
 <template>
-    <div ref="chart" class="item" style="width: 96px; height:138px" />
+    <div class="chart-box">
+        <div ref="chart" class="item" style="width: 96px; height:138px" />
+    </div>
   </template>
   
   <script>
@@ -255,5 +257,17 @@
   };
   </script>
   
-  <style scoped></style>
+  <style scoped lang="less">
+.chart-box {
+    position: relative;
+}
+.chart-box::after {
+    content: "";
+    position: absolute;
+    bottom: -32px;
+    background: url("../assets/images/bottom-icon.png") no-repeat  center;
+    width: 98px;
+    height: 62px;
+}
+</style>
   

app/src/router/index.js

@@ -9,6 +9,7 @@ import Risk from '../views/Risk/index.vue'
 import PoliceSituation from '../views/PoliceSituation/index.vue'
 import FireCondition from '../views/FireCondition/index.vue'
 import Iot from '../views/Iot/index.vue'
+import Test from '../views/Test/index.vue'
 Vue.use(VueRouter);
 const router = new VueRouter({
   mode: "history",
@@ -83,6 +84,12 @@ const router = new VueRouter({
           meta: {
             id: 7,
           }
+        },
+        {
+          path: '/test',
+          name: 'test',
+          component: Test,
+          meta: {}
         }
       ],
     },

app/src/views/Fire/components/Construction.vue

@@ -1,12 +1,6 @@
 <template>
   <div>
-    <div class="unit-echats">
-      <div class="unit-g">
-        管理形式
-        <unit3D />
-      </div>
-    </div>
-    <div class="unit maintenance">
+    <div class="unit">
       <span class="unit-c">管理主体</span>
       <div class="unit-num">
         <div>
@@ -31,7 +25,13 @@
         <div>一般单位</div>
       </div>
     </div>
-    <div class="unit">
+    <div class="unit-echats">
+      <div class="unit-g">
+        管理形式
+        <unit3D />
+      </div>
+    </div>
+    <div class="unit maintenance">
       <span class="unit-w">维保形式</span>
       <div class="unit-num">
         <div>

app/src/views/Fire/components/UnitInfo.vue

@@ -301,6 +301,7 @@ export default {
 
 .el-select-dropdown.el-popper {
   background-color: #4167a0;
+  color: #fff;
 }
 .el-popper[x-placement^=bottom] .popper__arrow::after  {
   border-bottom-color: #4167a0 !important;

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

@@ -0,0 +1,216 @@
+<template >
+  <div style="display: flex; justify-content: center;">
+    <div ref="fireReason" style="width:100%;height: 287px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'FireReason',
+  data() {
+    return {
+      chart: null,
+      data: [
+        {
+          name: "电气火灾",
+          value: 40
+        },
+        {
+          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() {
+    this.chart = echarts.init(this.$refs.fireReason)
+      this.chart.setOption({
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "shadow",
+          },
+          textStyle: {
+            fontSize: 12,
+          },
+          formatter: "{c} <br/>{b}",
+        },
+        legend: {
+          show: true,
+          // right: 0,
+          bottom: 10,
+          itemWidth: 14,
+          itemHeight: 14,
+          itemGap: 8,
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+          data: this.legend,
+        },
+        color: ["#00a2ff", "#00eaff", "#16c843", "#f4d156", "#6421ba", "#61d266"],
+        series: [
+          // 数据展示层
+          {
+            name: "存在隐患数",
+            type: "pie",
+            center: ["50%", "45%"],
+            radius: ["25%", "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,
+          },
+          {
+            type: "pie",
+            center: ["50%", "45%"],
+            radius: ["30%", "55%"],
+            hoverAnimation: false,
+            z: 10,
+            label: {
+              show: false
+            },
+            tooltip: {
+              show: false,
+            },
+            data: this.data.map(item => ({
+              ...item,
+              itemStyle: {
+                  normal: {
+                    color: 'rgba(0,0,0, .15)'
+                  }
+                }
+            })),
+            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,255,255)',
+                    opacity: 0.15
+                  }
+                }
+            })),
+            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,133,255)',
+                    opacity: 0.15
+                  }
+                }
+            })),
+            labelLine: {
+              show: false,
+            },
+          }
+        ]
+      })
+    },
+    reload() {
+      this.chart.setOption({
+         })
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+</style>

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

@@ -1,13 +1,66 @@
 <template>
-    <div>
-火灾指标
+    <div style="padding: 0px 35px; display: flex; justify-content: space-between">
+      <div>
+        <border-panel
+          height="301px"
+          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>
+        <div class="center-box">
+            <border-panel class="fire-time" 
+          :header-type="3" height="313px" width="955px" style="margin: 7px" title="火灾时段（24时）">
+            </border-panel>
+        </div>
+      </div>
+      <div>
+        <border-panel
+          height="486px"
+          style="margin-bottom: 7px"
+          title="火灾分布"
+        >
+          <FireDistribution />
+        </border-panel>
+        <border-panel
+          height="460px"
+          title="历史火灾"
+        >
+          <FireHistory />
+        </border-panel>
+      </div>
     </div>
-</template>
+  </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'
 
-<script setup>
-
-</script>
-
-<style lang="less" scoped>
-
-</style>
+  export default {
+    name: "FireCondition",
+    components: {
+        FireReason,
+        FireAddressType,
+        KeyIndex,
+        FireDistribution,
+        FireHistory
+     },
+  };
+  </script>
+  
+  <style scoped lang="less">
+.center-box {  
+  margin-top: 640px;
+}
+</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;

app/src/views/Home/components/HiddenDangerDetection/RectificationChart.vue

@@ -28,7 +28,6 @@ export default {
   methods: {
     initChart() {
       const option = {
-        // backgroundColor: '#043e9e',
         tooltip: {
           trigger: "item",
           axisPointer: {

app/src/views/Home/components/WisdomFire.vue

@@ -15,7 +15,7 @@
       <!-- 设备数 -->
 
       <div class="point-num">
-        <div class="build-num">
+        <div class="build-num" style="background: none; margin-bottom: 10px">
           <div class="build">
             <span
               >设备总数
@@ -31,35 +31,54 @@
             </span>
           </div>
         </div>
+        <div>
+          <span class="onlines on-line" style="margin: 0px 20px"> 在线</span>
+          <span class="offlines on-line">离线</span>
+        </div>
         <div class="pressure">
-          <div class="pressure-num">
-            <div class="pressure-bg">2436</div>
+          <div class="pressure-num" v-for="(item, index) in 3">
+            <div class="pressure-bg">
+              2436/35
+              <div style="font-size: 12px; margin-top: 5px">个(栋)</div>
+            </div>
+
             <ul class="pressure-list">
-              <li>水压监测点位（个）</li>
+              <li style="font-size: 12px; margin: 6px 0 0 9px">
+                水压监测点位（个）
+              </li>
               <li class="pressure-line">
-                <span>在线</span>
-                <img
+                <!-- 在线 -->
+                <span class="onlines on-line"></span>
+                <!-- <img
                   class="pressure-img"
                   src="../../assets/images/Ellipse 275.png"
                   alt=""
-                />
-                <span class="bumer">2670 </span>
-                <span class="unit">个</span>
+                /> -->
+                <span class="bumer" style="font-size: 16px; margin-left: 2px"
+                  >2670/100
+                  <span class="unit" style="font-size: 12px">(个/栋)</span>
+                </span>
               </li>
               <li class="pressure-line">
-                <span>告警</span>
-                <img
+                <!-- 离线 -->
+                <span class="offlines on-line"></span>
+                <!-- <img
                   class="pressure-img"
                   src="../../assets/images/Ellipse 275 (1).png"
                   alt=""
-                />
-                <span class="bumer">3144</span>
-                <span class="unit">个</span>
+                /> -->
+                <span class="bumer" style="margin-left: 2px"
+                  >3144/100
+                  <span style="font-size: 12px">(个/栋)</span>
+                </span>
+                <!-- <span class="unit">(个/栋)</span> -->
               </li>
             </ul>
           </div>
-          <div class="pressure-num">
-            <div class="pressure-bg">2436</div>
+          <!-- <div class="pressure-num">
+            <div class="pressure-bg">2436/35
+              <div style="font-size: 12px; margin-top: 5px;">个(栋)</div>
+            </div>
             <ul class="pressure-list">
               <li>水压监测点位（个）</li>
               <li class="pressure-line">
@@ -85,7 +104,9 @@
             </ul>
           </div>
           <div class="pressure-num">
-            <div class="pressure-bg">2436</div>
+            <div class="pressure-bg">2436/35
+              <div style="font-size: 12px; margin-top: 5px;">个(栋)</div>
+            </div>
             <ul class="pressure-list">
               <li>水压监测点位（个）</li>
               <li class="pressure-line">
@@ -109,21 +130,29 @@
                 <span class="unit">个</span>
               </li>
             </ul>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script></script>
+<script>
+export default {
+  data() {
+    return {
+      listNum: ["水压监测点位", "电气火灾监测点位", "生命通道监测点位"],
+    };
+  },
+};
+</script>
 
 <style scoped>
 .num-box {
   width: 414px;
   display: flex;
   flex-direction: column;
-  padding: 20px 15px;
+  padding: 10px 12px;
 }
 .build-num {
   width: 100%;
@@ -141,7 +170,7 @@
 }
 .point-num {
   flex: 1;
-  margin-top: 10px;
+  /* margin-top: 10px; */
 }
 .num {
   font-size: 30px;
@@ -168,10 +197,11 @@ img {
   justify-content: space-between;
 }
 .pressure-num {
-  width: 30%;
+  /* width: 30%; */
   height: 150px;
-  letter-spacing: 1px;
+  /* letter-spacing: 1px; */
   font-size: 12px;
+  text-align: center;
 }
 .pressure-img {
   display: inline-block !important;
@@ -182,31 +212,46 @@ img {
 .pressure-list {
   font-size: 12px;
   color: #fff;
-  line-height: 25px;
+  text-align: left;
   font-family: "Abel";
 }
+.onlines::after {
+  background-color: #2fde60;
+}
+.offlines::after {
+  background-color: #ff4f4f;
+}
+.on-line::after {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: 5px;
+}
+.on-line {
+  letter-spacing: 2px;
+}
 .pressure-bg {
   width: 66px;
   height: 77px;
   background: url("@/assets/images/water.png") no-repeat;
-  font-size: 24px;
+  font-size: 20px;
   text-align: center;
   padding-left: 3px;
-  padding-top: 20px;
+  padding-top: 10px;
   box-sizing: border-box;
   margin: auto;
 }
-.pressure-line {
+/* .pressure-line {
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
+} */
 .bumer {
-  width: 50px;
+  display: inline-block;
   font-size: 16px;
-  font-family: "Abel";
-  text-align: center;
-  /* margin-right: 8px; */
+  margin-top: 5px;
 }
 .unit {
   margin-right: 12px;

app/src/views/Iot/components/AlarmHandling.vue

@@ -0,0 +1,283 @@
+<template>
+    <div class="maintenance-supervision" >
+      <div class="maintenance-supervision_header" >
+        <div style="display: flex; ">
+          <el-select v-model="value" placeholder="告警年限">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-select v-model="value" placeholder="告警类型">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-select v-model="value" placeholder="处置状态">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+  
+        <el-button>搜索</el-button>
+      </div>
+      <div >
+        <div class="row header">
+          <span class="num">序号</span>
+          <span class="time">区域</span>
+          <span class="person">未处理</span>
+          <span class="result">已处理</span>
+        </div>
+        <VueSeamlessScroll :data="list1" :class-option="classOption" class="warp">
+          <ul class="item">
+            <li class="row" v-for="(item, index) in list1" :key="index">
+              <span class="num">{{ index + 1 }}</span>
+              <span class="time">{{ item[0] }}</span>
+              <span class="person">{{ item[1] }}</span>
+              <span class="result">{{ item[2] }}</span>
+            </li>
+          </ul>
+        </VueSeamlessScroll>
+      </div>
+    </div>
+  </template>
+  <script>
+  import VueSeamlessScroll from "vue-seamless-scroll";
+  
+  export default {
+    name: "MaintenanceSupervision",
+    data() {
+      return {
+        search: "",
+        options: [
+          {
+            value: '1',
+            label: '1111'
+          },
+          {
+            value: '2',
+            label: '2222'
+          },
+          {
+            value: '3',
+            label: '3333'
+          }
+        ],
+        list1: [
+          ["万州区", "1200", "8765"],
+          ["万州区", "1200", "8765"],
+          ["万州区", "1200", "8765"],
+          ["万州区", "1200", "8765"],
+          ["万州区", "1200", "8765"],
+          ["万州区", "1200", "8765"],
+          ["万州区", "1200", "8765"],
+          ["万州区", "1200", "8765"],
+          ["万州区", "1200", "8765"],
+          ["万州区", "1200", "8765"],
+        ],
+        value: "",
+  
+        checked: 0,
+      };
+    },
+    components: {
+      VueSeamlessScroll,
+    },
+    computed: {
+      classOption() {
+        return {
+          singleHeight: 43,
+        };
+      },
+    },
+    methods: {
+      change(idx) {
+        this.checked = idx;
+        console.log("切换索引", idx);
+      },
+      resultType(text) {
+        return {
+          合格: "#23f59d",
+          不合格: "#df575b",
+          是: "#23f59d",
+          否: "#df575b",
+        }[text];
+      },
+    },
+  };
+  </script>
+  
+  <style scoped lang="less">
+  .maintenance-supervision {
+    // padding: 10px 10px 0px 20px;
+    ::v-deep(.el-input__inner) {
+      border: none;
+      background: linear-gradient(360deg, rgba(0,148,255, .5) 0%, rgba(0,148,255, .31) 100%);
+      color: #fff;
+    }
+    ::v-deep(.el-button) {
+      border: none;
+      background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
+      color: #fff;
+    }
+    .maintenance-supervision_header {
+      display: flex;
+      justify-content: space-around;
+      border-bottom: 1px solid #154956;
+      padding-bottom: 2px;
+      margin: 10px 6px 6px;
+      font-size: 12px;
+      color: rgb(79, 149, 186);
+    }
+    .warp {
+      height: 520px;
+      margin: 0 auto;
+      overflow: hidden;
+      .item {
+        list-style: none;
+        padding: 0;
+        margin: 0 auto;
+        cursor: pointer;
+      }
+    }
+  
+    .header {
+      color: #fff;
+      height: 33px !important;
+      line-height: 33px !important;
+      background-color: rgba(0, 163, 255, 0.3) !important;
+      color: #61dbff;
+      margin-top: 15px;
+      margin-bottom: 6px;
+    }
+  
+    .row,
+    li,
+    a {
+      display: block;
+      height: 39px;
+      line-height: 39px;
+      margin-bottom: 4px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 14px;
+      background-color: rgba(0, 0, 0, 0.2);
+      .time,
+      .num,
+      .person,
+      .result {
+        flex: 0.33;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .result {
+        color: #68D1FF;
+      }
+      .num {
+        flex: 0.15;
+      }
+    }
+  }
+  
+  
+  /deep/.el-input__inner {
+    background-color: #184254;
+    width: 100px;
+    height: 30px;
+    margin-bottom: 5px;
+    margin-right: 5px;
+  }
+
+  /deep/.el-button {
+    width: 120px;
+    height: 32px;
+    font-size: 14px;
+    line-height: 2px;
+    background: #184254;
+    margin: 0 20px 0 30px;
+    color: #fff;
+    border-radius: 5px;
+    border: none;
+  }
+  // /deep/.el-select-dropdown{
+  
+  //     background-color:#184254 !important;
+  //     position: fixed;
+  
+  //   }
+
+  // /deep/.el-select-dropdown{
+  //      border: none;
+  //      background-color: #184254 ;
+  //  }
+  //输入框
+  //  /deep/.el-input__inner{
+  //      color:#eee;
+  //      border-color: #00fff6;
+  //      background-color: rgba(1, 28, 82, 0.8);
+  //  }
+  //  //聚焦时的样式
+  //  /deep/.el-select .el-input.is-focus .el-input__inner{
+  //      border-color: #0B61AA;
+  //      background-color: rgba(1, 28, 82, 0.8);
+  //      color:#00D3E9;
+  //  }
+  //  //下拉框选中
+  //  /deep/.el-select-dropdown__item{
+  //      color: #eee;
+  //  }
+  //  //鼠标经过下拉框
+  //  /deep/.el-select-dropdown__item.hover,
+  //  /deep/.el-select-dropdown__item:hover{
+  //      color:#00D3E9;
+  //      background-color: #0F3360;
+  //  }
+  </style>
+  
+  
+  <style>
+  
+  .el-select-dropdown.el-popper {
+    background-color: #4167a0;
+  }
+  .el-popper[x-placement^=bottom] .popper__arrow::after  {
+    border-bottom-color: #4167a0 !important;
+  }
+  .el-select-dropdown.el-popper {
+    border: 1px solid rgba(0, 213, 255, 0.6) !important;
+  }
+  .el-select-dropdown.el-popper li.el-select-dropdown__item span {
+    color: #fff;
+  }
+  .el-select-dropdown.el-popper
+    li.el-select-dropdown__item.selected
+    span {
+    color: #2f7df2;
+  }
+  .el-select-dropdown.el-popper .el-select-dropdown__item.hover {
+    background-color: #2f7df2;
+  }
+  .el-select-dropdown.el-popper
+    li.el-select-dropdown__item.hover.selected
+    span {
+    color: #fff !important;
+  }
+ .select_btn {
+margin-left: -10px;
+  }
+  </style>
+  

app/src/views/Iot/components/IotVideo.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="v-ideo">
+    <div class="v-one">视频1</div>
+    <div class="v-one">视频2</div>
+  </div>
+</template>
+
+<script></script>
+
+<style lang="less" scoped>
+.v-ideo {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 15px;
+
+  .v-one {
+    width: 100%;
+    height: 185px;
+    border: 1px solid #ccc;
+  }
+  .v-one:first-child{
+    margin-bottom: 10px;
+  }
+}
+</style>

app/src/views/Iot/components/RegionalDistribution.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="regional-distribution">
+    <div>
+      <el-select v-model="selectOption" style="width: 100%;" size="mini">
+        <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+        </el-option>
+      </el-select>
+    </div>
+    <div>
+      <div class="row header">
+        <span class="idx">序号</span>
+        <span class="area">区域</span>
+        <span class="build">建筑数量（栋）</span>
+        <span class="tim">终端数量（个）</span>
+        <span class="percent">覆盖率</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="area">{{ item[0] }}</span>
+            <span class="build">{{ item[1] }}</span>
+            <span class="tim">{{ item[2] }}</span>
+            <span class="percent">{{ item[3] }}</span>
+          </li>
+        </ul>
+      </VueSeamlessScroll>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueSeamlessScroll from "vue-seamless-scroll";
+export default {
+  name: "RegionalDistribution",
+  components: {
+    VueSeamlessScroll,
+  },
+  data() {
+    return {
+      list: [
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+      ],
+      options: [
+        {label: '已建物联网排名', value: 1},
+        {label: '已建物水压监测排名', value: 2},
+        {label: '已建电器火灾监测排名', value: 3},
+        {label: '已建消防通道检测排名', value: 4},
+        {label: '已建火灾报警主机监测排名', value: 5},
+        {label: '已建消防控制室人员离岗监控排名', value: 6},
+      ],
+      selectOption: 1
+    };
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 43,
+      };
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.regional-distribution {
+  padding: 9px 8px 0px 8px;
+   // padding: 10px 10px 0px 20px;
+   ::v-deep(.el-input__inner) {
+    text-align: right;
+    border: none;
+    background: linear-gradient(360deg, rgba(0,148,255, .5) 0%, rgba(0,148,255, .31) 100%);
+    color: #fff;
+  }
+}
+.warp {
+  height: 374px;
+  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: 39px;
+  line-height: 39px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #fff;
+  margin-top: 4px;
+  .idx,
+  .area,
+  .build,
+  .tim,
+  .percent {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .idx {
+    flex: .1;
+  }
+
+  .area {
+    flex: 0.25;
+  }
+  .build {
+    flex: 0.25;
+  }
+  .tim {
+    flex: 0.25;
+    color: #61DBFF;
+  }
+  .percent {
+    flex: 0.15;
+  }
+}
+</style>
+

app/src/views/Iot/components/TotalityInfo.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="iot">
+    <div class="all-unit">
+      <div class="iot-num" v-for="(item, index) in list" :key="index">
+        <LinearText
+          style="display: inline-block"
+          :text="item.num"
+          fontSize="24px"
+        ></LinearText>
+        <div class="text">{{ item.title }}</div>
+        <div>
+          {{ item.text }}
+          <span
+            class="num"
+            :style="{
+              color: changaColor(item.text),
+            }"
+            >{{ item.allNum }}</span
+          >个
+        </div>
+      </div>
+    </div>
+    <!-- 检测点位统计 -->
+    <div class="PointStatistics">
+      <span style="font-size: 16px">检测点位统计</span>
+      <div class="online-num">
+        <div class="status">
+          <span class="online line">在线</span>
+        </div>
+        <div>
+          <span class="offline line">离线</span>
+        </div>
+      </div>
+    </div>
+    <div class="ala-n">
+      <div v-for="(item, index) in lineList" :key="index" class="alarm">
+        <div class="alarm-host">
+          <img :src="item.imgs" alt="">
+          <div style="width: 90%;">
+            <div class="inline-bor">
+              <span style="font-size: 14px">{{ item.text }}</span>
+              <span class="calc-percent">{{item.allnum}}/{{ item.average }}</span>个/栋
+            </div>
+            <div class="on-line">
+             <div>
+                <span class="online lines"></span>
+              <span  style="font-size: 20px;">{{ item.line }}</span
+              >(个/栋)
+             </div>
+              <div>
+                <span class="offline lines"></span>
+              <span style="font-size: 20px;">{{ item.offNum }}</span
+              >(个/栋)
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="last-line"> 
+        <img src="../../../assets/images/Group 1321314604.png" alt="" />
+        <div style="width: 86%;">
+            <div class="inline-bor">
+              <span style="font-size: 14px">消防控制室人员离岗</span>
+              <span> <span class="calc-percent">10731/676</span>个/栋</span>
+            </div>
+            <div class="on-line">
+             <div>
+              <span class="online lines" style="font-size: 18px;">2613</span
+              >(个/栋)
+             </div>
+              <div>
+                <span class="lines offline" style="font-size: 18px;">613</span
+              >(个/栋)
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import imgs from "../../../assets/images/Group 1321314604.png";
+export default {
+  data() {
+    return {
+      list: [
+        {
+          num: 1542,
+          title: "已完成物联网建筑数(栋)",
+          text: "设备总数",
+          allNum: 1276,
+        },
+        {
+          num: 1542,
+          title: "在线建筑数(栋)",
+          text: "在线",
+          allNum: 1200,
+        },
+        {
+          num: 542,
+          title: "告警建筑数(栋)",
+          text: "报警",
+          allNum: 768,
+        },
+      ],
+      lineList: [
+        {
+          imgs: imgs,
+          text: "火灾报警主机",
+          allnum: 10731,
+          average: 676,
+          line: 2613,
+          offNum: 613,
+        },
+        {
+          imgs: imgs,
+          text: "水压",
+          allnum: 10731,
+          average: 676,
+          line: 2613,
+          offNum: 613,
+        },
+        {
+          imgs: imgs,
+          text: "点起火灾",
+          allnum: 10731,
+          average: 676,
+          line: 2613,
+          offNum: 613,
+        },
+        {
+          imgs: imgs,
+          text: "生命通道",
+          allnum: 10731,
+          average: 676,
+          line: 2613,
+          offNum: 613,
+        },
+      ],
+    };
+  },
+  methods: {
+    changaColor(text) {
+      return {
+        设备总数: "#FFD74B",
+        在线: "#00FF66",
+        报警: "#FF4B23",
+      }[text];
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.iot {
+  margin: 13px 5px 0px 5px ;
+  .all-unit {
+    display: flex;
+    justify-content: space-between;
+    gap: 11px;
+  }
+  .iot-num {
+    width: 168px;
+    height: 88px;
+    background: linear-gradient(360deg, rgba(0,148,255, 0) 0%, rgba(0,148,255, .6) 100%);;
+    border: 1px solid #1a5878;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    padding: 4px 0px;
+    box-sizing: border-box;
+    gap: 4px;
+    .num {
+      font-size: 24px;
+      color: #ffd74b;
+      padding: 0px 5px;
+    }
+  }
+}
+.PointStatistics {
+  width: 94%;
+  height: 37px;
+  background: rgba(0,213,255, .24); //渐变
+  margin: 10px 0;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+
+  align-items: center;
+  padding: 0 15px;
+  .online-num {
+    display: flex;
+    margin-right: 32px;
+
+    .status {
+      margin-right: 22px;
+    }
+  }
+}
+.ala-n {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.line::before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+.online::before {
+  background-color: #2fde60;
+}
+.offline::before {
+  background-color: #ff4f4f;
+}
+.alarm {
+  width: 264px;
+  height: 81px;
+  background: linear-gradient(360deg, rgba(61,220,255, .30) 0%,rgba(61, 232, 255, .0)  100%);
+  line-height: 40px;
+  margin-top: 10px;
+  letter-spacing: 1px;
+  .alarm-host {
+    display: inline-block;
+    // width: 124px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    text-align: center;
+    // background: url('../../../assets/images/Group 1321314604.png') no-repeat;
+    // background-size: 100% 100%;
+  }
+  img {
+    display: inline-block;
+    width: 52px;
+    height: 49px;
+  }
+  .inline-bor{
+    // width: 124px;
+    border-bottom: 1px dotted #7789CD;
+    .calc-percent {
+      color: #44F1FF;
+      font-size: 18px;
+    }
+  }
+}
+.lines::before {
+    content: "";
+    display: inline-block;
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
+}
+.on-line{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+.last-line{
+    width: 100%;
+    height: 80px;
+    background: linear-gradient(360deg, rgba(61,220,255, .30) 0%,rgba(61, 232, 255, .0)  100%);
+    margin-top: 5px;
+    line-height: 40px;
+    display: flex;
+    align-items: center;
+    img {
+      display: inline-block;
+      width: 52px;
+      height: 49px;
+    }
+    .inline-bor{
+        display: flex;
+        justify-content: space-between;
+        font-size: 16px;
+        border-bottom: 1px dotted #7789CD;
+        .calc-percent {
+          color: #44F1FF;
+          font-size: 18px;
+        }
+    }
+    .on-line {
+      display: flex;
+      justify-content: start;
+      gap: 20px;
+      padding: 0px 10px;
+    }
+
+}
+</style>

app/src/views/Iot/index.vue

@@ -1,13 +1,82 @@
 <template>
-    <div>
-        物联网
+    <div style="padding: 0px 35px; display: flex; justify-content: space-between">
+      <div style="z-index: 100;">
+        <border-panel
+          height="492px"  
+          :header-type="4" 
+          width="544px"  
+          style="margin-bottom: 6px"
+          title="总体情况            "
+        >
+        <TotalityInfo/>
+        </border-panel>
+        <border-panel height="450px"  :header-type="4" 
+          width="544px"   style="margin-bottom: 6px" title="视频监控">
+            <IotVideo/>
+        </border-panel>
+      </div>
+      <div style="">
+        <div class="map-container cover">
+          <MapContainer  />
+        </div>
+      </div>
+      <div style="z-index: 100;">
+        <border-panel
+          height="469px"
+          width="540px" :header-type="4" 
+          style="margin-bottom: 10px"
+          title="区域分布"
+        >
+         <RegionalDistribution />
+        </border-panel>
+        <border-panel
+          height="469px"
+          width="540px" :header-type="4" 
+          style="margin-bottom: 6px"
+          title="告警处置"
+        >
+        <AlarmHandling/>
+        </border-panel>
+      </div>
     </div>
-</template>
+  </template>
+  <script>
+  
+import MapContainer from "@/components/Map.vue";
+import TotalityInfo from './components/TotalityInfo.vue';
+import IotVideo from './components/IotVideo.vue'
+import AlarmHandling from './components/AlarmHandling.vue'
+import RegionalDistribution from "./components/RegionalDistribution.vue";
+export default {
+    components: {  TotalityInfo, RegionalDistribution, IotVideo,AlarmHandling, MapContainer },
+  };
+  </script>
+  
+  <style scoped lang="less">
+.map-container {
+  z-index: 50;
+  position: fixed;
+  top: 100px; 
+  left: 50%; 
+  transform: translateX(-50%); 
+  width: 1100px;
+  height: 90%;
+}
 
-<script >
+.map-container::after {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  box-shadow:0 0 100px 100px #070b13 inset;
+  pointer-events: none;
+}
 
-</script>
+iframe {
+  border: none;
+}
 
-<style lang="less" scoped>
-
-</style>
+</style>
+  

app/src/views/Test/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <!-- 地图 -->
+    <div class="map-exp">
+      <div style="font-size: 20px">地图调用示例：</div>
+      <Map :id="1" />
+    </div>
+
+    <!-- 监控 -->
+    <div class="camrea-exp">
+      <div style="font-size: 20px">监控调用示例：</div>
+      <Camera id="50015200001310000010" />
+    </div>
+  </div>
+</template>
+<script>
+import Map from "@/components/Map.vue";
+import Camera from "@/components/Camera.vue";
+export default {
+  name: "Test",
+  components: {
+    Map,
+    Camera,
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="less">
+.map-exp {
+  width: 1000px;
+  height: 500px;
+}
+.camrea-exp {
+  margin-top: 100px;
+  width: 500px;
+  height: 500px
+}
+</style>

components/BorderPanel/data.js

@@ -1,5 +1,7 @@
 import headerTitleBg1 from "../assets/border-panel_header_1.svg";
 import headerTitleBg2 from "../assets/border-panel_header_2.svg";
 import headerTitleBg3 from "../assets/border-panel_header_3.svg";
+import headerTitleBg4 from "../assets/border-panel_header_4.svg";
+import headerTitleBg5 from "../assets/border-panel_header_5.svg";
 
-export const headerTitleBgs = [headerTitleBg1, headerTitleBg2, headerTitleBg3];
+export const headerTitleBgs = [headerTitleBg1, headerTitleBg2, headerTitleBg3, headerTitleBg4, headerTitleBg5];

components/assets/border-panel_header_4.svg

@@ -0,0 +1,234 @@
+<svg width="987" height="50" viewBox="0 0 987 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_166_209)">
+<path d="M-0.000396729 49H235.606C238.739 49 241.687 47.5163 243.553 45C245.419 42.4837 248.367 41 251.5 41H-0.000396729V49Z" fill="url(#paint0_linear_166_209)" fill-opacity="0.3"/>
+<path d="M443 41.4919H251.501C248.368 41.4919 245.42 42.9756 243.554 45.4919V45.4919C241.688 48.0081 238.74 49.4919 235.607 49.4919H0.000398903" stroke="white"/>
+<path d="M443 41.4919H251.501C248.368 41.4919 245.42 42.9756 243.554 45.4919V45.4919C241.688 48.0081 238.74 49.4919 235.607 49.4919H0.000398903" stroke="url(#paint1_linear_166_209)"/>
+<path d="M3.97839e-06 4L987 4V41H0L3.97839e-06 4Z" fill="url(#paint2_linear_166_209)" fill-opacity="0.34"/>
+<g style="mix-blend-mode:overlay" filter="url(#filter0_f_166_209)">
+<path d="M24.7371 17.8571L61.9995 50.7239L-12.5254 50.7239L24.7371 17.8571Z" fill="url(#paint3_radial_166_209)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:overlay" filter="url(#filter1_f_166_209)">
+<path d="M24.7374 32.1175L45.8714 50.7239L3.60352 50.7239L24.7374 32.1175Z" fill="url(#paint4_radial_166_209)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:overlay" filter="url(#filter2_f_166_209)">
+<path d="M24.7354 41.896L34.7462 50.7239L14.7246 50.7239L24.7354 41.896Z" fill="url(#paint5_radial_166_209)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<path d="M544 43H-341V53H544V43Z" fill="url(#paint6_radial_166_209)"/>
+<path d="M544 -3H-341V7H544V-3Z" fill="url(#paint7_radial_166_209)"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 395.145 43)" fill="#00C2FF"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 406.258 43)" fill="#0085FF" fill-opacity="0.5"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 417.373 43)" fill="#00C2FF"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 428.486 43)" fill="#0085FF" fill-opacity="0.5"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 439.855 43)" fill="#00C2FF"/>
+<path d="M251.468 44L246.256 49H244L249.023 44H251.468Z" fill="url(#paint8_linear_166_209)"/>
+<path d="M257.425 44L252.213 49H249.957L254.981 44H257.425Z" fill="url(#paint9_linear_166_209)"/>
+<path d="M264.129 49L269.34 44H266.896L261.873 49H264.129Z" fill="url(#paint10_linear_166_209)"/>
+<path d="M305.085 44L299.873 49H297.617L302.641 44H305.085Z" fill="url(#paint11_linear_166_209)"/>
+<path d="M317 44L311.789 49H309.532L314.556 44H317Z" fill="url(#paint12_linear_166_209)"/>
+<path d="M276.043 49L281.255 44H278.811L273.787 49H276.043Z" fill="url(#paint13_linear_166_209)"/>
+<path d="M293.17 44L287.959 49H285.703L290.726 44H293.17Z" fill="url(#paint14_linear_166_209)"/>
+<path d="M263.382 44L258.171 49H255.915L260.938 44H263.382Z" fill="url(#paint15_linear_166_209)"/>
+<path d="M299.127 44L293.916 49H291.66L296.683 44H299.127Z" fill="url(#paint16_linear_166_209)"/>
+<path d="M275.297 44L270.086 49H267.83L272.853 44H275.297Z" fill="url(#paint17_linear_166_209)"/>
+<path d="M311.043 44L305.831 49H303.575L308.599 44H311.043Z" fill="url(#paint18_linear_166_209)"/>
+<path d="M287.213 44L282.001 49H279.745L284.769 44H287.213Z" fill="url(#paint19_linear_166_209)"/>
+<path d="M323.468 44L318.256 49H316L321.023 44H323.468Z" fill="url(#paint20_linear_166_209)"/>
+<path d="M329.425 44L324.213 49H321.957L326.981 44H329.425Z" fill="url(#paint21_linear_166_209)"/>
+<path d="M336.129 49L341.34 44H338.896L333.873 49H336.129Z" fill="url(#paint22_linear_166_209)"/>
+<path d="M377.085 44L371.873 49H369.617L374.641 44H377.085Z" fill="url(#paint23_linear_166_209)"/>
+<path d="M389 44L383.789 49H381.532L386.556 44H389Z" fill="url(#paint24_linear_166_209)"/>
+<path d="M348.043 49L353.255 44H350.811L345.787 49H348.043Z" fill="url(#paint25_linear_166_209)"/>
+<path d="M365.17 44L359.959 49H357.703L362.726 44H365.17Z" fill="url(#paint26_linear_166_209)"/>
+<path d="M335.382 44L330.171 49H327.915L332.938 44H335.382Z" fill="url(#paint27_linear_166_209)"/>
+<path d="M371.127 44L365.916 49H363.66L368.683 44H371.127Z" fill="url(#paint28_linear_166_209)"/>
+<path d="M347.297 44L342.086 49H339.83L344.853 44H347.297Z" fill="url(#paint29_linear_166_209)"/>
+<path d="M383.043 44L377.831 49H375.575L380.599 44H383.043Z" fill="url(#paint30_linear_166_209)"/>
+<path d="M359.213 44L354.001 49H351.745L356.769 44H359.213Z" fill="url(#paint31_linear_166_209)"/>
+<g filter="url(#filter3_f_166_209)">
+<rect x="4" y="24" width="10.6066" height="10.6066" transform="rotate(-45 4 24)" fill="#0057FF" fill-opacity="0.66"/>
+</g>
+<path d="M17.4325 13L29 23.9425L17.4713 35H12.3534L21.1197 23.9425L12.4147 13H17.4325Z" fill="url(#paint32_linear_166_209)"/>
+<path d="M15.6051 24.0484L12.3025 20.9371L9 24.0484L12.3025 27.1596L15.6051 24.0484Z" fill="url(#paint33_linear_166_209)"/>
+</g>
+<defs>
+<filter id="filter0_f_166_209" x="-15.5254" y="14.8571" width="80.5249" height="38.8668" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_166_209"/>
+</filter>
+<filter id="filter1_f_166_209" x="1.60352" y="30.1175" width="46.2681" height="22.6064" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_166_209"/>
+</filter>
+<filter id="filter2_f_166_209" x="13.7246" y="40.896" width="22.0215" height="10.8279" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_166_209"/>
+</filter>
+<filter id="filter3_f_166_209" x="-2" y="10.5" width="27" height="27" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_166_209"/>
+</filter>
+<linearGradient id="paint0_linear_166_209" x1="237.923" y1="49" x2="-3.5515" y2="49" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00A3FF"/>
+<stop offset="1" stop-color="#0085FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_166_209" x1="443" y1="38.0736" x2="-7.20155" y2="38.0736" gradientUnits="userSpaceOnUse">
+<stop stop-color="#001F3D"/>
+<stop offset="0.177083" stop-color="#0084FF"/>
+<stop offset="1" stop-color="#00C2FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_166_209" x1="596.354" y1="41" x2="596.354" y2="4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.572917" stop-color="#00A3FF" stop-opacity="0"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint3_radial_166_209" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.7371 50.7239) rotate(-90) scale(34.8015 56.8608)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_166_209" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.7374 50.7239) rotate(-90) scale(19.7017 32.2494)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_166_209" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.7354 50.7239) rotate(-90) scale(9.34751 15.276)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_166_209" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(100.114 47.3304) rotate(-90) scale(4.88953 313.212)">
+<stop offset="0.0381" stop-color="white"/>
+<stop offset="0.1359" stop-color="#00D5FF" stop-opacity="0.6"/>
+<stop offset="0.2643" stop-color="#006AFF" stop-opacity="0.5"/>
+<stop offset="0.4568" stop-color="#0935CC" stop-opacity="0.3238"/>
+<stop offset="0.6172" stop-color="#100EA7" stop-opacity="0.177"/>
+<stop offset="0.7013" stop-color="#120099" stop-opacity="0.1"/>
+<stop offset="0.746" stop-color="#100089" stop-opacity="0.085"/>
+<stop offset="0.8334" stop-color="#0B005F" stop-opacity="0.0558"/>
+<stop offset="0.954" stop-color="#03001B" stop-opacity="0.0154"/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_166_209" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(100.114 1.33036) rotate(-90) scale(4.88953 313.212)">
+<stop offset="0.0381" stop-color="white"/>
+<stop offset="0.1359" stop-color="#00D5FF" stop-opacity="0.6"/>
+<stop offset="0.2643" stop-color="#006AFF" stop-opacity="0.5"/>
+<stop offset="0.4568" stop-color="#0935CC" stop-opacity="0.3238"/>
+<stop offset="0.6172" stop-color="#100EA7" stop-opacity="0.177"/>
+<stop offset="0.7013" stop-color="#120099" stop-opacity="0.1"/>
+<stop offset="0.746" stop-color="#100089" stop-opacity="0.085"/>
+<stop offset="0.8334" stop-color="#0B005F" stop-opacity="0.0558"/>
+<stop offset="0.954" stop-color="#03001B" stop-opacity="0.0154"/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint8_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint19_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint20_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint21_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint22_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint23_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint24_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint25_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint26_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint27_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint28_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint29_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint30_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint31_linear_166_209" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint32_linear_166_209" x1="28.4118" y1="23.7976" x2="9" y2="23.7976" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.254331" stop-color="#CDE4FF"/>
+<stop offset="1" stop-color="#0075FF"/>
+</linearGradient>
+<linearGradient id="paint33_linear_166_209" x1="28.4118" y1="23.7976" x2="9" y2="23.7976" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.254331" stop-color="#CDE4FF"/>
+<stop offset="1" stop-color="#0075FF"/>
+</linearGradient>
+<clipPath id="clip0_166_209">
+<rect width="987" height="50" fill="white"/>
+</clipPath>
+</defs>
+</svg>

components/assets/border-panel_header_5.svg

@@ -0,0 +1,234 @@
+<svg width="540" height="50" viewBox="0 0 540 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_251_119)">
+<path d="M-0.000396729 49H235.606C238.739 49 241.687 47.5163 243.553 45C245.419 42.4837 248.367 41 251.5 41H-0.000396729V49Z" fill="url(#paint0_linear_251_119)" fill-opacity="0.3"/>
+<path d="M443 41.4918H251.501C248.368 41.4918 245.42 42.9755 243.554 45.4918V45.4918C241.688 48.0081 238.74 49.4918 235.607 49.4918H0.000398903" stroke="white"/>
+<path d="M443 41.4918H251.501C248.368 41.4918 245.42 42.9755 243.554 45.4918V45.4918C241.688 48.0081 238.74 49.4918 235.607 49.4918H0.000398903" stroke="url(#paint1_linear_251_119)"/>
+<path d="M2.19275e-06 4L544 4V41H0L2.19275e-06 4Z" fill="url(#paint2_linear_251_119)" fill-opacity="0.34"/>
+<g style="mix-blend-mode:overlay" filter="url(#filter0_f_251_119)">
+<path d="M24.7371 17.8571L61.9995 50.7239L-12.5254 50.7239L24.7371 17.8571Z" fill="url(#paint3_radial_251_119)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:overlay" filter="url(#filter1_f_251_119)">
+<path d="M24.7374 32.1175L45.8714 50.7239L3.60352 50.7239L24.7374 32.1175Z" fill="url(#paint4_radial_251_119)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:overlay" filter="url(#filter2_f_251_119)">
+<path d="M24.7354 41.896L34.7462 50.7239L14.7246 50.7239L24.7354 41.896Z" fill="url(#paint5_radial_251_119)" fill-opacity="0.97" style="mix-blend-mode:overlay"/>
+</g>
+<path d="M544 43H-341V53H544V43Z" fill="url(#paint6_radial_251_119)"/>
+<path d="M544 -3H-341V7H544V-3Z" fill="url(#paint7_radial_251_119)"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 395.145 43)" fill="#00C2FF"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 406.258 43)" fill="#0085FF" fill-opacity="0.5"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 417.373 43)" fill="#00C2FF"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 428.486 43)" fill="#0085FF" fill-opacity="0.5"/>
+<rect width="4.49433" height="4.49433" transform="matrix(-0.699476 0.714656 0.699476 0.714656 439.855 43)" fill="#00C2FF"/>
+<path d="M251.468 44L246.256 49H244L249.023 44H251.468Z" fill="url(#paint8_linear_251_119)"/>
+<path d="M257.425 44L252.213 49H249.957L254.981 44H257.425Z" fill="url(#paint9_linear_251_119)"/>
+<path d="M264.129 49L269.34 44H266.896L261.873 49H264.129Z" fill="url(#paint10_linear_251_119)"/>
+<path d="M305.085 44L299.873 49H297.617L302.641 44H305.085Z" fill="url(#paint11_linear_251_119)"/>
+<path d="M317 44L311.789 49H309.532L314.556 44H317Z" fill="url(#paint12_linear_251_119)"/>
+<path d="M276.043 49L281.255 44H278.811L273.787 49H276.043Z" fill="url(#paint13_linear_251_119)"/>
+<path d="M293.17 44L287.959 49H285.703L290.726 44H293.17Z" fill="url(#paint14_linear_251_119)"/>
+<path d="M263.382 44L258.171 49H255.915L260.938 44H263.382Z" fill="url(#paint15_linear_251_119)"/>
+<path d="M299.127 44L293.916 49H291.66L296.683 44H299.127Z" fill="url(#paint16_linear_251_119)"/>
+<path d="M275.297 44L270.086 49H267.83L272.853 44H275.297Z" fill="url(#paint17_linear_251_119)"/>
+<path d="M311.043 44L305.831 49H303.575L308.599 44H311.043Z" fill="url(#paint18_linear_251_119)"/>
+<path d="M287.213 44L282.001 49H279.745L284.769 44H287.213Z" fill="url(#paint19_linear_251_119)"/>
+<path d="M323.468 44L318.256 49H316L321.023 44H323.468Z" fill="url(#paint20_linear_251_119)"/>
+<path d="M329.425 44L324.213 49H321.957L326.981 44H329.425Z" fill="url(#paint21_linear_251_119)"/>
+<path d="M336.129 49L341.34 44H338.896L333.873 49H336.129Z" fill="url(#paint22_linear_251_119)"/>
+<path d="M377.085 44L371.873 49H369.617L374.641 44H377.085Z" fill="url(#paint23_linear_251_119)"/>
+<path d="M389 44L383.789 49H381.532L386.556 44H389Z" fill="url(#paint24_linear_251_119)"/>
+<path d="M348.043 49L353.255 44H350.811L345.787 49H348.043Z" fill="url(#paint25_linear_251_119)"/>
+<path d="M365.17 44L359.959 49H357.703L362.726 44H365.17Z" fill="url(#paint26_linear_251_119)"/>
+<path d="M335.382 44L330.171 49H327.915L332.938 44H335.382Z" fill="url(#paint27_linear_251_119)"/>
+<path d="M371.127 44L365.916 49H363.66L368.683 44H371.127Z" fill="url(#paint28_linear_251_119)"/>
+<path d="M347.297 44L342.086 49H339.83L344.853 44H347.297Z" fill="url(#paint29_linear_251_119)"/>
+<path d="M383.043 44L377.831 49H375.575L380.599 44H383.043Z" fill="url(#paint30_linear_251_119)"/>
+<path d="M359.213 44L354.001 49H351.745L356.769 44H359.213Z" fill="url(#paint31_linear_251_119)"/>
+<g filter="url(#filter3_f_251_119)">
+<rect x="4" y="24" width="10.6066" height="10.6066" transform="rotate(-45 4 24)" fill="#0057FF" fill-opacity="0.66"/>
+</g>
+<path d="M17.4325 13L29 23.9425L17.4713 35H12.3534L21.1197 23.9425L12.4147 13H17.4325Z" fill="url(#paint32_linear_251_119)"/>
+<path d="M15.6051 24.0484L12.3025 20.9371L9 24.0484L12.3025 27.1596L15.6051 24.0484Z" fill="url(#paint33_linear_251_119)"/>
+</g>
+<defs>
+<filter id="filter0_f_251_119" x="-15.5254" y="14.8571" width="80.5249" height="38.8668" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_251_119"/>
+</filter>
+<filter id="filter1_f_251_119" x="1.60352" y="30.1174" width="46.2678" height="22.6064" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_251_119"/>
+</filter>
+<filter id="filter2_f_251_119" x="13.7246" y="40.896" width="22.0217" height="10.8279" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_251_119"/>
+</filter>
+<filter id="filter3_f_251_119" x="-2" y="10.5" width="27" height="27" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_251_119"/>
+</filter>
+<linearGradient id="paint0_linear_251_119" x1="237.923" y1="49" x2="-3.5515" y2="49" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00A3FF"/>
+<stop offset="1" stop-color="#0085FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_251_119" x1="443" y1="38.0736" x2="-7.20155" y2="38.0736" gradientUnits="userSpaceOnUse">
+<stop stop-color="#001F3D"/>
+<stop offset="0.177083" stop-color="#0084FF"/>
+<stop offset="1" stop-color="#00C2FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_251_119" x1="328.689" y1="41" x2="328.689" y2="4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.572917" stop-color="#00A3FF" stop-opacity="0"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint3_radial_251_119" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.7371 50.7239) rotate(-90) scale(34.8015 56.8608)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_251_119" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.7374 50.7239) rotate(-90) scale(19.7017 32.2494)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_251_119" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.7354 50.7239) rotate(-90) scale(9.34751 15.276)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F6F5F5" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial_251_119" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(100.114 47.3304) rotate(-90) scale(4.88953 313.212)">
+<stop offset="0.0381" stop-color="white"/>
+<stop offset="0.1359" stop-color="#00D5FF" stop-opacity="0.6"/>
+<stop offset="0.2643" stop-color="#006AFF" stop-opacity="0.5"/>
+<stop offset="0.4568" stop-color="#0935CC" stop-opacity="0.3238"/>
+<stop offset="0.6172" stop-color="#100EA7" stop-opacity="0.177"/>
+<stop offset="0.7013" stop-color="#120099" stop-opacity="0.1"/>
+<stop offset="0.746" stop-color="#100089" stop-opacity="0.085"/>
+<stop offset="0.8334" stop-color="#0B005F" stop-opacity="0.0558"/>
+<stop offset="0.954" stop-color="#03001B" stop-opacity="0.0154"/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_251_119" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(100.114 1.33036) rotate(-90) scale(4.88953 313.212)">
+<stop offset="0.0381" stop-color="white"/>
+<stop offset="0.1359" stop-color="#00D5FF" stop-opacity="0.6"/>
+<stop offset="0.2643" stop-color="#006AFF" stop-opacity="0.5"/>
+<stop offset="0.4568" stop-color="#0935CC" stop-opacity="0.3238"/>
+<stop offset="0.6172" stop-color="#100EA7" stop-opacity="0.177"/>
+<stop offset="0.7013" stop-color="#120099" stop-opacity="0.1"/>
+<stop offset="0.746" stop-color="#100089" stop-opacity="0.085"/>
+<stop offset="0.8334" stop-color="#0B005F" stop-opacity="0.0558"/>
+<stop offset="0.954" stop-color="#03001B" stop-opacity="0.0154"/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint8_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint19_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint20_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint21_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint22_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint23_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint24_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint25_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint26_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint27_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint28_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint29_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint30_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint31_linear_251_119" x1="361.458" y1="49.5" x2="361.458" y2="43.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0085FF"/>
+<stop offset="0.932292" stop-color="#0085FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint32_linear_251_119" x1="28.4118" y1="23.7976" x2="9" y2="23.7976" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.254331" stop-color="#CDE4FF"/>
+<stop offset="1" stop-color="#0075FF"/>
+</linearGradient>
+<linearGradient id="paint33_linear_251_119" x1="28.4118" y1="23.7976" x2="9" y2="23.7976" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.254331" stop-color="#CDE4FF"/>
+<stop offset="1" stop-color="#0075FF"/>
+</linearGradient>
+<clipPath id="clip0_251_119">
+<rect width="540" height="50" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package.json

@@ -29,6 +29,7 @@
     "prettier": "^2.5.1"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "echarts": "^5.4.2",
     "element-ui": "^2.15.9",
     "vue": "^2.7.8"

utils/index.js

@@ -1,3 +1,4 @@
+import request from './request'
 export function withInstall(component) {
   component.install = function (app) {
     app.component(component.name, component);
@@ -11,3 +12,6 @@ export function WithInstallOfGlobalMethod(globalName, method) {
   };
   return method;
 }
+export {
+  request
+}

utils/package.json

@@ -13,5 +13,8 @@
   "license": "ISC",
   "devDependencies": {
     "lodash": "^4.17.21"
+  },
+  "dependencies": {
+    "axios": "^1.4.0"
   }
 }

utils/request.js

@@ -0,0 +1,28 @@
+import axios from 'axios'
+
+// 创建一个axios实例
+const instance = axios.create({
+  // baseURL: 'http://47.108.149.141:3000'
+  baseURL: '/api'
+})
+
+// 配置请求拦截器
+instance.interceptors.request.use(config => {
+  // console.log(config)
+  /* 
+//     每一次请求的时候，往请求头（header）上添加一个token
+//   */
+//   const token = sessionStorage.getItem('token')
+//   config.headers.Authorization = token
+  return config
+}, err => {
+  return Promise.reject(err)
+})
+
+// 配置响应拦截器
+instance.interceptors.response.use(config => {
+  return config
+}, err => {
+  return Promise.reject(err)
+})
+export default instance;