大屏自适应

fuliqi

2024-12-06 21933d0857b7539cfaff52a88a3340772160c4e7

大屏自适应

 src/views/screen/components/lineChart.vue

@@ -23,6 +23,12 @@
  },

  methods: {
    setFontSize(res){
      const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return res*fontSize;
    },
    initDrawLine() {
      const that = this
      let option = {
@@ -38,7 +44,7 @@
            return str
          },
          textStyle: {
            fontSize: 16
            fontSize: this.setFontSize(16)
          }
        },

@@ -49,7 +55,7 @@
          data: ['已处理工单数', '未处理工单数'],
          textStyle: {
            color: '#A0AEC0',
            fontSize: 14
            fontSize: this.setFontSize(14)
          }
        },

@@ -68,7 +74,7 @@
          },
          axisLabel: {
            color: '#A0AEC0',
            fontSize: 14,
            fontSize: this.setFontSize(14),
            margin: 20,
            rotate: 30
          },
@@ -89,7 +95,7 @@
          },
          axisLabel: {
            color: '#A0AEC0',
            fontSize: 14,
            fontSize: this.setFontSize(14),
            margin: 5
          }
        },

 src/views/screen/components/map3.vue

@@ -122,6 +122,12 @@
    })
  },
  methods: {
    setFontSize(res){
      const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return res*fontSize;
    },
    initializeMap() {
      this.updateMapData()
      this.getChinData('自贡市', chinaJson)
@@ -177,7 +183,7 @@
          left: '-5%',
          top: '20%',
          width: '100%', // 明确指定宽度
          height: '720px', // 明确指定高度
          height: '100%', // 明确指定高度
          // boxWidth: 100,
          regionHeight: 0.8,
          zlevel: 10,
@@ -275,7 +281,7 @@
            left: '-5%',
            top: '20%',
            width: '100%', // 明确指定宽度
            height: '720px', // 明确指定高度
            height: '100%', // 明确指定高度
            zlevel: 5,

            // tooltip: {
@@ -428,7 +434,7 @@
          position: 'top',
          textStyle: {
            color: '#c6f4ff',
            fontSize: '16px',
            fontSize: this.setFontSize(16),
            backgroundColor: 'rgba(25,56,97,1)',
            borderColor: '#a4ddee',
            borderWidth: 0.5,
@@ -442,8 +448,8 @@
          },
          rich: {
            style: {
              fontSize: 16,
              lineHeight: 22
              fontSize: this.setFontSize(14),
              lineHeight: this.setFontSize(20),
              // 其他需要的样式
            }
          },
@@ -484,6 +490,6 @@

.map-main-container {
  width: 100%;
  height: 100%;
  height: 37vw; // 固定高度
}
</style>

 src/views/screen/components/subheading.vue

@@ -27,6 +27,13 @@
  },

  methods: {
    setFontSize(res){
      const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return res*fontSize;
    },

    initChart (val1, val2, color) {
      const annularDom = this.$refs.echarts
      const myAnnular = this.$echarts.init(annularDom)
@@ -64,7 +71,7 @@
                  show: true, // 单独显示该数据项
                  formatter: val1 + '',
                  color: color,
                  fontSize: 14
                  fontSize: this.setFontSize(14)
                }
              },


 src/views/screen/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="container" style="font-size: 14px" ref="contaner">
  <div class="container" style="font-size: 0.75vw" ref="contaner">
    <header>
      <i @click="returnPath" class="el-icon-s-home" style="color: #00b4ff;position: absolute;font-size: 24px;left: 98%;top: 15%"></i>
      <img src="@/assets/images/header-bg.png"/>
@@ -71,10 +71,10 @@
              />
              <ul>
                <li v-for="(item, index) in facilityData.video" :key="index">
                  <div style="font-size: 14px" class="value">
                  <div style="font-size: 0.75vw" class="value">
                    <animate-number from="0" :to="item.value" :key="item.value"></animate-number>
                  </div>
                  <div style="font-size: 14px" class="title">{{ item.title }}</div>
                  <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
@@ -86,8 +86,8 @@
              <ul>
                <li v-for="(item, index) in facilityData.car" :key="index">
<!--                  <div class="value">{{ item.value ? item.value : "-" }}</div>-->
                  <div style="font-size: 14px" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
                  <div style="font-size: 14px" class="title">{{ item.title }}</div>
                  <div style="font-size: 0.75vw" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
                  <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
@@ -102,8 +102,8 @@
                  :key="index"
                >
<!--                  <div class="value">{{ item.value ? item.value : "-" }}</div>-->
                  <div style="font-size: 14px" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
                  <div style="font-size: 14px" class="title">{{ item.title }}</div>
                  <div style="font-size: 0.75vw" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
                  <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
@@ -1082,7 +1082,7 @@
            li {
              width: 25%;
              text-align: center;
              font-size: 14px;
              font-size: 0.75vw;
              color: #00e6f4;
              flex-shrink: 0;
              flex-grow: 0;
@@ -1325,7 +1325,7 @@
            background-image: url("../../assets/images/item-car-bg.png");
            background-size: 100% 100%;
            color: #dcf8ff;
            font-size: 12px;
            //font-size: 12px;
            line-height: 26px;
            padding: 0 15px;
            font-size: 0.625vw;
@@ -1442,21 +1442,21 @@
}

.rotating-image {
  width: 950px;
  height: 950px;
  width: 50vw;
  height: 50vw;
  position: absolute;
  top: calc(50% - 450px);
  left: calc(50% - 450px);
  top: calc(50% - 24vw);
  left: calc(50% - 24vw);
  transform: skewX(-5deg) skewY(-10deg);
  animation: rotateImage 36s linear infinite;
}

.rotating-image-in {
  width: 900px;
  height: 900px;
  width: 47.5vw;
  height: 47.5vw;
  position: absolute;
  top: calc(50% - 425px);
  left: calc(50% - 425px);
  top: calc(50% - 22.5vw);
  left: calc(50% - 22.5vw);
  animation: rotateCounterClockwise 48s linear infinite;
}