src/views/screen/engineering/main.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="main-data data-engineering">
     <div class="left">
-      <div class="left-cont">
-        <div class="left-top">
+      <div class="left-cont" v-if="leftShow">
+        <div class="left-top"
+        @click="showDialog(1)"
+        @mouseover="showDialog(1)">
           <div class="cont-title-area">
             <img
               class="cont-title-bg"
               src="@/assets/images/main/cont_title_bg.png"
               alt=""
             />
-            <div class="cont-title">基建项目总体情况</div>
+            <div class="cont-title">生产辅助基建项目情况</div>
           </div>
-          <div class="components-item">
+          <div class="components-item bg2">
             <unit-access :key="appOrg"></unit-access>
           </div>
           <!-- <monitoring v-if="menu === 1"></monitoring>
@@ -194,6 +196,19 @@
         </issue-sub-dia>
       </div>
     </div>
+<!--    弹出层-->
+    <div
+      :class="dialogType < 3 ? 'dialog' : 'dialog-r'"
+      v-if="dialogShow"
+      @click="closeDialog"
+    >
+      <unit-access-dialog
+        v-if="dialogType === 1"
+        @choose="chooseRes"
+        @chooseH="chooseHealth"
+        @closeDialog="closeDialog"
+      ></unit-access-dialog>
+    </div>
   </div>
 </template>
 
@@ -215,10 +230,18 @@ import MonitoringVideo from "./monitoringVideo.vue";
 import MonitorLive from "./monitorLive.vue";
 import MonitorLiveList from "./monitorLiveList.vue";
 import company from "../data/company.json";
-
+import TerminalDataDialog from "@/views/screen/official/terminalDataDialog.vue";
+import CarWarningDialog from "@/views/screen/official/carWarningDialog.vue";
+import CarStockDialog from "@/views/screen/logistics/car/carStockDialog.vue";
+import unitAccessDialog from "@/views/screen/engineering/unitAccessDialog.vue";
+import CarCost from "@/views/screen/official/carCost.vue";
+import ResourceList from "@/views/screen/official/resourceList.vue";
+import CarHealth from "@/views/screen/official/carHealth.vue";
 export default {
   name: "EngineeringMain",
   components: {
+    CarHealth, ResourceList, CarCost,
+    CarStockDialog, CarWarningDialog, TerminalDataDialog,
     IssueSubDia,
     CameraScreen,
     IssueListDia,
@@ -235,6 +258,7 @@ export default {
     MonitoringVideo,
     MonitorLive,
     MonitorLiveList,
+    unitAccessDialog,
   },
   props: {},
   data() {
@@ -247,6 +271,8 @@ export default {
       showCamera:0,
       showProject:0,
       menu: 0,
+      showCost:0,
+      showHealth:0,
       leftShow: true,
       rightShow: true,
       dialogShow: false,
@@ -296,10 +322,32 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    chooseRes(){
+      this.closeDialog()
+      this.showC = true
+      this.showRes = 1
+    },
+    chooseHealth(){
+      this.closeDialog()
+      this.showC = true
+      this.showHealth = 1
+    },
     onChooseUnit(){
       this.showC = true;
       this.showProject = 1;
     },
+    onCloseRes(){
+      this.showC = false
+      this.showRes = 0
+    },
+    onCloseCost(){
+      this.showC = false
+      this.showCost = 0
+    },
+    onCloseHealth(){
+      this.showC = false
+      this.showHealth = 0
+    },
 
     onChooseProject(){
       this.showCamera = 1;
@@ -676,7 +724,7 @@ export default {
     position: relative;
     margin-bottom: 10px;
     img {
-      width: 284px;
+      width: 331px;
       height: 32px;
     }
     .cont-title {

src/views/screen/engineering/unitAccessDialog.vue

@@ -0,0 +1,1253 @@
+<template>
+  <div
+    class="main-data terminal-dialog-area"
+    @click.stop="preventDefault"
+    @mouseleave="leaveFun"
+
+  >
+    <div class="dialog-title">
+      <img src="@/assets/images/main/cont_title_bg.png" />
+      <div class="title">生产辅助基建项目情况</div>
+    </div>
+    <div class="dialog-cont">
+      <div class="dialog-left">
+        <div class="content-title long">
+          <span class="title">在建项目数量</span>
+        </div>
+        <div class="content-maper">
+          <div class="content-one">
+            <div class="">
+              <div class="photo">
+                <img src="@/assets/images/main/choose_bg11.png" />
+              </div>
+            </div>
+            <div class="content">
+              <div class="rate-area">
+                <img src="@/assets/images/main/choose_bg13.png" class="img-cry"  />
+                <div class="rate">
+                  <div class="names">56<span class="nums">个</span></div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+      <div class="dialog-left">
+        <div class="content-title long">
+          <span class="title">前期审批数量</span>
+        </div>
+        <div class="box-big">
+          <div class="box-small">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">可研评审</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-small">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">初设评审</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-small">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">政府立项备案</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-small">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">土地手续</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-small">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">用地规划</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+        </div>
+        <div class="box-big">
+          <div class="box-small">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">工程规划</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-small">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">设计招标</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-small">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">施工招标</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-small">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">监理招标</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-small">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">施工许可</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dialog-left">
+        <div class="content-title long">
+          <span class="title">施工阶段数量</span>
+        </div>
+        <div class="box-big">
+          <div class="box-smalls">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">基础施工</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-smalls">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">主体工程</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-smalls">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">室内外装修</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+          <div class="box-smalls">
+            <div class="box-above">
+              <img src="@/assets/images/main/choose_bg12.png" />
+              <div class="name-white">室外工程</div>
+            </div>
+            <div>
+              <div class="names">56<span class="nums">个</span></div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LineChart from "@/components/Echarts/LineChart";
+import PieChart from "@/components/Echarts/PieChart";
+import BarChart from "@/components/Echarts/BarChart.vue";
+import echarts from "echarts";
+
+export default {
+  name: "BuildingSaveDialog",
+  components: {
+    BarChart,
+    PieChart,
+    LineChart,
+  },
+  props: {},
+  data() {
+    return {
+      //在线数
+      pieData: [],
+      catePieData: [
+        { value: 40, name: "新能源汽车" },
+        { value: 20, name: "燃油汽车" },
+      ],
+      totalPieData: [
+        { value: 110, name: "商务车" },
+        { value: 120, name: "越野车" },
+        { value: 130, name: "小型客车" },
+        { value: 140, name: "大型客车" },
+        { value: 150, name: "小轿车" },
+      ],
+      catePieLegend: {
+        orient: "vertical",
+        top: 60,
+        right: 23,
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      totalPieLegend: {
+        top: 20,
+        right: 10,
+        itemWidth: 8,
+        itemHeight: 8,
+        orient: "vertical",
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      pieLegend: {
+        orient: "vertical",
+        top: 50,
+        right: 30,
+        itemWidth: 8, // 设置图例标记的宽度
+        itemHeight: 8, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      pieCenter: ["27%", "50%"],
+      totalCenter: ["30%", "50%"],
+      catePieCenter: ["27%", "50%"],
+      pieRadius: ["35%", "50%"],
+
+      //各单位终端在线
+      barData: [],
+      barAxis: {},
+      barYAxis: {},
+      barLegend: {},
+
+      personInOutBarData: [
+        {
+          name: "员工",
+          type: "bar",
+          itemStyle: {
+            color: "#43DCDB",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 10,
+          data: [110, 120, 130, 140, 150, 160, 155, 145, 135, 125, 115, 15],
+        },
+        {
+          name: "访客",
+          type: "bar",
+          itemStyle: {
+            color: "#FFD296",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 10,
+          data: [10, 20, 30, 40, 50, 60, 55, 45, 35, 25, 15, 5],
+        },
+      ],
+      personInOutBarAxis: {
+        type: "category",
+        data: [
+          "01月",
+          "02月",
+          "03月",
+          "04月",
+          "05月",
+          "06月",
+          "07月",
+          "08月",
+          "09月",
+          "10月",
+          "11月",
+          "12月",
+        ],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#08595B",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      personInOutBarYaxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: "人",
+        nameTextStyle: {
+          color: "#fff",
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      personInOutBarLegend: {
+        top: 0,
+        orient: "horizontal",
+        right: 0,
+        itemWidth: 17, // 设置图例标记的宽度
+        itemHeight: 10, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      barGrid: {
+        top: 30,
+        left: "2%",
+        right: "5%",
+        containLabel: true,
+        bottom: 0,
+      },
+      departmentPersonInOutBarData: [
+        {
+          name: "员工",
+          type: "bar",
+          itemStyle: {
+            color: "#43DCDB",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 10,
+          data: [110, 150, 160, 135, 115, 15],
+        },
+        {
+          name: "访客",
+          type: "bar",
+          itemStyle: {
+            color: "#FFD296",
+            //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
+          },
+          barWidth: 10,
+          data: [10, 20, 30, 40, 50, 60, 55, 45, 35, 25, 15, 5],
+        },
+      ],
+      departmentPersonInOutBarAxis: {
+        type: "category",
+        data: ["财务资产部", "离退休工作部", "后勤保障部", "物资管理部", "数字化工作部", "纪委办公室"],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#08595B",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      departmentPersonInOutBarYaxis: {
+        type: "value",
+        boundaryGap: [0, 0.01],
+        name: "人",
+        nameTextStyle: {
+          color: "#fff",
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      },
+      departmentPersonInOutBarLegend: {
+        top: 0,
+        orient: "horizontal",
+        right: 0,
+        itemWidth: 17, // 设置图例标记的宽度
+        itemHeight: 10, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      },
+      visitorDataList: [
+        {
+          name: "于俊",
+          time: "2024 / 11 / 15 15:01",
+          department: "财务资产部",
+        },
+        {
+          name: "于俊",
+          time: "2024 / 11 / 15 14:58",
+          department: "财务资产部",
+        },
+        {
+          name: "于俊",
+          time: "2024 / 11 / 15 14:55",
+          department: "财务资产部",
+        },
+        {
+          name: "于俊",
+          time: "2024 / 11 / 15 14:01",
+          department: "财务资产部",
+        },
+      ],
+      warningList: [
+        {
+          name: "国网太原供电公司",
+          data1: 356,
+          data2: 100,
+          data3: 56,
+          data4: 67,
+          data5: 133,
+        },
+        {
+          name: "国网临汾供电公司",
+          data1: 324,
+          data2: 80,
+          data3: 95,
+          data4: 63,
+          data5: 86,
+        },
+        {
+          name: "国网晋城供电公司",
+          data1: 286,
+          data2: 80,
+          data3: 65,
+          data4: 46,
+          data5: 95,
+        },
+        {
+          name: "国网长治供电公司",
+          data1: 275,
+          data2: 84,
+          data3: 72,
+          data4: 63,
+          data5: 56,
+        },
+        {
+          name: "国网运城供电公司",
+          data1: 268,
+          data2: 70,
+          data3: 65,
+          data4: 73,
+          data5: 60,
+        },
+      ],
+    };
+  },
+  created() {
+    this.handlePie();
+    this.handleBar();
+  },
+  destroyed() {},
+  beforeDestroy() {},
+  mounted() {},
+  methods: {
+    choose(){
+      this.$emit('choose')
+    },
+    chooseHealth(){
+      this.$emit('chooseH')
+    },
+
+    //实例化饼图
+    handlePie() {
+      this.pieData = [
+        { value: 100, name: "离线数" },
+        { value: 200, name: "在线数" },
+      ];
+    },
+
+    //实例化柱状图
+    handleBar() {
+      this.barData = [
+        {
+          name: "总数",
+          type: "bar",
+          itemStyle: {
+            color: "#43DCDB",
+          },
+          barWidth: 10,
+          data: [320, 332, 201, 334, 390, 100],
+        },
+        {
+          name: "离线数",
+          type: "bar",
+          itemStyle: {
+            color: "#EAA553",
+          },
+          barWidth: 10,
+          data: [220, 232, 301, 334, 190, 200],
+        },
+        {
+          name: "在线数",
+          type: "bar",
+          itemStyle: {
+            color: "#1B5CBB",
+          },
+          barWidth: 10,
+          data: [120, 332, 101, 134, 290, 300],
+        },
+      ];
+
+      this.barGrid = {
+        top: 30,
+        bottom: 0,
+        left: "2%",
+        right: "5%",
+        containLabel: true,
+      };
+
+      this.barLegend = {
+        right: 20,
+        top: 0,
+        itemWidth: 17, // 设置图例标记的宽度
+        itemHeight: 10, // 设置图例标记的高度
+        textStyle: {
+          color: "#FFF",
+        },
+      };
+
+      this.barAxis = {
+        type: "category",
+        data: [
+          "国网太原供电公司",
+          "国网运城供电公司",
+          "国网临汾供电公司",
+          "国网晋城供电公司",
+          "国网吕梁供电公司",
+        ],
+        axisLabel: {
+          color: "white", // 设置横坐标轴字体颜色为红色
+          rotate:-50
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#08595B",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: false,
+      };
+
+      this.barYAxis = {
+        name: "数量(个)",
+        nameTextStyle: {
+          color: "#fff",
+          padding: [0, 0, 0, 5],
+          fontSize: 14,
+        },
+        axisLabel: {
+          formatter: "{value}",
+          color: "#FFF",
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        splitArea: false,
+      };
+    },
+
+    //鼠标移出
+    leaveFun() {
+      setTimeout(() => {
+        this.$emit("closeDialog");
+      }, 200);
+    },
+
+    preventDefault() {
+      console.log(11);
+    },
+  },
+};
+</script>
+
+<style  scoped lang="scss" >
+.terminal-dialog-area {
+  overflow: hidden;
+  width: 580px;
+  height: 550px;
+  background-size: cover;
+  padding: 19px 15px 11px 15px;
+
+  .dialog-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-bottom: 10px;
+    img {
+      width: 331px;
+      height: 32px;
+    }
+    .title {
+      font-size: 20px;
+      font-weight: 900;
+      font-family: "PingFangSC";
+      width: 100%;
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: -5px;
+      color: #fff;
+    }
+  }
+
+  .dialog-cont {
+    width: 550px;
+    height: 466px;
+    padding: 15px;
+    overflow-y: scroll;
+    background: url("../../../assets/images/main/components_nolong_bg.png")
+    no-repeat;
+    background-size: cover;
+
+    .dialog-left {
+      width: 520px;
+      float: left;
+    }
+    .dialog-right {
+      width: 520px;
+      float: right;
+    }
+  }
+
+  .dialog-list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between !important;
+    margin-bottom: 0px;
+
+    .dialog-item {
+      width: calc(50% - 20px);
+    }
+
+    .dialog-item-cont {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 40px;
+    }
+
+    .wid100 {
+      width: 100%;
+
+      .content-title {
+        width: 100%;
+        background: url("../../../assets/images/main/title_pro_long.png")
+        no-repeat;
+      }
+    }
+  }
+
+  .content-title {
+    width: 230px;
+    height: 26px;
+    background: url("../../../assets/images/main/title_pro.png") no-repeat !important;
+    background-size: 100% 100%;
+    font-family: "PingFangSC";
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    padding-left: 20px !important;
+    .title {
+      display: block;
+      position: relative;
+      top: -5px !important;
+    }
+  }
+  .content-title.long {
+    width: 100%;
+    background: url("../../../assets/images/main/title_pro_long.png") no-repeat !important;
+  }
+
+  .content {
+    .title-format {
+      width: 150px;
+      height: 80px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .title-info {
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+        color: #ffffff;
+        .title-en {
+          font-size: 8px;
+          color: #ffffff;
+          opacity: 0.4;
+        }
+      }
+    }
+
+    .rate-area {
+      position: relative;
+      img {
+        width: 126.43px;
+        height: 62px;
+      }
+      .rate {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 150px;
+        height: 60px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: #fff;
+        .rate-data {
+          display: flex;
+          flex-direction: row;
+          align-items: baseline;
+          color: #ffba44;
+          .data {
+            font-family: "electronicFont";
+            font-size: 30px;
+          }
+          .unit {
+            font-size: 12px;
+          }
+        }
+        .desc {
+          font-size: 12px;
+          width: 60px;
+          text-align: center;
+        }
+      }
+    }
+  }
+  .content {
+    .title-format {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      img {
+        width: 6px;
+        height: 24px;
+        margin-right: 6px;
+      }
+      .title-info {
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+        color: #ffffff;
+        .title-en {
+          font-size: 8px;
+          color: #ffffff;
+          opacity: 0.4;
+        }
+      }
+    }
+    .total-data {
+      display: flex;
+      align-items: baseline;
+      color: #19fcde;
+      margin-top: 4px;
+      .total {
+        font-size: 35px;
+        font-family: "electronicFont";
+      }
+      .unit {
+        font-size: 12px;
+      }
+    }
+
+    .rate-area {
+      width: 150px;
+      height: 70px;
+      position: relative;
+
+      img {
+        width: 150px;
+        height: 70px;
+      }
+      .rate {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        position: absolute;
+        top: 0;
+
+        color: #fff;
+        .rate-data {
+          display: flex;
+          flex-direction: row;
+          align-items: baseline;
+          color: #ffba44;
+          .data {
+            font-size: 30px;
+            font-family: "electronicFont";
+          }
+          .unit {
+            font-size: 12px;
+          }
+        }
+        .desc {
+          font-size: 12px;
+          text-align: center;
+        }
+      }
+    }
+    .chart-area {
+      margin-top: 50px;
+    }
+  }
+
+  .other-cont {
+    display: flex;
+
+    .icon {
+      display: block;
+      width: 70px;
+      height: auto;
+    }
+    .other-info {
+      padding-left: 2px;
+
+      .desc {
+        font-size: 12px;
+        color: #ffffff;
+        font-weight: bold;
+      }
+      .num-info {
+        width: 100%;
+        padding-top: 2px;
+        display: flex;
+        align-items: center;
+
+        .num {
+          font-size: 30px;
+          color: #19fcde;
+          font-weight: bold;
+          font-family: "electronicFont";
+        }
+        .unit {
+          font-size: 12px;
+          color: #00ffff;
+          font-weight: 500;
+          position: relative;
+          top: 4px;
+        }
+        .mar {
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+
+  .mar {
+    margin-bottom: 15px;
+  }
+  .data-left {
+    width: auto;
+
+    .data-item {
+      width: auto;
+      margin-bottom: 23px;
+
+      .data-fir {
+        display: flex;
+        align-items: center;
+
+        .icon {
+          width: 15px;
+          height: 15px;
+          margin-right: 6px;
+        }
+        .name {
+          font-size: 14px;
+          color: #ffffff;
+        }
+      }
+      .data-snd {
+        display: flex;
+        align-items: center;
+        padding-top: 2px;
+
+        .num {
+          font-size: 32px;
+          color: #00ffff;
+          font-family: "electronicFont";
+        }
+        .unit {
+          font-size: 12px;
+          color: #00ffff;
+          font-weight: 500;
+          position: relative;
+          top: 5px;
+          left: 2px;
+        }
+      }
+    }
+  }
+  .data-right {
+    padding-top: 3px;
+
+    .circle {
+      width: 100px;
+      height: 100px;
+      background: url("../../../assets/images/service_new/circle.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+
+      .value {
+        display: flex;
+        align-items: center;
+        font-size: 32px;
+        color: #00ffff;
+        font-family: "electronicFont";
+        position: relative;
+        top: 15px;
+      }
+      .unit {
+        font-size: 12px;
+        color: #00ffff;
+        font-weight: 500;
+        position: relative;
+        top: 5px;
+        left: 2px;
+      }
+    }
+  }
+
+  .choose-area {
+    margin: 20px 0;
+    .choose-item {
+      width: 104px;
+      height: 30px;
+      line-height: 30px;
+      background: url("../../../assets/images/main/choose_bg.png") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 16px;
+      padding-left: 12px;
+      color: #00ffff;
+      cursor: pointer;
+    }
+  }
+
+  .table-cont {
+    width: 100%;
+
+    .table-top {
+      width: 100%;
+      height: 26px;
+      background: url("../../../assets/images/building_guarantee/img_11.png")
+      no-repeat;
+      background-size: 100% 100%;
+      padding: 0 25px 0 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+      color: #00ffff;
+    }
+    .table-bot {
+      width: 100%;
+
+      .table-list {
+        width: 100%;
+        height: 38px;
+        padding: 0 25px 0 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 12px;
+        color: #ffffff;
+        font-weight: 500;
+      }
+    }
+  }
+  .list-area {
+    display: flex;
+    flex-direction: column;
+    padding: 0px 15px 0;
+    .list-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 12px;
+      color: #ffffff;
+      margin-bottom: 10px;
+      flex: 1;
+      .item-1 {
+        width: 8%;
+      }
+      .item-2 {
+        width: 23%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .item-3 {
+        width: 14%;
+      }
+      .item-4,
+      .item-5 {
+        width: 13%;
+      }
+      .item-6 {
+        width: 19%;
+      }
+      .item-7 {
+        width: 17%;
+      }
+    }
+    .list-title {
+      color: #00ffff !important;
+      padding: 4px 0;
+      background: url("../../../assets/images/main/title_line.png") no-repeat;
+      background-size: 100% 100%;
+      margin-bottom: 10px !important;
+    }
+  }
+
+  .data-chart {
+    margin-top: 12px !important;
+    margin-bottom: 10px !important;
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+    width: 3px;
+    height: 3px;
+  }
+  .content-left{
+    width: 520px;
+    height:320px;
+    float: left;
+  }
+  .content-our{
+    width: 50%;
+    height: 130px;
+    display: flex;
+    padding-top: 40px;
+    padding-left: 10px;
+    //align-items: center;
+    .img-car{
+      width: 105px;
+      height: 60px;
+    }
+    .content-two{
+      width: 181.5px;
+      height: 81px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .names{
+      font-size: 32px;
+      color:#00FFFF;
+      font-family: 'electronicFont';
+      .nums{
+        font-size:10px;
+        color:#00FFFF;
+        font-weight: 500;
+        position: relative;
+
+        left:2px;
+      }
+    }
+  }
+  .saddddf{
+    display: flex;
+    flex-direction: column;
+
+  }
+  .naw{
+    color: white;
+  }
+  .content-area {
+    display: flex;
+    height: 220px;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 15px 20px 0 15px;
+
+  }
+  .contentr-left{
+    width: 520px;
+    height:240px;
+    float: left;
+    .content-one{
+      display: flex;
+      padding-top: 5px;
+      justify-content: center; /* 水平居中 */
+      align-items: center;    /* 垂直居中 */
+      height: 100%;           /* 确保父容器有高度 */
+    }
+  }
+  .content-right{
+    width: 520px;
+    height:240px;
+    float: left;
+  }
+
+  .names{
+    font-size: 32px;
+    color:#00FFFF;
+    font-family: 'electronicFont';
+    .nums{
+      font-size:10px;
+      color:#00FFFF;
+      font-weight: 500;
+      position: relative;
+
+      left:2px;
+    }
+
+  }
+
+  .content-maper{
+
+
+    .content-one{
+      display: flex;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      justify-content: center; /* 水平居中 */
+      align-items: center;    /* 垂直居中 */
+      height: 100%;           /* 确保父容器有高度 */
+    }
+  }
+  .rate-data{
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }
+  .breaker{
+    color:#FEC72F ;
+    display: flex; /* 使用 Flexbox */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+  }
+  .said{
+    width: 1px;
+    height: 13px;
+    background-color: #00FFFF;
+  }
+  .content-ear{
+    margin-top: 10px;
+    height: 115px;
+  }
+  .table-roll{
+    height: 50px;
+    overflow:auto;
+  }
+  .witeh{
+    color: #018989;
+  }
+  .namer{
+    color: white;
+    font-size: 10px;
+  }
+  .photo{
+    padding-right: 30px;
+    img{
+      width: 52.68px;
+      height: 59.67px;
+    }
+  }
+  .box-big{
+    width: 100%;
+    height: 80px;
+    padding-top: 10px;
+    padding-bottom: 20px;
+    display: flex;
+    padding-left: 10px;
+    .name-white{
+      color: white;
+      font-family: PingFangSC-Regular;
+      font-size: 12px;
+      line-height: 19.6px;
+    }
+    .box-small{
+      width: 20%;
+
+      height: 50px;
+      .box-above{
+        display: flex;
+
+      }
+    }
+    .box-smalls{
+      width: 25%;
+      height: 50px;
+      .box-above{
+        display: flex;
+
+      }
+    }
+  }
+  ::-webkit-scrollbar-thumb {
+    //滑块部分
+    // border-radius: 5px;
+    background-color: #58cbbb;
+  }
+
+  ::-webkit-scrollbar-track {
+    //轨道部分
+    // box-shadow: inset 0 0 5px #ddd;
+    background: #ddd;
+    // border-radius: 5px;
+  }
+}
+</style>