add: components

src/api/avoidanceSys/approval.js

+import request from '@/utils/request'
+
+// 查询流程
+export function listProcess(query) {
+  return request({
+    url: '/approval/process',
+    method: 'get',
+    params: query
+  })
+}
+// 修改流程
+export function updateProcess(data) {
+  return request({
+    url: '/approval/process',
+    method: 'put',
+    data:data
+  })
+}
\ No newline at end of file

src/api/avoidanceSys/emergencyPlans.js

+import request from '@/utils/request'
+
+// 查询应急演练信息列表
+export function listDrills(query) {
+  return request({
+    url: '/system/drills/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询应急演练信息详细
+export function getDrills(id) {
+  return request({
+    url: '/system/drills/' + id,
+    method: 'get'
+  })
+}
+
+// 新增应急演练信息
+export function addDrills(data) {
+  return request({
+    url: '/system/drills',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改应急演练信息
+export function updateDrills(data) {
+  return request({
+    url: '/system/drills',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除应急演练信息
+export function delDrills(id) {
+  return request({
+    url: '/system/drills/' + id,
+    method: 'delete'
+  })
+}

src/api/avoidanceSys/home.js

+import request from '@/utils/request'
+
+// 应急预案更新提醒
+export function listEmergencyPlans(query) {
+  return request({
+    url: '/approval/plans/listEmergencyPlans',
+    method: 'get',
+    params: query
+  })
+}
+
+// 应急演练到期提醒
+export function getTabMergencyDrillsList(query) {
+  return request({
+    url: '/system/drills/getTabMergencyDrillsList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 物资到期提醒
+export function getTabMaterialInforList(query) {
+  return request({
+    url: '/material/info/getTabMaterialInforList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 物资库存预警
+export function getTabMaterialInventory(query) {
+  return request({
+    url: '/material/info/getTabMaterialInventoryList',
+    method: 'get',
+    params: query
+  })
+}
+
+//我的待处理,已处理,已发起,收到的次数统计
+export function approvalVoList() {
+  return request({
+    url: '/approvalVo/list',
+    method: 'get',
+  })
+}
+//待处理列表
+export function pending() {
+  return request({
+    url: '/approvalVo/pending',
+    method: 'get',
+  })
+}
+//已处理列表
+export function processed() {
+  return request({
+    url: '/approvalVo/processed',
+    method: 'get',
+  })
+}
+//已发起列表
+export function initiated() {
+  return request({
+    url: '/approvalVo/initiated',
+    method: 'get',
+  })
+}
+//收到的列表
+export function received() {
+  return request({
+    url: '/approvalVo/received',
+    method: 'get',
+  })
+}
\ No newline at end of file

src/api/avoidanceSys/inOutDet.js

+import request from '@/utils/request'
+
+// 查询入库单/出库单/调拨单  单据信息列表
+export function listInfor(query) {
+  return request({
+    url: '/material/order/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询入库单/出库单/调拨单  单据信息详细
+export function getInfor(id) {
+  return request({
+    url: '/material/order/' + id,
+    method: 'get'
+  })
+}
+
+// 新增入库单/出库单/调拨单  单据信息
+export function addInfor(data) {
+  return request({
+    url: '/material/order',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改入库单/出库单/调拨单  单据信息
+export function updateInfor(data) {
+  return request({
+    url: '/material/order',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除入库单/出库单/调拨单  单据信息
+export function delInfor(id) {
+  return request({
+    url: '/material/order/' + id,
+    method: 'delete'
+  })
+}
+// 查询入库单/出库单/调拨单  单据信息详情
+export function inOutDetails(query) {
+  return request({
+    url: '/material/order/inOutDetails',
+    method: 'get',
+    params: query
+  })
+}
\ No newline at end of file

src/api/avoidanceSys/maintenance.js

+import request from '@/utils/request'
+// 查询更新/维护列表
+export function listInfor(query) {
+  return request({
+    url: '/system/infor/list',
+    method: 'get',
+    params: query
+  })
+}
+// 查询更新/维护详细
+export function getInfor(id) {
+  return request({
+    url: '/system/infor/list/' + id,
+    method: 'get'
+  })
+}
+// 删除更新维护计划
+export function inforRemove(delId) {
+  return request({
+    url: '/system/infor/remove/' + delId,
+    method: 'delete'
+  })
+}
\ No newline at end of file

src/api/avoidanceSys/materialUpdate.js

+import request from '@/utils/request'
+//新增维护计划
+
+export function inforAdd(data) {
+  return request({
+    url: '/system/infor/add',
+    method: 'post',
+    data
+  })
+}
+
+// 查询计划单
+export function inforgetInfo(id) {
+  return request({
+    url: '/system/infor/getInfo/'+id,
+    method: 'get',
+  })
+}
+
+// 计划物资明细
+export function tmlcgetInfo(mnumber) {
+  return request({
+    url: '/system/tmlc/getInfo/'+mnumber,
+    method: 'get',
+  })
+}
+
+// 计划物资明细
+export function tmlcEdit(data) {
+  return request({
+    url: '/system/tmlc/edit',
+    method: 'put',
+    data
+  })
+}
+
+export function inforUpdate(data) {
+  return request({
+    url: '/system/tmlc/update',
+    method: 'put',
+    data
+  })
+}
\ No newline at end of file

src/api/avoidanceSys/plans.js

+import request from '@/utils/request'
+
+// 查询应急预案信息列表
+export function listPlans(query) {
+  return request({
+    url: '/slope/screen/list',
+    method: 'get',
+    params: query
+  })
+}
+

src/api/avoidanceSys/qiaoliang.js

+import request from '@/utils/request'
+
+// 查询应急仓库信息列表
+export function getChartData(query) {
+  return request({
+    url: '/material/warehouse/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询应急仓库信息详细
+export function getListData() {
+  return request({
+    url: '/material/warehouse/list',
+    method: 'get',
+    params: query
+  })
+}
+

src/api/avoidanceSys/suidao.js

+import request from '@/utils/request'
+
+// 查询数据字典-物资类别信息列表
+export function getList(query) {
+  return request({
+    url: '/slope/screen/listMax',
+    method: 'get',
+    params: query
+  })
+}
+

src/api/avoidanceSys/training.js

+import request from '@/utils/request'
+// 通讯信息管理
+export function listTrainning(query) {
+  return request({
+    url: '/system/train/list',
+    method: 'get',
+    params: query
+  })
+}
+// 培训考核情况查看
+export function getTabDrillUserList(id) {
+  return request({
+    url: '/system/train/getTabDrillUserList/'+id,
+    method: 'get',
+  })
+}
+
+// 培训考核提交
+export function TabDrillAddAttendedit(data) {
+  return request({
+    url: '/system/trainc/edit',
+    method: 'put',
+    data: data
+  })
+}
+
+// 添加培训计划
+export function addTabDrill(data) {
+  return request({
+    url: '/system/train/addTabDrill',
+    method: 'post',
+    data: data
+  })
+}
+// 考核纪录详情
+export function getTabDrillUserListc(id) {
+  return request({
+    url: '/system/trainc/getTabDrillUserList/'+id,
+    method: 'get',
+  })
+}
+
+// 修改培训计划
+export function trainEdit(data) {
+  return request({
+    url: '/system/train/edit',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除培训计划
+export function delTrain(delId) {
+  return request({
+    url: '/system/train/remove/' + delId,
+    method: 'delete'
+  })
+}
+
+// 人员培训与考核
+export function getTabDrillCList(query) {
+  return request({
+    url: '/system/trainc/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 人员培训考核列表
+export function getTabDrillCListId(id) {
+  return request({
+    url: '/system/trainc/getTabDrillCList/'+id,
+    method: 'get',
+  })
+}

src/components/BigScreen/AiAnalysis.vue

+<template>
+  <div class="abs-full title4">
+    <div class="m-tt">
+      <h4>AI分析</h4>
+    </div>
+    <div class="m-body">
+      <div class="warehouse-info">
+        <el-carousel height="1.4rem" indicator-position="none"  :interval="0" trigger="none">
+          <el-carousel-item
+            v-for="Warehose in 10"
+            :key="Warehose.id"
+          >
+            <div class="warehouse-cover">
+              <div v-for="item in 10">
+                <div class="liquid-chart" :id="`liquidfill${item}`">
+                  {{ item }}
+                </div>
+                <p>{{ item }}哈哈</p>
+              </div>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+        <div class="chart-wrapper">
+          <div id="chart" ref="chart" style="width: 4.5rem; height: 4rem;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+
+} from "@/api/avoidanceSys/qiaoliang";
+import * as echarts from 'echarts';
+
+export default {
+  name: 'LineChart',
+  data() {
+    return {
+      WarehoseListInfo: [],
+      warehouseList: [],
+    };
+  },
+
+  watch: {},
+  created() {},
+  mounted() {
+    setTimeout(() => {
+      // this.getWarehouseList();
+      // this.getWarehoseListInfo();
+      this.initCharts()
+    }, 500);
+  },
+  methods: {
+    initCharts(){
+      var chartDom = document.getElementById('chart');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [2, 20],
+            type: 'line',
+            areaStyle: {}
+          }
+        ]
+      };
+
+      option && myChart.setOption(option);
+    },
+    /** 查询数据字典-物资类别信息列表 */
+    getWarehoseListInfo() {
+      this.loading = true;
+      warehouseMaterialList().then((response) => {
+        this.WarehoseListInfo = response.rows;
+        this.$nextTick(() => {
+          this.initCharts(); // 等待 DOM 渲染完再初始化图表
+        });
+      });
+    },
+    getWarehouseList() {
+      listWarehouse().then((response) => {
+        this.warehouseList = this.transformArray(
+          response.rows,
+          "id",
+          "warehouseName"
+        );
+      });
+    },
+  },
+};
+</script> 
+ 
+<style scoped lang="scss">
+* {
+  padding: 0;
+  margin: 0;
+}
+@font-face {
+  font-family: "diget year";
+  src: url("~@/assets/fonts/DS-Digital.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+.warehouse-info {
+  width: 100%;
+  height: 5.81rem;
+  .warehouse-cover {
+    width: 3.8rem;
+    height: 100%;
+    margin: 0 auto;
+
+    position: relative;
+    // background-image: url(~@/assets/images/bigscreen/icon_bg.png);
+    background-repeat: no-repeat;
+    background-position: center bottom;
+    background-size: auto;
+    font-size: 0.16rem;
+    > div {
+      position: absolute;
+      width: 0.8rem;
+      height: 0.8rem;
+      top: 0.5rem;
+      left: -0.1rem;
+      border-radius: 50%;
+      
+      &:nth-child(1){
+        background-image: url(~@/assets/images/dpNew3/icon1.png);
+      }
+      &:nth-child(2){
+        background-image: url(~@/assets/images/dpNew3/icon2.png);
+      }
+      &:nth-child(3){
+        background-image: url(~@/assets/images/dpNew3/icon3.png);
+      }
+      /* 之后的div使用模数计数器进行循环 */
+      // &:nth-child(n+4) {
+      //     /* 使用模数计算背景图片索引 */
+      //     /* 例如：nth-child(4) 将会应用 unique-image1.jpg (模数为0)，然后 nth-child(7) 会再次应用 unique-image1.jpg */
+      //     background-image: url('~@/assets/images/bigscreen/icon' + ( (n - 1) % 3 + 1 ) + '.png');
+      // }
+
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 100% 100%;
+      text-align: center;
+      line-height: 0.2rem;
+      cursor: pointer;
+      color: #00ffc6;
+      .liquid-chart {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: "diget year";
+        font-size: 0.26rem;
+        text-shadow: 0px 3px 12px rgba(24, 153, 159, 0.82);
+        background: linear-gradient(180deg, #ffffff 0%, #00ffc6 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+    > div:nth-child(2) {
+      color: #ffe25d;
+      // top: 0.2rem;
+      left: 38%;
+      .liquid-chart {
+        text-shadow: 0px 4px 30px rgba(5, 54, 78, 0.48);
+        background: linear-gradient(180deg, #ffffff 0%, #ffe25d 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+    > div:nth-child(3) {
+      color: #11b9ff;
+      top: 0.5rem;
+      right: 0px;
+      left: unset;
+      .liquid-chart {
+        text-shadow: 0px 3px 12px rgba(24, 153, 159, 0.82);
+        background: linear-gradient(180deg, #ffffff 0%, #11b9ff 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+}
+.tyler-table {
+  margin-top: 0.2rem;
+  font-size: 0.18rem;
+  .tyler-table-header {
+    background: linear-gradient(
+      0deg,
+      rgba(10, 171, 255, 0.3) 0%,
+      rgba(14, 108, 159, 0.3) 100%
+    );
+    border-radius: 4px 4px 0px 0px;
+    border: 1px solid;
+
+    display: grid;
+    grid-gap: 0.1rem;
+    grid-template-columns: 3fr 1fr 3fr 3fr;
+    padding: 0 0.1rem;
+    color: #0adfff;
+    p {
+      text-align: center;
+    }
+  }
+  .tyler-table-body {
+    list-style: none;
+    padding: 0;
+
+    li {
+      font-size: 0.16rem;
+      display: grid;
+      grid-gap: 0.1rem;
+      grid-template-columns: 3fr 1fr 3fr 3fr;
+      padding: 0.16rem 0.1rem;
+      color: #fff;
+      border-bottom: 1px solid #34a2ff;
+      span {
+        text-align: center;
+      }
+    }
+  }
+}
+.scrolling2 {
+  min-height: 1.86rem !important;
+}
+.echart-bt {
+  width: 100%;
+  height: 1.8rem;
+  position: relative;
+  .echart-bg {
+    position: absolute;
+    width: 2.1rem;
+    height: 2.2rem;
+    background-image: url(/static/img/chart.023a3958.png);
+    background-repeat: no-repeat;
+    background-position: cover;
+    background-size: 100% 100%;
+    -webkit-transform: rotateX(60deg);
+    transform: rotateX(58deg);
+    left: 27%;
+    top: -0.06rem;
+  }
+}
+.EchartsPie {
+  width: 100%;
+  height: 100%;
+}
+
+::v-deep .el-carousel__arrow{
+  display: none;
+}
+
+::v-deep .highcharts-credits {
+  display: none;
+}
+::v-deep .highcharts-container {
+  // height: 50% !important;
+}
+</style>
+
+
+<style scoped lang="scss">
+.abs-full {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  //padding:.08rem .10rem;
+  //background:no-repeat center center url('~@/assets/images/layout/side_l_md.png');background-size:100% 100%;
+  // background-color: rgba(29, 57, 110, 0.65);
+ 
+  &.title4 {
+    height: 5rem;
+    width: 4.76rem;
+    background: no-repeat center center
+      url("~@/assets/images/dpNew2/title4.png");
+    background-size: 100% 100%;
+  }
+  background: linear-gradient(
+    to right,
+    rgba(0, 60, 144, 0.9),
+    /* #003c90 - 90% 不透明度 */ rgba(0, 44, 106, 0.7)
+      /* #002c6a - 70% 不透明度 */
+  );
+
+  .chart {
+    position: relative;
+  }
+}
+.m-tt {
+  height: 0.48rem;
+  width: 100%;
+
+  position: absolute;
+  top: 0.07rem;
+  left: 0.2rem;
+  h4 {
+    height: 100%;
+    line-height: 0.48rem;
+    margin: 0;
+    font-size: 0.22rem;
+    letter-spacing: 0.01rem;
+    padding-left: 0.4rem;
+    font-family: Source Han Sans SC;
+    font-weight: bold;
+    color: #ffffff;
+    text-shadow: 0px 3px 8px rgba(19, 80, 113, 0.48);
+    background: linear-gradient(180deg, #ffffff 54.00390625%, #28caff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.m-body {
+  display: flex;
+  flex-direction: column;
+  padding: 0.2rem;
+  padding-top: 0.5rem;
+
+}
+
+</style>
\ No newline at end of file

src/components/BigScreen/BianpoMonitor.vue

+<template>
+  <div class="abs-full title1">
+    <div class="m-tt">
+      <h4>边坡监测</h4>
+    </div>
+    <div class="m-body">
+      <div class="top">
+        <div class="left">
+          <img src="@/assets/images/dpNew2/icon0.png" alt="" />
+        </div>
+        <div class="right">
+          <p>
+            <span class="unit1">隐患数量</span
+            ><span class="count1">{{ plansNum.hiddenNum || 0 }}</span
+            ><span class="unit1">个</span>
+          </p>
+          <p>
+            <span style="color:#59EDFF;">已经处理</span
+            ><span class="count2">{{ plansNum.dealNum || 0 }}</span
+            ><span class="unit2">个</span>
+          </p>
+        </div>
+      </div>
+      <div class="bottom bottom-yuan">
+        <dl class="scrolling1">
+          <dt>
+            <span>隐患报警日期</span> <span>发现方式</span> <span>处置方式</span>
+          </dt>
+          <div class="list-wrap">
+            <div class="list-content">
+              <dd v-for="(item, index) in plansList" :key="index">
+                <span>{{ item.alarmTime }}</span>
+                <span>{{ item.discoveryMethod }}</span>
+                <span :style="{ color: formateColor4yuan(item) }">{{item.alarmIfRes === 0 ? '未处理': '已处理'}}</span>
+              </dd>
+            </div>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listPlans } from "@/api/avoidanceSys/plans";
+export default {
+  props: {
+    dataList: {
+      type: Array,
+      default: () => [{ name: "测试1:", y: 6.3 }],
+    },
+    colors: {
+      type: Array,
+      default: () => [
+        "#27BAFF",
+        "#EEE485",
+        "#25D8A9",
+        "#008ADD",
+        "#25D8A9",
+        "#EEE485",
+        "#27BAFF",
+        "#008ADD",
+      ],
+    },
+  },
+  data() {
+    return {
+      plansList: [],
+      plansNum: {
+        hiddenNum: 0,
+        dealNum: 0,
+      },
+      option: {},
+        // 应急预案
+        interval4yuan: null,
+      scrollPosition4yuan: 0,
+      direction4yuan: 1, // 1 for down, -1 for up
+      step4yuan: 1, // 每次滚动的像素
+      intervalTime4yuan: 40, // 每次滚动的时间间隔（ms）
+    };
+  },
+
+  watch: {},
+  created() {},
+  mounted() {
+    this.getPlans()
+
+    this.startScrolling(
+          ".bottom-yuan .list-wrap",
+          ".bottom-yuan .list-content",
+          "yuan"
+        );
+  },
+
+  methods: {
+    getLevelNum4plans() {
+      getLevelNum({}).then((response) => {
+        this.plansNum = response || {};
+      });
+    },
+    /** 查询应急预案信息列表 */
+    getPlans() {
+      listPlans({
+        pageNum: 1,
+        pageSize: 99999,
+      }).then((response) => {
+        this.plansList = response.voList;
+        this.plansNum.hiddenNum = response.total[0]
+        this.plansNum.dealNum = response.total[1]
+
+        this.startScrolling(
+          ".bottom-yuan .list-wrap",
+          ".bottom-yuan .list-content",
+          "yuan"
+        );
+      });
+    },
+    formateColor4yuan(item) {
+      if (item.alarmIfRes === 0) {
+        return "#01c0ff";
+      }
+      return "#e5d76a";
+    },
+    startScrolling(containerClass, contentClass, type) {
+      const container = document.querySelector(containerClass);
+      const content = document.querySelector(contentClass);
+      var affixHeight = 0;
+      if (type === "yanlian") {
+        affixHeight = 80;
+      } else if (type === "yuan") {
+        affixHeight = 10;
+      }
+      if (this["interval4" + type]) {
+        clearInterval(this["interval4" + type]);
+      }
+      this["interval4" + type] = setInterval(() => {
+        this["scrollPosition4" + type] +=
+          this["step4" + type] * this["direction4" + type];
+        if (
+          this["scrollPosition4" + type] + container.clientHeight >=
+            content.scrollHeight + affixHeight ||
+          this["scrollPosition4" + type] <= 0
+        ) {
+          this["direction4" + type] *= -1; // 改变滚动方向
+        }
+        content.style.transform = `translateY(-${
+          this["scrollPosition4" + type]
+        }px)`;
+      }, this["intervalTime4" + type]);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.abs-full {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  //padding:.08rem .10rem;
+  //background:no-repeat center center url('~@/assets/images/layout/side_l_md.png');background-size:100% 100%;
+  // background-color: rgba(29, 57, 110, 0.65);
+  &.title1 {
+    height: rem;
+    width: 4.76rem;
+    background: no-repeat center center
+      url("~@/assets/images/dpNew2/title1.png");
+    background-size: 100% 100%;
+  }
+  background: linear-gradient(
+    to right,
+    rgba(0, 60, 144, 0.9),
+    /* #003c90 - 90% 不透明度 */ rgba(0, 44, 106, 0.7)
+      /* #002c6a - 70% 不透明度 */
+  );
+}
+.m-tt {
+  height: 0.48rem;
+  width: 100%;
+
+  position: absolute;
+  top: 0.07rem;
+  left: 0.2rem;
+  h4 {
+    height: 100%;
+    line-height: 0.48rem;
+    margin: 0;
+    font-size: 0.22rem;
+    letter-spacing: 0.01rem;
+    padding-left: 0.4rem;
+    font-family: Source Han Sans SC;
+    font-weight: bold;
+    color: #ffffff;
+    text-shadow: 0px 3px 8px rgba(19, 80, 113, 0.48);
+    background: linear-gradient(180deg, #ffffff 54.00390625%, #28caff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.m-body {
+  display: flex;
+  flex-direction: column;
+  padding: 0.2rem;
+  padding-top: 0.5rem;
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: 0.3rem;
+    .left {
+      img {
+        margin-top: 0.3rem;
+      }
+    }
+    .right {
+      p {
+        background-image: url("~@/assets/images/dpNew2/underline.png");
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100% 100%;
+        width: 3.2rem;
+        height: 0.53rem;
+        padding-left: 0.5rem;
+        margin-bottom: 0.25rem;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+        span:nth-child(1) {
+          font-family: PingFang SC;
+          font-weight: 500;
+          font-size: 0.22rem;
+        //   color: #ffffff;
+          margin-right: 0.3rem;
+        }
+        .count2 {
+          font-family: diget year;
+          font-weight: normal;
+          font-size: 0.42rem;
+          color: #ffffff;
+          text-shadow: 0px 0.04rem 0.3rem rgba(5, 54, 78, 0.48);
+          background: linear-gradient(180deg, #dff2ff 0%, #36acff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          margin-right: 0.1rem;
+        }
+        .unit2 {
+          font-family: PingFang SC;
+          font-weight: bold;
+          font-size: 0.21rem;
+          color: #1e6bb2;
+        }
+        .count1{
+          font-family: diget year;
+          font-weight: normal;
+          font-size: 0.42rem;
+          color: #ffffff;
+          text-shadow: 0px 0.04rem 0.3rem rgba(5, 54, 78, 0.48);
+          background: linear-gradient(180deg, #fffae4 0%, #ffe25d 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          margin-right: 0.1rem;
+        }
+        .unit1 {
+          font-family: PingFang SC;
+          font-weight: bold;
+          font-size: 0.21rem;
+          color: #dfe224;
+        }
+      }
+    }
+  }
+  .bottom {
+    height: 2.8rem;
+    overflow: hidden;
+    margin-top: 0.16rem;
+    .scrolling1 {
+      min-height: 2.55rem;
+      max-height: 2.55rem;
+      overflow-y: auto;
+      border-radius: 4px 4px 0px 0px;
+      border: 1px solid #0aabff;
+      // opacity: 0.5;
+      dt {
+        height: 0.42rem;
+        line-height: 0.42rem;
+        // margin-top: 0.05rem;
+        color: #0adfff;
+        display: grid;
+        grid-template-columns: 1.5rem 0.8rem 0.9rem 0.8rem;
+        background: linear-gradient(
+          0deg,
+          rgba(17, 146, 255, 0.6) 0%,
+          rgba(14, 108, 159, 0.6) 100%
+        );
+
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 0.18rem;
+        text-align: center;
+        background: linear-gradient(
+          0deg,
+          rgba(17, 146, 255, 0.6) 0%,
+          rgba(14, 108, 159, 0.6) 100%
+        );
+        border-radius: 4px 4px 0px 0px;
+        border: 1px solid #0aabff;
+        // opacity: 0.5;
+      }
+      dd {
+        height: 0.4rem;
+        // margin-bottom: 0.08rem;
+        margin-left: 0;
+        color: #d3dfeb;
+        margin-right: 0px;
+        display: grid;
+        grid-template-columns: 1.5rem 0.8rem 0.9rem 0.8rem;
+        // background-color: rgba(37,102,195,.3);
+        text-align: center;
+        font-size: 0.14rem;
+        align-items: center;
+        border-bottom: 0.01rem solid #1f77c2;
+      }
+    }
+  }
+  .bottom-yuan {
+    height: 3rem;
+    .scrolling1 {
+      min-height: 2.8rem;
+      max-height: 2.8rem;
+      overflow: hidden;
+      .list-wrap {
+        position: relative;
+        height: 2.4rem;
+        overflow: hidden;
+        // margin-top: 0.4rem;
+      }
+      .list-content {
+        position: absolute; /* 绝对定位 */
+        transition: transform 0.2s ease; /* 添加平滑过渡 */
+        // top: 0.4rem;
+      }
+      dt {
+        grid-template-columns: 2rem 0.8rem 0.9rem 0.8rem;
+      }
+      dd {
+        grid-template-columns: 2rem 0.8rem 0.9rem 0.8rem;
+      }
+    }
+  }
+}
+
+</style>
\ No newline at end of file

src/components/BigScreen/SuidaoMonitor.vue

+<template>
+  <div class="abs-full title2">
+                <div class="m-tt">
+                  <h4>隧道监测</h4>
+                </div>
+                <div class="m-body">
+                  <div class="bottom bottom-suidao">
+                    <dl class="scrolling1">
+                      <dt>
+                        <span>检测项</span> <span>最近更新时间</span>
+                        <span>监测数据</span>
+                      </dt>
+                      <div class="list-content">
+                        <dd v-for="(item, index) in dataList" :key="index" class="suidao-item">
+                          <span>{{ item.monName }}</span>
+                          <span>{{ item.monDate }}</span>
+                          <span>{{ item.monNumber }}</span>
+                        </dd>
+                      </div>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+</template>
+
+<script>
+import { getList } from "@/api/avoidanceSys/suidao";
+export default {
+  props: {
+    dataList: {
+      type: Array,
+      default: () => [{ name: "测试1:", y: 6.3 }],
+    },
+    colors: {
+      type: Array,
+      default: () => [
+        "#27BAFF",
+        "#EEE485",
+        "#25D8A9",
+        "#008ADD",
+        "#25D8A9",
+        "#EEE485",
+        "#27BAFF",
+        "#008ADD",
+      ],
+    },
+  },
+  data() {
+    return {
+      dataList: [],
+           // 应急预案
+           interval4yuan: null,
+      scrollPosition4yuan: 0,
+      direction4yuan: 1, // 1 for down, -1 for up
+      step4yuan: 1, // 每次滚动的像素
+      intervalTime4yuan: 40, // 每次滚动的时间间隔（ms）
+    };
+  },
+
+  watch: {},
+  created() {},
+  mounted() {
+    this.getList();
+    this.startScrolling(
+          ".bottom-suidao .list-wrap",
+          ".bottom-suidao .list-content",
+          "suidao"
+        );
+  },
+
+  methods: {
+     /** 查询应急预案信息列表 */
+     getList() {
+      getList({
+        pageNum: 1,
+        pageSize: 99999,
+      }).then((response) => {
+        this.dataList = response.rows;
+        this.startScrolling(
+          ".bottom-suidao .list-wrap",
+          ".bottom-suidao .list-content",
+          "suidao"
+        );
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.abs-full {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  &.title2 {
+    height: 3.81rem;
+    width: 4.76rem;
+    background: no-repeat center center
+      url("~@/assets/images/dpNew2/title2.png");
+    background-size: 100% 100%;
+  }
+  background: linear-gradient(
+    to right,
+    rgba(0, 60, 144, 0.9),
+    /* #003c90 - 90% 不透明度 */ rgba(0, 44, 106, 0.7)
+      /* #002c6a - 70% 不透明度 */
+  );
+
+  .chart {
+    position: relative;
+  }
+}
+.m-tt {
+  height: 0.48rem;
+  width: 100%;
+
+  position: absolute;
+  top: 0.07rem;
+  left: 0.2rem;
+  h4 {
+    height: 100%;
+    line-height: 0.48rem;
+    margin: 0;
+    font-size: 0.22rem;
+    letter-spacing: 0.01rem;
+    padding-left: 0.4rem;
+    font-family: Source Han Sans SC;
+    font-weight: bold;
+    color: #ffffff;
+    text-shadow: 0px 3px 8px rgba(19, 80, 113, 0.48);
+    background: linear-gradient(180deg, #ffffff 54.00390625%, #28caff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    //background-image:linear-gradient(to bottom,#fff,#f3fffc,#e4fff9);
+    //-webkit-background-clip:text;-webkit-text-fill-color:transparent;
+  }
+}
+
+.m-body {
+  display: flex;
+  flex-direction: column;
+  padding: 0.2rem;
+  padding-top: 0.5rem;
+  .bottom {
+    height: 2.8rem;
+    overflow: hidden;
+    margin-top: 0.16rem;
+    .scrolling1 {
+      min-height: 2.55rem;
+      max-height: 2.55rem;
+      overflow-y: auto;
+      border-radius: 4px 4px 0px 0px;
+      border: 1px solid #0aabff;
+      dt {
+        height: 0.42rem;
+        line-height: 0.42rem;
+        color: #0adfff;
+        display: grid;
+        font-family: PingFang SC;
+        font-weight: 500;
+        font-size: 0.18rem;
+        text-align: center;
+        
+        border-radius: 4px 4px 0px 0px;
+        border: 1px solid #0aabff;
+        // opacity: 0.5;
+      }
+      dd {
+        height: 0.4rem;
+        margin-left: 0;
+        color: #d3dfeb;
+        margin-right: 0px;
+        display: grid;
+        text-align: center;
+        font-size: 0.14rem;
+        align-items: center;
+        border-bottom: 0.01rem solid #1f77c2;
+      }
+    }
+  }
+  .bottom-suidao {
+    height: 3rem;
+    .scrolling1 {
+      .list-wrap {
+        position: relative;
+        height: 2.4rem;
+        overflow: hidden;
+        // margin-top: 0.4rem;
+      }
+      .list-content {
+        position: absolute; /* 绝对定位 */
+        transition: transform 0.2s ease; /* 添加平滑过渡 */
+        // top: 0.4rem;
+      }
+    }
+  }
+  .bottom-suidao {
+    min-height: 3.26rem;
+    max-height: 3.26rem;
+    .scrolling1 {
+      position: relative;
+      overflow: hidden;
+      border: none;
+      min-height: 2.8rem;
+      max-height: 2.8rem;
+      dt {
+        position: absolute;
+        z-index: 1;
+        border: none;
+        padding-left: 0.45rem;
+        margin-top: -0.1rem;
+        grid-template-columns: 1.5rem 1.5rem 0.9rem;
+      }
+      .list-content {
+        position: absolute; /* 绝对定位 */
+        transition: transform 0.2s ease; /* 添加平滑过渡 */
+        top: 0.4rem;
+      }
+      dd {
+        background-image: url("~@/assets/images/dpNew2/bg1.png");
+        background-size: cover;
+        padding-left: 0.45rem;
+        position: relative;
+        grid-template-columns: 1.5rem 1.5rem 0.9rem;
+        margin-bottom: 0.1rem;
+        height: 0.57rem;
+        border: none;
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0.1rem;
+          left: 0.25rem;
+          width: 0.36rem;
+          height: 0.3rem;
+          background-image: url("~@/assets/images/dpNew2/emergencyIcon.png");
+          background-repeat: no-repeat;
+          background-size: cover;
+        }
+      }
+    }
+  }
+}
+
+// 滚动条样式优化
+.scrolling1::-webkit-scrollbar {
+  width: 0.06rem;
+  height: 0.08rem;
+  cursor: pointer;
+}
+
+.scrolling1::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  margin-right: 10px;
+  cursor: pointer;
+  background-color: rgba(23, 121, 230, 0.7);
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(31, 181, 219, 0.7) 25%,
+    transparent 0,
+    transparent 50%,
+    rgba(31, 181, 219, 0.7) 0,
+    rgba(31, 181, 219, 0.7) 75%,
+    transparent 0,
+    transparent
+  );
+}
+
+.scrolling1::-webkit-scrollbar-thumb:hover {
+  background-color: #1854e8;
+}
+
+.scrolling1::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background: hsla(0, 0%, 100%, 0.1);
+  margin-right: 10px;
+}
+</style>
\ No newline at end of file

src/views/bigscreen copy.vue

+<template>
+  <div class="screen">
+    <div class="outer">
+      <!-- <div class="header"><p class="title">山西华远陆港平台</p></div> -->
+      <div class="content">
+        <div class="map">
+          <div class="sys-tit">
+            <span @click="toOtherSys(1)">边坡监测</span>
+            <span @click="toOtherSys(2)">桥梁监测</span>
+            <span @click="toOtherSys(3)">隧道监测</span>
+            <span @click="toOtherSys(4)">AI分析</span>
+          </div>
+          <div id="A_Map" class="amap"></div>
+          <div class="bg"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+qf.openCalcLayout({dpr:1});
+import { getToken } from "@/utils/auth";
+export default {
+  name: "screen",
+  data() {
+    return {
+      previewUrl: process.env.VUE_APP_BASE_API,
+      aMap:null,
+      headers: { Authorization: "Bearer " + getToken() },
+    }
+  },
+  created(){
+    this.$nextTick(()=>{
+      this.amapInfor()
+    })
+  },
+  methods: {
+    amapInfor() {
+      let that = this;
+      // 初始化地图
+      this.aMap = new AMap.Map("A_Map", {
+        zooms: [3, 20],
+        center: [112.413542,38.019073],
+        zoom: 9.6,
+        layers: [
+          new AMap.TileLayer.Satellite(),
+     
+        ],
+      });
+   
+      that.aMap.on('complete', function () {
+        that.boundTaiyuan()
+      });
+    },
+    boundTaiyuan() {
+      let that = this;
+      const AMap = window.AMap || this.aMap;
+      const map = this.map || {};
+      AMap.plugin("AMap.DistrictSearch", function () {
+        var district = new AMap.DistrictSearch({
+          extensions: "all",
+          level: "city",  
+        });
+        district.search("太原", function (status, result) {
+          if (status === 'complete' && result && result.districtList) {
+            var bounds = result.districtList[0].boundaries;
+            const polygons = [];
+            if (bounds) {
+              for (let i = 0, l = bounds.length; i < l; i++) {
+                const polygon = new AMap.Polygon({
+                  map: that.aMap,
+                  path: bounds[i],
+                  strokeWeight: 3,
+                  fillOpacity: 0.8,
+                  fillColor: "transparent",
+                  strokeColor: "#00c0ff",
+                });
+                polygons.push(polygon);
+              }
+            }
+          } else {
+            console.error('查询失败:', status);
+          }
+        });
+        var district2 = new AMap.DistrictSearch({
+          extensions: "all",
+          level: "city",
+        });
+        district2.search("太原", function (status, result) {
+          const outer = [
+            new AMap.LngLat(-360, 90, true),
+            new AMap.LngLat(-360, -90, true),
+            new AMap.LngLat(360, -90, true),
+            new AMap.LngLat(360, 90, true),
+          ];
+          const holes = result.districtList[0].boundaries;
+          const pathArray = [outer];
+          pathArray.push.apply(pathArray, holes);
+          const polygon = new AMap.Polygon({
+            path: pathArray,
+            strokeColor: "#00c0ff",
+            strokeWeight: 3,
+            fillColor: "#001948",
+            fillOpacity: 0.8,
+          });
+          polygon.setPath(pathArray);
+          that.aMap.add(polygon);
+        });
+      });
+    },
+    getCookie(name) {
+      var matches = document.cookie.match(new RegExp(
+          "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$&') + "=([^;]*)"
+      ))
+      return matches ? decodeURIComponent(matches[1]) : undefined;
+    },
+    toOtherSys(val){//http://localhost:12100/ "Bearer " + getToken()
+      if(val===1){
+        var link = `http://bp.hylgzl.com/?Admin=${this.getCookie('Admin-Token')}`;
+        window.open(link, "_blank");
+        return;
+      }else if(val===2){
+        var link = `http://ql.hylgzl.com/}`;
+        window.open(link, "_blank");
+        return;
+      }else if(val===3){
+        var link = `http://sd.hylgzl.com/?Admin=${this.getCookie('Admin-Token')}`;
+        window.open(link, "_blank");
+        return;
+      }else if(val===4){
+        var link = `http://220.194.146.65:9045`;
+        window.open(link, "_blank");
+        return;
+      }
+      
+    }
+  },
+}
+</script>
+
+<!-- 地图 tab样式 -->
+<style scoped lang="scss">
+$headerHeight: 173px;
+.screen{
+  width: 100%;
+  height: 100%;
+  flex:1;
+  color:#fff;
+  background-color: #010532;
+  
+  .outer{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .header{
+      width: 100%;
+      height: $headerHeight;
+      position: absolute;
+      left:0;
+      top:0;
+      right: 0;
+      z-index: 10;
+      color:#fff;
+      text-align: center;
+      // background-image: url('../assets/images/bigscreen/title.png');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 100% 100%;
+      pointer-events: none;
+      .title{
+        margin: 0;
+        font-family: Source Han Sans SC;
+        font-weight: bold;
+        font-size: 44px;
+        color: #A2B1DB;
+        background: -webkit-gradient(linear, left bottom, left top, from(#00B4FF), to(#FAFEFF));
+        background: linear-gradient(0deg, #00B4FF -83%, #FAFEFF 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        pointer-events: all;
+        letter-spacing: .2em;
+        line-height: 76px;
+      }
+    }
+  }
+  .content{
+    width: 100%;
+   
+    position: absolute;
+    left:0;
+    top:0;
+    right: 0;
+    bottom:0;
+    z-index: 9;
+    
+    
+    .map{
+      width: 100%;
+    height:100vh;
+    position: relative;
+    
+      .sys-tit{
+        width: 50%;
+        height: 63px;
+        position: absolute;
+        top:100px;
+        left:24%;
+        right: 0;
+        z-index: 11;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        span{
+          width: 188px;
+          height: 63px;
+          font-size: 0.24rem;
+          color:#26D4FF;
+          background-image: url('../assets/images/bigscreen/button_normal.png');
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: 100% 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          &:hover{
+            color:#05F9FB;
+            background-image: url('../assets/images/bigscreen/button_click1.png');
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: 100% 100%;
+          }
+        }
+      }
+      .amap {
+        width: 100%;
+        height:100vh;
+        // background-color: unset !important;
+        ::v-deep .amap-icon img {
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: auto;
+        }
+      }
+      .bg{
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left:0;
+        right: 0;
+        bottom: 0;
+        z-index: 33;
+        // background-image: url('../assets/images/bigscreen/bg.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 100% 100%;
+        pointer-events: none;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/bigscreen.vue

@@ -22,7 +22,6 @@
           </div>
         </div>
       </div>
-      <!-- <div  id="A_Map" class="map-mask"></div> -->
     </div>
     <div class="b_0" v-show="showSreen">
       <section class="b0_" id="b0_">
@@ -35,7 +34,7 @@
             <!-- 应急预案结束 -->
             <!-- 应急演练 开始 -->
             <div class="a-md31" id="amd31">
-              <!-- <SuidaoMonitor/> -->
+              <SuidaoMonitor/>
             </div>
             <!-- 应急演练结束 -->
           </div>

vue.config.js

@@ -37,8 +37,8 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://192.168.3.226:8579`, 
-        // target: `http://192.168.2.16:8579`,
-        target: `http://182.92.170.89:10080`,
+        target: `http://192.168.2.16:9090`,
+        // target: `http://182.92.170.89:10080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''