新大屏引入

fuliqi

2024-09-16 7a279b2d4960c451599da4274f5b8c53ca33067e

新大屏引入

 src/assets/images/annular-bg.png

 src/assets/images/background-img.jpg

 src/assets/images/background-img.png

 src/assets/images/border-icon.png

 src/assets/images/border-l-icon.png

 src/assets/images/btn-bg.png

 src/assets/images/car-bg.png

 src/assets/images/car-bg2.png

 src/assets/images/decorate-border.png

 src/assets/images/face-bg.png

 src/assets/images/face-num-bg.png

 src/assets/images/face-num-bg3.png

 src/assets/images/facility-title-1.png

 src/assets/images/facility-title-2.png

 src/assets/images/facility-title-3.png

 src/assets/images/facility-title.png

 src/assets/images/footer-bg.png

 src/assets/images/footer-title-bg.png

 src/assets/images/footer-top-bg.png

 src/assets/images/ga-btn-1.png

 src/assets/images/ga-btn-2.png

 src/assets/images/header-bg.png

 src/assets/images/item-car-bg.png

 src/assets/images/item-facility.png

 src/assets/images/item-video-bg.png

 src/assets/images/list-b-l-icon.png

 src/assets/images/list-b-r-icon.png

 src/assets/images/list-bg.png

 src/assets/images/list-t-l-icon.png

 src/assets/images/list-t-r-icon.png

 src/assets/images/map-bg-bg.png

 src/assets/images/map-bg.png

 src/assets/images/map-bg2.png

 src/assets/images/map-item-bg.png

 src/assets/images/normal-title.png

 src/assets/images/qx-btn-1.png

 src/assets/images/qx-btn-2.png

 src/assets/images/screen/16±È9±³¾°21.png

 src/assets/images/screen/16±È9±³¾°23.png

 src/assets/images/screen/²úÆ·ÏúÊÛ·ÖÎö¿´°å±³¾°.png

 src/assets/images/screen/ÆóÒµ·¢Õ¹Ðû´«´óÆÁ±³¾°.png

 src/assets/images/screen/ÐÇÇò¿Æ¼¼¸Ð±³¾°-2.png

 src/assets/images/screen/ÐÇÇò¿Æ¼¼¸Ð±³¾°-3.png

 src/assets/images/screen/ÐǿտƼ¼±³¾°.png

 src/assets/images/screen/ÉîÉ«-±³¾°16.png

 src/assets/images/screen/ÎïÁ÷´óÆÁ±³¾°Í¼.png

 src/assets/images/screen/¿Æ¼¼¸Ð-±³¾°1.png

 src/assets/images/screen/¿Æ¼¼¸Ð±³¾° (1).png

 src/assets/images/screen/¿Æ¼¼ÏßÌõ±³¾°5.png

 src/assets/images/screen/¿Æ¼¼ÏßÌõ±³¾°7.png

 src/assets/images/screen/ÇàÉ«ÐÇ¿Õ±³¾°.png

 src/assets/images/st-btn-1.png

 src/assets/images/st-btn-2.png

 src/assets/images/subheading1.png

 src/assets/images/video-title.png

 src/assets/images/workOrder-title.png

 src/assets/map/zigong.json

New file
Diff too large

 src/main.js

@@ -4,7 +4,8 @@
import { getToken } from "@/utils/auth";
import Element from 'element-ui'
import './assets/styles/element-variables.scss'

import * as echarts from 'echarts'
import 'echarts-gl'
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
@@ -60,7 +61,7 @@
Vue.prototype.getToken = getToken
Vue.prototype.$uploadUrl = process.env.VUE_APP_BASE_API + "/common/upload"
Vue.prototype.$img = process.env.VUE_APP_BASE_API

Vue.prototype.$echarts = echarts

// å…¨å±€ç»„件挂载
Vue.component('DictTag', DictTag)

 src/views/screen/components/lineChart.vue

New file
@@ -0,0 +1,162 @@
<template>
  <div class="lineChart-container" ref="lineChart"></div>
</template>

<script>
export default {
  name: 'lineChart',
  data () {
    return {
      // é…ç½®
      option: {
        grid: {
          width: '100%'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let str = '<div><p>' + params.name + '</p></div>'
            str += params.marker + params.seriesName + '：' + params.data
            return str
          },
          textStyle: {
            fontSize: 12
          }
        },

        // å›¾ä¾‹ç»„件
        legend: {
          type: 'plain',
          top: 20,
          data: ['已处理工单数', '未处理工单数'],
          textStyle: {
            color: '#A0AEC0'
          }
        },

        // X轴配置
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#A0AEC0',
              type: 'solid'
            }
          },
          axisLabel: {
            color: '#A0AEC0',
            fontSize: 12,
            margin: 20,
            rotate: 30
          },
          data: [
            '富顺区',
            '大安区',
            '自流景区',
            '贡景区',
            '容县',
            '高新区',
            '沿滩区'
          ]
        },
        // Y轴配置
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#A0AEC0',
              type: 'dashed'
            }
          },
          splitNumber: 5,
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#A0AEC0',
            fontSize: 12,
            margin: 15
          }
        },
        // ç³»åˆ—列表（多个折线图）
        series: [
          {
            name: '已处理工单数',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130],
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00a2ff' },
                { offset: 0.5, color: 'rgba(0,162,255,0.1)' },
                { offset: 1, color: 'rgba(0,162,255,0.1)' }
              ])
            },

            lineStyle: {
              color: '#00a2ff',
              width: 1
            },
            itemStyle: {
              color: '#00a2ff'
            }
          },
          {
            name: '未处理工单数',
            type: 'line',
            data: [90, 140, 160, 55, 88, 99, 100],
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#e4b54f' },
                { offset: 0.5, color: 'rgba(228,181,79,0.1)' },
                { offset: 1, color: 'rgba(228,181,79,0.1)' }
              ])
            },

            lineStyle: {
              color: '#e4b54f',
              width: 1
            },
            itemStyle: {
              color: '#e4b54f'
            }
          }
        ]
      },

      myDrawLine: null
    }
  },

  methods: {
    initDrawLine () {
      const that = this
      that.myDrawLine = this.$echarts.init(this.$refs.lineChart)
      that.myDrawLine.setOption(that.option)
      window.addEventListener('resize', function () {
        that.myDrawLine.resize()
      })
    }
  },

  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initDrawLine()
      }, 100)
    })
  }
}
</script>

<style lang="scss" scoped>
.lineChart-container {
  width: 100%;
  height: 100%;
}
</style>

 src/views/screen/components/map.vue

New file
@@ -0,0 +1,510 @@
<template>
  <div class="map-container">
    <!--弹窗-->
    <!-- <div class="layer" ref="layer">
      1231
    </div> -->
    <div class="map-main-container" ref="map"></div>
  </div>
</template>

<script>
import ZGSJson from '@/assets/map/zigong.json' // JOSN地图文件
export default {
  name: 'mapApp',
  data () {
    return {
      geoCoordinates: {
        è‡ªæµäº•åŒº: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        é«˜æ–°åŒº: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        å¤§å®‰åŒº: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        æ²¿æ»©åŒº: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        è´¡äº•åŒº: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        è£åŽ¿: [
          {
            value: 12312,
            name: 'XXX'
          }
        ],
        å¯Œé¡ºåŽ¿: [
          {
            value: 12312,
            name: 'XXX'
          }
        ]
      },

      // åœ°å›¾é…ç½®
      // option: {
      //   tooltip: {
      //     trigger: 'item',
      //     triggerOn: 'mousemove|click', // å¿…须使用这种方式，因为tooltip需要有点击事件，同时移入effectScatter点区域联动
      //     extraCssText: 'border:none;', // æ¸…除tooltip自带颜色
      //     // hideDelay: 2000, // æç¤ºæ¡†2秒后小时
      //     formatter: function (params) {
      //       // è‡ªå®šä¹‰tooltip内容
      //       this.fetchData(params.name)
      //       return `Custom Tooltip Content for ${params.name}`
      //     }
      //   },

      //   series: [
      //     {
      //       type: 'map3D',
      //       map: 'zgs',
      //       boxWidth: 100,
      //       regionHeight: 2,

      //       markPoint: {
      //         symbol: 'pin', // æ ‡è®°ç‚¹å½¢çŠ¶
      //         symbolSize: 50, // æ ‡è®°ç‚¹å¤§å°
      //         data: [
      //           {
      //             name: '标记点1',
      //             coord: ['104.3334', '29.2938'] // æ ‡è®°ç‚¹çš„三维坐标
      //           }
      //           // å¯ä»¥æ·»åŠ æ›´å¤šæ ‡è®°ç‚¹
      //         ]
      //       },

      //       // åœ°å›¾çš„颜色
      //       itemStyle: {
      //         color: '#8adfff', // åœ°å›¾æ¿å—的颜色
      //         opacity: 0.98, // å›¾å½¢çš„不透明度 [ default: 1 ]
      //         borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
      //         borderColor: '#35b5ff' // å›¾å½¢æè¾¹çš„颜色。[ default: #333 ]
      //       },

      //       realisticMaterial: {
      //         detailTexture: require('../assets/images/face-num-bg3.png'),
      //         textureTiling: 1,
      //         textureOffset: 0,
      //         roughness: 0, // æè´¨ç²—糙度，0完全光滑，1完全粗糙
      //         metalness: 0,
      //         roughnessAdjust: 0
      //       },

      //       shading: 'realistic',

      //       // æ ‡ç­¾çš„相关设置
      //       label: {
      //         show: true, // (地图上的城市名称)是否显示标签
      //         distance: 5,
      //         formatter: function (params) {
      //           return params.name ? params.name : ' '
      //         },
      //         // æ ‡ç­¾çš„字体样式
      //         color: '#fff', // åœ°å›¾åˆå§‹åŒ–区域字体颜色
      //         fontSize: 16, // å­—体大小
      //         fontWeight: '300'
      //       },

      //       // é¼ æ ‡ hover é«˜äº®æ—¶å›¾å½¢å’Œæ ‡ç­¾çš„样式
      //       emphasis: {
      //         label: {
      //           // label é«˜äº®æ—¶çš„配置
      //           show: true,
      //           color: '#fff', // é«˜äº®æ—¶æ ‡ç­¾é¢œè‰²å˜ä¸º ç™½è‰²
      //           fontSize: 16 // é«˜äº®æ—¶æ ‡ç­¾å­—体 å˜å¤§
      //         },
      //         scale: true,
      //         itemStyle: {
      //           // itemStyle é«˜äº®æ—¶çš„配置
      //           color: '#ffc23e' // é«˜äº®æ—¶åœ°å›¾æ¿å—颜色改变
      //         }
      //       },

      //       // åœ°é¢å¯ä»¥ä½¿æ•´ä¸ªåœºæ™¯çœ‹èµ·æ¥æ›´çœŸå®žï¼Œæ›´æœ‰æ¨¡åž‹æ„Ÿã€‚
      //       light: {
      //         main: {
      //           // åœºæ™¯ä¸»å…‰æºçš„设置，在 globe ç»„件中就是太阳光。
      //           color: '#fff', // ä¸»å…‰æºçš„颜色。
      //           intensity: 0.6, // ä¸»å…‰æºçš„强度。
      //           shadow: true, // ä¸»å…‰æºæ˜¯å¦æŠ•å°„阴影。默认关闭。开启阴影可以给场景带来更真实和有层次的光照效果。会增加程序的运行开销。
      //           shadowQuality: 'high', // é˜´å½±çš„质量。可选'low', 'medium', 'high', 'ultra'
      //           alpha: 30, // ä¸»å…‰æºç»• x è½´ï¼Œå³ä¸Šä¸‹æ—‹è½¬çš„角度。配合 beta æŽ§åˆ¶å…‰æºçš„方向。
      //           beta: 20 // ä¸»å…‰æºç»• y è½´ï¼Œå³å·¦å³æ—‹è½¬çš„角度。
      //         },
      //         ambient: {
      //           // å…¨å±€çš„环境光设置。
      //           color: '#fff', // çŽ¯å¢ƒå…‰çš„颜色。[ default: #fff ]
      //           intensity: 0.45 // çŽ¯å¢ƒå…‰çš„强度。[ default: 0.2 ]
      //         },
      //         ambientCubemap: {
      //           exposure: 2,
      //           diffuseIntensity: 1,
      //           specularIntensity: 1
      //         }
      //       },

      //       postEffect: {
      //         depthOfField: {
      //           enable: false // å…³é—­æ™¯æ·±æ•ˆæžœ
      //         }
      //       },

      //       groundPlane: {
      //         show: false, // æ˜¯å¦æ˜¾ç¤ºåœ°é¢
      //         color: '#ffffff' // åœ°é¢é¢œè‰²
      //       },

      //       viewControl: {
      //         projection: 'perspective', // æŠ•å½±æ–¹å¼ï¼Œé»˜è®¤ä¸ºé€è§†æŠ•å½±'perspective'，也支持设置为正交投影'orthographic'。
      //         autoRotate: false,
      //         dispose: 100,
      //         rotateSensitivity: 0, // æ—‹è½¬
      //         minBeta: -13,
      //         maxBeta: -13,
      //         zoomSensitivity: 0, // ç¼©æ”¾
      //         panSensitivity: 0, // å¹³ç§»
      //         center: [0, 0, 0],
      //         alpha: 70, // å€¾æ–œè§’度
      //         animationDurationUpdate: 1000, // è¿‡æ¸¡åŠ¨ç”»çš„时长
      //         animationEasingUpdate: 'cubicInOut' // è¿‡æ¸¡åŠ¨ç”»çš„缓动效果
      //       },
      //       left: '-5%',
      //       top: '5%'
      //     }
      //   ]
      // },
      activerName: null, // é€‰ä¸­çš„名称
      activerData: [], // é€‰ä¸­çš„数据
      map: null
    }
  },

  methods: {
    initMap () {
      const that = this
      that.$echarts.registerMap('zgs', ZGSJson)
      that.map = that.$echarts.init(that.$refs.map)
      const option = {
        tooltip: {
          show: true,
          trigger: 'item',
          alwaysShowContent: false,
          renderMode: 'html',
          triggerOn: 'mousemove|click', // å¿…须使用这种方式，因为tooltip需要有点击事件，同时移入effectScatter点区域联动
          extraCssText: 'border:none;color:#dcf8ff;border-radius: 0;', // æ¸…除tooltip自带颜色
          axisPointer: {
            type: 'none',
            textStyle: {
              color: '#fff'
            }
          },
          borderWidth: 0,
          padding: 0,
          backgroundColor: 'rgba(18, 39, 68, 0.86)',
          // hideDelay: 2000, // æç¤ºæ¡†2秒后小时
          formatter: function (params) {
            // è‡ªå®šä¹‰tooltip内容
            const isData = that.fetchData(params.name)
            let isHtml = ''
            for (let i = 0; i < isData.length; i++) {
              isHtml += `<div>${isData[i].name}:${isData[i].value}</div>`
            }
            return `<div class="tooltip-container">
              <div class="title">${params.name}</div>
                <div id='tool_alert'>${isHtml}</div>
              </div> `
          }
        },

        series: [
          {
            type: 'map3D',
            map: 'zgs',
            boxWidth: 100,
            regionHeight: 2,

            markPoint: {
              symbol: 'pin', // æ ‡è®°ç‚¹å½¢çŠ¶
              symbolSize: 50, // æ ‡è®°ç‚¹å¤§å°
              data: [
                {
                  name: '标记点1',
                  coord: ['104.3334', '29.2938'] // æ ‡è®°ç‚¹çš„三维坐标
                }
                // å¯ä»¥æ·»åŠ æ›´å¤šæ ‡è®°ç‚¹
              ]
            },

            // åœ°å›¾çš„颜色
            itemStyle: {
              color: '#8adfff', // åœ°å›¾æ¿å—的颜色
              opacity: 0.98, // å›¾å½¢çš„不透明度 [ default: 1 ]
              borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
              borderColor: '#35b5ff' // å›¾å½¢æè¾¹çš„颜色。[ default: #333 ]
            },

            realisticMaterial: {
              detailTexture: require('@/assets/images/face-num-bg3.png'),
              textureTiling: 1,
              textureOffset: 0,
              roughness: 0, // æè´¨ç²—糙度，0完全光滑，1完全粗糙
              metalness: 0,
              roughnessAdjust: 0
            },

            shading: 'realistic',

            // æ ‡ç­¾çš„相关设置
            label: {
              show: true, // (地图上的城市名称)是否显示标签
              distance: 5,
              formatter: function (params) {
                return params.name ? params.name : ' '
              },
              // æ ‡ç­¾çš„字体样式
              color: '#fff', // åœ°å›¾åˆå§‹åŒ–区域字体颜色
              fontSize: 16, // å­—体大小
              fontWeight: '300'
            },

            // é¼ æ ‡ hover é«˜äº®æ—¶å›¾å½¢å’Œæ ‡ç­¾çš„样式
            emphasis: {
              label: {
                // label é«˜äº®æ—¶çš„配置
                show: true,
                color: '#fff', // é«˜äº®æ—¶æ ‡ç­¾é¢œè‰²å˜ä¸º ç™½è‰²
                fontSize: 16 // é«˜äº®æ—¶æ ‡ç­¾å­—体 å˜å¤§
              },
              scale: true,
              itemStyle: {
                // itemStyle é«˜äº®æ—¶çš„配置
                color: '#0773ad' // é«˜äº®æ—¶åœ°å›¾æ¿å—颜色改变
              }
            },

            // åœ°é¢å¯ä»¥ä½¿æ•´ä¸ªåœºæ™¯çœ‹èµ·æ¥æ›´çœŸå®žï¼Œæ›´æœ‰æ¨¡åž‹æ„Ÿã€‚
            light: {
              main: {
                // åœºæ™¯ä¸»å…‰æºçš„设置，在 globe ç»„件中就是太阳光。
                color: '#fff', // ä¸»å…‰æºçš„颜色。
                intensity: 0.6, // ä¸»å…‰æºçš„强度。
                shadow: true, // ä¸»å…‰æºæ˜¯å¦æŠ•å°„阴影。默认关闭。开启阴影可以给场景带来更真实和有层次的光照效果。会增加程序的运行开销。
                shadowQuality: 'high', // é˜´å½±çš„质量。可选'low', 'medium', 'high', 'ultra'
                alpha: 30, // ä¸»å…‰æºç»• x è½´ï¼Œå³ä¸Šä¸‹æ—‹è½¬çš„角度。配合 beta æŽ§åˆ¶å…‰æºçš„方向。
                beta: 20 // ä¸»å…‰æºç»• y è½´ï¼Œå³å·¦å³æ—‹è½¬çš„角度。
              },
              ambient: {
                // å…¨å±€çš„环境光设置。
                color: '#fff', // çŽ¯å¢ƒå…‰çš„颜色。[ default: #fff ]
                intensity: 0.45 // çŽ¯å¢ƒå…‰çš„强度。[ default: 0.2 ]
              },
              ambientCubemap: {
                exposure: 2,
                diffuseIntensity: 1,
                specularIntensity: 1
              }
            },

            postEffect: {
              depthOfField: {
                enable: false // å…³é—­æ™¯æ·±æ•ˆæžœ
              }
            },

            groundPlane: {
              show: false, // æ˜¯å¦æ˜¾ç¤ºåœ°é¢
              color: '#ffffff' // åœ°é¢é¢œè‰²
            },

            viewControl: {
              projection: 'perspective', // æŠ•å½±æ–¹å¼ï¼Œé»˜è®¤ä¸ºé€è§†æŠ•å½±'perspective'，也支持设置为正交投影'orthographic'。
              autoRotate: false,
              dispose: 100,
              rotateSensitivity: 0, // æ—‹è½¬
              minBeta: -13,
              maxBeta: -13,
              zoomSensitivity: 0, // ç¼©æ”¾
              panSensitivity: 0, // å¹³ç§»
              center: [0, 0, 0],
              alpha: 60, // å€¾æ–œè§’度
              animationDurationUpdate: 1000, // è¿‡æ¸¡åŠ¨ç”»çš„时长
              animationEasingUpdate: 'cubicInOut' // è¿‡æ¸¡åŠ¨ç”»çš„缓动效果
            },
            left: '-5%',
            top: '3%'
          }
        ]
      }
      that.map.setOption(option)
      that.map.on('click', function (params) {
        if (params.seriesType === 'map3D') {
          console.log('Clicked adcode:', params)
        }
      })
    },

    fetchData (name) {
      if (name !== this.activerName) {
        this.activerName = name
        this.activerData = this.geoCoordinates[name]
      }
      return this.activerData
    }
  },

  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initMap()
      }, 100)
    })
  },

  beforeDestroy () {
    if (!this.map) {
      return
    }
    this.map.dispose()
    this.map = null
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
}

.map-main-container {
  width: 100%;
  height: 100%;
}

/*懒加载图标动画*/
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*弹窗样式*/
.layer {
  position: absolute;
  left: 400px;
  top: 300px;
  padding: 8px 16px;
  z-index: 100;
  background: rgba(10, 22, 64, 0.9);
  border-radius: 5px;
  border: 1px solid #35b5ff;
  transform: translate(-100%, -100%);
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    p {
      font-size: 20px;
      color: #fff;
      line-height: 50px;
    }
    .col-item {
      height: 41px;
      margin-top: 20px;
      border-right: 1px solid #172353;
      .num {
        color: #ebf8ff;
        font-size: 18px;
      }
      .text {
        color: #507ebc;
        font-size: 12px;
      }
    }
  }
  .content::after {
    content: "";
    width: 120px;
    height: 2px;
    background: #ffccff;
    position: absolute;
    right: -120px;
    top: 50%;
    transform: translateY(-50%);
  }
  .content::before {
    content: "";
    width: 2px;
    height: 80px;
    background: #ffb800;
    position: absolute;
    right: -134px;
    top: 136px;
    transform: rotateZ(-20deg);
  }
}

::v-deep .tooltip-container {
  /* border-left: 1px solid #b07801;
    border-bottom: 1px solid #b07801;
    border-right: 1px solid #b07801; */
  background-size: 100% 100%;
  border: 1px solid #2290ac;
  position: relative;
  padding: 6px 18px;

  &::after {
    position: absolute;
    content: "";
    width: 3px;
    height: 8px;
    background-color: #75f7f3;
    left: 0px;
    top: 0;
  }

  &::before {
    position: absolute;
    content: "";
    width: 3px;
    height: 8px;
    background-color: #75f7f3;
    right: 0px;
    top: 0px;
  }

  .title {
    margin-bottom: 2px;
    font-size: 14px;
  }
}
</style>

 src/views/screen/components/subheading.vue

New file
@@ -0,0 +1,149 @@
<template>
  <div class="is-annular-container">
    <div class="annular-container">
      <img src="@/assets/images/annular-bg.png" class="annular-bg" />
      <div class="echarts-container" ref="echartsContainer" :style="h">
        <div class="echarts" ref="echarts"></div>
      </div>
      <div class="title">{{ isData.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'annularApp',
  data () {
    return {
      h: null
    }
  },

  props: {
    isData: {
      type: Object,
      default: () => ({})
    }
  },

  methods: {
    initChart (val1, val2, color) {
      const annularDom = this.$refs.echarts
      const myAnnular = this.$echarts.init(annularDom)
      const option = {
        series: [
          {
            type: 'pie',
            radius: ['55%', '65%'],
            data: [
              {
                value: val1,
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#356eff' // 0% å¤„的颜色
                      },
                      {
                        offset: 1,
                        color: '#3fa2ff' // 100% å¤„的颜色
                      }
                    ],

                    global: false // ç¼ºçœä¸º false
                  }
                },

                label: {
                  show: true, // å•ç‹¬æ˜¾ç¤ºè¯¥æ•°æ®é¡¹
                  formatter: val1 + '',
                  color: color,
                  fontSize: 14
                }
              },

              {
                value: val2,
                itemStyle: {
                  color: '#223f66'
                },

                emphasis: {
                  show: false
                }
              }
            ],

            label: {
              show: false,
              position: 'center',
              color: '#fff'
            }
          }
        ]
      }

      myAnnular.setOption(option)
    },

    getW () {
      const width = this.$refs.echartsContainer.offsetWidth
      this.h = 'height:' + width + 'px'
    }
  },

  mounted () {
    this.getW()
    this.$nextTick(() => {
      this.initChart(
        this.isData.value1,
        this.isData.value2,
        this.isData.color
      )
    })
  }
}
</script>

<style lang="scss" scoped>
.is-annular-container {
  width: 100%;

  .annular-container {
    position: relative;

    .annular-bg {
      width: 100%;
      display: block;
    }

    .echarts-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 2;

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

    .title {
      text-align: center;
      font-size: 14px;
      color: #dcf8ff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>

 src/views/screen/index.vue

@@ -1,47 +1,1208 @@
<template>
  <div class="screen-container">
    <!-- <screen-title></screen-title> -->
    <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen">
      <!-- <screen-wrapper></screen-wrapper> -->
       <NewPage></NewPage>
    </v-scale-screen>
  </div>
  <div class="container" ref="contaner">
    <header>
      <img src="@/assets/images/header-bg.png" />
    </header>

    <div class="main-contaner">
      <div class="data-statistics-content">
        <img src="@/assets/images/workOrder-title.png" class="title" />
        <div class="main-left-container">
          <div class="work-order-container">
            <img
              src="@/assets/images/subheading1.png"
              class="subheading-title"
            />
            <div class="statistics-container">
              <div
                class="item-statistics-container"
                v-for="(item, index) in statistics"
                :key="index"
              >
                <itemSubheading :isData="item"></itemSubheading>
              </div>
            </div>
            <img
              src="@/assets/images/decorate-border.png"
              class="decorate-border"
            />
          </div>

          <div class="histogram-container">
            <img
              src="@/assets/images/subheading1.png"
              class="subheading-title"
            />
            <div class="statistics-container">
              <div class="DrawLine-content">
                <!-- <div style="width: 100%; height: 100%" ref="myDrawLine"></div> -->
                <lineChart></lineChart>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="map-container" ref="isMap">
        <mapApp></mapApp>
        <div class="btn-container">
          <img src="@/assets/images/btn-bg.png" class="bg-img" />
          <div class="btn-list">
            <img
              :src="activerBtnType === item.id ? item.bgActiver : item.bg"
              v-for="item in btnList"
              :key="item.id"
              @click="activerBtnType = item.id"
            />
          </div>
        </div>
      </div>

      <div class="data-statistics-content">
        <div class="facility-container">
          <img src="@/assets/images/facility-title.png" class="title" />
          <div class="facility-content">
            <div class="item-facility-data">
              <img
                src="@/assets/images/facility-title-3.png"
                class="item-facility-icon"
              />
              <ul>
                <li v-for="(item, index) in facilityData.video" :key="index">
                  <div class="value">{{ item.value ? item.value : "-" }}</div>
                  <div class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
            <div class="item-facility-data">
              <img
                src="@/assets/images/facility-title-1.png"
                class="item-facility-icon"
              />
              <ul>
                <li v-for="(item, index) in facilityData.car" :key="index">
                  <div class="value">{{ item.value ? item.value : "-" }}</div>
                  <div class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
            <div class="item-facility-data">
              <img
                src="@/assets/images/facility-title-2.png"
                class="item-facility-icon"
              />
              <ul>
                <li
                  v-for="(item, index) in facilityData.faceDetection"
                  :key="index"
                >
                  <div class="value">{{ item.value ? item.value : "-" }}</div>
                  <div class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="normal-container">
          <img src="@/assets/images/normal-title.png" class="title" />
          <div class="normal-statistics-content">
            <ul class="list-title-container">
              <li>地区</li>
              <li>人脸设备</li>
              <li>车辆设备</li>
              <li>视频设备</li>
            </ul>
            <div class="list-content">
              <div class="list-content-to is-scroll-bar">
                <ul
                  class="item-list"
                  v-for="(item, index) in facilityNormal"
                  :key="index"
                >
                  <li class="name">{{ item.name }}</li>
                  <li>{{ item.face }}</li>
                  <li>{{ item.car }}</li>
                  <li>{{ item.video }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <img src="@/assets/images/video-title.png" class="video-title" />
    </div>

    <footer>
      <img src="@/assets/images/footer-title-bg.png" class="footer-title" />
      <div class="footer-container">
        <div class="footer-statistics-container">
          <div class="face-container">
            <div
              class="item-face-container"
              :style="item.style"
              v-for="(item, index) in faceData"
              :key="index"
            >
              <div class="proportion">
                <img src="@/assets/images/face-num-bg.png" />
                <div class="value">{{ item.proportion }}%</div>
              </div>
              <div class="title">{{ item.title }}</div>
            </div>
          </div>

          <div class="video-container">
            <div
              class="item-video-data"
              v-for="(item, index) in videoData"
              :key="index"
            >
              <div class="video-data">
                <div class="proportion">{{ item.proportion }}%</div>
              </div>
              <div class="item-video-title">{{ item.title }}</div>
            </div>
          </div>

          <div class="car-container">
            <div
              class="item-car-container"
              v-for="(item, index) in carData"
              :key="index"
              :style="item.style"
            >
              {{ item.title }} <span>{{ item.proportion }}%</span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import ScreenTitle from './components/screen-title/index.vue';
import ScreenWrapper from './components/screen-wrapper/index.vue';
import NewPage from './newPage/index.vue'
import itemSubheading from '../screen/components/subheading.vue' // çŽ¯å½¢ç»Ÿè®¡å›¾
import lineChart from '../screen/components/lineChart.vue' // æŠ˜çº¿ç»Ÿè®¡å›¾
import mapApp from '../screen/components/map.vue' // åœ°å›¾

export default {
  name: 'App',
  components: {
    ScreenTitle,
    ScreenWrapper,
    NewPage,
  },
  data() {
  name: 'examineApp',
  components: { mapApp, itemSubheading, lineChart },
  data () {
    return {
    }
  },
  mounted() {
      // è®¾å¤‡æ•°æ®
      facilityData: {
        video: [
          {
            value: 4589,
            title: '设备总数'
          },
          {
            value: 4294,
            title: '设备正常数'
          },
          {
            value: 295,
            title: '设备异常数'
          }
        ],
        car: [
          {
            value: 4589,
            title: '设备总数'
          },
          {
            value: 4294,
            title: '设备正常数'
          },
          {
            value: 295,
            title: '设备异常数'
          }
        ],
        faceDetection: [
          {
            value: 4589,
            title: '设备总数'
          },
          {
            value: 4294,
            title: '设备正常数'
          },
          {
            value: 295,
            title: '设备异常数'
          }
        ]
      },

      // è®¾å¤‡æ­£å¸¸çŽ‡
      facilityNormal: [
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        }
      ],

      // äººè„¸è€ƒæ ¸
      faceData: [
        {
          title: '视图库对接稳定性',
          proportion: 100,
          style: {
            top: '13%',
            left: '2%'
          }
        },
        {
          title: '抓拍图片时钟准确性',
          proportion: 100,
          style: {
            top: '13%',
            right: '2%'
          }
        },
        {
          title: '点位在线率',
          proportion: 100,
          style: {
            top: '23%',
            left: '19%'
          }
        },
        {
          title: '抓拍图片合格性',
          proportion: 100,
          style: {
            top: '23%',
            right: '19%'
          }
        },
        {
          title: '抓拍数据大图可用性',
          proportion: 100,
          style: {
            bottom: '18%',
            left: '2%'
          }
        },
        {
          title: '目录一致率',
          proportion: 100,
          style: {
            bottom: '18%',
            right: '2%'
          }
        },
        {
          title: '信息采集准确率',
          proportion: 100,
          style: {
            bottom: '2%',
            left: '19%'
          }
        },
        {
          title: '抓拍数据及时上传准时性',
          proportion: 100,
          style: {
            bottom: '2%',
            right: '19%'
          }
        }
      ],

      // è§†é¢‘考核
      videoData: [
        {
          title: '点位在线率',
          proportion: 100
        },
        {
          title: '部级点位在线率',
          proportion: 100
        },
        {
          title: '重点点位在线率',
          proportion: 100
        },
        {
          title: '重点指挥图像在线率',
          proportion: 100
        },
        {
          title: '录像可用率',
          proportion: 10
        },
        {
          title: '部级巡查录像可用率',
          proportion: 100
        },
        {
          title: '重点点位录像可用率',
          proportion: 100
        },
        {
          title: '重点点位标注正确率',
          proportion: 100
        },
        {
          title: '视频图像资源安全管理',
          proportion: 100
        },
        {
          title: '重点点位校时正确率',
          proportion: 100
        },
        {
          title: '一机一档合格车',
          proportion: 100
        },
        {
          title: '一机一档注册车',
          proportion: 100
        },
        {
          title: '档案考核比',
          proportion: 100
        },
        {
          title: '平台在线率',
          proportion: 100
        }
      ],

      // è½¦è¾†è€ƒæ ¸
      carData: [
        {
          title: '抓拍数据大图可用性',
          proportion: 100,
          style: {
            top: '7%',
            left: '15%'
          }
        },
        {
          title: '设备抓拍数据准确',
          proportion: 100,
          style: {
            top: '7%',
            left: '59.2%'
          }
        },
        {
          title: '联网卡口设备目录一至率',
          proportion: 100,
          style: {
            top: '26%',
            left: '5%'
          }
        },
        {
          title: '信息采集准确率',
          proportion: 100,
          style: {
            top: '26%',
            left: '63%'
          }
        },
        {
          title: '设备抓拍数据完整性',
          proportion: 100,
          style: {
            top: '46%',
            left: '12%'
          }
        },
        {
          title: '点位在线率',
          proportion: 100,
          style: {
            top: '46%',
            left: '66%'
          }
        },
        {
          title: '设备时钟准确性',
          proportion: 100,
          style: {
            top: '65%',
            left: '13%'
          }
        },
        {
          title: '视图库对接稳定性',
          proportion: 100,
          style: {
            top: '65%',
            left: '70%'
          }
        },
        {
          title: '设备URL可用性',
          proportion: 100,
          style: {
            top: '83%',
            left: '18.5%'
          }
        },
        {
          title: '抓拍数据上传及时性',
          proportion: 100,
          style: {
            top: '83%',
            left: '59.5%'
          }
        }
      ],

      // é»˜è®¤é€‰ä¸­æŒ‰é’® st çœåŽ… qx åŒºåŽ¿ ga å…¬å®‰
      btnList: [
        {
          id: 'st',
          bg: require('@/assets/images/st-btn-1.png'),
          bgActiver: require('@/assets/images/st-btn-2.png')
        },
        {
          id: 'qx',
          bg: require('@/assets/images/qx-btn-1.png'),
          bgActiver: require('@/assets/images/qx-btn-2.png')
        },
        {
          id: 'ga',
          bg: require('@/assets/images/ga-btn-1.png'),
          bgActiver: require('@/assets/images/ga-btn-2.png')
        }
      ],
      activerBtnType: 'st',
      statistics: [
        {
          value1: 9688,
          value2: 0,
          color: '#e4b54f',
          title: '工单总数'
        },
        {
          value1: 1200,
          value2: 1200,
          color: '#5cff9a',
          title: '已处理工单数'
        },
        {
          value1: 18,
          value2: 1200,
          color: '#ff7b72',
          title: '未处理工单数'
        }
      ],
      isFullScreen: false
    }
  }
}
</script>

<style lang="scss" scoped>
.screen-container {
  user-select: none;
  -webkit-user-select: none;
}
.screen {
  background-color: #033c76 !important;
  //background: url('../../assets/images/screen/pageBg1.jpg') !important;
  //background-size: cover !important;
  //background-repeat: no-repeat !important;
  //background-position: center center !important;
.container {
  width: 100vw;
  height: 100vh;
  // min-width: 1919px;
  background-image: url("../../assets/images/background-img.jpg");
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  header {
    position: relative;
    z-index: 4;
    img {
      width: 100%;
      display: block;
    }
  }

  .main-contaner {
    flex: 1;
    width: 100%;
    height: 0;
    display: flex;
    flex-direction: row;
    margin-top: -2%;
    position: relative;

    .data-statistics-content {
      width: 20.833333%;
      padding-left: 1%;
      padding-right: 1%;
      padding-top: 0.5%;
      box-sizing: border-box;
      height: 100%;
      display: flex;
      flex-direction: column;

      .title {
        width: 100%;
        flex-shrink: 0;
        flex-grow: 0;
        display: block;
      }

      .main-left-container {
        position: relative;
        height: 100%;
        border-bottom: 1px solid #3e97e4;
        border-left: 1px solid #3e97e4;
        padding: 4% 0 4% 4%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        &::after {
          width: 2px;
          height: 20px;
          content: "";
          position: absolute;
          left: -6px;
          top: -18px;
          background-color: #3e97e4;
          transform: rotate(-30deg);
        }

        &::before {
          width: 43px;
          height: 40px;
          content: "";
          position: absolute;
          background-image: url("../../assets/images/border-l-icon.png");
          bottom: 0;
          left: 0;
        }

        .work-order-container {
          height: 40%;
          flex-shrink: 0;
          flex-grow: 0;
          display: flex;
          flex-direction: column;

          .subheading-title {
            width: 97%;
            display: block;
            flex-shrink: 0;
            flex-grow: 0;
          }

          .statistics-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex: 1;
            margin: 0 -5px;

            .item-statistics-container {
              width: calc(33.33% - 10px);
              margin: 0 5px;
            }
          }

          .decorate-border {
            width: 100%;
            display: block;
          }
        }

        .histogram-container {
          padding-top: 5%;
          box-sizing: border-box;
          height: 60%;
          flex-shrink: 0;
          flex-grow: 0;
          display: flex;
          flex-direction: column;

          .subheading-title {
            width: 97.3%;
            display: block;
            flex-shrink: 0;
            flex-grow: 0;
          }

          .statistics-container {
            flex: 1;
            position: relative;

            .DrawLine-content {
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
            }
          }
        }
      }

      .facility-container {
        height: 45.9754434%;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        flex-grow: 0;

        .title {
          width: 100%;
          flex-shrink: 0;
          flex-grow: 0;
          display: block;
        }

        .facility-content {
          flex: 1;
          position: relative;
          border-bottom: 1px solid #3e97e4;
          border-right: 1px solid #3e97e4;
          display: flex;
          padding-top: 4%;
          flex-direction: row;
          overflow: hidden;

          &::after {
            width: 2px;
            height: 20px;
            content: "";
            position: absolute;
            right: -6px;
            top: -18px;
            background-color: #3e97e4;
            transform: rotate(30deg);
          }

          &::before {
            width: 43px;
            height: 40px;
            content: "";
            position: absolute;
            background-image: url("../../assets/images/border-icon.png");
            bottom: 0;
            right: 0;
          }

          .item-facility-data {
            width: 33.33%;
            flex-shrink: 0;
            flex-grow: 0;
            background-image: url("../../assets/images/item-facility.png");
            background-size: 100% auto;
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;

            .item-facility-icon {
              margin: 0 auto;
              margin-top: 10%;
              width: 73%;
              display: block;
              flex-shrink: 0;
              flex-grow: 0;
            }

            ul {
              flex: 1;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              text-align: center;
              font-size: 14px;
              list-style-type: none;

              li:nth-child(1) {
                .value {
                  color: #e4b54f;
                }
                .title {
                  color: #dcf8ff;
                }
              }

              li:nth-child(2) {
                .value {
                  color: #5cff9a;
                }
                .title {
                  color: #dcf8ff;
                }
              }

              li:nth-child(3) {
                .value {
                  color: #ff7b72;
                }
                .title {
                  color: #dcf8ff;
                }
              }
            }
          }
        }
      }

      .normal-container {
        margin-top: 2%;
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 0;

        .title {
          width: 100%;
          flex-shrink: 0;
          flex-grow: 0;
          display: block;
        }

        .normal-statistics-content {
          flex: 1;
          position: relative;
          border-bottom: 1px solid #3e97e4;
          border-right: 1px solid #3e97e4;
          padding: 4% 4% 4% 0;
          box-sizing: border-box;
          height: 0;

          &::after {
            width: 2px;
            height: 20px;
            content: "";
            position: absolute;
            right: -6px;
            top: -18px;
            background-color: #3e97e4;
            transform: rotate(30deg);
          }

          &::before {
            width: 43px;
            height: 40px;
            content: "";
            position: absolute;
            background-image: url("../../assets/images/border-icon.png");
            bottom: 0;
            right: 0;
          }

          .list-title-container {
            width: 100%;
            height: 45px;
            line-height: 45px;
            list-style-type: none;
            display: flex;
            flex-direction: row;
            background-color: #09316b;
            box-shadow: inset 0 0 16px rgba(25, 99, 210, 0.1);
            flex-shrink: 0;
            flex-grow: 0;
            position: relative;

            &::after {
              position: absolute;
              top: 0;
              left: 0;
              content: "";
              width: 15px;
              height: 15px;
              background-image: url("../../assets/images/list-t-l-icon.png");
            }

            &::before {
              position: absolute;
              top: 0;
              right: 0;
              content: "";
              width: 15px;
              height: 15px;
              background-image: url("../../assets/images/list-t-r-icon.png");
            }

            li {
              width: 25%;
              text-align: center;
              font-size: 14px;
              color: #00e6f4;
              flex-shrink: 0;
              flex-grow: 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .list-content {
            height: calc(100% - 45px);

            background-image: url("../../assets/images/list-bg.png");
            background-size: 100% 100%;
            box-shadow: inset 0 0 20px rgba(25, 99, 210, 0.1);
            position: relative;

            &::after {
              position: absolute;
              bottom: 0;
              left: 0;
              content: "";
              width: 15px;
              height: 15px;
              background-image: url("../../assets/images/list-b-l-icon.png");
            }

            &::before {
              position: absolute;
              bottom: 0;
              right: 0;
              content: "";
              width: 15px;
              height: 15px;
              background-image: url("../../assets/images/list-b-r-icon.png");
            }

            .list-content-to {
              height: 100%;
              overflow-y: auto;
              overflow-x: hidden;
            }

            .item-list {
              display: flex;
              flex-direction: row;
              align-items: center;
              list-style-type: none;
              border-bottom: 1px dashed #223654;
              li {
                width: 25%;
                text-align: center;
                font-size: 14px;
                color: #dcf8ff;
                flex-shrink: 0;
                flex-grow: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 44px;
                line-height: 44px;
              }

              .name {
                color: #00b4ff;
              }
            }
          }
        }
      }
    }

    .map-container {
      flex: 1;
      height: 100%;
      margin: 0 1%;
      position: relative;
      overflow: hidden;
      // background-image: url('../assets//images/face-num-bg3.png');
      // border:1px solid #ddd;
      // box-sizing: border-box;

      .main-map {
        height: 100%;
        overflow: hidden;
      }

      .btn-container {
        width: 60%;
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;

        .bg-img {
          width: 100%;
        }

        .btn-list {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          padding-top: 3.3%;
          padding-left: 16.4%;
          padding-right: 16.4%;
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          img {
            width: 26.638484%;
            flex-shrink: 0;
            flex-grow: 0;
            display: block;
            cursor: pointer;
            user-select: none;
          }
        }
      }
    }

    .video-title {
      width: 60.5208333%;
      position: absolute;
      z-index: 8;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
    }
  }

  footer {
    .footer-title {
      width: 100%;
      display: block;
    }

    .footer-container {
      height: 220px;
      box-sizing: border-box;
      position: relative;
      background-image: url("../../assets/images/footer-bg.png");
      background-size: cover;
      background-position: center;

      .footer-statistics-container {
        width: 100%;
        height: 100%;
        padding-bottom: 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: stretch;

        .face-container,
        .car-container {
          flex: 1;
          height: 100%;
        }

        .face-container {
          position: relative;

          background-image: url("../../assets/images/face-bg.png");
          background-size: 500px 200px;
          background-position: center;
          background-repeat: no-repeat;

          // .face-bj-img {
          //   position: absolute;
          //   left: 50%;
          //   top: 50%;
          //   transform: translate(-50%, -50%);
          //   width: 83.1946755%;
          //   display: block;
          //   z-index: 2;
          // }

          .item-face-container {
            position: absolute;
            z-index: 4;
            width: 22.296173%;

            .proportion {
              width: 50px;
              margin: 0 auto;
              color: #00eaff;
              text-shadow: 2px 2px 4px #152944;
              position: relative;

              img {
                width: 100%;
                display: block;
              }

              .value {
                position: absolute;
                left: 50%;
                top: 53%;
                transform: translate(-50%, -50%);
                font-size: 14px;
              }
            }

            .title {
              text-align: center;
              font-size: 12px;
              color: #dcf8ff;
              white-space: nowrap; /* ä¸æ¢è¡Œ */
              overflow: hidden; /* éšè—è¶…出的内容 */
              text-overflow: ellipsis; /* ç”¨çœç•¥å·è¡¨ç¤ºè¢«éšè—çš„部分 */
            }
          }
        }

        .car-container {
          position: relative;
          background-image: url("../../assets/images/car-bg2.png");
          background-size: 500px 200px;
          background-position: center;
          background-repeat: no-repeat;

          // .car-bj-img {
          //   position: absolute;
          //   left: 50%;
          //   top: 50%;
          //   transform: translate(-50%, -50%);
          //   width: 83.1946755%;
          //   display: block;
          //   z-index: 2;
          // }

          .item-car-container {
            background-image: url("../../assets/images/item-car-bg.png");
            background-size: 100% 100%;
            color: #dcf8ff;
            font-size: 12px;
            line-height: 26px;
            padding: 0 15px;
            position: absolute;
            z-index: 5;

            span {
              color: #ffc23e;
            }
          }
        }

        .video-container {
          width: 37.6041667%;
          height: 100%;
          flex-shrink: 0;
          flex-grow: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: self-start;
          box-sizing: border-box;

          .item-video-data {
            width: 14.2857143%;
            flex-grow: 0;
            padding: 0 10px;
            box-sizing: border-box;
            height: 50%;
            display: flex;
            flex-direction: column;

            .video-data {
              flex: 1;
              position: relative;
              background-image: url("../../assets/images/item-video-bg.png");
              background-size: 100%;
              background-position: center;
              background-repeat: no-repeat;

              img {
                width: 100%;
                display: block;
              }

              .proportion {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-size: 20px;
                font-weight: bold;
                color: #00fcff;
                text-shadow: 2px 2px 4px #152944;
              }
            }

            .item-video-title {
              text-align: center;
              color: #dcf8ff;
              height: 32px;
              font-size: 13px;
              flex-shrink: 0;
              flex-grow: 0;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* æ˜¾ç¤ºçš„行数 */
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}

.is-scroll-bar::-webkit-scrollbar {
  width: 4px;
}

.is-scroll-bar::-webkit-scrollbar-thumb {
  border-radius: 0px;
  box-shadow: inset 0 0 5px #1e75d9;
  background-color: #1e75d9;
  opacity: 0.2;
}

.is-scroll-bar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #0d172c;
  border-radius: 0;
  background-color: #0d172c;
}
</style>

 src/views/screen/index1.vue

New file
@@ -0,0 +1,47 @@
<template>
  <div class="screen-container">
    <!-- <screen-title></screen-title> -->
    <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen">
      <!-- <screen-wrapper></screen-wrapper> -->
       <NewPage></NewPage>
    </v-scale-screen>
  </div>

</template>

<script>
import ScreenTitle from './components/screen-title/index.vue';
import ScreenWrapper from './components/screen-wrapper/index.vue';
import NewPage from './newPage/index.vue'

export default {
  name: 'App',
  components: {
    ScreenTitle,
    ScreenWrapper,
    NewPage,
  },
  data() {
    return {
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.screen-container {
  user-select: none;
  -webkit-user-select: none;
}
.screen {
  background-color: #033c76 !important;
  //background: url('../../assets/images/screen/pageBg1.jpg') !important;
  //background-size: cover !important;
  //background-repeat: no-repeat !important;
  //background-position: center center !important;
}

</style>