feat:消防管理

app/src/components/Headers.vue

@@ -75,6 +75,7 @@ export default {
         {
           name: "消防管理",
           id: 3,
+          url:'/fire'
         },
         {
           name: "风险预警",

app/src/components/rate3D.vue

@@ -0,0 +1,133 @@
+<template>
+    <div ref="chart" class="item" style="width: 98px; height: 80px" />
+  </template>
+  
+  <script>
+  import * as echarts from "echarts";
+  export default {
+    data() {
+      return {
+        chart: null,
+      };
+    },
+    mounted() {
+      const chartDom = this.$refs.chart;
+      //   // 初始化图表实例
+      this.chart = echarts.init(chartDom);
+      this.initChart();
+    },
+    methods: {
+      initChart() {
+        option = {
+    backgroundColor: '#000',
+    title: [{
+        bottom: 50,
+        width: '100%',
+        left: 'center',
+        text: '今日运单数',
+        textStyle: {
+            fontWeight: 'normal',
+            fontSize: 42,
+            color: "#40E7F4"
+        },
+    }],
+    series: [{
+            type: 'gauge',
+            name: '业务指标',
+            radius: '50%',
+            startAngle: '0',
+            endAngle: '-359.99',
+            splitNumber: '240',
+            pointer: {
+                show: false
+            },
+            detail: {
+                show: false
+            },
+            data: [{
+                value: 0,
+                name: ''
+            }],
+            axisLine: {
+                lineStyle: {
+                    color: [
+                        [1, 'rgba(120, 200, 45, 1)']
+                    ],
+                    width: 20,
+                    opacity: .2
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                show: true,
+                length: 20,
+                lineStyle: {
+                    color: 'rgba(0,0,0,1)',
+                    width: 2,
+                    type: 'solid',
+                },
+            },
+            axisLabel: {
+                show: false
+            }
+        },
+
+
+        {
+            name: '今日运单数',
+            type: 'pie',
+            radius: ['30%', '38%'],
+            center: ['50%', '50%'],
+            startAngle: 175,
+            clockWise: false,
+            hoverAnimation: false,
+            itemStyle: {
+                normal: {
+                    color: ['rgba(176, 212, 251, 1)'],
+                    label: {
+                        position: 'center'
+                    },
+                    labelLine: {
+                        show: false
+                    }
+                }
+            },
+            data: [{
+                value: 1,
+                name: '完成工作量',
+                label: {
+                    formatter: '2678',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 42
+                    }
+                },
+                itemStyle: {
+                    normal: {
+                        color: { // 完成的圆环的颜色
+                            colorStops: [{
+                                offset: 0,
+                                color: '#00cefc' // 0% 处的颜色
+                            }, {
+                                offset: 1,
+                                color: '#367bec' // 100% 处的颜色
+                            }]
+                        },
+                    }
+                },
+            }]
+        }
+    ]
+};
+        this.chart.setOption(option);
+        //自适应图表
+        window.onresize = this.chart.resize;
+      },
+    },
+  };
+  </script>
+  
+  <style scoped></style>
+  

app/src/components/unit3D.vue

@@ -0,0 +1,434 @@
+<script setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import "echarts-gl";
+
+let chart, option;
+const pieChart3d = ref();
+onMounted(() => {
+  console.log(pieChart3d);
+  chart = echarts.init(pieChart3d.value);
+  // 传入数据生成 option
+  option = getPie3D(
+    [
+      {
+        name: "与管理单位（物业）",
+        value: 100,
+      },
+      {
+        name: "与管理单位（非物业）",
+        value: 12,
+      },
+      {
+        name: "居民自主管理",
+        value: 46,
+      },
+      {
+        name: "街道社区代表",
+        value: 95,
+      },
+      {
+        name: "其他",
+        value: 80,
+      },
+      {
+        name: "无管理主体",
+        value: 62,
+      },
+    ],
+    0.75
+  );
+
+  // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+  let hoveredIndex = "";
+  // 准备重新渲染扇形所需的参数
+  let isSelected;
+  let isHovered;
+  let startRatio;
+  let endRatio;
+  let k;
+
+  // 监听 mouseover，近似实现高亮（放大）效果
+  chart.on("mouseover", function (params) {
+    // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+    if (hoveredIndex === params.seriesIndex) {
+      return;
+
+      // 否则进行高亮及必要的取消高亮操作
+    } else {
+      // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+      if (hoveredIndex !== "") {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+        isSelected = option.series[hoveredIndex].pieStatus.selected;
+        isHovered = false;
+        startRatio = option.series[hoveredIndex].pieData.startRatio;
+        endRatio = option.series[hoveredIndex].pieData.endRatio;
+        k = option.series[hoveredIndex].pieStatus.k;
+
+        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+        option.series[hoveredIndex].parametricEquation = getParametricEquation(
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          option.series[hoveredIndex].pieData.value
+        );
+        option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+        hoveredIndex = "";
+      }
+
+      // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+      if (params.seriesName !== "mouseoutSeries") {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+        isSelected = option.series[params.seriesIndex].pieStatus.selected;
+        isHovered = true;
+        startRatio = option.series[params.seriesIndex].pieData.startRatio;
+        endRatio = option.series[params.seriesIndex].pieData.endRatio;
+        k = option.series[params.seriesIndex].pieStatus.k;
+
+        // 对当前点击的扇形，执行高亮操作（对 option 更新）
+        option.series[params.seriesIndex].parametricEquation =
+          getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            option.series[params.seriesIndex].pieData.value + 5
+          );
+        option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+
+        // 记录上次高亮的扇形对应的系列号 seriesIndex
+        hoveredIndex = params.seriesIndex;
+      }
+
+      // 使用更新后的 option，渲染图表
+      chart.setOption(option);
+    }
+  });
+
+  // 修正取消高亮失败的 bug
+  chart.on("globalout", function () {
+    if (hoveredIndex !== "") {
+      // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+      isSelected = option.series[hoveredIndex].pieStatus.selected;
+      isHovered = false;
+      k = option.series[hoveredIndex].pieStatus.k;
+      startRatio = option.series[hoveredIndex].pieData.startRatio;
+      endRatio = option.series[hoveredIndex].pieData.endRatio;
+
+      // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+      option.series[hoveredIndex].parametricEquation = getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        option.series[hoveredIndex].pieData.value
+      );
+      option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+      // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+      hoveredIndex = "";
+    }
+
+    // 使用更新后的 option，渲染图表
+    chart.setOption(option);
+  });
+
+  if (option && typeof option === "object") {
+    chart.setOption(option);
+  }
+});
+
+// 生成扇形的曲面参数方程
+function getParametricEquation(
+  startRatio,
+  endRatio,
+  isSelected,
+  isHovered,
+  k,
+  h
+) {
+  // 计算
+  const midRatio = (startRatio + endRatio) / 2;
+  const startRadian = startRatio * Math.PI * 2;
+  const endRadian = endRatio * Math.PI * 2;
+  const midRadian = midRatio * Math.PI * 2;
+
+  // 如果只有一个扇形，则不实现选中效果。
+  if (startRatio === 0 && endRatio === 1) {
+    // eslint-disable-next-line no-param-reassign
+    isSelected = false;
+  }
+
+  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+  // eslint-disable-next-line no-param-reassign
+  k = typeof k !== "undefined" ? k : 1 / 3;
+
+  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+  const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+  const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+  // 计算高亮效果的放大比例（未高亮，则比例为 1）
+  const hoverRate = isHovered ? 1.05 : 1;
+
+  // 返回曲面参数方程
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32,
+    },
+
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20,
+    },
+
+    x(u, v) {
+      if (u < startRadian) {
+        return (
+          offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+        );
+      }
+      if (u > endRadian) {
+        return (
+          offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+        );
+      }
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    y(u, v) {
+      if (u < startRadian) {
+        return (
+          offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+        );
+      }
+      if (u > endRadian) {
+        return (
+          offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+        );
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    z(u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u);
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u) * h * 0.1;
+      }
+      // 当前图形的高度是Z根据h（每个value的值决定的）
+      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    },
+  };
+}
+// 生成模拟 3D 饼图的配置项
+function getPie3D(pieData, internalDiameterRatio) {
+  const series = [];
+  // 总和
+  let sumValue = 0;
+  let startValue = 0;
+  let endValue = 0;
+  const legendData = [];
+  const k =
+    typeof internalDiameterRatio !== "undefined"
+      ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+      : 1 / 3;
+  // 为每一个饼图数据，生成一个 series-surface 配置
+  for (let i = 0; i < pieData.length; i += 1) {
+    sumValue += pieData[i].value;
+    // console.log(pieData[i].name);
+    const seriesItem = {
+      name:
+        typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
+      type: "surface",
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      pieData: pieData[i],
+      pieStatus: {
+        selected: false,
+        hovered: false,
+        k,
+      },
+    };
+    if (typeof pieData[i].itemStyle !== "undefined") {
+      const { itemStyle } = pieData[i];
+      typeof pieData[i].itemStyle.color !== "undefined"
+        ? (itemStyle.color = pieData[i].itemStyle.color)
+        : null;
+      typeof pieData[i].itemStyle.opacity !== "undefined"
+        ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+        : null;
+      seriesItem.itemStyle = itemStyle;
+    }
+    series.push(seriesItem);
+  }
+  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+  for (let i = 0; i < series.length; i += 1) {
+    endValue = startValue + series[i].pieData.value;
+    series[i].pieData.startRatio = startValue / sumValue;
+    series[i].pieData.endRatio = endValue / sumValue;
+    series[i].parametricEquation = getParametricEquation(
+      series[i].pieData.startRatio,
+      series[i].pieData.endRatio,
+      false,
+      false,
+      k,
+      // ，使除了第一个之外的值都是10
+      series[i].pieData.value
+    );
+    startValue = endValue;
+    legendData.push(series[i].name);
+  }
+  // 准备待返回的配置项，把准备好的 legendData、series 传入。
+  const option = {
+    color: ["#1162fe", "#3fc865", "#a8fce3", "#5ef8c9", "#5ed3f8", "#5e92f8"],
+    legend: {
+      // type: "scroll",
+      data: legendData,
+      icon: "roundRect",
+      orient: "vertical",
+      padding: 5,
+      itemGap: 10,
+      top: "8%",
+      right: 0,
+      itemWidth: 10, // 设置宽度
+      itemHeight: 10, // 设置高度
+      selectedMode: true,
+      textStyle: {
+        color: "#FFFFFF",
+        fontSize: 14,
+        lineHeight: 14,
+        rich: {
+          a: {
+            // verticalAlign: "middle",
+          },
+        },
+        padding: [0, 0, -3, 0],
+      },
+    },
+    tooltip: {
+      formatter: (params) => {
+        if (params.seriesName !== "mouseoutSeries") {
+          return `${
+            params.seriesName
+          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+            params.color
+          };"></span>${option.series[params.seriesIndex].pieData.value}`;
+        }
+        return "";
+      },
+    },
+    title:[{
+        text: '单位：栋',
+        top: -4,
+        right: 30,
+        textStyle: {
+            fontSize: 12,
+            color:'#5ed3f8',
+        }
+    }],
+    xAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    yAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    zAxis3D: {
+      min: -1,
+      max: "dataMax",
+    },
+    grid3D: {
+      show: false,
+      boxHeight: 16,
+      top: "-10%",
+      left: "-16%",
+      viewControl: {
+        // 3d效果可以放大、旋转等，请自己去查看官方配置
+        alpha: 12,
+        beta: 70, //旋转角度
+        rotateSensitivity: 1,
+        zoomSensitivity: 0,
+        panSensitivity: 0,
+        // autoRotate: true,
+        distance: 130,
+      },
+      // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+      postEffect: {
+        // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+        enable: false,
+        bloom: {
+          enable: true,
+          bloomIntensity: 0.1,
+        },
+        SSAO: {
+          enable: true,
+          quality: "medium",
+          radius: 2,
+        },
+      },
+    },
+    series,
+  };
+  return option;
+}
+</script>
+
+<template>
+  <div class="container">
+    <div ref="pieChart3d" class="chart"></div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.container {
+  width: 440px;
+  height: 184px;
+  position: relative;
+}
+
+.container::after {
+  content: "";
+  position: absolute;
+  width: 240px;
+  height: 108px;
+  background: url("../assets/images/1.png") no-repeat;
+  background-size: 100% 100%;
+  left: calc(50% - 145px);
+  bottom: 9%;
+  left:30px;
+}
+
+.container::before {
+  content: attr(data-num);
+  position: absolute;
+  font-size: 18px;
+  font-family: YouSheBiaoTiHei;
+  color: #ffffff;
+  line-height: 42px;
+  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
+  left: 50%;
+  transform: translate(-50%);
+  top: 30%;
+}
+
+.chart {
+  width: 440px;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+</style>

app/src/router/index.js

@@ -4,6 +4,7 @@ import BasicLayout from '@/layouts/BasicLayout.vue'
 import HomePage from "../views/Home/index.vue";
 import DetailPage from "../views/Detail/index.vue";
 import Basic from '../views/Basic/index.vue'
+import Fire from '../views/Fire/index.vue'
 Vue.use(VueRouter);
 
 const router = new VueRouter({
@@ -39,7 +40,16 @@ const router = new VueRouter({
           meta: {
             id: 2,
           }
+        },
+        {
+          path: '/fire',
+          name: 'fire',
+          component: Fire,
+          meta: {
+            id: 3,
+          }
         }
+
       ]
     }
   ],

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

@@ -0,0 +1,96 @@
+<template>
+    <div>
+<div class="unit">
+    <span class="unit-c">管理主体</span>
+    <div class="unit-num">
+        <div><span class="num">1223</span>
+        <span>家</span></div>
+        <div>一般单位</div>
+    </div>
+    <div class="unit-num">
+        <div><span class="num">1223</span>
+        <span>家</span></div>
+        <div>一般单位</div>
+    </div>
+   
+</div>
+<div class="unit-echats">
+    <div class="unit-g">
+        管理形式
+        <unit3D/>
+    </div>
+        
+</div>
+<div class="unit maintenance">
+    <span class="unit-c  unit-w">维保形式</span>
+    <div class="unit-num ">
+        <div><span class="num">123</span>
+        <span>家</span></div>
+        <div>专业维保</div>
+    </div>
+    <div class="unit-num">
+        <div><span class="num">323</span>
+        <span>家</span></div>
+        <div>自主维护</div>
+    </div>
+    <div class="unit-num">
+        <div><span class="num">323</span>
+        <span>家</span></div>
+        <div>无维保</div>
+    </div>
+   
+</div>
+    </div>
+</template>
+
+<script >
+import unit3D from '@/components/unit3D.vue'
+export default {
+    components:{unit3D}
+}
+</script>
+
+<style lang="less" scoped>
+.unit{
+    display: flex;
+    margin: 5px 0 10px 10px;
+    font-size: 18px;
+    .unit-c{
+display: inline-block;
+margin: 25px 18px 0 0;
+    }
+    .unit-num{
+        width: 146px;
+        height: 72px;
+        margin: 10px 10px;
+        letter-spacing: 1px;
+        padding: 5px 0 0 0;
+        background-color: rgba(0, 163, 255, 0.3)  ;
+        color: #fff;
+        text-align: center;
+        font-size: 16px;
+        line-height: 30px;
+        // 渐变
+        .num{
+            font-size: 32px;
+            margin-right: 4px;
+            font-weight: 600;
+            color: rgb(105, 193, 208);    
+        }
+
+    }
+}
+.unit-echats{
+    height: 150px;
+}
+.unit-w{
+    width: 136px;
+}
+.unit-g{
+    font-size:18px;
+    margin-left: 10px; 
+}
+.maintenance{
+    margin-top: 30px;
+}
+</style>

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

@@ -0,0 +1,257 @@
+<template >
+    <div class="maintenance-supervision">
+      <div class="maintenance-supervision_header">
+        <button-group @change="change">
+          <button-group-item  style="width: 152px; padding: 7px 1px; ">
+            管理单位管理建筑排名
+          </button-group-item >
+          <button-group-item   style="width: 152px; padding:  7px 1px;">
+            维保单位管理建筑排名
+          </button-group-item>
+          <button-group-item  style="width: 147px; padding:  7px 1px;">
+            建筑入住单位数排名
+          </button-group-item>
+          
+        </button-group>
+      </div>
+      <div v-if="checked === 0">
+        <div class="row header">                                         
+            <span class="num">序号</span>
+          <span class="time">管理单位名称</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"
+                  :style="{
+                    color: resultType(item[2])
+                  }"
+                  >{{ item[2] }}</span
+                > -->
+              </li>
+            </ul>
+          </VueSeamlessScroll>
+      </div>
+      
+      <div v-if="checked === 1">
+        <div class="row header">
+          <span class="num">序号</span>
+          <span class="time">维保单位名称</span>
+          <span class="person">维保建筑数</span>
+        </div>
+        <VueSeamlessScroll
+          :data="list2"
+          :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"
+                  :style="{
+                    color: resultType(item[2])
+                  }"
+                  >{{ item[2] }}</span
+                > -->
+              </li>
+            </ul>
+          </VueSeamlessScroll>
+      </div>
+      <div v-if="checked === 2">
+        <div class="row header">
+          <span class="num">序号</span>
+          <span class="time">登记事件</span>
+          <span class="person">排查人员</span>
+          <!-- <span class="result">是否存在隐患</span> -->
+        </div>
+        <VueSeamlessScroll
+          :data="list3"
+          :class-option="classOption"
+          class="warp"
+        >
+          <ul class="item">
+            <li class="row" v-for="(item, index) in list3" :key="index">
+                <span class="num">{{ index+1 }}</span>
+                <span class="time">{{ item[0] }}</span>
+                <span  class="person"
+                  :style="{
+                    color: resultType(item[1])
+                  }"
+                  >{{ item[1] }}</span
+                >
+              </li>
+            </ul>
+          </VueSeamlessScroll>
+      </div>
+      <!-- <div v-if="checked === 3">
+        <div class="row header">
+          <span class="time">序号</span>
+          <span class="person">建筑名称</span>
+          <span class="result">入住单位数</span>
+        </div>
+        <VueSeamlessScroll
+          :data="list3"
+          :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"
+                  :style="{
+                    color: resultType(item[2])
+                  }"
+                  >{{ item[2] }}</span
+                > -->
+              <!-- </li>
+            </ul>
+          </VueSeamlessScroll>
+      </div> -->
+    </div>
+  </template>
+  <script>
+  import VueSeamlessScroll from "vue-seamless-scroll";
+  
+  export default {
+    name: 'MaintenanceSupervision',
+    data() {
+      return {
+        list1: [
+          ["环球金融大厦",  "40"],
+          ["天祥广场",  "35"],
+          ["经济科技大厦", "23"],
+          ["环球金融大厦",  "40"],
+          ["环球金融大厦",  "40"],
+          ["环球金融大厦",  "40"],
+          ["环球金融大厦",  "40"],
+          ["环球金融大厦",  "40"],
+
+        ],
+        list2: [
+          ["沙坪坝支队", "合格"],
+          ["两江支队", "不合格"],
+          ["城口大队", "合格"],
+          ["永川支队", "不合格"],
+          ["城口大队", "合格"],
+          [ "永川支队", "合格"],
+          ["永川支队", "不合格"],
+          [ "永川支队", "不合格"]
+        ],
+        list3: [
+        ["环球金融大厦",  "40"],
+          ["天祥广场",  "35"],
+          ["经济科技大厦", "23"],
+          ["环球金融大厦",  "40"],
+          ["环球金融大厦",  "40"],
+          ["环球金融大厦",  "40"],
+          ["环球金融大厦",  "40"],
+          ["环球金融大厦",  "40"],
+        ],
+        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;
+    .maintenance-supervision_header {
+      border-bottom: 1px solid #154956;
+      padding-bottom: 2px;
+      margin-top: 15px;
+    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: 16px;
+    background-color: rgba(0, 0, 0, 0.2);
+    .time,
+    .num,
+    .person,
+    .result {
+      flex: 0.33;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .num{
+        flex: 0.15;
+    }
+    .time{
+      flex: 1;
+    }
+    .result{
+      flex: 0.35;
+    }
+  }
+  }
+  </style>
+  

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

@@ -0,0 +1,33 @@
+<template>
+    <div>
+<div>完成率百分比</div>
+<div class="rate">
+    <rate3D/>
+ 
+</div>
+    </div>
+</template>
+
+<script >
+import rate3D from '../../../components/rate3D.vue';
+export default {
+components:{rate3D}
+}
+</script>
+
+<style lang="less" scoped>
+.rate{
+.rate-noe{
+   width: 98px;
+   height: 8px;
+   background-color: rgb(24, 24, 24);
+   border-radius: 50%;
+}
+.rate-two{
+    width: 68px;
+    height: 6px;
+    background-color: rgb(24, 24, 24);
+    border-radius: 50%;
+}
+}
+</style>

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

@@ -0,0 +1,292 @@
+<template >
+    <div class="maintenance-supervision">
+      <div class="maintenance-supervision_header">
+        <el-input v-model="seach" placeholder="请输入建筑名称"></el-input>
+        <div>
+          <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 v-if="checked === 0">
+        <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"
+                  :style="{
+                    color: resultType(item[2])
+                  }"
+                  >{{ item[2] }}</span
+                >
+              </li>
+            </ul>
+          </VueSeamlessScroll>
+      </div>
+      
+      <div v-if="checked === 1">
+        <div class="row header">
+          <span class="time">检查结束事件</span>
+          <span class="person">执法机构</span>
+          <span class="result">检查结果</span>
+        </div>
+        <VueSeamlessScroll
+          :data="list2"
+          :class-option="classOption"
+          class="warp"
+        >
+          <ul class="item">
+            <li class="row" v-for="(item, index) in list2" :key="index">
+                <span class="time">{{ item[0] }}</span>
+                <span class="person">{{ item[1] }}</span>
+                <span class="result"
+                  :style="{
+                    color: resultType(item[2])
+                  }"
+                  >{{ item[2] }}</span
+                >
+              </li>
+            </ul>
+          </VueSeamlessScroll>
+      </div>
+      <div v-if="checked === 2">
+        <div class="row header">
+          <span class="time">登记事件</span>
+          <span class="person">排查人员</span>
+          <span class="result">是否存在隐患</span>
+        </div>
+        <VueSeamlessScroll
+          :data="list3"
+          :class-option="classOption"
+          class="warp"
+        >
+          <ul class="item">
+            <li class="row" v-for="(item, index) in list3" :key="index">
+                <span class="time">{{ item[0] }}</span>
+                <span class="person">{{ item[1] }}</span>
+                <span class="result"
+                  :style="{
+                    color: resultType(item[2])
+                  }"
+                  >{{ item[2] }}</span
+                >
+              </li>
+            </ul>
+          </VueSeamlessScroll>
+      </div>
+      <div v-if="checked === 3">
+        <div class="row header">
+          <span class="time">检查时间</span>
+          <span class="person">检查人</span>
+          <span class="result">检查结果</span>
+        </div>
+        <VueSeamlessScroll
+          :data="list4"
+          :class-option="classOption"
+          class="warp"
+        >
+          <ul class="item">
+            <li class="row" v-for="(item, index) in list4" :key="index">
+                <span class="time">{{ item[0] }}</span>
+                <span class="person">{{ item[1] }}</span>
+                <span class="result"
+                  :style="{
+                    color: resultType(item[2])
+                  }"
+                  >{{ item[2] }}</span
+                >
+              </li>
+            </ul>
+          </VueSeamlessScroll>
+      </div>
+    </div>
+  </template>
+  <script>
+  import VueSeamlessScroll from "vue-seamless-scroll";
+  
+  export default {
+    name: 'MaintenanceSupervision',
+    data() {
+      return {
+        seach:'',
+        list1: [
+          ["环球金融大厦", "独有", "中海物业"],
+          ["天祥广场", "独有", "中海物业"],
+          ["经济科技大厦", "独有", "中海物业"],
+          ["环球金融大厦", "独有", "中海物业"],
+          ["环球金融大厦", "独有", "中海物业"],
+          ["环球金融大厦", "独有", "中海物业"],
+          ["环球金融大厦", "独有", "中海物业"],
+          ["环球金融大厦", "独有", "中海物业"],
+
+        ],
+        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;
+    .maintenance-supervision_header {
+      display: flex;
+      justify-content: space-around;
+      border-bottom: 1px solid #154956;
+      padding-bottom: 2px;
+      margin-top: 15px;
+    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: 16px;
+    background-color: rgba(0, 0, 0, 0.2);
+    .time,
+    .num,
+    .person,
+    .result {
+      flex: 0.33;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .num{
+        flex: 0.15;
+    }
+  }
+  }
+  /deep/.el-input__inner{
+    background-color:#184254 ;
+    width: 150px;
+    height: 30px;
+    margin-bottom: 5px;
+  }
+  /deep/.el-button{
+    width: 160px;
+    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/.select_btn{
+  position: absolute;
+   top: 225px;
+   right: 320px;
+   //下拉框
+  }
+  // /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>
+  

app/src/views/Fire/index.vue

@@ -0,0 +1,54 @@
+
+<template >
+    <div style="padding: 0px 35px; display: flex; justify-content: space-between"
+        >
+        <div>
+            <border-panel
+              height="443px"
+              style="margin-bottom: 6px"
+              title="高层建筑管理"
+            >
+            <Construction/>
+            </border-panel>
+            <border-panel
+              height="500px"
+              style="margin-bottom: 6px"
+              title="管理内容"
+            >
+            <ManagementContent/>
+            </border-panel>
+          
+          </div>
+       
+        <div>
+          <border-panel
+              height="521px"
+              style="margin-bottom: 6px"
+              title="建筑管理单位分布"
+            > 
+          <Management/>
+            </border-panel>
+            <border-panel
+              height="421px"
+              style="margin-bottom: 6px"
+              title="建筑管理单位信息"
+            >
+            <UnitInfo/>
+            </border-panel>
+        </div>
+    </div>
+  </template>
+  <script>
+import Management from './components/Management.vue';
+import UnitInfo from './components/UnitInfo.vue'
+import Construction from './components/Construction.vue'
+import ManagementContent from './components/ManagementContent.vue'
+  export default {
+    name: 'Fire',
+    components:{Management,UnitInfo,Construction,ManagementContent}
+  }
+  </script>
+  
+  <style scoped lang='less'>
+  </style>
+