更新大屏

马宇豪

2023-08-14 3b9b33c2b5ab555696e1012ed1e35446c8052786

更新大屏

 package.json

@@ -10,8 +10,9 @@
        "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
    },
    "dependencies": {
        "@amap/amap-jsapi-loader": "^1.0.1",
        "@element-plus/icons-vue": "^2.0.6",
        "@kjgl77/datav-vue3": "^1.2.1",
        "@kjgl77/datav-vue3": "^1.6.1",
        "@wangeditor/editor": "^5.1.14",
        "axios": "^0.27.2",
        "countup.js": "^2.2.0",
@@ -50,9 +51,11 @@
        "@typescript-eslint/parser": "^5.27.0",
        "@vitejs/plugin-vue": "^2.3.3",
        "@vue/compiler-sfc": "^3.2.36",
        "amfe-flexible": "^2.2.1",
        "dotenv": "^16.0.1",
        "eslint": "^8.17.0",
        "eslint-plugin-vue": "^9.1.0",
        "postcss-pxtorem": "^6.0.0",
        "prettier": "^2.6.2",
        "sass": "^1.52.2",
        "sass-loader": "^13.0.0",

 shim.d.ts

@@ -11,3 +11,4 @@
interface Window {
    nextLoading: boolean;
}
declare module 'postcss-pxtorem'

 src/App.vue

@@ -89,6 +89,7 @@
            // if(!Session.get('token')) return
            // initBackEndControlRoutes()
        });

        // 页面销毁时，关闭监听布局配置/i18n监听
        onUnmounted(() => {
            proxy.mittBus.off('openSetingsDrawer', () => {});

 src/assets/companyLogo.png

Binary files differ

 src/assets/loginPage/panel-bg.png

 src/assets/loginPage/panel-bg2.png

 src/assets/loginPage/rollingBall.gif

 src/assets/loginPage/starFalls.gif

 src/assets/menu/bg_home.jpg

Binary files differ

 src/assets/menu/bg_home1.jpg

Binary files differ

 src/assets/menu/card1.png

Binary files differ

 src/assets/menu/card10.png

Binary files differ

 src/assets/menu/card11.png

Binary files differ

 src/assets/menu/card2.png

Binary files differ

 src/assets/menu/card3.png

Binary files differ

 src/assets/menu/card4.png

Binary files differ

 src/assets/menu/card5.png

Binary files differ

 src/assets/menu/card6.png

Binary files differ

 src/assets/menu/card7.png

Binary files differ

 src/assets/menu/card8.png

Binary files differ

 src/assets/menu/card9.png

Binary files differ

 src/assets/menu/company.png

 src/assets/menu/companyLogo.png

Binary files differ

 src/assets/menu/icon1.png

Binary files differ

 src/assets/menu/icon10.png

Binary files differ

 src/assets/menu/icon11.png

Binary files differ

 src/assets/menu/icon2.png

Binary files differ

 src/assets/menu/icon3.png

Binary files differ

 src/assets/menu/icon4.png

Binary files differ

 src/assets/menu/icon5.png

Binary files differ

 src/assets/menu/icon6.png

Binary files differ

 src/assets/menu/icon7.png

Binary files differ

 src/assets/menu/icon8.png

Binary files differ

 src/assets/menu/icon9.png

Binary files differ

 src/assets/newMenu/card-1.png

Binary files differ

 src/assets/newMenu/card-10.png

Binary files differ

 src/assets/newMenu/card-11.png

Binary files differ

 src/assets/newMenu/card-2.png

Binary files differ

 src/assets/newMenu/card-3.png

Binary files differ

 src/assets/newMenu/card-4.png

Binary files differ

 src/assets/newMenu/card-5.png

Binary files differ

 src/assets/newMenu/card-6.png

Binary files differ

 src/assets/newMenu/card-7.png

Binary files differ

 src/assets/newMenu/card-8.png

Binary files differ

 src/assets/newMenu/card-9.png

Binary files differ

 src/assets/newMenu/icon1.png

Binary files differ

 src/assets/newMenu/icon10.png

Binary files differ

 src/assets/newMenu/icon11.png

Binary files differ

 src/assets/newMenu/icon2.png

Binary files differ

 src/assets/newMenu/icon3.png

Binary files differ

 src/assets/newMenu/icon4.png

Binary files differ

 src/assets/newMenu/icon5.png

Binary files differ

 src/assets/newMenu/icon6.png

Binary files differ

 src/assets/newMenu/icon7.png

Binary files differ

 src/assets/newMenu/icon8.png

Binary files differ

 src/assets/newMenu/icon9.png

Binary files differ

 src/assets/newMenu/leftbg.jpg

Binary files differ

 src/assets/newMenu/leftbg.png

Binary files differ

 src/assets/newMenu/pic_line1.png

Binary files differ

 src/assets/newMenu/pic_line2.png

Binary files differ

 src/assets/newMenu/topbg.jpg

Binary files differ

 src/assets/newMenu/toplogo.png

Binary files differ

 src/assets/warningScreen/body-bg.png

 src/assets/warningScreen/chart-bg.png

 src/assets/warningScreen/chart-bg2.png

 src/assets/warningScreen/chart-bg3.png

 src/assets/warningScreen/chart-bg4.png

 src/assets/warningScreen/data-1.png

 src/assets/warningScreen/data-2.png

 src/assets/warningScreen/data-3.png

 src/assets/warningScreen/data-4.png

 src/assets/warningScreen/data-5.png

 src/assets/warningScreen/data-6.png

 src/assets/warningScreen/data.gif

 src/assets/warningScreen/logo_dark.png

Binary files differ

 src/assets/warningScreen/scroll-bg.png

 src/layout/navBars/breadcrumb/user.vue

@@ -1,9 +1,7 @@
<template>
    <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
        <div class="logo">
<!--            <img @click="toHome" src="../../../assets/menu/company.png" />-->
            <img src="../../../assets/menu/company.png" />
<!--            <span>{{ systemName }}</span>-->
        </div>
        <div style="display: flex; align-items: center; padding-right: 5px">
<!--            <div @click="backToMenu()" class="backBtn">返回首页</div>-->
@@ -120,8 +118,7 @@
        const state = reactive({
            isScreenfull: false,
            disabledI18n: 'zh-cn',
            disabledSize: 'large',
            systemName: ''
            disabledSize: 'large'
        });
        // 设置分割样式
        const layoutUserFlexNum = computed(() => {
@@ -251,23 +248,6 @@
                    break;
            }
        };

        const getSysName = async () => {
            if (window.nextLoading === undefined) NextLoading.start();
            if (!Cookies.get('token')) return false;
            const res = await menuApi.getMenuAdmin(Cookies.get('projectId') === null ? '' : Cookies.get('projectId'));
            if (res.data.code === '200') {
                state.systemName = res.data.data[1].project.projectName;
            } else {
                console.log('有问题');
            }
        };
        // const backToMenu = () => {
        //     router.push({ path: 'newMenu' }).then(()=>{
        //         routeList.routesList.value = []
        //         console.log(routeList);
        //     });
        // };
        const toHome = () => {
            router.push({ path: 'newMenu' });
        };
@@ -277,7 +257,6 @@
                initI18n();
                initComponentSize();
            }
            getSysName();
        });
        return {
            userInfos,
@@ -379,8 +358,8 @@
        justify-content: space-between;

        .logo {
            height: 75%;
            padding: 5px 10px;
            width: 531px;
            height: 60px;
            display: flex;
            align-items: center;
            overflow: hidden;

 src/router/route.ts

@@ -70,5 +70,21 @@
        meta: {
            title: '登录'
        }
    },
    {
        path: '/fullScreen',
        name: 'fullScreen',
        component: () => import('/@/views/bigScreen/fullScreen/index.vue'),
        meta: {
            title: '全屏'
        }
    },
    {
        path: '/bigScreen',
        name: 'bigScreen',
        component: () => import('/@/views/bigScreen/index.vue'),
        meta: {
            title: '全屏'
        }
    }
];

 src/views/bigScreen/components/screen.vue

对比新文件
@@ -0,0 +1,1049 @@
<template>
    <div class="charts-container">
      <div class="header-content">
        <div class="title-left">
<!--          <img src="../../../assets/warningScreen/logo_dark.png" alt="" />-->
          <div class="datetime">
            <div class="timel">{{time}}</div>
            <div class="timer">
              <div>{{date}}</div>
              <div>{{weekDay}}</div>
            </div>
          </div>
        </div>
        <div class="title"><span>广域特殊气体泄漏在线监测预警系统</span></div>
        <div class="title-right">
          <div class="btns">
            <div class="fullBtn" v-if="!isFull" @click="toFull()">
              <el-icon><FullScreen /></el-icon>
              <div>全屏</div>
            </div>
            <div class="backBtn" @click="back()" v-else>
              <el-icon><SwitchButton /></el-icon>
              <div>退出</div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-content">
        <div id="bigMap"></div>
        <div class="main-left">
          <div class="left-top withFilter">
            <div class="chart-head">
              <div class="chart-tit">预警汇总</div>
              <el-radio-group v-model="chart1Search">
                <el-radio :label="1" size="small" border>当日</el-radio>
                <el-radio :label="2" size="small" border>近7天</el-radio>
                <el-radio :label="3" size="small" border>近30天</el-radio>
                <el-radio :label="4" size="small" border>当年</el-radio>
              </el-radio-group>
            </div>
            <div class="chart-cont">
              <div class="orange">
                <div><span>30</span><span>橙色预警</span></div>
              </div>
              <div class="red">
                <div><span>10</span><span>红色预警</span></div>
              </div>
            </div>
          </div>
          <div class="left-mid withFilter">
            <div class="chart-head">
              <div class="chart-tit">预警信息</div>
              <el-date-picker
                  v-model="chart2Search"
                  size="small"
                  :teleported="false"
                  type="daterange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              />
            </div>
            <div class="chart-cont">
              <dv-scroll-board :config="config" class="scroll-table" @mouseover="mouseoverHandler" @click="clickHandler" />
            </div>
          </div>
          <div class="left-bottom withFilter">
            <div class="chart-head">
              <div class="chart-tit">设备状态</div>
              <div class="sys-status">
                  <Cpu style="width: 1.2em; height: 1.2em; color: #fff" />
                  <div>系统状态:<span>正常</span></div>
              </div>
            </div>
            <div class="chart-cont">
              <div class="online">
                <dv-decoration-9 :color="['#22aaff','rgba(34,170,255,.6)']">
                  <div color-green font-600 class="isOnline" bg="~ dark/0">
                    0
                  </div>
                </dv-decoration-9>
                <div>在线</div>
              </div>
              <div class="online">
                <dv-decoration-9 :color="['#ee594a','rgba(238,89,74,.6)']">
                  <div color-red font-600 class="isOnline red-font" bg="~ dark/0">
                    1
                  </div>
                </dv-decoration-9>
                <div style="color:#ee594a;">离线</div>
              </div>
            </div>
          </div>
        </div>
        <div class="main-middle">
          <div class="mid-bottom">
            <div class="chart-head">
              <div class="chart-tit">气象信息</div>
            </div>
            <div class="chart-cont bigData">
              <div class="bigPic">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
              <dv-scroll-board :config="bigConfig" class="scroll-table" @mouseover="mouseoverHandler" @click="clickHandler" />
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="right-top withFilterLong">
            <div class="chart-head">
              <div class="chart-tit long-tit">气体浓度监测</div>
              <el-select v-model="gasSearch" :teleported="false" class="m-2" placeholder="Select" size="small">
                <el-option
                    v-for="item in gasOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </div>
            <div class="chart-cont">
              <div class="echart" :id="gasN"></div>
            </div>
          </div>
          <div class="right-mid withFilterLong">
            <div class="chart-head">
              <div class="chart-tit long-tit">气体通量监测</div>
              <div class="searchGroup">
                <el-select v-model="searchParams.gasSearch" :teleported="false" class="m-2" placeholder="Select" size="small">
                  <el-option
                      v-for="item in gasOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
                <el-select v-model="searchParams.areaSearch" :teleported="false" class="m-2" placeholder="Select" size="small">
                  <el-option
                      v-for="item in areaOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="chart-cont">
              <div class="echart" :id="gasT"></div>
            </div>
          </div>
          <div class="right-bottom withoutFilter">
            <div class="chart-head">
              <div class="chart-tit long-tit">实时数据量</div>
            </div>
            <div class="chart-cont">
              <div class="online">
                <div class="totalNum"><span>1048</span>条</div>
                <div class="dataPic"></div>
                <div class="totalNum">浓度条数</div>
              </div>
              <div class="online">
                <div class="totalNum"><span>566</span>条</div>
                <div class="dataPic"></div>
                <div class="totalNum">通量条数</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, onUnmounted} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter} from "vue-router";
import * as echarts from "echarts";
import "amfe-flexible";
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
// 定义接口来定义对象的类型
interface TableDataState {
  time: string
  date: string
  weekDay: string
  dayTime:string
  isFull: boolean
  chart1Search: number | null
  chart2Search: Array<string>
  gasSearch: number | null
  gasOptions: Array<gasType>
  searchParams: Object
  areaOptions: Array<gasType>
}

interface gasType {
  label: string
  value: number | null
}

export default defineComponent({
    name: 'bigScreen',
    components: {  },
    props:{
      isFull: Boolean
    },
    setup(props,context) {
        const state = reactive<TableDataState>({
          time: '',
          date: '',
          weekDay: '',
          dayTime: '',
          isFull: props.isFull,
          chart1Search: 1,
          chart2Search: [],
          gasSearch: 1,
          gasOptions: [
            {
              label: '气体一',
              value: 1
            },
            {
              label: '气体二',
              value: 2
            },
            {
              label: '气体三',
              value: 3
            }
          ],
          searchParams:{
            gasSearch: 1,
            areaSearch: 1
          },
          areaOptions: [
            {
              label: '区域一',
              value: 1
            },
            {
              label: '区域二',
              value: 2
            },
            {
              label: '区域三',
              value: 3
            }
          ]
        });
        const router = useRouter();
        const gasN = ref("eChartgasN" + Date.now() + Math.random())
        const gasT = ref("eChartgasT" + Date.now() + Math.random())
        const timeForm = {
          hour12: false,
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
        };

        // 页面加载时
        onMounted(() => {
          const baseSize = 38;
          function setRem() {
            const scale = document.documentElement.clientWidth / 1920;/* 当前页面宽度缩放比例，可根据自己需要修改 */
            document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
          }

          setRem();

          window.onresize = () => {
            setRem();/* 改变窗口大小时重新设置 rem */
          }
          getDateTime();
          setInterval(() => {
            getDateTime();
          }, 1000);
          initgasN()
          initgasT()
          initMap()
        });

        const config = reactive({
          header: ['预警级别','气体名称', '气体浓度', '时间'],
          data: [
            ['红色预警', '甲烷', '19', '2023-08-10'],
            ['<span style="color:red;">红色预警</span>', '甲烷', '19', '2023-08-10'],
            ['红色预警', '甲烷', '19', '2023-08-10'],
            ['红色预警', '甲烷', '19', '2023-08-10'],
            ['红色预警', '甲烷', '19', '2023-08-10'],
            ['红色预警', '甲烷', '19', '2023-08-10']
          ],
          index: true,
          columnWidth: [38],
          align: ['center','center','center','center','center'],
          headerBGC: '',
          oddRowBGC: '',
          evenRowBGC: ''
        })

        const bigConfig = reactive({
          header: ['时间','温度', '湿度', '风速', '风向', '气压'],
          data: [
            ['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20']
          ],
          align: ['center','center','center','center','center','center'],
          headerBGC: '',
          oddRowBGC: '',
          evenRowBGC: '',
          rowNum: 3
        })

        const mouseoverHandler = (e: any) => {
          console.log(e)
        }

        const clickHandler = (e: any) => {
          console.log(e)
        }

      type EChartsOption = echarts.EChartsOption
      const initgasN =()=>{
        let dom = document.getElementById(gasN.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
        option = {
          xAxis: {
            type: 'category',
            data: ['10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30'],
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            axisLine:{
              show: true
            },
            splitLine: {
              show: false
            },
            axisLabel:{
              color: '#ccc'
            }
          },
          grid: {
            top: '5%',
            bottom: '10%',
            right: '0%'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
              type: 'line',
              // label:{
              //   show: true,
              //   color: '#fff',
              //   textBorderColor: 'transparent'
              // },
              lineStyle:{
                color: '#54d5ff'
              },
              itemStyle:{
                color: '#54d5ff',
              },
              areaStyle:{
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#2af' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(255,255,255,.1)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            }
          ]
        }

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      }
      const initgasT =()=>{
        let dom = document.getElementById(gasT.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30'],
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            splitLine: {
              show: false
            },
            axisLabel:{
              color: '#ccc'
            }
          },
          series: [
            {
              name: '2011',
              type: 'bar',
              data: [18, 23, 29, 10, 13, 6],
              label:{
                show: true,
                color: '#fff',
                textBorderColor: 'transparent'
              }
            },
            {
              name: '2012',
              type: 'bar',
              data: [19, 23, 31, 12, 13, 6],
              label:{
                show: true,
                color: '#fff',
                textBorderColor: 'transparent'
              }
            }
          ]
        }

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      }

      const map = shallowRef(null)
      const initMap=()=> {
        let m = map.value
        window._AMapSecurityConfig = {
          securityJsCode: "456045075984862a9806587f0d7fee3c",
        };
        AMapLoader.load({
          key: '5dbeedfa28e0d7fffb59684446569773', // 申请好的Web端开发者Key，首次调用 load 时必填
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
            .then(AMap => {
              if (AMap && typeof AMap.Map === 'function') {
                m = new AMap.Map('bigMap', {
                  viewMode: '2D',
                  mapStyle: 'amap://styles/normal',
                  zoom: 18,
                  center: [85.057805, 45.62550],
                  // layers:[
                  //   new AMap.TileLayer.RoadNet({}),
                  //   new AMap.TileLayer.Satellite()
                  // ],
                  zooms:[2,20],
                })

                AMap.plugin(["AMap.DistrictSearch","AMap.ToolBar","AMap.ControlBar"],()=> {
                  var district = new AMap.DistrictSearch({
                    extensions: "all",
                    subdistrict: 0,
                    level: "district",
                  });
                  district.search("克拉玛依市", function (status, result) {
                    //   // 外多边形坐标数组和内多边形坐标数组
                    var 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),
                    ]; // 使得遮盖填充反向
                    var holes = result.districtList[0].boundaries; // 得到该区域的边界坐标集合

                    var pathArray = [outer];
                    pathArray.push.apply(pathArray, holes);
                    var polygon = new AMap.Polygon({
                      pathL: pathArray,
                      //线条颜色，使用16进制颜色代码赋值。默认值为#006600
                      strokeColor: "#11feee",
                      strokeWeight: 3,
                      fillColor: "#051342",
                      fillOpacity: 1,
                      strokeStyle: "solid",
                      strokeDasharray: [2, 2],
                    });
                    polygon.setPath(pathArray)
                    m.add(polygon);
                  })
                  m.addControl(new AMap.ToolBar({
                    position: {
                      top: '20px',
                      left: 'calc(25% + 5px)'
                    }
                  }))
                  m.addControl(new AMap.ControlBar({
                    position: {
                      top: '20px',
                      right: 'calc(25% + 5px)'
                    }
                  }))
                })

              } else {
                console.error('AMap 或 AMap.Map 不可用');
              }
            })
            .catch(e => {
              console.log('加载高德地图时出错：', e)
            })
      }
      // 当前时间
      const getDateTime = () => {
        const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
        state.time = curTime.slice(10, 19);
        state.date = curTime.slice(0, 10);
        let week = ['日', '一', '二', '三', '四', '五', '六'];
        let day = new Date().getDay();
        state.weekDay = '星期' + week[day];
        let curHour = Number(curTime.slice(10, 13));
        if (curHour >= 5 && curHour <= 10) {
          state.dayTime = '上午';
        }
        if (curHour > 10 && curHour <= 12) {
          state.dayTime = '中午';
        }
        if (curHour > 12 && curHour <= 18) {
          state.dayTime = '下午';
        }
        if (curHour > 18 && curHour <= 22) {
          state.dayTime = '晚上';
        }
        if (curHour > 22) {
          state.dayTime = '午夜';
        }
      }
        const toFull= ()=>{
          router.push({
            path:"/fullScreen"
          })
          context.emit('clickFull')
        }
        const back=()=>{
          window.history.go(-1);
          context.emit('clickFull')
        }

        onUnmounted(()=>{
          map.value && map.value.destroy();
        })

        return {
          timeForm,
          config,
          bigConfig,
          gasN,
          gasT,
          map,
          mouseoverHandler,
          clickHandler,
          toFull,
          back,
          ...toRefs(state)
        };
    }
});
</script>
<style lang="scss" scoped>
.charts-container{
  width: 100%;
  height: 100%;
  background: url("../../../assets/warningScreen/body-bg.png") no-repeat center;
  background-size: 100% 100%;
}
.header-content {
  width: 100%;
  height: 10%;
  padding: 0 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 9;

  .title-left {
    width: 27%;
    height: 50%;
    display: flex;
    align-items: center;
    .datetime{
      display: flex;
      align-items: center;
      color: #11feee;

      .timel{
        font-size: 30px;
        margin-right: 10px;
      }
      .timer{
        font-size: 12px;
      }
    }
  }
  .title {
    width: 46%;
    height: 100%;
    font-size: 28px;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 10px;
    color: #11feee;
  }

  .title-right {
    width: 27%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 14px;

    .btns{
      display: flex;
      align-items: center;
      top: 3%;
      right: 10%;

      .backBtn,.fullBtn{
        display: flex;
        color: #11feee;
        align-items: center;
        cursor: pointer;

        &>div{
          margin-left: 6px;
        }
      }
    }
  }
}
.main-content{
  width: 100%;
  height: 90%;
  padding: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;

  &>div{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    &>div{
      padding: 0 4px;
      box-sizing: border-box;
      .chart-head{
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .chart-tit{
          width: 34%;
          padding-left: 15px;
          letter-spacing: 4px;
          font-size: 16px;
          font-weight: bolder;
          line-height: 34px;
          color: #11feee;
        }
        .long-tit{
          width: 40%;
        }
        .el-select{
          width: 60%;
          height: 20px;
        }
        ::v-deep(.el-popper){
          background-color: rgba(10,31,92,1);
          border: 1px solid rgba(17,254,238,.4);
          color: #11FEEE;

          .el-icon{
            color: #11FEEE;
          }
          .el-select-dropdown__item{
            color: #11FEEE;
          }
          .el-select-dropdown__item.hover{
            background: #0049af;
          }
        }
        ::v-deep(.el-popper__arrow){
          &::before{
            background-color: rgba(10,31,92,.6) !important;
            border: 1px solid rgba(17,254,238,.4);
          }
        }

        .sys-status{
          width: 66%;
          height: 70%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          div{
            color: #fff;
            margin-left: 2px;
            span{
              color: #11feee;
              margin-left: 10px;
              font-size: 14px;
            }
          }
        }

        .el-radio-group{
          height: 90%;
          width: 66%;
          flex-flow: row nowrap;
          display: flex;
          align-items: center;
          justify-content: right;
          .el-radio{
            width: calc((100% - 6px)/4);
            margin-right: 0;
            margin-left: 2px;
            margin-bottom: 0;
            text-align: center;
            border-color: #ccc;
            &.el-radio--small{
              height: 20px;
            }
            :deep(.el-radio__inner){
              display: none;
            }
            :deep(.el-radio__label){
              width: 100%;
              padding-left: 0;
              font-size: 10px;
              color: #ccc;
            }
          }
          .el-radio.is-bordered.is-checked{
            border-color: #11FEEE;
            background: #005dd6;
            box-shadow: 0 3px 8px rgba(0,0,0,.2);

            :deep(.el-radio__label){
              color: #fff;
            }
          }
        }
        :deep(.el-date-editor){
          width: 66%;
          height: 20px;
          .el-range-separator{
            color: #fff;
          }
        }

        :deep(.el-input__wrapper){
          box-shadow: none;
          border: 1px solid #11FEEE;
          background: #005dd6;
          color: #fff;

          input{
            font-size: 10px;
            color: #fff;
          }
          .el-icon{
            display: none;
            color: #fff;
          }
        }

        .searchGroup{
          width: 60%;
          height: 20px;
          display: flex;
          align-items: center;
        }
      }
      .chart-cont{
        height: calc(100% - 40px);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 15px;

        .orange,.red{
          width: 140px;
          height: 140px;
          border-radius: 50%;
          border: 2px solid #ffb74b;
          padding: 8px;
          div{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #ffb74b;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 14px;
            span:first-of-type{
              font-size: 28px;
              font-weight: bolder;
              margin-bottom: 4px;
            }
          }
        }
        .red{
          border: 2px solid #ee594a;
          div{
            background: #ee594a;
          }
        }
        :deep(.dv-scroll-board){
          width: 100%;
          height: 90%;
          .header{
            font-size: 12px;
            color: #11feee;
          }
          .rows{
            .row-item{
              border-bottom: 1px dashed rgba(255,255,255,.2);
              font-size: 12px;
            }
          }
        }
        .online{
          width: 50%;
          padding: 0 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .dv-decoration-9{
            width: 120px;
            height: 120px;
            .isOnline{
              font-size: 36px;
              font-family: "PingFang SC";
              font-weight: 600;
              color: #2af;
              text-shadow: 0 1px 3px #2af;
            }
            .red-font{
              color: red;
              text-shadow: 0 1px 3px red;
            }
          }
          &>div{
            color: #2af;
            margin-top: 10px;
          }
          .totalNum{
            color: #ccc;
            span{
              font-size: 18px;
              color: #11feee;
              margin-right: 10px;
            }
          }
          .dataPic{
            width: 100%;
            height: 100px;
            background: url("../../../assets/warningScreen/data.gif") no-repeat center;
            background-size: 100% 100%;
          }
        }
        .echart{
          width: 100%;
          height: 80%;
        }
      }

      .bigData{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        .bigPic{
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          div{
            width: 50px;
            height: 50px;
            background: url("../../../assets/warningScreen/data-1.png") no-repeat center;
            background-size: 90% 90%;
          }
          div:nth-of-type(2){
            background: url("../../../assets/warningScreen/data-2.png") no-repeat center;
            background-size: 90% 90%;
          }
          div:nth-of-type(3){
            background: url("../../../assets/warningScreen/data-3.png") no-repeat center;
            background-size: 90% 90%;
          }
          div:nth-of-type(4){
            background: url("../../../assets/warningScreen/data-4.png") no-repeat center;
            background-size: 90% 90%;
          }
          div:nth-of-type(5){
            background: url("../../../assets/warningScreen/data-5.png") no-repeat center;
            background-size: 90% 90%;
          }
          div:nth-of-type(6){
            background: url("../../../assets/warningScreen/data-6.png") no-repeat center;
            background-size: 90% 90%;
          }
        }

        :deep(.dv-scroll-board){
          width: 100%;
          height: calc(100% - 60px);
          .header{
            color: #11feee;
          }
          .rows{
            background: url("../../../assets/warningScreen/scroll-bg.png") no-repeat center;
            background-size: 100% 100%;
            padding: 6px 0 0;
            .row-item{
              border-bottom: none;
            }
          }
        }
      }
    }
  }

  #bigMap{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    :deep(.amap-logo){
      display: none!important;
      visibility: hidden!important;
    }

    :deep(.amap-copyright) {
      display: none!important;
      visibility: hidden!important;
    }
  }

  .main-left{
    z-index: 9;
    width: calc(25% - 5px);
    &>div{
      width: 100%;
      height: calc((100%/3) - (20px/3));
    }
    .withFilter{
      background: url("../../../assets/warningScreen/chart-bg2.png") no-repeat center;
      background-size: 100% 100%;
    }
    .withoutFilter{
      background: url("../../../assets/warningScreen/chart-bg.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
  .main-middle{
    width: calc(50% - 10px);
    height: calc((100%/3) - (20px/3));
    z-index: 9;

    .mid-bottom{
      width: 100%;
      height: 100%;
      background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
  .main-right{
    width: calc(25% - 5px);
    z-index: 9;
    &>div{
      width: 100%;
      height: calc((100%/3) - (20px/3));
    }
    .withFilter{
      background: url("../../../assets/warningScreen/chart-bg2.png") no-repeat center;
      background-size: 100% 100%;
    }
    .withFilterLong{
      background: url("../../../assets/warningScreen/chart-bg3.png") no-repeat center;
      background-size: 100% 100%;
    }
    .withoutFilter{
      background: url("../../../assets/warningScreen/chart-bg.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
}
</style>

 src/views/bigScreen/fullScreen/index.vue

对比新文件
@@ -0,0 +1,46 @@
<template>
    <div class="screen-container">
      <screen :isFull="isScreenfull" @clickFull="clickFullscreen"></screen>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import screen from '../components/screen.vue'
import screenfull from 'screenfull'
import { ElMessage, ElMessageBox } from 'element-plus';

// 定义接口来定义对象的类型
interface TableDataState {
  isScreenfull: boolean
}

export default defineComponent({
    name: 'fullScreen',
    components: {screen},
    setup() {
        const state = reactive<TableDataState>({
          isScreenfull: true,
        });

        // 页面加载时
        onMounted(() => {

        });

      const clickFullscreen =() => {

      }

      return {
          clickFullscreen,
          ...toRefs(state)
        };
    }
});
</script>
<style lang="scss" scoped>
.screen-container{
  height: 100vh;
}
</style>

 src/views/bigScreen/index.vue

@@ -1,39 +1,50 @@
<template>
    <div class="system-role-container">
      6666666
    <div class="screen-container">
      <screen :isFull="isScreenfull" @clickFull="clickFullscreen"></screen>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import screen from './components/screen.vue'
import screenfull from 'screenfull'
import { ElMessage, ElMessageBox } from 'element-plus';

// 定义接口来定义对象的类型
interface TableData {

}
interface TableDataState {

  isScreenfull: boolean
}

export default defineComponent({
    name: 'bigScreen',
    components: {  },
    components: { screen },
    setup() {
        const roleDialogRef = ref();
        const state = reactive<TableDataState>({

          isScreenfull: false,
        });

        // 页面加载时
        onMounted(() => {

        });
        return {
            ...toRefs(state)

      const clickFullscreen =() => {
        if(!screenfull.isEnabled){
          ElMessage.error('浏览器不支持')
          return false
        }
        screenfull.toggle();
      }

      return {
          clickFullscreen,
          ...toRefs(state)
        };
    }
});
</script>
<style lang="scss" scoped>

.screen-container{
  height: calc(100vh - 144px);
}
</style>

 src/views/loginPage/component/accountLogin.vue

@@ -1,14 +1,14 @@
<template>
    <el-form size="large" class="login-content-form">
        <el-form-item class="login-animation1">
            <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.name" clearable autocomplete="off" size="large">
            <el-input type="text" placeholder="请输入用户名" v-model="ruleForm.name" clearable autocomplete="off" size="large">
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px; height: 24px" /></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation2">
            <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
            <el-input :type="isShowPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px" /></el-icon>
                </template>
@@ -84,7 +84,7 @@
import { useLoginApi } from '/@/api/login';
import { useUserInfo } from '/@/stores/userInfo';
import type { FormInstance, FormRules } from 'element-plus'

import "amfe-flexible";
import {verifyPhone,verifyIdCard} from "/@/utils/toolsValidate"
import { Base64 } from 'js-base64'
import {useMenuApi} from "/@/api/systemManage/menu";
@@ -122,6 +122,17 @@
        // 页面载入时执行方法
        onMounted(() => {
            hasUserCodeOrPassword()
            const baseSize = 38;
            /* 设置 rem 函数 */
            function setRem() {
              const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
              document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
            }
            setRem();/* 初始化 rem */

            window.onresize = () => {
              setRem();/* 改变窗口大小时重新设置 rem */
            }
            // getAllDepartment();
        });

@@ -190,7 +201,6 @@
            state.loading.signIn = true;
            // 存储 token 到浏览器缓存
            let res = await useLoginApi().signIn(state.ruleForm);
          console.log(res)
            if (res.data.code === 100) {
                await userInfo.setUserInfos(res.data.data);
                Cookies.set('token', res.data.data.tk);
@@ -388,7 +398,6 @@
        border: 1px solid #11FEEE;
        letter-spacing: 4px;
        font-weight: 300;
        margin-top: 15px;
        background-image: linear-gradient(to bottom,#0081C2,#003892,#0081C2);
        transition: 0.3s;
        box-shadow: 0 8px 30px rgba(88,101,241,.4);
@@ -397,6 +406,7 @@
            border: 2px solid #11FEEE;
            color: #11FEEE;
            font-weight: bolder;
          background-color: transparent;
            background-image: linear-gradient(to bottom,#003892,#003892,#003892);
        }
      &:active {
@@ -404,6 +414,7 @@
        border: 2px solid #11FEEE;
        color: #11FEEE;
        font-weight: bolder;
        background-color: transparent;
        background-image: linear-gradient(to bottom,#003892,#003892,#003892);
      }
    }

 src/views/loginPage/loginPage.vue

@@ -1,5 +1,8 @@
<template>
    <div class="login-container">
        <div class="starBg">

        </div>
        <div class="loginContent">
          <div class="welcc">广域特殊气体泄露在线监测预警系统</div>
            <div class="loginPanel">
@@ -23,7 +26,7 @@
import loginIconTwo from '/@/assets/login-icon-two.svg';
import { NextLoading } from '/@/utils/loading';
import AccountLogin from '/@/views/loginPage/component/accountLogin.vue';

import "amfe-flexible";
// 定义接口来定义对象的类型
interface LoginState {
    isScan: boolean;
@@ -45,6 +48,17 @@
        // 页面加载时
        onMounted(() => {
            NextLoading.done();
            const baseSize = 38;
            /* 设置 rem 函数 */
            function setRem() {
              const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
              document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
            }
            setRem();/* 初始化 rem */

            window.onresize = () => {
              setRem();/* 改变窗口大小时重新设置 rem */
            }
        });
        return {
            logoMini,
@@ -77,7 +91,19 @@
    background: url('../../assets/loginPage/login-bg.jpg') no-repeat center;
    background-size: 100% 100%;
    /*background-image: radial-gradient(at center, #0075c3, #000b61);*/

    .starBg{
      width: 1030px;
      height: 1135px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 50px;
      z-index: -1;
      background: url("../../assets/loginPage/starFalls.gif") no-repeat center;
      background-size: 100% 100%;
      opacity: 0.1;
      -webkit-opacity: 0.1;
    }
    .rights {
        font-size: 12px;
        color: #fff;
@@ -91,7 +117,7 @@
        }
    }
    .loginContent {
        width: 32vw;
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: center;
@@ -109,7 +135,7 @@
        }
        .loginPanel {
            width: 100%;
            padding: 4vh;
            padding: 60px 180px 80px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

 vite.config.ts

@@ -1,7 +1,7 @@
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { defineConfig, loadEnv, ConfigEnv } from 'vite';

import postCssPxToRem from "postcss-pxtorem"
const pathResolve = (dir: string): any => {
    return resolve(__dirname, '.', dir);
};
@@ -57,18 +57,18 @@
        css: {
            postcss: {
                plugins: [
                    {
                        postcssPlugin: 'internal:charset-removal',
                        AtRule: {
                            charset: (atRule) => {
                                if (atRule.name === 'charset') {
                                    atRule.remove();
                                }
                    postCssPxToRem({
                        rootValue: 37.5, // 1rem的大小（控制1rem的大小  点位：px）
                        propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
                        exclude: (e:any) => { // 不包含
                            if (/src(\\|\/)views(\\|\/)bigScreen(\\|\/)components(\\|\/)screen/.test(e)||/src(\\|\/)views(\\|\/)loginPage(\\|\/)loginPage/.test(e)||/src(\\|\/)views(\\|\/)loginPage(\\|\/)component(\\|\/)accountLogin/.test(e)) { // 指定生效页面（正则）
                                return false;
                            }
                            return true;
                        }
                    }
                ]
            }
                    }),
                ],
            },
        },
        define: {
            __VUE_I18N_LEGACY_API__: JSON.stringify(false),