提交

MrShi

2025-07-03 53233a26cc99c6675bea79e157a624a5acfca41e

提交

 admin/package-lock.json

@@ -1876,63 +1876,6 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "ssri": {
          "version": "8.0.1",
          "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1617826515595&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1940,28 +1883,6 @@
          "dev": true,
          "requires": {
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.8.3",
          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -13991,6 +13912,87 @@
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.8.3",
      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },
    "vue-property-decorator": {
      "version": "8.5.1",
      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz",

 admin/src/components/system/dict/DictDataManagerWindow.vue

@@ -16,6 +16,7 @@
            v-loading="isWorking.search"
            :data="tableData.list"
            stripe
            class="no-scroll"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
@@ -130,7 +131,9 @@
  //max-height: 50%;
  overflow: auto;
}

.no-scroll {
  overflow: hidden !important;
}
/deep/ .window__body {
  .table-content {
    padding: 0;

 admin/src/views/business/dangerStatic.vue

@@ -34,7 +34,7 @@
<!--    </QueryForm>-->
    <div class="main_content">
      <div class="type_wrap">
        <div class="title">隐患类型统计</div>
        <div class="title">本月隐患类型统计</div>
        <div v-show="typeList && typeList.length > 0" class="echart1" ref="typeRef"></div>
        <div v-show="typeList.length == 0" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
          <img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt="">
@@ -42,7 +42,7 @@

      </div>
      <div class="dept_wrap">
        <div class="title">隐患归属部门统计</div>
        <div class="title">本月隐患归属部门统计</div>
        <div v-show="deptList && deptList.length > 0" class="echart2" ref="deptRef"></div>
        <div v-show="deptList.length == 0" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
          <img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt="">

 screen/src/api/index.js

@@ -221,3 +221,7 @@
export const regionDataRanking = (data) => {
  return request('visitsAdmin/cloudService/board/api/energy/regionDataRanking', data)
}
// æ™ºèƒ½å®‰é˜²ç›‘测 å®žæ—¶åœ¨å›­äººå‘˜
export const inParkUser = (data) => {
  return request('visitsAdmin/cloudService/board/api/fightingAdmin/inParkUser', data)
}

 screen/src/assets/images/FireFighting/xiaofang_ic_baojing@2x.png

 screen/src/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png

 screen/src/assets/images/FireFighting/xiaofang_ic_zhengchang@2x.png

 screen/src/assets/images/ic_compass@2x.png

 screen/src/assets/images/size.png

 screen/src/router/index.js

@@ -56,6 +56,14 @@
      component: () => import('../views/FireFighting.vue')
    },
    {
      path: '/FireFighting1', //消防监控
      name: 'FireFighting1',
      meta: {
        title: '安泰智慧物流园区-消防态势监控'
      },
      component: () => import('../views/FireFighting1.vue')
    },
    {
      path: '/TaskEfficiency', //场内调度看板 -作业能效
      name: 'TaskEfficiency',
      meta: {

 screen/src/views/FireFighting.vue

@@ -5,7 +5,7 @@
      <img src="@/assets/images/SecurityControl/bg@2x_2.png" class="main_bg" alt="" />
      <div class="main_header">
        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
        <div class="title">安泰智慧物流园区-消防态势监控</div>
        <div class="title">安泰智慧物流园区-智慧消防管控</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
          <span class="week">{{ week }}</span>
@@ -14,18 +14,68 @@
      </div>
      <div class="main_content">
        <div class="left_box">
          <div class="left_box_top">

            <div class="left_box_top_znz">
              <img src="@/assets/images/ic_compass@2x.png" alt="" />
            </div>

            <div class="left_box_top_left">
          <div class="left_box_one">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日各系统设备状态及告警数</div>
                    <div>消防设备/设施管理</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
                <div class="left_content">
                  <div class="tips">
                    <div class="tips_title">
                      <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                      <span>本年消防设备/设施维保情况</span>
                    </div>
                  </div>

                  <div class="content_wrap">
                    <div class="list">
                      <div class="item">
                        <div>已维保</div>
                        <div class="num active">{{ dataList5.protectNum || 0 }}</div>
                      </div>
                      <div class="separate"></div>
                      <div class="item">
                        <div>计划维保</div>
                        <div class="num acc">{{ dataList5.planProtectTotal || 0 }}</div>
                      </div>
                      <div class="separate"></div>
                      <div class="item">
                        <div>维保率</div>
                        <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{
                          ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
                        <div v-else class="acc num">0%</div>
                      </div>
                    </div>
                    <div class="footer">
                      <img src="@/assets/images/FireFighting/ic_weixiu@2x.png" class="icon" alt="">
                      <div class="content">
                        <div>本月新增维保</div>
                        <div class="num">{{ dataList5.monthAddNum }} <span>个</span></div>
                      </div>
                    </div>
                  </div>

                  <div class="tips">
                    <div class="tips_title">
                      <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                      <span>系统设备状态</span>
                    </div>
                  </div>

            <div class="list_wrap">
              <div class="list">
                <div class="header line">
                  <span class="item name">设备名称</span>
                        <span class="item name" style="color: #FFFFFF;">设备名称</span>
                  <span class="item">总数</span>
                  <span class="item">报警</span>
                  <span class="item">屏蔽</span>
@@ -47,102 +97,81 @@
                    </div>
                  </div>
                </div>

                    </div>
                    <div class="list_wrap_footer" v-if="dataList1.length > 0">
                      <div class="wrap_footer_item name">总计</div>
                      <div class="wrap_footer_item">{{sum(dataList1, 'totalDeviceNum')}}</div>
                      <div class="wrap_footer_item">{{sum(dataList1, 'alarmDeviceNum')}}</div>
                      <div class="wrap_footer_item">{{sum(dataList1, 'shieldDeviceNum')}}</div>
                      <div class="wrap_footer_item">{{sum(dataList1, 'errDeviceNum')}}</div>
                      <div class="wrap_footer_item">{{sum(dataList1, 'onlineDeviceNum')}}</div>
                      <div class="separate"></div>
              </div>
            </div>
          </div>
          <div class="left_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>报警信息</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="police_wrap">
              <div class="item" v-for="(item, i) in dataList2">
                <div class="head">
                  <div class="name">{{ item.name }}</div>
                  <div class="name">{{ item.num }}次</div>
                </div>
                <FirePercent :color="policeColors[i]" :rate="item.rate" />
              </div>

            </div>
          </div>
          <div class="left_box_three">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>告警处理分析</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="dispose_wrap">
              <div class="echart2" id="echart2"></div>
            </div>
          </div>
        </div>
        <div class="center_box">
            <div class="left_box_top_right">
          <div class="center_box_one">
            <div class="static_wrap">
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt="">
                <div class="content">
                  <div class="name">总数</div>
                  <div class="num">{{ dataList4.onlineDeviceNum || 0 }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_baojing@2x.png" alt="">
                <div class="content">
                  <div class="name">报警</div>
                  <div class="num num2">{{ dataList4.alarmDeviceNum || 0}}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt="">
                <div class="content">
                  <div class="name">屏蔽</div>
                  <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div>
                      <div class="name">报警总数</div>
                      <div class="num">{{ dayData.totalNum || 0 }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt="">
                <div class="content">
                  <div class="name">故障</div>
                  <div class="num num3">{{ dataList4.errDeviceNum || 0 }}</div>
                      <div class="name">未处理</div>
                      <div class="num num2">{{ dayData.processingNum || 0 }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zhengchang@2x.png" alt="">
                <div class="content">
                  <div class="name">正常</div>
                  <div class="num num4">{{ dataList4.onlineDeviceNum || 0 }}</div>
                      <div class="name">已处理</div>
                      <div class="num num5">{{ dayData.liftNum || 0 }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="center_box_two">
            <div class="content_wrap">
              <div class="header">
                <div class="left">
                  <img class="icon" src="@/assets/images/FireFighting/468@2x.png" alt="">
                  <span>温度/湿度传感器</span>
            </div>
          </div>
          <div class="left_box_bottom">
            <div class="left_box_three">
              <div class="com_header">
                <div class="title">
                  <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                  <div>消防态势感知</div>
                </div>
                <img src="@/assets/images/title@2x.png" class="bg" alt="" />
              </div>

              <div class="bottom_content">

                <div class="bottom_content_left" v-if="dataList8 && dataList8.length > 0">

                  <div class="tips">
                    <div class="tips_title">
                      <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                      <span>重点区域温度监测</span>
                </div>
                <div class="right">
                  <img @click="changeData8(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png"
                    alt="">
                  <div class="num">{{ dataIndex8 + 1 }}/{{ dataList8.length }}</div>
                      <div class="num">{{ dataList8[dataIndex8].humidityData.name }}</div>
                  <img @click="changeData8(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png"
                    alt="">
                </div>
              </div>

              <div class="list_wrap">
                <div class="title">
                  <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                  <span v-if="dataList8 && dataList8.length > 0">{{ dataList8[dataIndex8].humidityData.name }}</span>
                </div>
<!--                    <div class="title">-->
<!--                      <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">-->
<!--                      <span v-if="dataList8 && dataList8.length > 0">{{ dataList8[dataIndex8].humidityData.name }}</span>-->
<!--                    </div>-->
                <div class="list" v-if="dataList8 && dataList8.length > 0">
                  <div class="item">
                    <img class="icon" src="@/assets/images/FireFighting/ic_wendu@2x.png" alt="">
@@ -166,12 +195,14 @@
                  </div>
                </div>
              </div>

            </div>
            <div class="content_wrap">
              <div class="header">
                <div class="left">
                  <img class="icon" src="@/assets/images/FireFighting/468@2x.png" alt="">
                  <span>实时传感器检测</span>
                <div class="bottom_content_right">

                  <div class="tips">
                    <div class="tips_title">
                      <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                      <span>水压水位监测</span>
                </div>
                <div class="right">
                  <img @click="changeData9(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png"
@@ -181,23 +212,30 @@
                    alt="">
                </div>
              </div>

              <div class="list_wrap2">
                <div class="item" v-for="item, i in dataListTemp9">
                    <div class="item" v-for="(item, i) in dataListTemp9" :key="i">
                      <div class="watergage_wrap" v-if="item.obj.typeCode == 253958">
                        <div class="watergage" :id="'watergage' + i"></div>
                      </div>
                      <div v-if="item.obj.typeCode == 254001" class="liquidlevel_wrap">
                        <img src="@/assets/images/size.png" alt="" class="size" />
                        <div class="liquidlevel" :id="'liquidlevel' + i"></div>
                      </div>
                      <div class="list_wrap2_info">
                  <div class="title">
                    <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="watergage_wrap" v-if="item.obj.typeCode == 253958">
                    <div class="watergage" :id="'watergage' + i"></div>
                    <div class="unit">{{ item.obj.value }}</div>
                        <div class="unit">
                          <span>{{ item.obj.value.substring(0, item.obj.value.indexOf('M')) }}</span>
                          <span>{{ item.obj.value.substring(item.obj.value.indexOf('M'), item.obj.value.length) }}</span>
                        </div>
                    <div class="place">阈值 {{ item.level }}</div>
                  </div>
                  <div v-if="item.obj.typeCode == 254001" class="liquidlevel_wrap">
                    <div class="liquidlevel" :id="'liquidlevel' + i"></div>
                    <div class="liquidle_te">
                      <div class="unit">{{ item.obj.value }}</div>
                      <div class="placeT">阈值{{ item.level }}</div>
                    </div>
                    <div class="item1"></div>
                    <div class="item1"></div>
                  </div>
                </div>
              </div>
@@ -209,72 +247,59 @@
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>本年消防设备/设施维保情况</div>
                <div>消防报警闭环管理</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="content_wrap">
              <div class="list">
                <div class="item">
                  <div>已维保</div>
                  <div class="num active">{{ dataList5.protectNum }}</div>
            <div class="right_content">
              <div class="tips">
                <div class="tips_title">
                  <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                  <span>
                    <template v-if="dateType === '1'">本月</template>
                    <template v-else-if="dateType === '2'">本年</template>
                    <template v-else>今日</template>报警
                  </span>
                </div>
                <div class="separate"></div>
                <div class="item">
                  <div>计划维保</div>
                  <div class="num acc">{{ dataList5.planProtectTotal }}</div>
                </div>
                <div class="separate"></div>
                <div class="item">
                  <div>维保率</div>
                  <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{
                    ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
                <div class="tips_cates">
                  <div :class="!dateType ? 'tips_cates_row active' : 'tips_cates_row'" @click="getData2('')">今日</div>
                  <div class="tips_cates_x">|</div>
                  <div :class="dateType === '1' ? 'tips_cates_row active' : 'tips_cates_row'" @click="getData2('1')">本月</div>
                  <div class="tips_cates_x">|</div>
                  <div :class="dateType === '2' ? 'tips_cates_row active' : 'tips_cates_row'" @click="getData2('2')">本年</div>
                </div>
              </div>
              <div class="footer">
                <img src="@/assets/images/FireFighting/ic_weixiu@2x.png" class="icon" alt="">
                <div class="content">
                  <div>本月新增维保</div>
                  <div class="num">{{ dataList5.monthAddNum }} <span>个</span></div>

              <div class="police_wrap">
                <div class="item" v-for="(item, i) in dataList2">
                  <div class="head">
                    <div class="name">{{ item.name }}</div>
                    <div class="name">{{ item.num }}次</div>
                  </div>
                  <FirePercent :color="policeColors[i]" :rate="item.rate" />
                </div>
              </div>

              <div class="dispose_wrap">
                <div class="tips">
                  <div class="tips_title">
                    <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                    <span>报警趋势</span>
            </div>
          </div>
          <div class="right_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日隐患/告警</div>
                <div class="echart2" id="echart2"></div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="su_title">
              <img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
              <div class="name">隐患随手拍</div>
            </div>
            <div class="static_wrap">
              <div class="item">
                <img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt="">
                <div class="content">
                  <div class="name">提报隐患数</div>
                  <div class="num"><span>{{ dataList4.dangerTotalNum }}</span>个</div>

              <div class="tips">
                <div class="tips_title">
                  <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" alt="">
                  <span>报警明细</span>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/ic_chuli@2x.png" alt="">
                <div class="content">
                  <div class="name">处理隐患数</div>
                  <div class="num"><span class="today">{{ dataList4.dangerDealedNum }}</span>个</div>
                </div>
              </div>
            </div>
            <div class="su_title">
              <img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
              <div class="name">告警信息</div>
            </div>

            <div class="list two-swiper">
              <div class="swiper-wrapper">
                <div class="item two-swiper-slide swiper-slide" v-for="item, i in dataList7" :key="i">
                  <div class="item two-swiper-slide swiper-slide" v-for="(item, i) in dataList7" :key="i">
                  <div class="icon">
                    <div class="circle"></div>
                    <div class="line"></div>
@@ -302,10 +327,12 @@
                    </div>
                  </div>
                </div>
                <div v-if="dataList7.length == 0" style="margin-top: 100px;" class="empty_wrap">
                  <div v-if="dataList7.length == 0" style="margin-top: 50px;" class="empty_wrap">
                  <img src="@/assets/images/default_empty.png" alt="">
                </div>
              </div>
              </div>

            </div>
          </div>
        </div>
@@ -340,6 +367,7 @@
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
const time = ref(dayjs().format('HH:mm:ss'))
var dateType = ref('')
setInterval(() => {
  date.value = dayjs().format('YYYY-MM-DD')
  week.value = weekMap[new Date().getDay()]
@@ -360,6 +388,12 @@
  // let maxNum =
  const option = {
    barMaxWidth: 3,
    mapLocation: {
      x: '0',
      y: '0',
      width: '100%',
      height: '100%'
    },
    polar: {
      radius: '80%'
    },
@@ -731,23 +765,25 @@
}

const dataList1 = ref([])
const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const policeColors = ['#FE5501', '#01D9FE', '#01FE9D', '#FFF306']
const dataList2 = ref([])
const getData2 = () => {
  // let temp = []
  // temp.push({ name: '真实报警数', num: 10, rate: 20 })
  // temp.push({ name: '误报警数', num: 30, rate: 60 })
  // temp.push({ name: '已解除', num: 20, rate: 40 })
  // temp.push({ name: '处理中', num: 8, rate: 16 })
  // dataList2.value = temp
  // return
let dayData = ref([])

const getDayData = () => {
  getFightingalarmData().then(res => {
    dayData.value = res.data || {}
  })
}

const getData2 = (type) => {
  dateType.value = type
  getFightingalarmData({ type: dateType.value }).then(res => {
    const result = res.data || {}
    let temp = []
    temp.push({ name: '真实报警数', num: result.realNum, rate: (result.realNum / result.totalNum) * 100 })
    temp.push({ name: '已处理', num: result.liftNum, rate: (result.liftNum / result.totalNum) * 100 })
    temp.push({ name: '未处理', num: result.processingNum, rate: (result.processingNum / result.totalNum) * 100 })
    temp.push({ name: '正报警数', num: result.liftNum - result.errNum, rate: ((result.liftNum - result.errNum) / result.totalNum) * 100 })
    temp.push({ name: '误报警数', num: result.errNum, rate: (result.errNum / result.totalNum) * 100 })
    temp.push({ name: '已解除', num: result.liftNum, rate: (result.liftNum / result.totalNum) * 100 })
    temp.push({ name: '处理中', num: result.processingNum, rate: (result.processingNum / result.totalNum) * 100 })
    dataList2.value = temp
  })
}
@@ -761,12 +797,10 @@
}
const initEchart2 = () => {
  var myChart = echarts.init(document.querySelector('.echart2'))
  // ç”Ÿæˆæ•°æ®å’Œæ—¥æœŸ
  // ç¤ºä¾‹æ•°æ®
  const data1 = dataList3.value.map(i => i.realNum)
  const data2 = dataList3.value.map(i => i.processingNum)
  const data3 = dataList3.value.map(i => i.liftNum)
  const data4 = dataList3.value.map(i => i.errNum)
  const months = dataList3.value.map(i => {
    return i.startDate.substring(5, 7) + '月'
  })
@@ -774,17 +808,17 @@

  const option = {
    legend: {
      x: "center",
      x: "right",
      textStyle: {
        color: "#FFFFFF", // å›¾ä¾‹æ–‡å­—设为白色
        color: "#FFFFFF",
        fontSize: 12
      },
      icon: 'circle',
      top: '6%',
      itemWidth: 8,
      itemHeight: 8,
      top: '0',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
      data: ['告警数', '进行中', '已处理', '误报数'] // æ›´æ–°å›¾ä¾‹åç§°
      data: ['报警数', '未处理', '已处理']
    },
    grid: {
      left: '2%',
@@ -812,7 +846,7 @@
      },
      axisLine: {
        lineStyle: {
          color: '#1E294C'
          color: '#D2E0FF'
        }
      },
      axisTick: {
@@ -827,7 +861,7 @@
      },
      axisLine: {
        lineStyle: {
          color: '#A9AEB2'
          color: '#D2E0FF'
        }
      },
      axisTick: {
@@ -845,7 +879,7 @@
    },
    series: [
      {
        name: "告警数",
        name: "报警数",
        type: "bar",
        stack: "attendance",
        data: data1,
@@ -862,12 +896,12 @@
        barWidth: 6,
      },
      {
        name: "进行中", // è¿Ÿåˆ°æ•°æ®
        name: "未处理", // è¿Ÿåˆ°æ•°æ®
        type: "bar",
        stack: "attendance",
        data: data2,
        itemStyle: {
          color: '#28F0C4', // è¿Ÿåˆ°çš„颜色
          color: '#FE5501', // è¿Ÿåˆ°çš„颜色
        },
        label: {
          show: false,
@@ -883,7 +917,7 @@
        stack: "attendance",
        data: data3,
        itemStyle: {
          color: '#0193FE', // è¯·å‡çš„颜色
          color: '#01D9FE', // è¯·å‡çš„颜色
        },
        label: {
          show: false,
@@ -892,19 +926,7 @@
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "误报数", // å•ç‹¬çš„加班柱子
        type: "bar",
        data: data4,
        barWidth: 6,
        itemStyle: {
          color: '#FEED01', // é«˜äº®çš„紫色
        },
        emphasis: {
          focus: "series",
        },
      },
      }
    ],
  }
  myChart.setOption(option)
@@ -970,9 +992,10 @@
      }
    })
    if (dataList9.value.length > 0) {
      dataTotal9.value = Math.ceil(dataList9.value.length / 2)
      dataListTemp9.value = dataList9.value.slice(0, 2)
      dataTotal9.value = Math.ceil(dataList9.value.length / 4)
      dataListTemp9.value = dataList9.value.slice(0, 4)
    }
    console.log(dataListTemp9.value)
    initEcharts9()
  })
}
@@ -989,13 +1012,13 @@
  // return
  if (dataIndex9.value == dataTotal9.value - 1 && num > 0) {
    dataIndex9.value = 0
    dataListTemp9.value = dataList9.value.slice(0, 2)
    dataListTemp9.value = dataList9.value.slice(0, 4)
  } else if (dataIndex9.value == 0 && num < 0) {
    dataIndex9.value = dataTotal9.value - 1
    dataListTemp9.value = dataList9.value.slice(dataList9.value.length - 2, dataList9.value.length)
    dataListTemp9.value = dataList9.value.slice(dataList9.value.length - 4, dataList9.value.length)
  } else {
    dataIndex9.value = dataIndex9.value + num
    dataListTemp9.value = dataList9.value.slice(dataIndex9.value * 2, (dataIndex9.value + 1) * 2)
    dataListTemp9.value = dataList9.value.slice(dataIndex9.value * 4, (dataIndex9.value + 1) * 4)
  }
  initEcharts9()
}
@@ -1023,6 +1046,13 @@
    return false
  }
}

const sum = (array, field) => {
  return array.reduce((accumulator, currentValue) => {
    return accumulator + currentValue[field];
  }, 0);
}

const loopFn1 = () => {
  var newSwiper1 = new Swiper('.one-swiper', {
    initialSlide: 0,
@@ -1036,52 +1066,99 @@
  var newSwiper1 = new Swiper('.two-swiper', {
    initialSlide: 0,
    direction: 'vertical', //竖直方向
    slidesPerView: 4,
    autoplay: autoplayFlag(dataList7.value, 4, 4000),
    slidesPerView: 3,
    autoplay: autoplayFlag(dataList7.value, 3, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}

onMounted(() => {
  // getData1()
  getDayData()
  getData2()
  getData3()
  getData4()
  getData5()
  // getData6()
  getData7()
  getData8()
  setInterval(() => {
    getData2()
    getData3()
    getData4()
    // getData6()
    getData7()
  }, 60 * 1000)
  setInterval(() => {
    getData5()
    getData8()
  }, 60 * 60 * 1000)

  setInterval(() => {
    changeData8(1)
    changeData9(1)
  }, 1000 * 5)

  setTimeout(() => {
    loopFn1()
    loopFn2()
  }, 12000)


})


</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.tips {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tips_title {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-right: 30px;
    img {
      width: 17px;
      height: 17px;
      margin-right: 7px;
    }
    span {
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
    }
  }
  .tips_cates {
    display: flex;
    align-items: center;
    .tips_cates_row {
      font-weight: 600;
      font-size: 14px;
      color: #D2E0FF;
      cursor: pointer;
    }
    .tips_cates_x {
      margin: 0 8px;
      font-weight: 600;
      font-size: 14px;
      color: #D2E0FF;
    }
    .active {
      color: #0094EB !important;
    }
  }
  .right {
    display: flex;
    align-items: center;

    .num {
      margin: 0 5px;
    }

    .icon {
      width: 30px;
      cursor: pointer;
      /* height: 16px; */
    }
  }
}

.main_content {
@@ -1089,28 +1166,91 @@
  padding: 20px 25px 0;

  .left_box {
    /*width: 450px;*/
    flex: 1;
    margin-right: 20px;

    .left_box_top {
      width: 100%;
      display: flex;
      align-items: start;
      position: relative;

      .left_box_top_znz {
        width: 68px;
        height: 68px;
        position: absolute;
        right: 0;
        top: 120px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .left_box_top_left {
    width: 450px;
        flex-shrink: 0;

    .left_box_one {
      width: 100%;
      margin-bottom: 20px;

          .left_content {
            width: 100%;
            height: 549px;
            padding: 20px;
            box-sizing: border-box;
            background: rgba(255,255,255,0.03);

      .list_wrap {
        padding: 10px 0;

              .list_wrap_footer {
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                position: relative;
                .separate {
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  width: 100%;
                  height: 2px;
                  background-color: rgba(255, 255, 255, 0.2);
                  /* background-color: red; */
                  border-right: 4px solid #00F2F3;
                  border-left: 4px solid #00F2F3;
                }
                .wrap_footer_item {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex: 2;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                .name {
                  flex: 5;
                  color: #00F2F3;
                }
              }

        .list_content {
          height: 170px;
                height: 204px;
          overflow: hidden;

          .line_wrap {
            height: 34px !important;
                  height: 40px !important;
          }
        }

        .list {
          .line {
            display: flex;
            height: 32px;
                  height: 40px;
            align-items: center;
            font-size: 14px;

@@ -1128,7 +1268,7 @@

            .name {
              flex: 5;
              justify-content: flex-start;
                    color: #00F2F3;
            }

            .warnning {
@@ -1159,353 +1299,7 @@
          }
        }
      }
    }

    .left_box_two {
      margin-bottom: 20px;

      .police_wrap {
        padding: 15px 20px 0;
        height: 225px;

        .item {
          margin-bottom: 5px;

          .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            color: #FFFFFF;
            margin-bottom: 8px;
          }
        }
      }
    }

    .left_box_three {
      .dispose_wrap {
        height: 210px;
        width: 100%;

        .echart2 {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .center_box {
    flex: 1;
    padding: 16px 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .center_box_one {
      .static_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 0 54px;

        .item {
          display: flex;

          img {
            width: 61px;
            height: 63px;
            margin-right: 15px;
          }

          .content {
            font-size: 15px;

            .num {
              font-size: 12px;
              color: #D2E0FF;

              font-weight: bold;
              font-size: 30px;
              margin-right: 5px;
              font-weight: 600;
              background-image: -webkit-linear-gradient(top,
                  #01D9FE 0%,
                  #01D9FE 60%,
                  #fff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .num2 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #dd4c26 50%,
                  #e43724 100%);
            }

            .num3 {
              background-image: -webkit-linear-gradient(top,
                  #eb8131 0%,
                  #d0a72c 50%,
                  #e9bf43 100%);
            }

            .num4 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #78db91 50%,
                  #6de8b0 100%);
            }

            .num5 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #3a83f5 50%,
                  #3a83f5 100%);
            }
          }
        }
      }
    }

    .center_box_two {
      width: 108%;
      display: flex;
      margin: 0 -4%;

      .content_wrap {
        flex: 1;
        flex-shrink: 0;
        margin-right: 20px;

        .title_wrap {
          display: flex;

          .title {
            flex: 1;
          }
        }

        &:nth-last-child(1) {
          margin-right: 0;
        }

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
          text-shadow: 0px 2px 8px #01ABFE;
          margin-bottom: 20px;

          .left {
            display: flex;
            align-items: center;

            .icon {
              width: 14px;
              height: 28px;
              margin-right: 10px;
            }
          }

          .right {
            display: flex;
            align-items: center;

            .num {
              margin: 0 40px;
            }

            .icon {
              width: 30px;
              cursor: pointer;
              /* height: 16px; */
            }
          }
        }

        .list_wrap {
          height: 206px;
          background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png');
          background-size: cover;

          .title {
            height: 46px;
            display: flex;
            align-items: center;
            color: #D2E0FF;
            padding-left: 20px;

            .icon {
              width: 16px;
              margin-right: 8px;
            }
          }

          .list {
            height: 160px;
            display: flex;
            justify-content: space-evenly;

            .item {
              display: flex;
              align-items: center;
              position: relative;

              .place {
                position: absolute;
                top: 120px;
                right: 70px;
                z-index: 999;
                font-size: 13px;
                color: #869CC9;
                width: 120px;
                text-align: center;
              }

              .icon {
                width: 70px;
                height: 70px;
                margin-right: 10px;
              }

              .content {
                .num {
                  font-size: 28px;
                  font-weight: 500;

                  span {
                    font-size: 14px;
                    font-weight: 400;
                  }
                }

                .la {
                  font-size: 13px;
                  color: #869CC9;
                }
              }
            }
          }
        }

        .list_wrap2 {
          display: flex;
          align-items: center;
          height: 206px;
          background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png');
          background-size: cover;

          .item {
            width: 50%;
            height: 100%;

            .title {
              height: 46px;
              display: flex;
              align-items: center;
              color: #D2E0FF;
              padding-left: 20px;

              .icon {
                width: 16px;
                margin-right: 8px;
              }
            }

            .watergage_wrap {
              text-align: center;
              position: relative;
              left: 30px;

              .watergage {
                width: 130px;
                height: 112px;
              }

              .unit {
                font-weight: 500;
                font-size: 18px;
                position: relative;
                bottom: 16px;
                left: 4px;
                width: 130px;
                margin-bottom: 6px;
                margin-top: 2px;

                span {
                  font-size: 12px;
                  font-weight: 400;
                }
              }

              .place {
                position: relative;
                bottom: 16px;
                left: 4px;
                width: 130px;
                font-size: 13px;
                color: #869CC9;
              }
            }

            .liquidlevel_wrap {
              position: relative;

              /* border: 6px solid red; */
              .liquidle_te {
                font-weight: 500;
                font-size: 18px;
                position: absolute;
                top: 99px;
                left: 0;
                width: 206px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .placeT {
                  font-size: 12px;
                  color: #869CC9;
                  margin-top: 6px;
                }
              }

              /* .placeT {
                position: relative;
                bottom: 10px;
                left: 4px;
                font-size: 74px;
                color: #869CC9;
                opacity: 0;
              } */

              .liquidlevel {
                width: 220px;
                height: 400px;
                transform: scale(0.27);
                color: #fff;
                text-align: center;
                position: relative;
                left: -8px;
                top: -143px;
              }
            }
          }
        }
      }

    }
  }

  .right_box {
    width: 450px;

    .right_box_one {
      .content_wrap {
        height: 176px;

@@ -1583,73 +1377,307 @@
          }
        }
      }

    }

    .right_box_two {
      .su_title {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 16px;
        margin: 20px;

        .icon {
          width: 17px;
          height: 17px;
          margin-right: 7px;
        }
      }
      .left_box_top_right {
        flex: 1;

        .center_box_one {
          width: 100%;
          padding: 0 120px;
          box-sizing: border-box;
      .static_wrap {
        display: flex;
        justify-content: space-evenly;
            justify-content: space-between;
        align-items: center;
        height: 110px;
            margin: 30px 0 54px;

            .item {
              display: flex;

              img {
                width: 61px;
                height: 63px;
                margin-right: 15px;
              }

              .content {
                font-size: 15px;
                .num {
                  font-weight: bold;
                  font-size: 30px;
                  margin-right: 5px;
                  background-image: -webkit-linear-gradient(top,
                    rgba(254, 113, 1, 1) 0%,
                    rgba(239, 202, 16, 1) 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }
                .num2 {
                  background-image: -webkit-linear-gradient(top,
                          #fff 0%,
                          #dd4c26 50%,
                          #e43724 100%);
                }
                .num5 {
                  background-image: -webkit-linear-gradient(top,
                          rgba(1, 217, 254, 1) 0%,
                          rgba(1, 254, 242, 1) 100%);
                }
              }
            }
          }
        }
      }
    }

    .left_box_bottom {
      width: 100%;
      display: flex;
      flex-direction: column;

      .bottom_content {
        width: 100%;
        height: 168px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255,255,255,0.03);

        .bottom_content_left {
          width: 435px;
          height: 100%;
          padding: 20px;
          box-sizing: border-box;

          .list_wrap {
            width: 100%;
            height: 64px;
            margin-top: 20px;

            .list {
              height: 100%;
              display: flex;
              justify-content: space-evenly;

        .item {
          display: flex;
          align-items: center;
                position: relative;

          img {
            width: 80px;
            height: 80px;
            margin-right: 8px;
                .place {
                  position: absolute;
                  top: 120px;
                  right: 70px;
                  z-index: 999;
                  font-size: 13px;
                  color: #869CC9;
                  width: 120px;
                  text-align: center;
                }

                .icon {
                  width: 70px;
                  height: 70px;
                  margin-right: 10px;
          }

          .content {
            font-size: 14px;

            .num {
              font-size: 12px;
              color: #D2E0FF;
              margin-top: 8px;
                    font-size: 28px;
                    font-weight: 500;

              span {
                font-weight: bold;
                font-size: 24px;
                margin-right: 4px;
                font-weight: 600;
                background-image: -webkit-linear-gradient(top,
                    #01D9FE 0%,
                    #01D9FE 60%,
                    #fff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                      font-size: 14px;
                      font-weight: 400;
                    }
              }

              .today {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #FFB120 50%,
                    #FFB120 100%);
                  .la {
                    font-size: 13px;
                    color: #869CC9;
              }
            }
          }
        }
      }

        }

        .bottom_content_right {
          flex: 1;
          height: 100%;
          padding: 20px;
          box-sizing: border-box;

          .list_wrap2 {
            display: flex;
            align-items: center;
            height: 85px;

            .item1 {
              width: 50%;
              height: 0;
            }
            .item {
              width: 50%;
              height: 100%;
              display: flex;
              align-items: center;
              position: relative;

              .list_wrap2_info {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .title {
                  display: flex;
                  align-items: start;
                  color: #D2E0FF;

                  .icon {
                    width: 16px;
                    margin-right: 8px;
                  }

                  span {
                    font-weight: 400;
                    font-size: 14px;
                    color: #D2E0FF;
                  }
                }

                .unit {
                  bottom: 16px;
                  left: 4px;
                  width: 130px;
                  margin-bottom: 6px;
                  margin-top: 2px;

                  span {
                    font-weight: 500;
                    color: #FFFFFF;

                    &:nth-child(1) {
                      font-size: 20px;
                    }
                    &:nth-child(2) {
                      font-size: 13px;
                    }
                    /*font-size: 12px;*/
                    /*font-weight: 400;*/
                  }
                }

                .place {
                  bottom: 16px;
                  left: 4px;
                  width: 130px;
                  font-size: 13px;
                  color: #869CC9;
                }
              }
              .watergage_wrap {
                flex-shrink: 0;
                width: 100px;
                height: 85px;
                text-align: center;
                position: relative;

                .watergage {
                  width: 100px;
                  height: 85px;
                }


              }
              .liquidlevel_wrap {
                width: 100px;
                height: 85px;
                position: relative;

                .size {
                  width: 13px;
                  height: 84px;
                  position: absolute;
                  top: 3px;
                  right: 20px;
                }

                .liquidle_te {
                  font-weight: 500;
                  font-size: 18px;
                  position: absolute;
                  top: 99px;
                  left: 0;
                  width: 206px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;

                  .placeT {
                    font-size: 12px;
                    color: #869CC9;
                    margin-top: 6px;
                  }
                }

                .liquidlevel {
                  width: 220px;
                  height: 400px;
                  color: #fff;
                  transform: scale(0.24);
                  text-align: center;
                  left: -70px;
                  top: -154px;
                }
              }
            }
          }

        }

      }
    }
  }

  .center_box {
    flex: 1;
    padding: 16px 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;



    .center_box_two {
      width: 108%;
      display: flex;
      margin: 0 -4%;

    }
  }

  .right_box {
    width: 450px;

    .right_box_one {
      width: 100%;

      .right_content {
        width: 100%;
        height: 775px;
        padding: 20px;
        box-sizing: border-box;
        background: rgba(255,255,255,0.03);

      .list {
        height: 320px;
          height: 240px;
        overflow: hidden;
        margin-top: 15px;
        scrollbar-width: none;
@@ -1658,7 +1686,7 @@
          display: flex;
          font-size: 13px;
          color: #D2E0FF;
          height: 80px !important;
            height: 68px !important;

          .icon {
            width: 40px;
@@ -1759,6 +1787,61 @@
          }
        }
      }

        .dispose_wrap {
          height: 210px;
          width: 100%;
          position: relative;

          .tips {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: absolute;
            top: 0;
            left: 0;
            .tips_title {
              display: flex;
              align-items: center;
              img {
                width: 17px;
                height: 17px;
                margin-right: 7px;
              }
              span {
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
              }
            }
          }

          .echart2 {
            width: 100%;
            height: 100%;
          }
        }

        .police_wrap {
          padding: 15px 0;
          height: 225px;

          .item {
            margin-bottom: 5px;

            .head {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 16px;
              color: #FFFFFF;
              margin-bottom: 8px;
            }
          }
        }

      }
    }
  }
}

 screen/src/views/FireFighting1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1900 @@
<template>
  <v-scale-screen width="1920" height="960">
    <div class="main_app">
      <!-- <img src="@/assets/images/FireFighting/bg@2x.png" class="main_bg" alt="" /> -->
      <img src="@/assets/images/SecurityControl/bg@2x_2.png" class="main_bg" alt="" />
      <div class="main_header">
        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
        <div class="title">安泰智慧物流园区-智慧消防管控</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
          <span class="week">{{ week }}</span>
          <span class="time">{{ time }}</span>
        </div>
      </div>
      <div class="main_content">
        <div class="left_box">
          <div class="left_box_one">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日各系统设备状态及告警数</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="list_wrap">
              <div class="list">
                <div class="header line">
                  <span class="item name">设备名称</span>
                  <span class="item">总数</span>
                  <span class="item">报警</span>
                  <span class="item">屏蔽</span>
                  <span class="item">故障</span>
                  <span class="item">正常</span>
                </div>
                <div class="one-swiper list_content">
                  <div class="swiper-wrapper">
                    <div class="line_wrap one-swiper-slide swiper-slide" v-for="(item, i) in dataList1">
                      <div class="line">
                        <span class="item name">{{ item.typeName }}</span>
                        <span class="item">{{ item.totalDeviceNum || 0 }}</span>
                        <span class="item" style="color: #FEAF01;">{{ item.alarmDeviceNum || 0 }}</span>
                        <span class="item">{{ item.shieldDeviceNum || 0 }}</span>
                        <span class="item">{{ item.errDeviceNum || 0 }}</span>
                        <span class="item">{{ item.onlineDeviceNum || 0 }}</span>
                      </div>
                      <div class="separate"></div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <div class="left_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>报警信息</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="police_wrap">
              <div class="item" v-for="(item, i) in dataList2">
                <div class="head">
                  <div class="name">{{ item.name }}</div>
                  <div class="name">{{ item.num }}次</div>
                </div>
                <FirePercent :color="policeColors[i]" :rate="item.rate" />
              </div>

            </div>
          </div>
          <div class="left_box_three">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>告警处理分析</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="dispose_wrap">
              <div class="echart2" id="echart2"></div>
            </div>
          </div>
        </div>
        <div class="center_box">
          <div class="center_box_one">
            <div class="static_wrap">
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt="">
                <div class="content">
                  <div class="name">总数</div>
                  <div class="num">{{ dataList4.onlineDeviceNum || 0 }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_baojing@2x.png" alt="">
                <div class="content">
                  <div class="name">报警</div>
                  <div class="num num2">{{ dataList4.alarmDeviceNum || 0}}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt="">
                <div class="content">
                  <div class="name">屏蔽</div>
                  <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt="">
                <div class="content">
                  <div class="name">故障</div>
                  <div class="num num3">{{ dataList4.errDeviceNum || 0 }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zhengchang@2x.png" alt="">
                <div class="content">
                  <div class="name">正常</div>
                  <div class="num num4">{{ dataList4.onlineDeviceNum || 0 }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="center_box_two">
            <div class="content_wrap">
              <div class="header">
                <div class="left">
                  <img class="icon" src="@/assets/images/FireFighting/468@2x.png" alt="">
                  <span>温度/湿度传感器</span>
                </div>
                <div class="right">
                  <img @click="changeData8(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png"
                    alt="">
                  <div class="num">{{ dataIndex8 + 1 }}/{{ dataList8.length }}</div>
                  <img @click="changeData8(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png"
                    alt="">
                </div>
              </div>
              <div class="list_wrap">
                <div class="title">
                  <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                  <span v-if="dataList8 && dataList8.length > 0">{{ dataList8[dataIndex8].humidityData.name }}</span>
                </div>
                <div class="list" v-if="dataList8 && dataList8.length > 0">
                  <div class="item">
                    <img class="icon" src="@/assets/images/FireFighting/ic_wendu@2x.png" alt="">
                    <div class="content">
                      <div class="num"
                        v-if="dataList8[dataIndex8].temperatureData && dataList8[dataIndex8].temperatureData.latestValue">
                        {{ Number(dataList8[dataIndex8].temperatureData.latestValue).toFixed(1) }}<span>°C</span></div>
                      <div class="la">阈值 {{ dataList8[dataIndex8].temperatureData?.alarmLow }}～{{
                        dataList8[dataIndex8].temperatureData?.alarmHigh }}°C</div>
                    </div>
                  </div>
                  <div class="item">
                    <img class="icon" src="@/assets/images/FireFighting/ic_shidu@2x.png" alt="">
                    <div class="content">
                      <div class="num"
                        v-if="dataList8[dataIndex8].humidityData && dataList8[dataIndex8].humidityData.latestValue">{{
                          Number(dataList8[dataIndex8].humidityData.latestValue).toFixed(1) }}<span>%</span></div>
                      <div class="la">阈值 {{ dataList8[dataIndex8].humidityData?.alarmLow }}～{{
                        dataList8[dataIndex8].humidityData?.alarmHigh }}%</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="content_wrap">
              <div class="header">
                <div class="left">
                  <img class="icon" src="@/assets/images/FireFighting/468@2x.png" alt="">
                  <span>实时传感器检测</span>
                </div>
                <div class="right">
                  <img @click="changeData9(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png"
                    alt="">
                  <div class="num">{{ dataIndex9 + 1 }}/{{ dataTotal9 }}</div>
                  <img @click="changeData9(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png"
                    alt="">
                </div>
              </div>
              <div class="list_wrap2">
                <div class="item" v-for="item, i in dataListTemp9">
                  <div class="title">
                    <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="watergage_wrap" v-if="item.obj.typeCode == 253958">
                    <div class="watergage" :id="'watergage' + i"></div>
                    <div class="unit">{{ item.obj.value }}</div>
                    <div class="place">阈值 {{ item.level }}</div>
                  </div>
                  <div v-if="item.obj.typeCode == 254001" class="liquidlevel_wrap">
                    <div class="liquidlevel" :id="'liquidlevel' + i"></div>
                    <div class="liquidle_te">
                      <div class="unit">{{ item.obj.value }}</div>
                      <div class="placeT">阈值{{ item.level }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right_box">
          <div class="right_box_one">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>本年消防设备/设施维保情况</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="content_wrap">
              <div class="list">
                <div class="item">
                  <div>已维保</div>
                  <div class="num active">{{ dataList5.protectNum }}</div>
                </div>
                <div class="separate"></div>
                <div class="item">
                  <div>计划维保</div>
                  <div class="num acc">{{ dataList5.planProtectTotal }}</div>
                </div>
                <div class="separate"></div>
                <div class="item">
                  <div>维保率</div>
                  <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{
                    ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
                </div>
              </div>
              <div class="footer">
                <img src="@/assets/images/FireFighting/ic_weixiu@2x.png" class="icon" alt="">
                <div class="content">
                  <div>本月新增维保</div>
                  <div class="num">{{ dataList5.monthAddNum }} <span>个</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="right_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>今日隐患/告警</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="su_title">
              <img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
              <div class="name">隐患随手拍</div>
            </div>
            <div class="static_wrap">
              <div class="item">
                <img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt="">
                <div class="content">
                  <div class="name">提报隐患数</div>
                  <div class="num"><span>{{ dataList4.dangerTotalNum }}</span>个</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/FireFighting/ic_chuli@2x.png" alt="">
                <div class="content">
                  <div class="name">处理隐患数</div>
                  <div class="num"><span class="today">{{ dataList4.dangerDealedNum }}</span>个</div>
                </div>
              </div>
            </div>
            <div class="su_title">
              <img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt="">
              <div class="name">告警信息</div>
            </div>
            <div class="list two-swiper">
              <div class="swiper-wrapper">
                <div class="item two-swiper-slide swiper-slide" v-for="item, i in dataList7" :key="i">
                  <div class="icon">
                    <div class="circle"></div>
                    <div class="line"></div>
                  </div>
                  <div class="content">
                    <div class="header">
                      <div class="time">
                        <span>{{ item.alarmTime }}</span>
                        <span class="status" v-if="item.handleStatus == 1">已核实</span>
                        <span class="status" v-else-if="item.handleStatus == 2">未核实</span>
                        <span class="status" v-else-if="item.handleStatus == 3">核实中</span>
                        <span v-else class="status">未核实</span>
                      </div>
                      <div class="have_time">已发生{{ item.haveTime }}</div>
                    </div>
                    <div class="wrap">
                      <div class="title">
                        <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
                        <span>{{ item.alarmTypeName }}</span>
                      </div>
                      <div class="title">
                        <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt="">
                        <span>{{ item.regionName }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="dataList7.length == 0" style="margin-top: 100px;" class="empty_wrap">
                  <img src="@/assets/images/default_empty.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import VScaleScreen from 'v-scale-screen'
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
import * as echarts from 'echarts'
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
import {
  getFightingalarmData,
  getFightingHandle,
  getFightingcenterData,
  getFightingDeAlarm,
  getFightingDeviceY,
  getFighalarmDataList,
  getTemperatureHumidityData,
  monitorDataListP
} from '@/api'

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
const time = ref(dayjs().format('HH:mm:ss'))
setInterval(() => {
  date.value = dayjs().format('YYYY-MM-DD')
  week.value = weekMap[new Date().getDay()]
  time.value = dayjs().format('HH:mm:ss')

}, 1000)


const initWatergage = (id, item) => {
  const myChart = echarts.init(document.getElementById(id))
  var data_value = item.obj.value.replaceAll('Mpa', '')
  // const startI = item.level.indexOf('-')
  // const endI = item.level.indexOf('Mpa')
  // let maxNum = item.level.slice(startI + 1, endI)
  // let minNum = item.level.slice(0, startI)
  let maxNum = item.max
  let minNum = item.min
  // let maxNum =
  const option = {
    barMaxWidth: 3,
    polar: {
      radius: '80%'
    },
    grid: {
      top: '0%',
      left: '0%',
      right: '%',
      bottom: '0%',
      containLabel: true
    },
    angleAxis: {
      show: false,
      max: (360 * 100) / 270,
      type: 'value',
      startAngle: 225,
    },
    radiusAxis: {
      show: false,
      type: 'category',
      z: 10
    },
    series: [
      {
        type: 'gauge',
        min: minNum,
        max: maxNum,
        splitNumber: 5,
        radius: '100%',
        center: ['50%', '50%'],
        data: [data_value],
        detail: {
          formatter: (v) => v + '%',
          color: '#152435',
          fontSize: 1,

        },
        itemStyle: {
          color: '#3DE6FF'
        },
        pointer: {
          width: 2,
          length: '90%',
          offsetCenter: [0, '3%'],
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 0,
            color: [
              [0.05, '#1b6dff'],
              [0.10, '#2084ff'],
              [0.15, '#2596ff'],
              [0.20, '#2db0ff'],
              [0.25, '#31c0ff'],
              [0.30, '#36d3ff'],
              [0.35, '#4fe6ec'],
              [0.40, '#6ae7d2'],
              [0.45, '#84e8b9'],
              [0.50, '#a5e999'],
              [0.55, '#ccea75'],
              [0.60, '#f8eb4a'],
              [0.65, '#ffdd4f'],
              [0.70, '#ffcb5a'],
              [0.75, '#ffae6e'],
              [0.80, '#ff9c7b'],
              [0.85, '#ff8d87'],
              [0.90, '#ff7d91'],
              [0.95, '#ff6f9b'],
              [1, '#ff5ca9']
            ]

          }
        },
        axisTick: {
          show: true,
          length: 3,
          splitNumber: 12,
          lineStyle: {
            width: 1,
            color: 'auto',
          },
        },
        axisLabel: {
          distance: 12,
          fontSize: 8,
          color: 'auto',
        },
        splitLine: {
          show: true,
          length: -5,
          lineStyle: {
            width: 1,
            color: 'auto',
          }
        },
        z: 9,
      },
      {
        type: 'bar',
        barGap: '-100%',
        coordinateSystem: 'polar',
        roundCap: true,
        data: [
          {
            value: 100,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: '#0A5EFF' },
                { offset: 0.45, color: '#20DDFF' },
                { offset: 1, color: '#FC10CB' }
              ])
            }
          }
        ],
        z: 3,
      },
      {
        type: 'pie',
        radius: ['2%', '6%'],
        center: ['50%', '50%'],
        labelLine: {
          show: false
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: '#3DE6FF',
              opacity: 0.5
            }
          }
        ],
        z: 2,
      },
      {
        type: 'pie',
        radius: 4,
        labelLine: {
          show: false
        },
        data: [
          {
            value: 20,
            itemStyle: {
              color: '#3DE6FF'
            }
          }
        ],
        z: 1,
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}
const initLiquidlevel = (id, item) => {
  const myChart = echarts.init(document.getElementById(id))
  // const startI = item.level.indexOf('-')
  // const endI = item.level.indexOf('M')
  // let maxNum = item.level.slice(startI + 1, endI)
  // let minNum = item.level.slice(0, startI)
  let maxNum = item.max
  let minNum = item.min
  let conNum = maxNum
  let acNum = item.obj.value.replaceAll('M', '')
  var data = (((acNum - minNum) / conNum) * 100).toFixed(0)
  console.log('data', data)

  const option = {
    tooltip: {
      trigger: 'none',
    },
    xAxis: {
      data: ['百分比'],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#e54035',
        },
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        name: '最上层立体圆',
        type: 'pictorialBar',
        symbolSize: [182, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
          normal: {
            color: 'rgba(8,44,110, 1)',
          },
        },
        data: [
          {
            value: 100,
            symbolPosition: 'end',
          },
        ],
      },
      {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [182, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
          normal: {
            color: () =>
              new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#03C7F9',
                },
                {
                  offset: 1,
                  // color: '#03C7F922',
                  color: 'rgb(8,44,110)',
                },
              ]),
            shadowColor: '#03C7F9',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 4,
          },
        },
        data: [
          {
            value: data,
            symbolPosition: 'end',
          },
        ],
      },
      {
        name: '最底部立体圆',
        type: 'pictorialBar',
        symbolSize: [182, 40],
        symbolOffset: [0, 20],
        z: 12,
        itemStyle: {
          normal: {
            color: () =>
              new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                {
                  offset: 0,
                  color: '#03C7F9',
                },
                {
                  offset: 0.9,
                  // color: '#03C7F922',
                  color: 'rgba(8,44,110, 0.85)',
                },
              ]),
            // shadowColor: '#03C7F9',
            // shadowBlur: 30,
            // shadowOffsetX: 0,
            // shadowOffsetY: -10,
          },
        },
        data: [100 - data],
      },
      {
        //底部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            // color: 'rgba(8,44,110, 0.94)',
            color: () =>
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(18,85,213,0.77)',
                },
                {
                  offset: 1,
                  color: 'rgba(8,44,110, 0.77)',
                },
              ]),
            opacity: 0.77,
          },
        },
        label: {
          distance: 15,
          show: true,
          position: data > 52 ? 'inside' : 'top',
          formatter: '{c}' + '%',
          fontSize: 72,
          color: '#1AFCFF',
          textShadowColor: '#03C7F9',
          textShadowBlur: 30,
          textShadowOffsetX: 5,
          textShadowOffsetY: 10,
        },

        silent: true,
        barWidth: 250,
        barGap: '-100%', // Make series be overlap
        data: [data],
      },
      {
        //上部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            color: () =>
              new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: '#47C8FF77',
                },
                {
                  offset: 0.05,
                  color: '#47C8FF44',
                },
                {
                  offset: 0.15,
                  color: '#47C8FF00',
                },
                {
                  offset: 0.85,
                  color: '#47C8FF00',
                },
                {
                  offset: 0.95,
                  color: '#47C8FF44',
                },
                {
                  offset: 1,
                  color: '#47C8FF77',
                },
              ]),
          },
        },
        silent: true,
        barWidth: 300,
        barGap: '-100%', // Make series be overlap
        data: [100 - data],
      },
    ],
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}

const dataList1 = ref([])
const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const dataList2 = ref([])
const getData2 = () => {
  // let temp = []
  // temp.push({ name: '真实报警数', num: 10, rate: 20 })
  // temp.push({ name: '误报警数', num: 30, rate: 60 })
  // temp.push({ name: '已解除', num: 20, rate: 40 })
  // temp.push({ name: '处理中', num: 8, rate: 16 })
  // dataList2.value = temp
  // return
  getFightingalarmData().then(res => {
    const result = res.data || {}
    let temp = []
    temp.push({ name: '真实报警数', num: result.realNum, rate: (result.realNum / result.totalNum) * 100 })
    temp.push({ name: '误报警数', num: result.errNum, rate: (result.errNum / result.totalNum) * 100 })
    temp.push({ name: '已解除', num: result.liftNum, rate: (result.liftNum / result.totalNum) * 100 })
    temp.push({ name: '处理中', num: result.processingNum, rate: (result.processingNum / result.totalNum) * 100 })
    dataList2.value = temp
  })
}

const dataList3 = ref([])
const getData3 = () => {
  getFightingHandle({ type: 0 }).then(res => {
    dataList3.value = res.data || []
    initEchart2()
  })
}
const initEchart2 = () => {
  var myChart = echarts.init(document.querySelector('.echart2'))
  // ç”Ÿæˆæ•°æ®å’Œæ—¥æœŸ
  // ç¤ºä¾‹æ•°æ®
  const data1 = dataList3.value.map(i => i.realNum)
  const data2 = dataList3.value.map(i => i.processingNum)
  const data3 = dataList3.value.map(i => i.liftNum)
  const data4 = dataList3.value.map(i => i.errNum)
  const months = dataList3.value.map(i => {
    return i.startDate.substring(5, 7) + '月'
  })


  const option = {
    legend: {
      x: "center",
      textStyle: {
        color: "#FFFFFF", // å›¾ä¾‹æ–‡å­—设为白色
        fontSize: 12
      },
      icon: 'circle',
      top: '6%',
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 20,
      data: ['告警数', '进行中', '已处理', '误报数'] // æ›´æ–°å›¾ä¾‹åç§°
    },
    grid: {
      left: '2%',
      right: '0%',
      top: '20%',
      bottom: '10%',
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      textStyle: {
        color: "rgba(255, 255, 255, 1)"
      },
      backgroundColor: "rgba(0,0,0,0.8)",
      borderColor: "rgba(219, 230, 255, 0.8)",
    },
    xAxis: {
      data: months,
      axisLabel: {
        color: "#FFFFFF", // X è½´æ–‡å­—设为白色
        fontSize: 13,
      },
      axisLine: {
        lineStyle: {
          color: '#1E294C'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      show: true,
      axisLabel: {
        color: "#FFFFFF", // Y è½´æ–‡å­—设为白色
        fontSize: 12,
      },
      axisLine: {
        lineStyle: {
          color: '#A9AEB2'
        }
      },
      axisTick: {
        lineStyle: {
          color: '#A9AEB2'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ["#0f1d27"],
          width: 1
        },
      },
    },
    series: [
      {
        name: "告警数",
        type: "bar",
        stack: "attendance",
        data: data1,
        itemStyle: {
          color: '#FEAF01',
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
        barWidth: 6,
      },
      {
        name: "进行中", // è¿Ÿåˆ°æ•°æ®
        type: "bar",
        stack: "attendance",
        data: data2,
        itemStyle: {
          color: '#28F0C4', // è¿Ÿåˆ°çš„颜色
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "已处理", // è¯·å‡æ•°æ®
        type: "bar",
        stack: "attendance",
        data: data3,
        itemStyle: {
          color: '#0193FE', // è¯·å‡çš„颜色
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "误报数", // å•ç‹¬çš„加班柱子
        type: "bar",
        data: data4,
        barWidth: 6,
        itemStyle: {
          color: '#FEED01', // é«˜äº®çš„紫色
        },
        emphasis: {
          focus: "series",
        },
      },
    ],
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}

const dataList4 = ref({})
const getData4 = () => {
  getFightingcenterData().then(res => {
    dataList4.value = res.data || {}
    dataList1.value = res.data.deviceTypeList
  })
}
const dataList5 = ref({}) // ç»´ä¿
const getData5 = () => {
  getFightingDeviceY().then(res => {
    dataList5.value = res.data || {}
  })
}
const dataList6 = ref([])
const getData6 = () => {
  getFightingHandle({ type: 1 }).then(res => {
    dataList6.value = res.data
  })
}
const dataList7 = ref([])
const getData7 = () => {
  getFighalarmDataList().then(res => {
    dataList7.value = res.data || []
    dataList7.value = dataList7.value.map(item => {
      let times = new Date().getTime() - new Date(item.alarmTime).getTime()
      if (times > 86400000) {
        item.haveTime = dayjs.duration(times).format('D天H小时m分钟')
      } else if (times > 3600000) {
        item.haveTime = dayjs.duration(times).format('H小时m分钟')
      } else {
        item.haveTime = dayjs.duration(times).format('m分钟')
      }
      return item
    })
  })
}

const dataList8 = ref([])
const dataIndex8 = ref(0)

const dataList9 = ref([])
const dataListTemp9 = ref([])
const dataIndex9 = ref(0)
const dataTotal9 = ref(0)

const getData8 = () => {
  getTemperatureHumidityData().then(res => {
    dataList8.value = res.data || []
  })
  monitorDataListP().then(res => {
    dataList9.value = res.data || []
    dataList9.value.forEach(item => {
      if (item.dataList && item.dataList.length > 0) {
        item.obj = item.dataList[0]
      }
    })
    if (dataList9.value.length > 0) {
      dataTotal9.value = Math.ceil(dataList9.value.length / 2)
      dataListTemp9.value = dataList9.value.slice(0, 2)
    }
    initEcharts9()
  })
}
const changeData8 = (num) => {
  if (dataIndex8.value == dataList8.value.length - 1 && num > 0) {
    dataIndex8.value = 0
  } else if (dataIndex8.value == 0 && num < 0) {
    dataIndex8.value = dataList8.value.length - 1
  } else {
    dataIndex8.value = dataIndex8.value + num
  }
}
const changeData9 = (num) => {
  // return
  if (dataIndex9.value == dataTotal9.value - 1 && num > 0) {
    dataIndex9.value = 0
    dataListTemp9.value = dataList9.value.slice(0, 2)
  } else if (dataIndex9.value == 0 && num < 0) {
    dataIndex9.value = dataTotal9.value - 1
    dataListTemp9.value = dataList9.value.slice(dataList9.value.length - 2, dataList9.value.length)
  } else {
    dataIndex9.value = dataIndex9.value + num
    dataListTemp9.value = dataList9.value.slice(dataIndex9.value * 2, (dataIndex9.value + 1) * 2)
  }
  initEcharts9()
}
const initEcharts9 = () => {
  dataListTemp9.value.forEach((item, i) => {

    if (item.obj && item.obj.typeCode == 253958) {
      nextTick(() => {
        initWatergage('watergage' + i, item)
      })
    }
    if (item.obj && item.obj.typeCode == 254001) {
      nextTick(() => {
        initLiquidlevel('liquidlevel' + i, item)
      })
    }
  })
}


const autoplayFlag = (list = [], leng = 4, time = 2000) => {
  if (list.length > leng) {
    return { delay: time, disableOnInteraction: false }
  } else {
    return false
  }
}
const loopFn1 = () => {
  var newSwiper1 = new Swiper('.one-swiper', {
    initialSlide: 0,
    direction: 'vertical', //竖直方向
    slidesPerView: 5,
    autoplay: autoplayFlag(dataList1.value, 5, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}
const loopFn2 = () => {
  var newSwiper1 = new Swiper('.two-swiper', {
    initialSlide: 0,
    direction: 'vertical', //竖直方向
    slidesPerView: 4,
    autoplay: autoplayFlag(dataList7.value, 4, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}

onMounted(() => {
  // getData1()
  getData2()
  getData3()
  getData4()
  getData5()
  // getData6()
  getData7()
  getData8()
  setInterval(() => {
    getData2()
    getData3()
    getData4()
    // getData6()
    getData7()
  }, 60 * 1000)
  setInterval(() => {
    getData5()
    getData8()
  }, 60 * 60 * 1000)

  setInterval(() => {
    changeData8(1)
    // changeData9(1)
  }, 1000 * 5)

  setTimeout(() => {
    loopFn1()
    loopFn2()
  }, 12000)


})


</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}

.main_content {
  display: flex;
  padding: 20px 25px 0;

  .left_box {
    width: 450px;

    .left_box_one {
      width: 100%;
      margin-bottom: 20px;

      .list_wrap {
        padding: 10px 0;

        .list_content {
          height: 170px;
          overflow: hidden;

          .line_wrap {
            height: 34px !important;
          }
        }

        .list {
          .line {
            display: flex;
            height: 32px;
            align-items: center;
            font-size: 14px;

            .item {
              flex: 2;
              display: flex;
              justify-content: center;
              /* margin: 0 6px; */
              align-items: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

            }

            .name {
              flex: 5;
              justify-content: flex-start;
            }

            .warnning {
              color: #FEAF01;
            }
          }

          .header {
            background: rgba(134, 156, 201, 0.1);
            font-weight: 500;

            .item {
              border-right: 1px solid rgba(255, 255, 255, 0.2);

              &:nth-last-child(1) {
                border: none;
              }
            }
          }

          .separate {
            width: 100%;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.2);
            /* background-color: red; */
            border-right: 4px solid #00F2F3;
            border-left: 4px solid #00F2F3;
          }
        }
      }
    }

    .left_box_two {
      margin-bottom: 20px;

      .police_wrap {
        padding: 15px 20px 0;
        height: 225px;

        .item {
          margin-bottom: 5px;

          .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            color: #FFFFFF;
            margin-bottom: 8px;
          }
        }
      }
    }

    .left_box_three {
      .dispose_wrap {
        height: 210px;
        width: 100%;

        .echart2 {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .center_box {
    flex: 1;
    padding: 16px 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .center_box_one {
      .static_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 0 54px;

        .item {
          display: flex;

          img {
            width: 61px;
            height: 63px;
            margin-right: 15px;
          }

          .content {
            font-size: 15px;

            .num {
              font-size: 12px;
              color: #D2E0FF;

              font-weight: bold;
              font-size: 30px;
              margin-right: 5px;
              font-weight: 600;
              background-image: -webkit-linear-gradient(top,
                  #01D9FE 0%,
                  #01D9FE 60%,
                  #fff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .num2 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #dd4c26 50%,
                  #e43724 100%);
            }

            .num3 {
              background-image: -webkit-linear-gradient(top,
                  #eb8131 0%,
                  #d0a72c 50%,
                  #e9bf43 100%);
            }

            .num4 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #78db91 50%,
                  #6de8b0 100%);
            }

            .num5 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #3a83f5 50%,
                  #3a83f5 100%);
            }
          }
        }
      }
    }

    .center_box_two {
      width: 108%;
      display: flex;
      margin: 0 -4%;

      .content_wrap {
        flex: 1;
        flex-shrink: 0;
        margin-right: 20px;

        .title_wrap {
          display: flex;

          .title {
            flex: 1;
          }
        }

        &:nth-last-child(1) {
          margin-right: 0;
        }

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
          text-shadow: 0px 2px 8px #01ABFE;
          margin-bottom: 20px;

          .left {
            display: flex;
            align-items: center;

            .icon {
              width: 14px;
              height: 28px;
              margin-right: 10px;
            }
          }

          .right {
            display: flex;
            align-items: center;

            .num {
              margin: 0 40px;
            }

            .icon {
              width: 30px;
              cursor: pointer;
              /* height: 16px; */
            }
          }
        }

        .list_wrap {
          height: 206px;
          background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png');
          background-size: cover;

          .title {
            height: 46px;
            display: flex;
            align-items: center;
            color: #D2E0FF;
            padding-left: 20px;

            .icon {
              width: 16px;
              margin-right: 8px;
            }
          }

          .list {
            height: 160px;
            display: flex;
            justify-content: space-evenly;

            .item {
              display: flex;
              align-items: center;
              position: relative;

              .place {
                position: absolute;
                top: 120px;
                right: 70px;
                z-index: 999;
                font-size: 13px;
                color: #869CC9;
                width: 120px;
                text-align: center;
              }

              .icon {
                width: 70px;
                height: 70px;
                margin-right: 10px;
              }

              .content {
                .num {
                  font-size: 28px;
                  font-weight: 500;

                  span {
                    font-size: 14px;
                    font-weight: 400;
                  }
                }

                .la {
                  font-size: 13px;
                  color: #869CC9;
                }
              }
            }
          }
        }

        .list_wrap2 {
          display: flex;
          align-items: center;
          height: 206px;
          background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png');
          background-size: cover;

          .item {
            width: 50%;
            height: 100%;

            .title {
              height: 46px;
              display: flex;
              align-items: center;
              color: #D2E0FF;
              padding-left: 20px;

              .icon {
                width: 16px;
                margin-right: 8px;
              }
            }

            .watergage_wrap {
              text-align: center;
              position: relative;
              left: 30px;

              .watergage {
                width: 130px;
                height: 112px;
              }

              .unit {
                font-weight: 500;
                font-size: 18px;
                position: relative;
                bottom: 16px;
                left: 4px;
                width: 130px;
                margin-bottom: 6px;
                margin-top: 2px;

                span {
                  font-size: 12px;
                  font-weight: 400;
                }
              }

              .place {
                position: relative;
                bottom: 16px;
                left: 4px;
                width: 130px;
                font-size: 13px;
                color: #869CC9;
              }
            }

            .liquidlevel_wrap {
              position: relative;

              /* border: 6px solid red; */
              .liquidle_te {
                font-weight: 500;
                font-size: 18px;
                position: absolute;
                top: 99px;
                left: 0;
                width: 206px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .placeT {
                  font-size: 12px;
                  color: #869CC9;
                  margin-top: 6px;
                }
              }

              /* .placeT {
                position: relative;
                bottom: 10px;
                left: 4px;
                font-size: 74px;
                color: #869CC9;
                opacity: 0;
              } */

              .liquidlevel {
                width: 220px;
                height: 400px;
                transform: scale(0.27);
                color: #fff;
                text-align: center;
                position: relative;
                left: -8px;
                top: -143px;
              }
            }
          }
        }
      }

    }
  }

  .right_box {
    width: 450px;

    .right_box_one {
      .content_wrap {
        height: 176px;

        .list {
          display: flex;
          align-items: center;

          .item {
            height: 116px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .num {
              margin-top: 12px;
              font-weight: bold;
              font-size: 32px;

            }

            .acc {
              background-image: -webkit-linear-gradient(top,
                  #ffffff 0%,
                  #c8ddff 66%,
                  #95eefc 72%,
                  #95eefc 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .active {
              color: #00F2F3;
            }
          }

          .separate {
            width: 1px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.21);
          }
        }

        .footer {
          display: flex;

          .icon {
            width: 40px;
            height: 41px;
            margin-right: 2px;
          }

          .content {
            flex: 1;
            font-size: 16px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            background: linear-gradient(270deg, rgba(1, 217, 254, 0) 0%, rgba(1, 217, 254, 0.19) 100%);
            border: 1px solid;
            border-image: linear-gradient(270deg, rgba(1, 217, 254, 0), rgba(1, 217, 254, 0.6)) 1 1;

            .num {
              font-size: 20px;
              font-weight: bold;

              span {
                font-size: 13px;
                color: #869CC9;
              }
            }
          }
        }
      }
    }

    .right_box_two {
      .su_title {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 16px;
        margin: 20px;

        .icon {
          width: 17px;
          height: 17px;
          margin-right: 7px;
        }
      }

      .static_wrap {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 110px;

        .item {
          display: flex;
          align-items: center;

          img {
            width: 80px;
            height: 80px;
            margin-right: 8px;
          }

          .content {
            font-size: 14px;

            .num {
              font-size: 12px;
              color: #D2E0FF;
              margin-top: 8px;

              span {
                font-weight: bold;
                font-size: 24px;
                margin-right: 4px;
                font-weight: 600;
                background-image: -webkit-linear-gradient(top,
                    #01D9FE 0%,
                    #01D9FE 60%,
                    #fff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }

              .today {
                background-image: -webkit-linear-gradient(top,
                    #fff 0%,
                    #FFB120 50%,
                    #FFB120 100%);
              }
            }
          }
        }
      }

      .list {
        height: 320px;
        overflow: hidden;
        margin-top: 15px;
        scrollbar-width: none;

        .item {
          display: flex;
          font-size: 13px;
          color: #D2E0FF;
          height: 80px !important;

          .icon {
            width: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;

            .circle {
              width: 7px;
              height: 7px;
              border-radius: 50%;
              background: #01D9FE;
              box-shadow: 0px 0px 1px 4px #34788f;
              /* opacity: 0.52; */
            }

            .line {
              margin-top: 3px;
              width: 1px;
              flex: 1;
              background-color: #153947;
            }
          }

          .content {
            flex: 1;

            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .time {
                display: flex;
                align-items: center;

                .status {
                  height: 18px;
                  line-height: 18px;
                  border-radius: 2px;
                  padding: 2px 4px;
                  border: 1px solid #869CC9;
                  font-size: 12px;
                  margin-left: 8px;
                }
              }

              .have_time {
                font-size: 12px;
                color: #D2E0FF;

                span {
                  color: #FEAF01;
                }
              }
            }

            .wrap {
              height: 34px;
              background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%);
              border-radius: 2px 0px 0px 2px;
              display: flex;
              align-items: center;
              border: 1px solid;
              margin-bottom: 20px;
              margin-top: 8px;
              padding: 0 10px;
              border-image: linear-gradient(270deg, rgba(254, 85, 1, 0), rgba(254, 85, 1, 0.6)) 1 1;

              .title {
                flex: 4;
                font-weight: bold;
                font-size: 15px;
                color: #FFFFFF;
                display: flex;
                align-items: center;

                span {
                  margin-left: 4px;
                }

                .xf {
                  width: 14px;
                  height: 14px;
                }

                .addr {
                  width: 12px;
                  height: 12px;
                }
              }

              .address {
                flex: 6;
              }
            }
          }
        }
      }
    }
  }
}

.main_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  position: relative;
  padding: 0px 40px 16px;
  font-weight: 600;
  font-size: 36px;

  .title {
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 70%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .time_wrap {
    font-size: 26px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 50%,
        #85b4ff 80%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;

    .time {
      width: 130px;
      display: flex;
      justify-content: flex-end;
      font-size: 30px;
    }

    .week {
      margin-left: 20px;
    }
  }

  .main_header_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.com_header {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 0 13px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 66%,
        #85b4ff 72%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    .icon {
      width: 16px;
      height: 16px;
      margin-right: 14px;
    }
  }

  .tabs {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #d2e0ff;

    .separate {
      width: 1px;
      height: 14px;
      background-color: #d2e0ff;
      margin: 0 6px;
    }

    .active {
      color: #0094eb;
    }
  }
}

.main_app {
  width: 1920px;
  height: 960px;
  /* width: 100%;
  height: 100vh; */
  background: #0b2539;
  color: #FFFFFF;
  position: relative;
  z-index: -2;
  font-size: 14px;

  .main_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
</style>

 screen/src/views/LogisticsEfficiency.vue

@@ -946,6 +946,7 @@
      i.rate = count == 0 ? 0 : ((i.num / count) * 100).toFixed(0)
    })
    data5.value = count
    console.log(data5.value)
    initEchart1()
  })
}

 screen/src/views/SecurityControl.vue

@@ -2,6 +2,7 @@
  <v-scale-screen width="1920" height="960">
    <div class="main_app">
      <img src="@/assets/images/SecurityControl/bg@2x.png" class="main_bg" alt="" />
      <img src="@/assets/images/ic_compass@2x.png" class="main_znz" alt="" />
      <div class="main_header">
        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
        <div class="title">安泰智慧物流园区-智能安防监测</div>
@@ -17,91 +18,136 @@
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>实时园区车辆</div>
                <div>实时在园人员</div>
              </div>
              <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
            </div>
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
                <div>实时园区车辆</div>
                <div>实时在园人员分布</div>
              </div>
              <div class="num_wrap">
                <div class="la">总车位：</div>
                <div class="val">{{ data.parkingLotTotal }}</div>
                <div class="la">单位：人</div>
              </div>
            </div>
            <div class="stall_static">
              <div class="residue">
                <div class="la">剩余车位</div>
                <div class="val">{{ data.freeParkingLot }}</div>
            <div class="ren_chat">
              <div class="ren_chat_val"></div>
              </div>
              <div class="total">
                <div class="la">车位总数</div>
                <div class="val">{{ data.parkingLotTotal }}</div>
              </div>
              <div class="rate">
                <div class="la">
                  <span>车位使用率</span>
                  <span class="num">{{ data.parkingUseRate }}%</span>
                </div>
                <div class="val">
                  <Percent :rate="data.parkingUseRate" />
                </div>
              </div>
            </div>
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
                <div>当前在园私家车分布</div>
              </div>
            </div>
            <div class="private_car">
              <div class="item">
                <img class="icon" src="@/assets/images/SecurityControl/car_yuangong@2x.png" alt="">
                <div class="num">{{ data.internalCarTotal }}</div>
                <div class="name">员工车辆</div>
              </div>
              <div class="item">
                <img class="icon" src="@/assets/images/SecurityControl/car_xiangguanfang@2x.png" alt="">
                <div class="num num2">{{ data.relatedCarTotal }}</div>
                <div class="name">相关方车辆</div>

              </div>
              <div class="item">
                <img class="icon" src="@/assets/images/SecurityControl/car_laifang@2x.png" alt="">
                <div class="num num3">{{ data.visitCarTotal }}</div>
                <div class="name">来访车辆</div>
            <div class="second_title" style="margin-bottom: 0; margin-top: 15px;">
              <div class="title">
                <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
                <div>访客滞留情况</div>
              </div>
            </div>
            <!-- <div class="section">
              <div class="item" :style="{ flex: data.internalCarTotal }"></div>
              <div class="item" :style="{ flex: data.relatedCarTotal }"></div>
              <div class="item" :style="{ flex: data.visitCarTotal }"></div>
            </div> -->
            <div class="table">
              <div class="line header">
                <div>姓名</div>
                <div class="dept">拜访部门</div>
                <div class="time">超时时长</div>
              </div>
              <div style="width: 100%; height: 96px; overflow: hidden;">
                <div v-if="dataList3.length > 0" class="three-swiper list">
                  <div class="swiper-wrapper">
                    <div class="item three-swiper-slide swiper-slide" v-for="(item, index) in dataList3" :key="index">
                      <div class="line">
                        <div>{{ item.name }}</div>
                        <div class="dept">{{ item.companyName }}</div>
                        <div class="time">{{ item.timeOutMinuteT }}</div>
                      </div>
                      <div class="separate"></div>
                    </div>
                  </div>
                </div>
                <div v-if="dataList3.length == 0" class="empty_wrap">
                  <img style="width: 90px; height: 90px;" src="@/assets/images/default_empty.png" alt="">
                </div>
              </div>
            </div>
          </div>

          <div class="safe_warning">
<!--            <Loading v-if="loading1" />-->
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>实时园区车辆</div>
              </div>
              <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
            </div>
            <div class="safe_warning_content">
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
                <div>当前在园货车分布</div>
                  <div>当前在园车辆分布</div>
                </div>
                <div class="num_wrap">
                  <div class="la">单位：辆</div>
              </div>
            </div>
            <div class="car_static">
              <div class="echart_wrap">
                <div class="pie_text">
                  <div class="fs30"><strong v-if="data.visitJobCarTotal || data.visitJobCarTotal == 0">{{
                    data.internalJobCarTotal +
                    data.relatedJobCarTotal + data.visitJobCarTotal }}</strong></div>
                  <div>货车</div>

              <div class="safe_chat">
                <div class="safe_chat_val_n">
                  <span>{{totalCar}}</span>
                  <span>总数</span>
                </div>
                <div class="echart" id="echart1"></div>
                <div id="safe_chat_val"></div>
                <div class="safe_chat_info">
                  <div class="safe_chat_info_row" v-for="(item, index) in CarList" :key="index">
                    <div class="safe_left">
                      <div class="safe_left_dian" :style="{ backgroundColor: item.color }"></div>
                      <div class="safe_left_name">{{item.name}}</div>
              </div>
              <div class="list">
                <div class="item" v-for="item, i in dataList1">
                  <div class="line">
                    <div :style="{ background: colors[i] }" class="icon"></div>
                    <div class="text">{{ item.name }}</div>
                    <div class="safe_num" :style="{ color: item.color }">{{item.total}}</div>
                  </div>
                  <div :style="{ color: colors[i] }" class="num">{{ item.value }}</div>
<!--                  <div class="safe_chat_info_row">-->
<!--                    <div class="safe_left">-->
<!--                      <div class="safe_left_dian" style="background-color: #28F0C4;"></div>-->
<!--                      <div class="safe_left_name">私家车辆</div>-->
<!--                    </div>-->
<!--                    <div class="safe_num" style="color: #28F0C4;">36</div>-->
<!--                  </div>-->
<!--                  <div class="safe_chat_info_row">-->
<!--                    <div class="safe_left">-->
<!--                      <div class="safe_left_dian" style="background-color: #FEAF01;"></div>-->
<!--                      <div class="safe_left_name">公务车辆</div>-->
<!--                    </div>-->
<!--                    <div class="safe_num" style="color: #FEAF01;">36</div>-->
<!--                  </div>-->
<!--                  <div class="safe_chat_info_row">-->
<!--                    <div class="safe_left">-->
<!--                      <div class="safe_left_dian" style="background-color: #EEF028;"></div>-->
<!--                      <div class="safe_left_name">访客车辆</div>-->
<!--                    </div>-->
<!--                    <div class="safe_num" style="color: #EEF028;">36</div>-->
<!--                  </div>-->
                </div>
              </div>
              <div class="safe_zhu">
                <div class="safe_zhu_item">
                  <div class="safe_zhu_item_label">外协货运车辆</div>
                  <div class="safe_zhu_item_c">
                    <div class="safe_zhu_item_c_t">
                      <span>总车位：{{data.outHyLotTotal || 0}}</span>
                      <span>剩余车位：{{data.relatedJobCarTotal || 0}}</span>
                    </div>
                    <div class="safe_zhu_item_c_b">
                      <div class="safe_zhu_item_c_b_z" :style="{width: (data.relatedJobCarTotal / data.outHyLotTotal * 100) +'%'}"></div>
                    </div>
                  </div>
                </div>
                <div class="safe_zhu_item">
                  <div class="safe_zhu_item_label">停车场</div>
                  <div class="safe_zhu_item_c">
                    <div class="safe_zhu_item_c_t">
                      <span>总车位：{{data.parkingLotTotal || 0}}</span>
                      <span>剩余车位：{{data.freeParkingLot || 0}}</span>
                    </div>
                    <div class="safe_zhu_item_c_b">
                      <div class="safe_zhu_item_c_b_z" :style="{width: (data.freeParkingLot / data.parkingLotTotal * 100) +'%'}"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
@@ -123,7 +169,7 @@
                    placeholder="搜索监控名称">
                </div>
                <div class="menu_wrap">
                  <div class="menu" v-for="menu, i in data5">
                  <div class="menu" v-for="(menu, i) in data5" :key="i">
                    <div class="menu_name" @click="menuClick(i)">
                      <div class="name">{{ menu.name }}</div>
                      <img v-if="activeJkIndex == i" class="open" src="@/assets/images/SecurityControl/ar_close@2x.png"
@@ -150,17 +196,17 @@
            <div class="list">
              <div class="item">
                <div class="name_wrap">
                  <div class="name">当前在园人数</div>
                  <div class="name">实时在园人数</div>
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
                  <div class="num">{{ data.inParkTotal }}</div>
                  <div class="num">{{ data.inParkTotal || 0 }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
              <div class="item">
                <div class="name_wrap">
                  <div class="name">当前在园车辆数</div>
                  <div class="name">实时在园车数</div>
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
@@ -170,7 +216,7 @@
              </div>
              <div class="item">
                <div class="name_wrap">
                  <div class="name">当前设备总数</div>
                  <div class="name">设备在线完好数</div>
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
@@ -180,12 +226,110 @@
              </div>
              <div class="item">
                <div class="name_wrap">
                  <div class="name">当前告警总数</div>
                  <div class="name">当前报警总数</div>
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
                  <div class="num">{{ warningNum }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
            </div>
          </div>

          <div class="monitoring" @click="changeMon">
            <img src="@/assets/images/SecurityControl/ic_jiankong@2x.png" class="icon" alt="">
            <div>监控列表</div>
            <img v-if="showJk" src="@/assets/images/SecurityControl/jiankong_ic_close@2x.png" class="top" alt="">
            <img v-else src="@/assets/images/SecurityControl/jiankong_ic_open@2x.png" class="top" alt="">
          </div>

          <div class="center_box_two">
            <div class="center_box_two_left">
              <div class="com_header">
                <div class="title">
                  <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                  <div>园区安防设备</div>
                </div>
                <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
              </div>
              <div class="device">
                <div class="device_chat">
                  <div class="device_chat_qiam" v-if="dataListT2.length > 0">
                    <span>{{dataListT2[0].value + dataListT2[1].value}}</span>
                    <span>总计</span>
                  </div>
                  <div id="device_chat_val"></div>
                  <div class="device_chat_info" v-if="dataListT2.length > 0">
                    <div class="device_chat_info_row">
                      <div style="background-color: #01D9FE;" class="device_chat_info_row_dian"></div>
                      <div class="device_chat_info_row_nr">
                        <span>在线</span>
                        <span style="color: #01D9FE;">{{dataListT2[0].value}}</span>
                      </div>
                    </div>
                    <div class="device_chat_info_row">
                      <div style="background-color: #FEAF01;" class="device_chat_info_row_dian"></div>
                      <div class="device_chat_info_row_nr">
                        <span>离线</span>
                        <span style="color: #FEAF01;">{{dataListT2[1].value}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="device_table">
                  <div class="table">
                    <div class="line header">
                      <div class="line-row">设备类型</div>
                      <div class="line-row">总数</div>
                      <div class="line-row">在线完好数</div>
                      <div class="line-row">离线数</div>
                    </div>
                    <div style="width: 100%; height: 96px; overflow: hidden;">
                      <div v-if="dataList2.length > 0" class="four-swiper">
                        <div class="swiper-wrapper">
                          <div class="four-swiper-slide swiper-slide" v-for="(item, index) in dataList2" :key="index">
                            <div class="line">
                              <div class="line-row">{{ item.deviceType }}</div>
                              <div class="line-row">{{ item.totalNum }}</div>
                              <div class="line-row">{{ item.onlineNum }}</div>
                              <div class="line-row">{{ item.offlineDeviceNum }}</div>
                            </div>
                            <div class="separate"></div>
                          </div>
                        </div>
                      </div>
                      <div v-if="dataList2.length == 0" class="empty_wrap">
                        <img style="width: 90px; height: 90px;" src="@/assets/images/default_empty.png" alt="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 20px; height: 100%"></div>
            <div class="center_box_two_right">
              <div class="com_header">
                <div class="title">
                  <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                  <div>隐患随手拍</div>
                </div>
                <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
              </div>
              <div class="device">
                <div class="device_item">
                  <img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt="" />
                  <div class="device_item_info">
                    <span>提报隐患数</span>
                    <span><b style="color: #01C4FE;">{{ dataList5.dangerTotalNum || 0 }}</b>个</span>
                  </div>
                </div>
                <div class="device_item">
                  <img src="@/assets/images/FireFighting/ic_chuli@2x.png" alt="" />
                  <div class="device_item_info">
                    <span>未整改闭环数</span>
                    <span><b style="color: #FFB120;">{{ dataList5.dangerDealedNum || 0 }}</b>个</span>
                  </div>
                </div>
              </div>
            </div>
@@ -196,141 +340,14 @@
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>在园人员分析</div>
              </div>
              <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
            </div>
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
                <div>当前在园人员分布</div>
              </div>
            </div>
            <div class="static_wrap">
              <div class="item">
                <img src="@/assets/images/SecurityControl/staff_ic_neibu@2x.png" alt="">
                <div class="content">
                  <div class="name">内部员工</div>
                  <div class="num"><span>{{ data.internalTotal || 0 }}</span> |
                    {{ data.inParkTotal ? ((data.internalTotal / data.inParkTotal) * 100).toFixed(1) : 0 }}%</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png" alt="">
                <div class="content">
                  <div class="name">长期相关方</div>
                  <div class="num today"><span>{{ data.relatedTotal || 0
                  }}</span> | {{ data.inParkTotal ? ((data.relatedTotal / data.inParkTotal) * 100).toFixed(1) : 0
                      }}%</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/SecurityControl/staff_ic_fangke@2x.png" alt="">
                <div class="content">
                  <div class="name">在园访客</div>
                  <div class="num finish"><span>{{ data.visitTotal || 0 }}</span>
                    | {{ data.inParkTotal ? ((data.visitTotal / data.inParkTotal) * 100).toFixed(1) : 0 }}%</div>
                </div>
              </div>
            </div>
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
                <div>今日访客分析</div>
              </div>
            </div>
            <div class="visitor_list">
              <div class="item">
                <div class="name">待访问</div>
                <div class="num_wrap">
                  <span class="num">{{ data4.waitVisitNum }}</span>
                  <span>人</span>
                </div>
              </div>
              <div class="spacing"></div>
              <div class="item">
                <div class="name">已访问</div>
                <div class="num_wrap">
                  <span class="num">{{ data4.registerVisitNum }}</span>
                  <span>人</span>
                </div>
              </div>
              <div class="spacing"></div>
              <div class="item">
                <div class="name">已离开</div>
                <div class="num_wrap">
                  <span class="num">{{ data4.levelNum }}</span>
                  <span>人</span>
                </div>
              </div>
              <div class="spacing"></div>
              <div class="item">
                <div class="name">滞留</div>
                <div class="num_wrap">
                  <span class="num">{{ data4.retentionNum }}</span>
                  <span>人</span>
                </div>
              </div>
            </div>
            <div class="echart3" id="echart3"></div>
          </div>
          <div class="right_box_two">

          </div>
          <div class="right_box_three">

          </div>
        </div>
      </div>
      <div class="main_footer">
        <!-- <div class="car_warning">
          <div class="com_header">
            <div class="title">
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>当前车辆滞留预警</div>
            </div>
            <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
          </div>
          <div class="table">
            <div class="line header">
              <div>车牌</div>
              <div class="dept">拜访部门</div>
              <div class="time">超时时长</div>
            </div>
            <div class="line">
              <div>皖A33234</div>
              <div class="dept">综合管理科</div>
              <div class="time">10:21</div>
            </div>
            <div class="separate"></div>
            <div class="line">
              <div>皖A33234</div>
              <div class="dept">综合管理科</div>
              <div class="time">10:21</div>
            </div>
            <div class="separate"></div>
          </div>
        </div> -->
        <div class="safe_warning">
          <Loading v-if="loading1" />
          <div class="com_header">
            <div class="title">
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>安防告警</div>
            </div>
            <div class="tabs">
              <div class="tab" :class="{ active: warningTab == '0' }" @click="tasClick('0')">全部</div>
              <div class="separate"></div>
              <div class="tab" :class="{ active: warningTab == '1' }" @click="tasClick('1')">区域告警</div>
              <div class="separate"></div>
              <div class="tab" :class="{ active: warningTab == '2' }" @click="tasClick('2')">行为告警</div>
                <div>重点区域动态管控</div>
            </div>
            <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
          </div>
          <div class="one_swiper_wrap">
            <div class="list one-swiper">
              <div class="list one-swiper" style="margin: 0 !important;">
              <div class="swiper-wrapper">
                <div class="one-swiper-slide swiper-slide item" v-for="item in warningList">
                  <div class="one-swiper-slide swiper-slide item" v-for="item in arr1">
                  <div class="item_wrap">
                    <img :src="item.img" class="avatar" alt="">
                    <div class="content">
@@ -350,125 +367,51 @@
                      </div>
                    </div>
                  </div>
                  <div v-if="item.title0 && item.createDate0" class="item_wrap">
                    <img :src="item.img0" class="avatar" alt="">
                  </div>
                  <div v-if="arr1.length == 0" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                    <img src="@/assets/images/default_empty.png" style="width: 120px; height: 120px;" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right_box_two">
            <div class="com_header">
              <div class="title">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>危险行为动态管控</div>
              </div>
              <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
            </div>
            <div class="one_swiper_wrap">
              <div class="list one-swiper" style="margin: 0 !important;">
                <div class="swiper-wrapper">
                  <div class="one-swiper-slide swiper-slide item" v-for="item in arr2">
                    <div class="item_wrap">
                      <img :src="item.img" class="avatar" alt="">
                    <div class="content">
                      <div class="header">
                        <div class="name">{{ item.title0 }}</div>
                        <div class="have_time">已经发生{{ item.haveTime0 }}</div>
                          <div class="name">{{ item.title }}</div>
                          <div class="have_time">已经发生{{ item.haveTime }}</div>
                      </div>
                      <div class="wrap">
                        <div class="line addr">
                          <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt="">
                          <span>{{ item.addr0 }}</span>
                            <span>{{ item.addr }}</span>
                        </div>
                        <div class="line time">
                          <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt="">
                          <span>{{ item.createDate0 }}</span>
                            <span>{{ item.createDate }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="warningList.length == 0" class="empty_wrap">
                  <img src="@/assets/images/default_empty.png" alt="">
                  <div v-if="arr2.length == 0" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                    <img src="@/assets/images/default_empty.png" style="width: 120px; height: 120px;" alt="">
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="garden_warning">
          <div class="com_header">
            <div class="title">
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>园区安防设备</div>
            </div>
            <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
          </div>
          <div class="monitoring" @click="changeMon">
            <img src="@/assets/images/SecurityControl/ic_jiankong@2x.png" class="icon" alt="">
            <div>监控列表</div>
            <img v-if="showJk" src="@/assets/images/SecurityControl/jiankong_ic_close@2x.png" class="top" alt="">
            <img v-else src="@/assets/images/SecurityControl/jiankong_ic_open@2x.png" class="top" alt="">
          </div>
          <div class="content">
            <div class="sa_static">
              <div class="echart_wrap">
                <div class="pie_text">
                  <div class="fs30"><strong v-if="dataListT2 && dataListT2.length == 2">{{ dataListT2[0].value +
                    dataListT2[1].value }}</strong></div>
                  <div>总计</div>
                </div>
                <div class="echart" id="echart2"></div>
              </div>
              <div class="list">
                <div class="item" v-for="item, i in dataListT2">
                  <div class="line">
                    <div :style="{ background: colors[i] }" class="icon"></div>
                    <div class="text">{{ item.name }}</div>
                  </div>
                  <div :style="{ color: colors[i] }" class="num">{{ item.value }} | {{ item.rate }}%</div>
                </div>

              </div>
            </div>
            <div class="table">
              <div class="line header">
                <div class="driver">设备类型</div>
                <div>总数</div>
                <div>在线数</div>
                <div>离线数</div>
                <div>在线率</div>
              </div>
              <div class="list two-swiper">
                <div class="swiper-wrapper">
                  <template v-for="item, i in dataList2.filter(i => i.totalNum > 0)">
                    <div class="item two-swiper-slide swiper-slide">
                      <div class="line">
                        <div class="driver">{{ item.deviceType }}</div>
                        <div>{{ item.totalNum }}</div>
                        <div>{{ item.onlineNum }}</div>
                        <div>{{ item.offlineDeviceNum }}</div>
                        <div>{{ item.totalNum ? ((item.onlineNum / item.totalNum) * 100).toFixed(0) : 0 }}%
                        </div>
                      </div>
                      <div class="separate"></div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="visitor_warning">
          <div class="com_header">
            <div class="title">
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>今日访客滞留情况</div>
            </div>
            <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
          </div>
          <div class="table">
            <div class="line header">
              <div>姓名</div>
              <div class="dept">拜访部门</div>
              <div class="time">超时时长</div>
            </div>
            <div v-if="dataList3.length > 0" class="three-swiper list">
              <div class="swiper-wrapper">
                <div class="item swiper-slide three-swiper-slide" v-for="item in dataList3">
                  <div class="line">
                    <div>{{ item.name }}</div>
                    <div class="dept">{{ item.companyName }}</div>
                    <div class="time">{{ item.timeOutMinuteT }}</div>
                  </div>
                  <div class="separate"></div>
                </div>
              </div>
            </div>
            <div v-if="dataList3.length == 0" class="empty_wrap">
              <img src="@/assets/images/default_empty.png" alt="">
            </div>
          </div>
        </div>
@@ -497,7 +440,9 @@
  getVisitRetentionData,
  afgetVisitData,
  afregionTreea,
  visitSecurityData
  visitSecurityData,
  getFightingcenterData,
  inParkUser
} from '@/api'


@@ -511,6 +456,72 @@
  time.value = dayjs().format('HH:mm:ss')

}, 1000)

const initChat = () => {
  inParkUser({})
    .then(res => {
      let myChart = echarts.init(document.querySelector('.ren_chat_val'))
      myChart.setOption({
        grid: {
          top: '5%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#D2E0FF',
            interval: 0
          },
          data: ['内部员工', '长期相关方', '在园访客', '货运司机']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#D2E0FF'
          },
          splitLine: {
            show: true,
            lineStyle: {
              //这里输入线条的样式
              color: 'rgba(255,255,255,0.14)',
            }
          }
        },
        series: [
          {
            data: [
              res.data.todayInParkUserNum - (res.data.inParkLwUserNum + res.data.inParkVisitUserNum + res.data.inParkDriverUserNum),
              res.data.inParkLwUserNum,
              res.data.inParkVisitUserNum,
              res.data.inParkDriverUserNum
            ],
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  1, 1, 0, 0,
                  [
                    { offset: 0, color: 'rgba(0, 242, 243, 0.10)' },
                    { offset: 1, color: 'rgba(0, 242, 243, 1)' }
                  ]
                )
              }
            }
          }
        ]
      })
      window.addEventListener('resize', function () {//执行
        myChart.resize()
      })
    })
}

const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
@@ -614,7 +625,7 @@

const colors = ['#01ABFE', '#FEAF01', '#51F9E4']
const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart2'))
  const myChart = echarts.init(document.getElementById('device_chat_val'))
  const option = {
    series: [
      {
@@ -798,12 +809,32 @@
}

const data = ref({})
let totalCar = ref(0)
let CarList = ref([])

const getData1 = () => {
  CarList.value = []
  getEnergyCenterData().then(res => {
    if (res.code == 200) {
      const result = res.data
      data.value = result
      initEchart1()
      res.data.inParkCarList.forEach(item => {
        totalCar.value += item.total
        if (item.name === '公务车') {
          CarList.value.push({ name: '公务车辆', value: item.total, color: '#FEAF01' })
        } else if (item.name === '私家车') {
          CarList.value.push({ name: '私家车辆', value: item.total, color: '#28F0C4' })
        } else if (item.name === '访客车辆') {
          CarList.value.push({ name: '访客车辆', value: item.total, color: '#EEF028' })
        } else if (item.name === '货运车辆') {
          CarList.value.push({ name: '货运车辆', value: item.total, color: '#01ABFE' })
        } else if (item.name === '未知车辆') {
          CarList.value.push({ name: '未知车辆', value: item.total, color: '#0028ff' })
        }
      })
      nextTick(() => {
        initSafe()
      })
    }
  })
}
@@ -820,17 +851,15 @@
      let outline = 0
      let total = 0
      dataList2.value = result.map(item => {
        total += item.totalNum
        // total += item.totalNum
        online += item.onlineNum
        outline += item.offlineDeviceNum
        if (item.deviceType && item.deviceType.length > 6) {
          item.deviceType = item.deviceType.slice(0, 6) + '...'
        if (item.deviceType && item.deviceType.length > 4) {
          item.deviceType = item.deviceType.slice(0, 4) + '...'
        }
        return item
      })
      console.log('dataList2', dataList2.value)

      data2.value = total
      data2.value = online
      if (online >= outline) {
        temp.push({ name: '在线', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
        temp.push({ name: '离线', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
@@ -840,8 +869,12 @@
      }

      dataListT2.value = temp
      // console.log(dataListT2.value)
      console.log(dataList2.value)
    }
    nextTick(() => {
    initEchart2()
    })
  })
}

@@ -869,7 +902,8 @@

      return i
    })
    initEchart3()
    dataList3.value = [...dataList3.value, ...dataList3.value, ...dataList3.value, ...dataList3.value]
    // initEchart3()
  })
}

@@ -877,34 +911,56 @@
const warningTab = ref('0')
const warningNum = ref(0)
const warningList = ref([])

const arr1 = ref([])  // é‡ç‚¹åŒºåŸŸåŠ¨æ€ç®¡æŽ§
const arr2 = ref([])  // å±é™©è¡Œä¸ºåŠ¨æ€ç®¡æŽ§

const getWarning = () => {
  loading1.value = true
  afwarningEventData({ type: warningTab.value }).then(res => {
    loading1.value = false
  afwarningEventData({ type: 1 })
   .then(res => {
    if (!res.data) return
    const result = res.data.list || []
    warningNum.value = res.data.total
    warningList.value = result.map(item => {
     arr1.value = result.map(item => {
      item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH小时mm分钟')
      return item
    })
    let temp = []
    warningList.value.forEach((item, i) => {
      // console.log(i);
      if (i == 0 || i % 2 == 0) {
        temp.push(item)
      } else {
        temp[temp.length - 1].addr0 = item.addr
        temp[temp.length - 1].createDate0 = item.createDate
        temp[temp.length - 1].haveTime0 = item.haveTime
        temp[temp.length - 1].img0 = item.img
        temp[temp.length - 1].title0 = item.title
      }
    })
    warningList.value = temp
  afwarningEventData({ type: 2 })
    .then(res => {
      if (!res.data) return
      const result = res.data.list || []
      arr2.value = result.map(item => {
        item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH小时mm分钟')
        return item
      })
    })
  // loading1.value = true
  afwarningEventData({ type: 0 }).then(res => {
    // loading1.value = false
    if (!res.data) return
    const result = res.data.list || []
    warningNum.value = res.data.total
    // warningList.value = result.map(item => {
    //   item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH小时mm分钟')
    //   return item
    // })
    // let temp = []
    // warningList.value.forEach((item, i) => {
    //   // console.log(i);
    //   if (i == 0 || i % 2 == 0) {
    //     temp.push(item)
    //   } else {
    //     temp[temp.length - 1].addr0 = item.addr
    //     temp[temp.length - 1].createDate0 = item.createDate
    //     temp[temp.length - 1].haveTime0 = item.haveTime
    //     temp[temp.length - 1].img0 = item.img
    //     temp[temp.length - 1].title0 = item.title
    //   }
    // })
    // warningList.value = temp
    // console.log('temp', warningList.value);
  }, () => {
    loading1.value = false
    // loading1.value = false
  })
}
const tasClick = (val) => {
@@ -958,34 +1014,117 @@
    initialSlide: 0,
    // loop: true, // å¾ªçŽ¯æ¨¡å¼é€‰é¡¹
    direction: 'vertical', //竖直方向
    slidesPerView: 2,
    autoplay: warningList.value.length > 1 ? { delay: 4000, disableOnInteraction: false } : false,
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}
const loopFn2 = () => {
  var newSwiper1 = new Swiper('.two-swiper', {
    initialSlide: 0,
    direction: 'vertical', //竖直方向
    slidesPerView: 3,
    autoplay: autoplayFlag(dataList2.value.filter(i => i.totalNum > 0), 3, 4000),
    autoplay: arr1.value.length > 3 ? { delay: 4000, disableOnInteraction: false } : false,
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}
// const loopFn2 = () => {
//   var newSwiper2 = new Swiper('.two-swiper', {
//     initialSlide: 0,
//     direction: 'vertical', //竖直方向
//     slidesPerView: 3,
//     autoplay: autoplayFlag(arr2.value.filter(i => i.totalNum > 0), 3, 4000),
//     observer: true, //修改swiper自己或子元素时，自动初始化swiper
//   })
// }
const loopFn3 = () => {
  var newSwiper1 = new Swiper('.three-swiper', {
  var newSwiper3 = new Swiper('.three-swiper', {
    initialSlide: 0,
    // loop: true, // å¾ªçŽ¯æ¨¡å¼é€‰é¡¹
    direction: 'vertical', //竖直方向
    slidesPerView: 3,
    // autoplay: { delay: 500, disableOnInteraction: false },
    height: 100,
    autoplay: autoplayFlag(dataList3.value, 3, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}

const loopFn4 = () => {
  var newSwiper4 = new Swiper('.four-swiper', {
    initialSlide: 0,
    height: 100,
    direction: 'vertical',
    slidesPerView: 3,
    autoplay: autoplayFlag(dataList2.value, 3, 4000),
    observer: true
  })
}

const initSafe = () => {
  const myChart = echarts.init(document.getElementById('safe_chat_val'))

  const option = {
    xAxis: CarList.value.map(item => item.name),
    series: [
      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: CarList.value.map(item => item.color),
        labelLine: {
          show: false
        },
        data: CarList.value.map(item => item.value)
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}

const initDevice = () => {
  let colorList = ['#FFD802', '#53E3FF']
  const myChart = echarts.init(document.getElementById('device_chat_val'))
  const temp = []
  temp.push({ name: '在线', value: 12 })
  temp.push({ name: '离线', value: 32 })
  temp.sort((a, b) => {
    return a.value - b.value
  })
  const option = {
    xAxis: temp.map(item => item.name),
    series: [
      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: colorList,
        labelLine: {
          show: false
        },
        data: temp.map(item => item.value)
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // æ‰§è¡Œ
    myChart.resize()
  })
}

const dataList5 = ref({})
const getData4 = () => {
  getFightingcenterData().then(res => {
    dataList5.value = res.data || {}
  })
}

onMounted(() => {
  getData1()
@@ -994,11 +1133,18 @@
  getData5()
  getWarning()

  initChat()
  // initSafe()
  initDevice()
  getData4()

  setInterval(() => {
    getData1()
    getData2()
    getData3()
    getData4()
    getWarning()
    initChat()
  }, 1000 * 60)

  setInterval(() => {
@@ -1007,8 +1153,9 @@

  setTimeout(() => {
    loopFn1()
    loopFn2()
    // loopFn2()
    loopFn3()
    loopFn4()
  }, 12000)

})
@@ -1025,12 +1172,237 @@
  display: block !important;
}

.swiper-slide {
  height: auto !important; /* ä½¿ç”¨ !important æ¥ç¡®ä¿ä¼˜å…ˆçº§ */
}

.main_content {
  display: flex;
  padding: 20px 25px 0;

  .left_box {
    width: 360px;

    .safe_warning {
      width: 360px;
      position: relative;

      .safe_warning_content {
        width: 100%;
        padding: 15px 0;
        box-sizing: border-box;
        height: 326px;
        background: rgba(0,86,255,0.1);
        backdrop-filter: blur(5px);
        .safe_chat {
          width: 100%;
          height: 169px;
          margin-top: 15px;
          display: flex;
          padding: 15px 24px;
          box-sizing: border-box;
          align-items: start;
          position: relative;
          .safe_chat_val_n {
            position: absolute;
            top: 75px;
            left: 84px;
            transform: translate(-50%, -50%);
            width: 90px;
            height: 90px;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px dashed rgba(1,217,254,0.7);
            span {
              &:nth-child(1) {
                font-weight: bold;
                font-size: 18px;
                color: #FFFFFF;
              }
              &:nth-child(2) {
                font-weight: 400;
                font-size: 12px;
                color: rgba(255,255,255,0.8);
              }
            }
          }
          #safe_chat_val {
            flex-shrink: 0;
            width: 120px;
            height: 120px;
            margin-right: 40px;
          }
          .safe_chat_info {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            .safe_chat_info_row {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 10px;
              &:first-child {
                margin: 0 !important;
              }
              .safe_left {
                display: flex;
                align-items: center;
                .safe_left_dian {
                  width: 12px;
                  height: 12px;
                  border-radius: 50%;
                  background: #01ABFE;
                  margin-right: 10px;
                }
                .safe_left_name {
                  font-weight: 400;
                  font-size: 14px;
                  color: #FFFFFF;
                }
              }
              .safe_num {
                font-weight: bold;
                font-size: 16px;
                color: #01ABFE;
              }
            }
          }
        }
        .safe_zhu {
          width: 100%;
          height: 91px;
          padding: 0 20px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          .safe_zhu_item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            &:last-child {
              margin: 0 !important;
            }
            .safe_zhu_item_label {
              width: 100px;
              flex-shrink: 0;
            }
            .safe_zhu_item_c {
              flex: 1;
              display: flex;
              flex-direction: column;
              .safe_zhu_item_c_t {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                  font-weight: 400;
                  font-size: 13px;
                  color: #D2E0FF;
                }
              }
              .safe_zhu_item_c_b {
                width: 100%;
                height: 10px;
                margin-top: 5px;
                background: rgba(255,255,255,0.07);
                .safe_zhu_item_c_b_z {
                  height: 100%;
                  background: linear-gradient( 270deg, #00F2F3 0%, rgba(0,242,243,0.1) 100%);
                }
              }
            }
          }
        }
      }

      .list {
        height: 204px;
        overflow: hidden;
        margin-top: 15px;
        scrollbar-width: none;
        display: flex;
        flex-wrap: wrap;
        margin-left: 20px;

        .item {
          width: 736px;
          height: 102px !important;
          font-size: 13px;
          color: #D2E0FF;
          display: flex;

          /* border: 1px solid; */
          .item_wrap {
            width: 368px;
            height: 90px;
            padding: 10px;
            background: linear-gradient(270deg, rgba(1, 217, 254, 0) 0%, rgba(1, 217, 254, 0.19) 100%);
            border: 1px solid #006E81;
            display: flex;
            margin-right: 10px;

            &:nth-of-type(2n) {
              margin-right: 0;
            }
          }


          .avatar {
            width: 70px;
            height: 70px;
            margin-right: 10px;
          }

          .content {
            flex: 1;

            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 8px;

              .name {
                font-weight: 500;
                font-size: 15px;
              }

              .have_time {
                font-size: 12px;
                color: #D2E0FF;

                span {
                  color: #FEAF01;
                }
              }
            }

            .wrap {
              font-size: 12px;
              color: #D2E0FF;

              .line {
                display: flex;
                align-items: center;
                margin-bottom: 3px;
              }

              .icon {
                width: 12px;
                margin-right: 8px;
              }
            }
          }
        }
      }
    }

    .left_box_one {
      width: 100%;
@@ -1041,6 +1413,68 @@
      background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);

      .table {
        height: 158px;
        overflow: hidden;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;

        .line {
          display: flex;
          align-items: center;
          font-size: 14px;
          height: 32px;

          div {
            flex: 3;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .dept {
            flex: 8;
          }

          .time {
            flex: 5;
          }
        }

        .header {
          background: rgba(134,156,201,0.2);
          font-weight: 500;

          div {
            border-right: 1px solid rgba(255, 255, 255, 0.2);

            &:nth-last-child(1) {
              border: none;
            }
          }
        }

        .separate {
          width: 100%;
          height: 2px;
          background-color: rgba(255, 255, 255, 0.2);
          /* background-color: red; */
          border-right: 4px solid #00F2F3;
          border-left: 4px solid #00F2F3;
        }
      }

      .ren_chat {
        width: 100%;
        height: 130px;
        .ren_chat_val {
          width: 100%;
          height: 100%;
        }
      }

      .second_title {
        margin-top: 24px;
        margin-bottom: 20px;
@@ -1048,7 +1482,7 @@

      .stall_static {
        display: flex;
        margin-bottom: 60px;
        margin-bottom: 30px;
        padding: 0 20px;

        .residue {
@@ -1232,6 +1666,10 @@
  .center_box {
    flex: 1;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

    .jiankong {
      margin: 0 48px;
@@ -1381,6 +1819,228 @@
        }
      }
    }

    .monitoring {
      position: absolute;
      cursor: pointer;
      bottom: 220px;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 15px;
      width: 134px;
      height: 40px;
      background: linear-gradient(180deg, #021F4A 0%, #054281 100%), linear-gradient(180deg, #011738 0%, rgba(5, 66, 129, 0.26) 100%), #00141F;
      border-radius: 2px;
      border: 1px solid rgba(12, 153, 236, 0.68);

      .icon {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }

      .top {
        width: 12px;
        height: 12px;
        margin-left: 8px;
      }
    }

    .center_box_two {
      width: 100%;
      height: 202px;
      display: flex;
      align-items: center;
      .center_box_two_left {
        flex-shrink: 0;
        width: 621px;
        height: 100%;
        .device {
          width: 100%;
          height: 162px;
          padding: 15px;
          background: rgba(0,86,255,0.1);
          backdrop-filter: blur(5px);
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .device_chat {
            flex-shrink: 0;
            width: 251px;
            height: 100%;
            display: flex;
            align-items: start;
            position: relative;
            .device_chat_qiam {
              position: absolute;
              top: 16px;
              left: 16px;
              width: 88px;
              height: 88px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              border-radius: 50%;
              box-shadow: inset 0 0 8px 0 #01D9FE;
              span {
                &:nth-child(1) {
                  font-weight: 500;
                  font-size: 20px;
                  color: #FFFFFF;
                }
                &:nth-child(2) {
                  font-weight: 400;
                  font-size: 14px;
                  color: rgba(255,255,255,0.8);
                }
              }
            }
            #device_chat_val {
              flex-shrink: 0;
              width: 120px;
              height: 120px;
              margin-right: 30px;
            }
            .device_chat_info {
              flex: 1;
              display: flex;
              flex-direction: column;
              .device_chat_info_row {
                display: flex;
                align-items: start;
                margin-bottom: 20px;
                &:last-child {
                  margin: 0 !important;
                }
                .device_chat_info_row_dian {
                  width: 12px;
                  height: 12px;
                  border-radius: 50%;
                  background: #01D9FE;
                  margin-top: 5px;
                  margin-right: 10px;
                }
                .device_chat_info_row_nr {
                  display: flex;
                  flex-direction: column;
                  span {
                    &:nth-child(1) {
                      font-weight: 400;
                      font-size: 14px;
                      color: #FFFFFF;
                    }
                    &:nth-child(2) {
                      font-weight: 500;
                      font-size: 14px;
                      color: #01D9FE;
                    }
                  }
                }
              }
            }
          }
          .device_table {
            flex: 1;
            height: 100%;
            .table {
              height: 128px;
              overflow: hidden;
              width: 100%;

              .line {
                display: flex;
                align-items: center;
                font-size: 14px;
                height: 32px;

                .line-row {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }

              .header {
                background: rgba(134, 156, 201, 0.1);
                font-weight: 500;

                div {
                  border-right: 1px solid rgba(255, 255, 255, 0.2);

                  &:nth-last-child(1) {
                    border: none;
                  }
                }
              }

              .separate {
                width: 100%;
                height: 2px;
                background-color: rgba(255, 255, 255, 0.2);
                border-right: 4px solid #00F2F3;
                border-left: 4px solid #00F2F3;
              }
            }
          }
        }
      }
      .center_box_two_right {
        flex: 1;
        height: 100%;
        .device {
          width: 100%;
          height: 162px;
          padding: 23px 20px;
          background: rgba(0,86,255,0.1);
          backdrop-filter: blur(5px);
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          .device_item {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              flex-shrink: 0;
              width: 90px;
              height: 90px;
              margin-right: 10px;
            }
            .device_item_info {
              display: flex;
              flex-direction: column;
              span {
                &:nth-child(1) {
                  font-weight: 400;
                  font-size: 15px;
                  color: #FFFFFF;
                }
                &:nth-child(2) {
                  font-weight: 400;
                  font-size: 12px;
                  color: #D2E0FF;
                  b {
                    font-weight: bold;
                    font-size: 24px;
                    line-height: 36px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .right_box {
@@ -1391,90 +2051,256 @@
      background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);

      .second_title {
        margin-top: 20px;
      .one_swiper_wrap {
        height: 370px;
        overflow: hidden;
        background: rgba(0, 86, 255, 0.05);
        backdrop-filter: blur(5px);
        padding: 15px;
        box-sizing: border-box;
      }

      .static_wrap {
        padding: 14px 0 0 46px;
      .list {
        height: 100%;
        overflow: hidden;
        margin-top: 15px;
        scrollbar-width: none;
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 100%;
          height: 102px !important;
          font-size: 13px;
          color: #D2E0FF;
          display: flex;
          align-items: center;
          display: flex;
          margin-bottom: 10px;

          img {
          .item_wrap {
            width: 368px;
            height: 90px;
            padding: 10px;
            background: linear-gradient( 270deg, rgba(254,85,1,0) 0%, rgba(254,85,1,0.44) 100%);
            border: 1px solid #C15D2B;
            display: flex;
          }


          .avatar {
            width: 70px;
            height: 70px;
            margin-right: 20px;
            margin-right: 10px;
          }

          .content {
            color: #FFFFFF;
            flex: 1;

            .num {
              margin-top: 8px;
              font-size: 16px;
              color: #00F2F3;
            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 8px;

              .name {
                font-weight: 500;
                font-size: 15px;
              }

              .have_time {
                font-size: 12px;
                color: #D2E0FF;

              span {
                font-size: 20px;
                margin-right: 4px;
                font-weight: 600;
              }
            }

            .today {
              color: #09FACD;
            }

            .finish {
              color: #FEAF01;
            }
          }
        }
      }

      .visitor_list {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 16px;

        .item {
            .wrap {
          font-size: 12px;
          color: #D2E0FF;

          .num_wrap {
              .line {
            display: flex;
            align-items: flex-end;
            margin-top: 8px;
                align-items: center;
                margin-bottom: 3px;
              }

            .num {
              font-size: 22px;
              line-height: 22px;
              color: #FFFFFF;
              .icon {
                width: 12px;
                margin-right: 8px;
              }
            }
            }
          }
        }

        .spacing {
          width: 1px;
          height: 40px;
          background-color: #405173;
          margin: 0 24px;
        }
      }
      /*.second_title {*/
      /*  margin-top: 20px;*/
      /*}*/

      .echart3 {
        width: 100%;
        height: 140px;
      }
      /*.static_wrap {*/
      /*  padding: 14px 0 0 46px;*/

      /*  .item {*/
      /*    display: flex;*/
      /*    align-items: center;*/
      /*    display: flex;*/
      /*    margin-bottom: 10px;*/

      /*    img {*/
      /*      width: 70px;*/
      /*      height: 70px;*/
      /*      margin-right: 20px;*/
      /*    }*/

      /*    .content {*/
      /*      color: #FFFFFF;*/

      /*      .num {*/
      /*        margin-top: 8px;*/
      /*        font-size: 16px;*/
      /*        color: #00F2F3;*/

      /*        span {*/
      /*          font-size: 20px;*/
      /*          margin-right: 4px;*/
      /*          font-weight: 600;*/
      /*        }*/
      /*      }*/

      /*      .today {*/
      /*        color: #09FACD;*/
      /*      }*/

      /*      .finish {*/
      /*        color: #FEAF01;*/
      /*      }*/
      /*    }*/
      /*  }*/
      /*}*/

      /*.visitor_list {*/
      /*  display: flex;*/
      /*  justify-content: space-between;*/
      /*  padding: 20px 20px 16px;*/

      /*  .item {*/
      /*    font-size: 12px;*/
      /*    color: #D2E0FF;*/

      /*    .num_wrap {*/
      /*      display: flex;*/
      /*      align-items: flex-end;*/
      /*      margin-top: 8px;*/

      /*      .num {*/
      /*        font-size: 22px;*/
      /*        line-height: 22px;*/
      /*        color: #FFFFFF;*/
      /*      }*/
      /*    }*/
      /*  }*/

      /*  .spacing {*/
      /*    width: 1px;*/
      /*    height: 40px;*/
      /*    background-color: #405173;*/
      /*    margin: 0 24px;*/
      /*  }*/
      /*}*/

      /*.echart3 {*/
      /*  width: 100%;*/
      /*  height: 140px;*/
      /*}*/
    }

    .right_box_two {
      background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);

      .one_swiper_wrap {
        height: 350px;
        overflow: hidden;
        background: rgba(0, 86, 255, 0.05);
        backdrop-filter: blur(5px);
        padding: 15px;
        box-sizing: border-box;
      }

      .list {
        height: 100%;
        overflow: hidden;
        margin-top: 15px;
        scrollbar-width: none;
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 100%;
          height: 102px !important;
          font-size: 13px;
          color: #D2E0FF;
          display: flex;

          .item_wrap {
            width: 368px;
            height: 90px;
            padding: 10px;
            background: linear-gradient( 270deg, rgba(1,217,254,0) 0%, rgba(1,217,254,0.19) 100%);
            border: 1px solid #006E81;
            display: flex;
          }


          .avatar {
            width: 70px;
            height: 70px;
            margin-right: 10px;
          }

          .content {
            flex: 1;

            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 8px;

              .name {
                font-weight: 500;
                font-size: 15px;
              }

              .have_time {
                font-size: 12px;
                color: #D2E0FF;

                span {
                  color: #FEAF01;
                }
              }
            }

            .wrap {
              font-size: 12px;
              color: #D2E0FF;

              .line {
                display: flex;
                align-items: center;
                margin-bottom: 3px;
              }

              .icon {
                width: 12px;
                margin-right: 8px;
              }
            }
          }
        }
      }
    }

    .right_box_three {
@@ -1547,61 +2373,21 @@

  .car_warning {
    width: 360px;

    .table {
      margin-top: 15px;

      .line {
        display: flex;
        align-items: center;
        font-size: 14px;
        height: 32px;

        div {
          flex: 3;
          height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .dept {
          flex: 5;
        }

        .time {
          flex: 4;
        }
      }

      .header {
        background: rgba(134, 156, 201, 0.1);
        font-weight: 500;

        div {
          border-right: 1px solid rgba(255, 255, 255, 0.2);

          &:nth-last-child(1) {
            border: none;
          }
        }
      }

      .separate {
        width: 100%;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.2);
        /* background-color: red; */
        border-right: 4px solid #00F2F3;
        border-left: 4px solid #00F2F3;
      }
    }
  }

  .safe_warning {
    width: 786px;
    margin-right: 20px;
    position: relative;

    .safe_warning_content {
      width: 100%;
      padding: 15px;
      box-sizing: border-box;
      height: 326px;
      background: rgba(0,86,255,0.1);
      backdrop-filter: blur(5px);
    }

    /* one-swiper */
    .one_swiper_wrap {
@@ -1777,67 +2563,6 @@
          }
        }
      }

      .table {
        .list {
          height: 102px !important;
          overflow: hidden;

          .item {
            height: 34px !important;
          }
        }

        .line {
          height: 32px !important;

          div {
            justify-content: flex-end;
            padding-right: 10px;
          }

          .driver {
            flex: 5;
            justify-content: center;
          }
        }

        .header {
          div {
            justify-content: center;
            padding-right: 0;
          }
        }
      }
    }

    .monitoring {
      position: absolute;
      cursor: pointer;
      top: -60px;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 15px;
      width: 134px;
      height: 40px;
      background: linear-gradient(180deg, #021F4A 0%, #054281 100%), linear-gradient(180deg, #011738 0%, rgba(5, 66, 129, 0.26) 100%), #00141F;
      border-radius: 2px;
      border: 1px solid rgba(12, 153, 236, 0.68);

      .icon {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }

      .top {
        width: 12px;
        height: 12px;
        margin-left: 8px;
      }
    }

  }
@@ -1846,25 +2571,6 @@
    width: 360px;
    background: rgba(0, 86, 255, 0.05);
    backdrop-filter: blur(5px);

    .table {
      .list {
        height: 102px !important;
        overflow: hidden;

        .item {
          height: 34px !important;
        }
      }

      .line {
        div {
          .dept {
            flex: 5;
          }
        }
      }
    }
  }
}

@@ -1914,57 +2620,6 @@
    }
  }
}

.table {
  margin-top: 15px;
  flex: 1;

  .line {
    display: flex;
    align-items: center;
    font-size: 14px;
    height: 32px;

    div {
      flex: 3;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dept {
      flex: 8;
    }

    .time {
      flex: 5;
    }
  }

  .header {
    background: rgba(134, 156, 201, 0.1);
    font-weight: 500;

    div {
      border-right: 1px solid rgba(255, 255, 255, 0.2);

      &:nth-last-child(1) {
        border: none;
      }
    }
  }

  .separate {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    /* background-color: red; */
    border-right: 4px solid #00F2F3;
    border-left: 4px solid #00F2F3;
  }
}

.second_title {
  height: 24px;
  display: flex;
@@ -2020,6 +2675,15 @@
    object-fit: cover;
    z-index: -1;
  }

  .main_znz {
    width: 68px;
    height: 68px;
    position: absolute;
    right: 420px;
    top: 250px;
    z-index: -1;
  }
}

.bg {

 screen/vite.config.js

@@ -26,8 +26,8 @@
    proxy: {
      "/gateway_interface": {
        // target: "http://192.168.0.104:10010",
        target: "http://10.50.250.253:8088/gateway_interface",
        // target: "https://atwl.ahzyssl.com/zhyq_interface",
        // target: "http://10.50.250.253:8088/gateway_interface",
        target: "https://atwl.ahzyssl.com/zhyq_interface",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/gateway_interface/, ""),
      },