大屏demo界面，需要npm i插件 拉common

package-lock.json

 {
-  "name": "GavelDmg",
+  "name": "gavel-budgetms-vue",
   "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "GavelDmg",
+      "name": "gavel-budgetms-vue",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
@@ -75,6 +75,7 @@
         "@vue/compiler-sfc": "^3.3.4",
         "@vue/composition-api": "^1.7.1",
         "animate.css": "^4.1.1",
+        "echarts": "^4.9.0",
         "file-saver": "^2.0.2",
         "font-awesome": "^4.7.0",
         "jquery": "^3.6.1",
@@ -22048,6 +22049,7 @@
         "@vue/compiler-sfc": "^3.3.4",
         "@vue/composition-api": "^1.7.1",
         "animate.css": "^4.1.1",
+        "echarts": "^4.9.0",
         "file-saver": "^2.0.2",
         "font-awesome": "^4.7.0",
         "jquery": "^3.6.1",

public/index.html

@@ -5,8 +5,10 @@
     <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="initial-scale=1.0, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
     <title><%= webpackConfig.name %></title>
+<!--    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d3320f95543a851e89e2148de351d2f4"></script> -->
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>
     html,

src/router/index.js

@@ -291,6 +291,19 @@ export const powerRoutes=[
        name:'kshdp',
        path:"kshdp"
      },
+     {
+       component:'hzcxbb/szkb/index',
+       hidden:false,
+       meta:{
+           "title": "数字看板",
+           "icon": "",
+           "noCache": false,
+           "link": null,
+           "mkid":'test',
+       },
+       name:'szkb',
+       path:"szkb"
+     },
      // {
      //   component:'hzcxbb/ysspzl/index',
      //   hidden:false,

src/views/hzcxbb/szkb/szkb.scss

+  #szkb{
+    .com-count-title{
+      transform: translateY(10px);
+      font-size: 1vw;
+      color:#3aafe8;
+      line-height: 2vh;
+      font-weight: 600;
+      &::before{
+        content: '';
+        height: .5vw;
+        width: .5vw;
+        display: inline-block;
+        background-color: #bde4ff;
+        border-radius: 50%;
+        margin-bottom: .1vh;
+      }
+    }
+    .com-count-body{
+      font-size: .65vw;
+      height: calc(100% - 2vh);
+      width: 100%;
+    }
+    .itembg{
+      background-image: url(./static/itembg.png);
+      background-size: 100% 100%;
+    }
+    background-image: url(./static/bg.png);
+    background-size: 100% 100%;
+    height: 100vh;
+    width: 100vw;
+    .title{
+      background-image: url(./static/bg_top.png);
+      background-size: 100% 100%;
+      height: 8vh;
+      width: 100%;
+      text-align: center;
+      line-height: 8vh;
+      color: #bde4ff;
+      font-size: 1.8vw;
+      font-weight: 700;
+    }
+    .main{
+      height: 58vh;
+      width: 100%;
+      display: flex;
+      .first{
+        height: 100%;
+        width: 30%;
+        padding:0.5vh;
+      }
+      .second{
+        height: 100%;
+        width: 40%;
+         padding:0.5vh;
+
+      }
+      .third{
+        height: 100%;
+        width: 30%;
+         padding:0.5vh;
+      }
+    }
+    .bottom{
+      display: flex;
+       height: 39vh;
+       width: 100%;
+       margin-top: 1vh;
+       .first{
+         height: 100%;
+         width: 30%;
+         padding:0.5vh;
+       }
+       .second{
+         height: 100%;
+         width: 40%;
+          padding:0.5vh;
+
+       }
+       .third{
+         height: 100%;
+         width: 30%;
+          padding:0.5vh;
+       }
+    }
+  }
+
+.itemtitle{
+  margin-top: 1vh;
+  margin-bottom: 1vh;
+  height: 5vh;
+  width: 100%;
+  line-height: 5vh;
+  font-size: 1.28vw;
+  text-align: center;
+  color: #bde4ff;
+  font-weight: 700;
+}
+.itemtitleb{
+  margin-top: 1vh;
+  margin-bottom: 1vh;
+  height: 4vh;
+  width: 100%;
+  line-height: 4vh;
+  font-size: 1.28vw;
+  text-align: center;
+  color: #bde4ff;
+  font-weight: 700;
+}
+.maintitle{
+width: 60%;margin-right: 20%;margin-left: 20%;border-radius: 30px;
+background-color:rgba(58,175,232,.6) ;
+border-radius: 18px;
+
+}
+.itemtitlebg1{
+  background: linear-gradient(to right,#3aafe8,rgba(48,82,174,0));
+}
+.itemtitlebg2{
+  background: linear-gradient(to left,#3aafe8,rgba(48,82,174,0));
+}
+.itemtitlebg3{
+  background: linear-gradient(to left,rgba(48,82,174,0) ,#3aafe8 30% ,rgba(48,82,174,0));
+}
+.itemmain{
+  height:51vh;
+  width: 100%;
+
+}
+.itemmainb{
+  height:32vh;
+  width: 100%;
+
+}
+
+
+.boxall {
+    border: 1px solid #3486da;
+    background: rgba(0,70,190,.1);
+    padding: .6vw;
+    position: relative;
+    margin-bottom: 0.25rem;
+    z-index: 10;
+    .i1{
+      border-right: 3px solid #3486da;
+      right: -2px;
+         position: absolute;
+         width: 1vw;
+         height:1vw;
+         content: "";
+         border-top: 3px solid #3486da;
+         top: -2px;
+    }
+    .i2{
+      border-left: 3px solid #3486da;
+      left: -2px;
+         position: absolute;
+         width: 1vw;
+         height:1vw;
+         content: "";
+         border-top: 3px solid #3486da;
+         top: -2px;
+    }
+    .i3{
+      border-right: 3px solid #3486da;
+      right: -2px;
+         position: absolute;
+         width: 1vw;
+         height:1vw;
+         content: "";
+         border-top: 3px solid #3486da;
+         bottom: -2px;
+          transform: rotate(90deg);
+    }
+    .i4{
+      border-left: 3px solid #3486da;
+      left: -2px;
+         position: absolute;
+         width: 1vw;
+         height:1vw;
+         content: "";
+         border-top: 3px solid #3486da;
+         bottom: -2px;
+          transform: rotate(-90deg);
+    }
+.lbbt{
+  height: 4vh;
+  width: 100%;
+  font-size: .9vw;
+  display: flex;
+  line-height: 4vh;
+  color: #61d2f7;
+}
+.flex1{
+  flex: 1;
+}
+.lbbody{
+  height: calc(100% - 4vh);
+}
+.lbbody div{
+  flex: 1;
+  line-height: 25px;
+  font-size: 13px;
+  text-align: center;
+}
+.lbtit > :nth-child(odd) {
+  	
+  		-webkit-box-shadow: #07417a 0px 0px 10px;
+  		-moz-box-shadow: #07417a 0px 0px 10px;
+  		box-shadow: inset 0 0 30px #07417a;
+  /*position: relative;*/
+}
+.lbtit > :nth-child(even) {
+
+  		-webkit-box-shadow: #3486da 0px 0px 10px;
+  		-moz-box-shadow: #3486da 0px 0px 10px;
+  		box-shadow: inset 0 0 30px #3486da;
+  /*position: relative;*/
+}
+
+}
+
+
+

src/views/hzcxbb/test/index.vue

+<template>
+ <div id="map-location" class="min_full">
+
+ </div>
+</template>
+
+<script>
+
+  export default{
+    mounted() {
+      this.$nextTick(()=>{
+        this.cloudMap = new AMap.Map('map-location', {
+          center: [120.59241 , 31.30356 ],//设置地图中心点坐标
+          resizeEnable: true,
+          mapStyle: 'amap://styles/def937553c471693ab838e31fdbc6d82',
+          viewMode: '3D', // 模式
+          showBuildingBlock: true,
+          pitch: 75, // 仰角
+          zoom: 17 // 缩放
+        })
+
+      })
+    },
+    data() {
+      return{
+        cloudMap:{}
+      }
+    },
+    methods:{
+
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>