修改大屏

马宇豪

2025-04-21 05cccb157fa461c1ce17cbeb9b00ed5396491ca8

修改大屏

 index.html

@@ -5,7 +5,7 @@
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <link rel="icon" href="/favicon.ico">
  <title>危化品智慧管控平台</title>
  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->

 package.json

@@ -51,7 +51,9 @@
  "devDependencies": {
    "@vitejs/plugin-vue": "3.1.0",
    "@vue/compiler-sfc": "3.2.45",
    "amfe-flexible": "^2.2.1",
    "p-limit": "^6.1.0",
    "postcss-pxtorem": "^6.1.0",
    "sass": "1.56.1",
    "unplugin-auto-import": "0.11.4",
    "unplugin-vue-setup-extend-plus": "0.4.9",

 src/assets/bigScreen/frameLB.png

 src/assets/bigScreen/frameLT.png

 src/assets/bigScreen/frameRB.png

 src/assets/bigScreen/frameRT.png

 src/assets/bigScreen/leftArrow.png

 src/assets/bigScreen/numberBg.png

 src/assets/bigScreen/rightArrow.png

 src/assets/bigScreen/topTitleBg.png

 src/assets/styles/LKJH.ttf

Binary files differ

 src/layout/components/Sidebar/menu.js

@@ -2,17 +2,14 @@
const menu = {
    commonMenu: [
        {
            path: '/homePageIndex',
            redirect: '/homePageIndex',
            meta: { title: '首页',icon: 'server'},
            children: [

                {
                    path: 'homePageIndex',
                    name: 'homePageIndex',
                    meta: { title: '工作台',icon: 'server'}
            path: '/bigScreen',
            redirect: '/bigScreen',
            meta: { title: '监管大屏',icon: 'server',affix: true}
                } ,
            ]
        {
            path: '/homePageIndex',
            name: 'homePageIndex',
            meta: { title: '工作台',icon: 'caution',affix: true }
        },
        {
            path: '/warehouseManage',

 src/main.js

@@ -11,7 +11,6 @@
import store from './store'
import router from './router'
import directive from './directive' // directive

// 注册指令
import plugins from './plugins' // plugins
import { download } from '@/utils/request'

 src/router/index.js

@@ -52,18 +52,6 @@
    component: () => import('@/views/error/401'),
    hidden: true
  },
  // {
  //   path: '/newPage',
  //   component: Layout,
  //   redirect: '/newPage',
  //   children: [
  //     {
  //       path: '/newPage',
  //       component: () => import('@/views/onlineEducation/systemManage/banner/components/newPage.vue'),
  //       name: 'NewPage',
  //     }
  //   ]
  // },
  {
    path: '/warehouseManage',
    component: Layout,
@@ -77,7 +65,20 @@
      }
    ]
  },

  {
    path: '/bigScreen',
    component: Layout,
    redirect: '/bigScreen',
    meta: { title: '监管大屏'},
    children: [
      {
        path: '/bigScreen',
        component: () => import('@/views/hazardousChemicals/bigScreen/index.vue'),
        name: 'bigScreen',
        meta: { title: '监管大屏',icon: 'form',  affix: true }
      }
    ]
  },
  {
    path: '/electronicWarehouse',
    component: Layout,
@@ -238,10 +239,10 @@
    path: '/homePageIndex',
    component: Layout,
    redirect: '/homePageIndex',
    meta: { title: '首页'},
    meta: { title: '工作台'},
    children: [
      {
        path: 'homePageIndex',
        path: '/homePageIndex',
        component: () => import('@/views/hazardousChemicals/homePage/index.vue'),
        name: 'homePageIndex',
        meta: { title: '工作台',icon: 'form'}

 src/views/hazardousChemicals/bigScreen/components/leftBottom.vue

对比新文件
@@ -0,0 +1,158 @@
<template>
  <div class="charts-container">
    <div id="dangerPie"></div>
    <div id="dangerBar"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(()=>{
  initDangerPie()
  initDangerBar()
})

const initDangerPie =()=>{
  var chartDom = document.getElementById('dangerPie');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    legend: {
      show: false
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        padAngle: 2,
        itemStyle: {
          borderRadius: 1,
        },
        label: {
          color: '#fff',
          textBorderWidth: 0,
          formatter: '{b}\n{d}%'
        },
        labelLine: {
          show: true
        },
        color: ['#1890FF','#FACC14'],
        data: [
          { value: 1048, name: '未整改' },
          { value: 735, name: '已整改' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
}
const initDangerBar =()=>{
  var chartDom = document.getElementById('dangerBar');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    grid: {
      top: '10%',
      left: '3%',
      right: '2%',
      bottom: '3%',
      containLabel: true
    },
    color: ['#02CDE6'],
    title: [
      {
        text: '隐患统计（top5）',
        left: '2%',
        top: '0%',
        textStyle: {
          fontSize: 12,
          color: 'rgba(255,255,255,.6)',
          fontWeight: 'normal'
        }
      },
      {
        text: '已整改/未整改',
        right: '0',
        top: '0%',
        textStyle: {
          fontSize: 12,
          color: 'rgba(255,255,255,.6)',
          fontWeight: 'normal'
        }
      }
    ],
    xAxis: {
      type: 'value',
      splitLine: {
        show: false
      },
      axisLine: {
        show: true
      },
      axisLabel:{
        color: '#fff'
      }
    },
    yAxis: {
      data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel:{
        color: 'rgba(255,255,255,.6)'
      }
    },
    series: [
      {
        name: '2011',
        type: 'bar',
        barWidth: '15',
        data: [203, 489, 134, 970, 744, 230]
      }
    ]
  };

  option && myChart.setOption(option);
}
</script>

<style lang="postcss" scoped>
@font-face {
  font-family: "LKJH";
  src: url("@/assets/styles/LKJH.ttf");
  font-style: normal;
  font-weight: normal;
}
.charts-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
  #dangerPie{
    width: 100%;
    flex: 1;
  }

  #dangerBar{
    width: 100%;
    flex: 2;
  }
</style>

 src/views/hazardousChemicals/bigScreen/components/leftTop.vue

对比新文件
@@ -0,0 +1,134 @@
<template>
  <div class="charts-container">
    <div class="top">
        共计<span>41515152</span>人/次
    </div>
    <div id="main"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(()=>{
  initChart()
})

const initChart =()=>{
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: [
      {
        text: '领用统计（人/次）',
        left: '0',
        top: '2%',
        textStyle: {
          fontSize: 12,
          color: 'rgba(255,255,255,.6)',
          fontWeight: 'normal'
        }
      }
    ],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel:{
        color: '#fff'
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle:{
          color: 'rgba(255,255,255,.1)',
          type: 'dashed'
        }
      },
      axisLabel:{
        color: 'rgba(255,255,255,.6)'
      }
    },
    grid: [
      {
        top: '15%',
        right: '2%',
        bottom: '10%'
      }
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        label:{
          show: true,
          color: '#fff',
          textBorderColor: 'transparent',
          fontSize: 8
        },
        // showSymbol: false,
        lineStyle:{
          color: '#54d5ff'
        },
        itemStyle:{
          color: '#54d5ff',
        }
      }
    ]
  };

  option && myChart.setOption(option);
}

</script>

<style lang="postcss" scoped>
@font-face {
  font-family: "LKJH";
  src: url("@/assets/styles/LKJH.ttf");
  font-style: normal;
  font-weight: normal;
}
.charts-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
  .top{
    width: 100%;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 10px 0 20px;

    span{
      display: inline-block;
      font-family: "LKJH";
      vertical-align: middle;
      font-size: 28px;
      color: yellow;
      margin: 0 5px;
      padding: 5px 10px;
      letter-spacing: 4px;
      border-top: 1px solid #155285;
      border-bottom: 1px solid #155285;
      background:
          url('../../../../assets/bigScreen/numberBg.png') left center no-repeat,
          url('../../../../assets/bigScreen/numberBg.png') right center no-repeat;
      background-size: 1px 100%;
    }
  }

  #main{
    flex: 1;
    width: 100%;

  }
</style>

 src/views/hazardousChemicals/bigScreen/components/map.json

对比新文件
文件太大

 src/views/hazardousChemicals/bigScreen/components/midBottom.vue

对比新文件
@@ -0,0 +1,97 @@
<template>
  <div class="charts-container">
    <div id="preWarning"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(()=>{
  initChart()
})

const initChart =()=>{
  var chartDom = document.getElementById('preWarning');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: [
      {
        text: '近30天预警信息趋势',
        left: '0',
        top: '2%',
        textStyle: {
          fontSize: 12,
          color: 'rgba(255,255,255,.6)',
          fontWeight: 'normal'
        }
      }
    ],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel:{
        color: '#fff'
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle:{
          color: 'rgba(255,255,255,.1)',
          type: 'dashed'
        }
      },
      axisLabel:{
        color: 'rgba(255,255,255,.6)'
      }
    },
    grid: [
      {
        top: '15%',
        right: '2%',
        bottom: '10%'
      }
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        label:{
          show: true,
          color: '#fff',
          textBorderColor: 'transparent',
          fontSize: 8
        },
        // showSymbol: false,
        lineStyle:{
          color: '#54d5ff'
        },
        itemStyle:{
          color: '#54d5ff',
        }
      }
    ]
  };

  option && myChart.setOption(option);
}

</script>

<style lang="postcss" scoped>
.charts-container{
  width: 100%;
  height: 100%;
}

#preWarning{
  width: 100%;
  height: 100%;
}
</style>

 src/views/hazardousChemicals/bigScreen/components/midTop.vue

对比新文件
@@ -0,0 +1,316 @@
<template>
  <div class="charts-container">
    <div class="table-wrapper">
      <table class="scrollable-table">
        <thead>
        <tr>
          <th>排名</th>
          <th>企业名称</th>
          <th>危化品仓库</th>
          <th>预警信息</th>
        </tr>
        </thead>
      </table>
      <div class="scroll-viewport" ref="viewport">
        <div class="scroll-content" :style="contentStyle">
          <table class="scrollable-table">
            <tbody>
            <tr v-for="item in companyData" :key="item.id">
              <td>{{ item.rank }}</td>
              <td>{{ item.company }}</td>
              <td>{{ item.warehouse }}</td>
              <td :class="{'warning': item.warning}">{{ item.warning || '无' }}</td>
            </tr>
            <tr v-for="item in loopData" :key="`loop-${item.id}`">
              <td>{{ item.rank }}</td>
              <td>{{ item.company }}</td>
              <td>{{ item.warehouse }}</td>
              <td :class="{'warning': item.warning}">{{ item.warning || '无' }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div id="areaMap"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted,onBeforeUnmount,ref,computed} from "vue";
import SUZHOU from './map.json'
// 表格数据
const companyData = [
  { id: 1, rank: 1, company: '化工企业A', warehouse: '仓库1', warning: '相忌预警' },
  { id: 2, rank: 2, company: '化工企业B', warehouse: '仓库2', warning: '' },
  { id: 3, rank: 3, company: '化工企业C', warehouse: '仓库3', warning: '超期预警' },
  { id: 4, rank: 4, company: '化工企业D', warehouse: '仓库4', warning: '' },
  { id: 5, rank: 5, company: '化工企业E', warehouse: '仓库5', warning: '' },
  { id: 6, rank: 6, company: '化工企业F', warehouse: '仓库6', warning: '超期预警' },
  { id: 7, rank: 7, company: '化工企业G', warehouse: '仓库7', warning: '' },
  { id: 8, rank: 8, company: '化工企业H', warehouse: '仓库8', warning: '' },
  { id: 9, rank: 9, company: '化工企业I', warehouse: '仓库9', warning: '' },
  { id: 10, rank: 10, company: '化工企业J', warehouse: '仓库10', warning: '' },
  { id: 11, rank: 11, company: '化工企业K', warehouse: '仓库11', warning: '' },
  { id: 12, rank: 12, company: '化工企业L', warehouse: '仓库12', warning: '' },
]

// 配置参数
const visibleRows = 8 // 显示的行数
const scrollSpeed = 1 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
const scrollPosition = ref(0)
let animationFrame = null

onMounted(()=>{
  initChart()
  // 设置视口高度
  if (viewport.value) {
    viewport.value.style.height = `${visibleRows * rowHeight}px`
  }
  // 延迟启动滚动，确保初始渲染完成
  setTimeout(() => {
    scrollAnimation()
  }, 100)
})

onBeforeUnmount(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
})

// 复制前几行数据用于循环
const loopData = computed(() => {
  return companyData.slice(0, visibleRows)
})

// 内容区域样式
const contentStyle = computed(() => {
  return {
    transform: `translateY(-${scrollPosition.value}px)`
  }
})

// 滚动动画
const scrollAnimation = () => {
  const totalHeight = companyData.length * rowHeight
  const loopHeight = loopData.value.length * rowHeight
  // 更新滚动位置
  scrollPosition.value += scrollSpeed
  // 当滚动到循环数据部分时，重置位置实现无缝衔接
  if (scrollPosition.value >= totalHeight) {
    scrollPosition.value -= totalHeight
  }
  animationFrame = requestAnimationFrame(scrollAnimation)
}

const initChart =()=>{
  //获取echart对象
  let dom = document.getElementById('areaMap')
  if (dom) {
    let data = [
      {
        name: "姑苏区",
        value: Math.round(Math.random() * 100)
      },
      {
        name: "虎丘区",
        value: Math.round(Math.random() * 100)
      },
      {
        name: "吴中区",
        value: Math.round(Math.random() * 100)
      },
    ]
    //初始化
    let myEchart = echarts.init(dom)
    //注册地图
    echarts.registerMap('苏州市', SUZHOU)
    let option = {
      geo: {
        map: '苏州市',
        aspectScale: 0.8,
        layoutCenter: ['50%', '50%'], //地图位置
        layoutSize: '75%',
        itemStyle: {
          normal: {
            shadowColor: '#000',
            shadowOffsetX: 0,
            shadowOffsetY: 40,
            opacity: 0.1
          },
          emphasis: {
            areaColor: '#fff'
          }
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function (params, ticket, callback) {
          console.log('params', params.value);
          //根据业务自己拓展要显示的内容
          var res = ''
          var name = params.name
          var value = params.value[params.seriesIndex + 1] || params.value
          res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
          return res
        }
      },

      series: [
        {
          tooltip: {
            trigger: 'item',
          },
          name: '苏州市数据',
          type: 'map',
          map: '苏州市', // 自定义扩展图表类型
          label: { // 文字
            show: true,
            color: '#fff',
            fontSize: 10
          },
          itemStyle: { // 地图样式
            shadowBlur: 10,
            shadowColor: '#000',
            areaColor: 'rgb(1,95,176)',  //区域颜色
            normal: {
              areaColor: 'rgb(1,95,176)',
              borderColor: '#02CDE6',
              borderWidth: 1
            },
            emphasis: {
              areaColor: 'rgb(3,26,65)',
              label: {
                color: '#fff'
              }
            }
          },
          data: data
        },
        // 区域散点图
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          symbolSize: 10,
          rippleEffect: {
            period: 3,
            scale: 10,
            brushType: 'fill'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: 'yellow',
              fontSize: 12
            }
          },
          data: [
              { name: '斜塘街道 11', value: [120.697614, 31.288664] },
            { name: '桑田岛 12', value: [120.807510, 31.350300] },
            { name: '车坊 2', value: [120.627614, 31.338664] }
          ],
          itemStyle: {
            //坐标点颜色
            normal: {
              show: true,
              color: 'skyblue',
              shadowBlur: 20,
              shadowColor: '#fff'
            },
            emphasis: {
              areaColor: '#fff'
            }
          }
        }
      ],
    }
    myEchart.setOption(option);
    window.addEventListener('resize', function () {
      myEchart.resize();
    });
  }
}

</script>

<style lang="postcss" scoped>
.charts-container{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
}
.table-wrapper {
  position: relative;
  width: 300px;
  margin-top: 30px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;

  .scrollable-table {
    width: 100%;
    border-collapse: collapse;

    th,td {
      padding: 12px 15px;
      color: #fff;
      text-align: left;
      border-bottom: 1px solid rgba(255,255,255,.1);
      height: 40px; /* 与rowHeight一致 */
      box-sizing: border-box;
      font-size: 12px;
      font-weight: normal;
    }
    th {
      position: sticky;
      top: 0;
      z-index: 10; /* 确保表头在内容之上 */
    }
    tr{
      background: rgb(6,38,87);

      &:nth-of-type(2n){
        background: rgb(19,72,127);
      }
    }
    thead tr{
      background: rgba(0,0,0,0);
    }
  }
  .scroll-viewport {
    position: relative;
    overflow: hidden;
    .scroll-content {
      will-change: transform; /* 优化性能 */
    }
    .warning {
      color: #ff0000;
      animation: blink 1s infinite;
    }
  }
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

  #areaMap{
    flex: 1;
    height: 500px;
  }
</style>

 src/views/hazardousChemicals/bigScreen/components/rightBottom.vue

对比新文件
@@ -0,0 +1,148 @@
<template>
  <div class="charts-container">
    <div class="filter">
      <el-input
          v-model="queryParams.code"
          placeholder="请输入流向码"
          clearable
      />
          <div class="search-btn">
            查询
          </div>
    </div>
    <div class="table-wrapper">
    <table class="data-table">
      <thead>
      <tr>
        <th>企业名称</th>
        <th>流向类型</th>
        <th>取/还人员</th>
        <th>时间</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in dataList" :key="index">
        <td>{{ item.company }}</td>
        <td>{{ item.flowType }}</td>
        <td>{{ item.person }}</td>
        <td>{{ item.time }}</td>
      </tr>
      </tbody>
    </table>
    </div>
  </div>
</template>
<script setup>
import {onMounted, reactive} from "vue";

onMounted(()=>{
  getList()
})

const queryParams = reactive({
  code: ''
})
const dataList = [
  { company: '化工企业A', flowType: '出库', person: '张三', time: '2023-05-10 09:30' },
  { company: '化工企业B', flowType: '入库', person: '李四', time: '2023-05-10 10:15' },
  { company: '化工企业C', flowType: '出库', person: '王五', time: '2023-05-10 11:20' },
  { company: '化工企业D', flowType: '入库', person: '赵六', time: '2023-05-10 13:45' },
  { company: '化工企业E', flowType: '出库', person: '钱七', time: '2023-05-10 14:30' },
  { company: '化工企业F', flowType: '入库', person: '孙八', time: '2023-05-10 15:10' },
  { company: '化工企业G', flowType: '出库', person: '周九', time: '2023-05-10 16:20' },
  { company: '化工企业H', flowType: '入库', person: '吴十', time: '2023-05-10 17:05' },
  { company: '化工企业I', flowType: '出库', person: '郑十一', time: '2023-05-11 08:30' }
]
const getList = ()=>{

}
const reset=()=>{

}
const search=()=>{

}
</script>

<style lang="postcss" scoped>
.charts-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .filter{
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .el-input{
      flex: 3;
      border: 1px solid blue !important;
      border-color: blue !important;
    }
    :deep(.el-input__wrapper){
      background-color: rgba(0,0,0,0);
      border-color: blue !important;
    }
    .search-btn{
      flex: 1;
      margin-left: 10px;
      height: 30px;
      text-align: center;
      font-size: 12px;
      line-height: 30px;
      background: #015fb0;
      border-radius: 2px;
      cursor: pointer;
      color: #fff
    }
  }
  .table-wrapper {
    width: 100%;
    height: 320px;
    overflow: hidden;
    overflow-y: auto; /* 垂直滚动 */
    border: 1px solid rgba(0,0,0,.5);
  }

  .data-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  .data-table th,
  .data-table td {
    padding: 10px;
    font-size: 12px;
    color: #fff;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  .data-table th {
    position: sticky;
    top: 0;
    background-color: rgb(6,38,87); /* 无背景色 */
    font-weight: normal;
    color: #fff;
  }

  /* 精简滚动条样式 */
  .table-wrapper::-webkit-scrollbar {
    width: 0;
  }

  .table-wrapper::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 3px;
  }

  .table-wrapper::-webkit-scrollbar-track {
    background-color: #f1f1f1;
  }

}
</style>

 src/views/hazardousChemicals/bigScreen/components/rightTop.vue

对比新文件
@@ -0,0 +1,77 @@
<template>
  <div class="charts-container">
    <div id="typePie"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(()=>{
  initChart()
})

const initChart =()=>{
  var chartDom = document.getElementById('typePie');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      left: 'center',
      bottom: '0',
      textStyle: {
        color: 'rgba(255,255,255,.6)'
      }
    },
    textStyle:{
      textBorderWidth: 0,
    },
    series: [
      {
        type: 'pie',
        radius: [20, 100],
        center: ['50%', '45%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 5
        },
        label: {
          color: '#fff',
          textBorderWidth: 0,
          formatter: '{d}%'
        },
        data: [
          { value: 30, name: 'rose 1' },
          { value: 28, name: 'rose 2' },
          { value: 26, name: 'rose 3' },
          { value: 24, name: 'rose 4' },
          { value: 22, name: 'rose 5' },
          { value: 20, name: 'rose 6' },
          { value: 18, name: 'rose 7' },
          { value: 16, name: 'rose 8' }
        ]
      }
    ]
  };

  option && myChart.setOption(option);
}

</script>

<style lang="postcss" scoped>
.charts-container{
  width: 100%;
  height: 100%;
}

#typePie{
  width: 100%;
  height: 100%;
}
</style>

 src/views/hazardousChemicals/bigScreen/index.vue

对比新文件
@@ -0,0 +1,258 @@
<template>
  <div class="data-dashboard">
    <header class="dashboard-header">
      <div class="header-left">
        <div class="current-time">{{ currentTime }}</div>
        <div class="current-date">{{ currentDate }}</div>
      </div>
      <div class="header-center">
        <h1 class="dashboard-title">独墅湖高教创新区危化品智慧管控平台</h1>
      </div>
      <div class="header-right">
        <div class="weather-info">
          <span class="weather-icon">☀</span>
          <span class="weather-text">晴 26°C</span>
        </div>
      </div>
    </header>

    <main class="dashboard-content">
      <div class="chart-column">
        <div class="chart-container chart-1">
          <div class="chart-title">
            <img :src="leftArrow"><span>全辖区危化品领用</span><img :src="rightArrow">
          </div>
          <div class="chart-placeholder">
            <left-top></left-top>
          </div>
        </div>
        <div class="chart-container chart-2">
          <div class="chart-title">
            <img :src="leftArrow"><span>隐患统计</span><img :src="rightArrow">
          </div>
          <div class="chart-placeholder">
            <left-bottom></left-bottom>
          </div>
        </div>
      </div>
      <div class="chart-column middle-column">
        <div class="chart-container chart-3">
          <div class="chart-title">
            <img :src="leftArrow"><span>辖区企业分布</span><img :src="rightArrow">
          </div>
          <div class="chart-placeholder">
            <mid-top></mid-top>
          </div>
        </div>
        <div class="chart-container chart-4">
          <div class="chart-title">
            <img :src="leftArrow"><span>实时预警信息</span><img :src="rightArrow">
          </div>
          <div class="chart-placeholder">
            <mid-bottom></mid-bottom>
          </div>
        </div>
      </div>
      <div class="chart-column">
        <div class="chart-container chart-5">
          <div class="chart-title">
            <img :src="leftArrow"><span>危化品类别分布</span><img :src="rightArrow">
          </div>
          <div class="chart-placeholder">
            <right-top></right-top>
          </div>
        </div>
        <div class="chart-container chart-6">
          <div class="chart-title">
            <img :src="leftArrow"><span>在库危化品流向实时查询</span><img :src="rightArrow">
          </div>
          <div class="chart-placeholder">
            <right-bottom></right-bottom>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import 'amfe-flexible';
import leftArrow from '../../../assets/bigScreen/leftArrow.png'
import rightArrow from '../../../assets/bigScreen/rightArrow.png'
import LeftTop from "@/views/hazardousChemicals/bigScreen/components/leftTop";
import LeftBottom from "@/views/hazardousChemicals/bigScreen/components/leftBottom";
import MidBottom from "@/views/hazardousChemicals/bigScreen/components/midBottom";
import RightTop from "@/views/hazardousChemicals/bigScreen/components/rightTop";
import MidTop from "@/views/hazardousChemicals/bigScreen/components/midTop";
import RightBottom from "@/views/hazardousChemicals/bigScreen/components/rightBottom";
const currentTime = ref('');
const currentDate = ref('');
let timer = ref(null);

const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleTimeString();
  currentDate.value = now.toLocaleDateString();
};

onMounted(() => {
  const baseSize = 16;
  function setRem() {
    const scale = document.documentElement.clientWidth / 1920;/* 当前页面宽度缩放比例，可根据自己需要修改 */
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
  }
  setRem();
  window.onresize = () => {
    setRem();/* 改变窗口大小时重新设置 rem */
  }
  updateTime();
  timer.value = setInterval(updateTime, 1000);
});

onBeforeUnmount(() => {
  if (timer.value) clearInterval(timer.value);
});
</script>

<style lang="postcss">
.data-dashboard {
  width: 100%;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  background-color: #031A41;
  color: #fff;
  overflow: hidden;

  .dashboard-header {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    z-index: 10;

    .header-left {
      width: 200px;

      .current-time {
        font-size: 16px;
        margin-bottom: 10px;
      }

      .current-date {
        font-size: 16px;
        opacity: 0.8;
      }
    }

    .header-center {
      flex: 1;
      height: 100%;
      text-align: center;
      background: url("../../../assets/bigScreen/topTitleBg.png") no-repeat center;
      background-size: 100% auto;

      .dashboard-title {
        font-size: 24px;
        margin: 0;
        letter-spacing: 2px;
        line-height: 100px;
        color: #fff;
        text-shadow: 0 2px 10px rgba(0, 242, 254, 0.3);
      }
    }

    .header-right {
      width: 200px;
      text-align: right;

      .weather-info {
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.1);
        padding: 10px 20px;
        border-radius: 30px;

        .weather-icon {
          font-size: 16px;
          margin-right: 10px;
        }

        .weather-text {
          font-size: 16px;
        }
      }
    }
  }

  .dashboard-content {
    flex: 1;
    display: flex;
    padding: 0 15px 15px;
    gap: 10px;
    overflow: hidden;

    .chart-column {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;

      .chart-container {
        flex: 1;
        border: 1px solid #155285;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background:
            url('../../../assets/bigScreen/frameLT.png') left top no-repeat,
            url('../../../assets/bigScreen/frameRT.png') right top no-repeat,
            rgba(26, 42, 82, 0.7);
        background-size: 12px 12px;

        .chart-title {
          height: 36px;
          line-height: 34px;
          text-align: center;

          span{
            font-size: 16px;
            color: #02CDE6;
            margin: 0 15px;
          }
          img{
            object-fit: cover;
          }
        }

        .chart-placeholder {
          flex: 1;
          padding: 10px;
          color: rgba(255, 255, 255, 0.5);
          font-size: 16px;
          background:
              url('../../../assets/bigScreen/frameLB.png') left bottom no-repeat,
              url('../../../assets/bigScreen/frameRB.png') right bottom no-repeat,
              #082C61;
          background-size: 12px 12px;
        }
      }
    }

    .middle-column {
      flex: 2;

      .chart-3 {
        flex: 2;
      }

      .chart-4 {
        flex: 1;
      }
    }
  }
}
</style>

 vite.config.js

@@ -1,6 +1,8 @@
import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'
import vue from '@vitejs/plugin-vue';
import postcssPxtorem from 'postcss-pxtorem'; // 使用 import 导入

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
@@ -50,7 +52,37 @@
                }
              }
            }
          }
          },
          // postcssPxtorem({
          //   rootValue: 19.2,
          //   propList: ['*'],
          //   // 只转换带有特定类名的样式
          //   include: (filePath, content) => {
          //     return (
          //         filePath.includes('hazardousChemicals/bigScreen/index.vue') &&
          //         content.includes('data-dashboard')
          //     );
          //   }
          // })
          postcssPxtorem({
            rootValue: 37.5,
            propList: ['*'],
            selectorBlackList: [/^html$/],
            // 精确匹配大屏组件路径
            include: (filePath, content = '') => {
              return (
                  content.includes('postcss-pxtorem-enabled')
              );
            },
            // 排除其他所有文件
            exclude: (filePath, content = '') => {
              return !(
                  content.includes('postcss-pxtorem-enabled')
              );
            },
            mediaQuery: false,
            minPixelValue: 3
          })
        ]
      }
    }