From f34d3f2807a9e1c2556e37f7e0ff2655cb7fbe57 Mon Sep 17 00:00:00 2001
From: 123456 <‘ceshi@qq.com’>
Date: Thu, 29 Jun 2023 18:06:03 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=EF=BC=8C=E6=96=87=E5=8C=96?=
 =?UTF-8?q?=E5=8D=87=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json           |   5 +
 package.json                |   1 +
 src/main.js                 |   5 +-
 src/views/cultrue/index.vue | 653 +++++++++++++++++++++++++-----------
 src/views/index.vue         | 549 ++++++++++++++++++++----------
 src/views/ty/index.vue      | 167 +++++----
 6 files changed, 941 insertions(+), 439 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f22159..f1c623d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13533,6 +13533,11 @@
       "resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz",
       "integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4="
     },
+    "v-scale-screen": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/v-scale-screen/-/v-scale-screen-1.0.2.tgz",
+      "integrity": "sha512-qMXPglHIs8KnhzDBdEBLcIoF3q7jgFCTWNIVPD5M0FGBkD+amYjbFUoLdKol/Xylm+pli4AHOZOqwyL6xX62SA=="
+    },
     "v8-compile-cache": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.0.tgz",
diff --git a/package.json b/package.json
index ebbe7d5..cf86bfa 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "echarts": "^5.4.2",
     "less": "3.9.0",
     "less-loader": "4.1.0",
+    "v-scale-screen": "^1.0.2",
     "vue": "^2.6.11",
     "vue-awesome": "^4.0.2",
     "vue-router": "^3.1.5",
diff --git a/src/main.js b/src/main.js
index d8655a0..06e63ed 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,8 +3,11 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 import dataV from '@jiaminghi/data-view';
+import VScaleScreen from 'v-scale-screen';
+Vue.use(VScaleScreen);
 Vue.use(dataV);
 
+
 // 按需引入vue-awesome图标
 // import Icon from 'vue-awesome/components/Icon';
 // import 'vue-awesome/icons/chart-bar.js';
@@ -28,7 +31,7 @@ import echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 
 Vue.config.productionTip = false;
-
+// Vue.use(VScaleScreen);
 new Vue({
   router,
   store,
diff --git a/src/views/cultrue/index.vue b/src/views/cultrue/index.vue
index 2b58e57..f3f0944 100644
--- a/src/views/cultrue/index.vue
+++ b/src/views/cultrue/index.vue
@@ -1,73 +1,75 @@
 <template>
-  <div id="cultrue">
-    <!-- 左侧 -->
-    <div class="leftbox">
-      <div class="lb_wht">
-        <span class="wh_big_tit">文化</span>
-        <span class="wh_small">图书馆 &nbsp; | &nbsp; 文化馆 &nbsp; | &nbsp; 博物馆</span>
-      </div>
-      <!-- 总计进馆总人数 -->
-      <div class="inszone">
-        <span class="institle">总计进馆人数</span>
-        <!-- 今日进馆人数 -->
-        <div class="insval">
-          <img src="../../assets/wh/td_ins.png" />
-          <span class="insv">234,098</span>
-          <span class="inst">今日进馆人数</span>
+  <v-scale-screen width="1920" height="1080">
+    <div id="cultrue">
+      <!-- 左侧 -->
+      <div class="leftbox">
+        <div class="lb_wht">
+          <span class="wh_big_tit">文化</span>
+          <span class="wh_small">图书馆 &nbsp; | &nbsp; 文化馆 &nbsp; | &nbsp; 博物馆</span>
         </div>
-        <!-- 本月进馆人数 -->
-        <div class="insval">
-          <img src="../../assets/wh/tm_ins.png" />
-          <span class="insv">234,098</span>
-          <span class="inst">本月进馆人数</span>
+        <!-- 总计进馆总人数 -->
+        <div class="inszone">
+          <span class="institle">总计进馆人数</span>
+          <!-- 今日进馆人数 -->
+          <div class="insval">
+            <img src="../../assets/wh/td_ins.png" />
+            <span id="insv" class="insv">234,098</span>
+            <span class="inst">今日进馆人数</span>
+          </div>
+          <!-- 本月进馆人数 -->
+          <div class="insval">
+            <img src="../../assets/wh/tm_ins.png" />
+            <span id="insv2" class="insv">234,098</span>
+            <span class="inst">本月进馆人数</span>
+          </div>
+          <!-- 本年进馆人数 -->
+          <div class="insval">
+            <img src="../../assets/wh/tyear_ins.png" />
+            <span id="insv3" class="insv">234,098</span>
+            <span class="inst">本年进馆人数</span>
+          </div>
         </div>
-        <!-- 本年进馆人数 -->
-        <div class="insval">
-          <img src="../../assets/wh/tyear_ins.png" />
-          <span class="insv">234,098</span>
-          <span class="inst">本年进馆人数</span>
+        <!-- 24h ins 统计图 -->
+        <div class="dinszone">
+          <span class="dins_title">24小时总进馆人流趋势</span>
+          <!-- 柱状统计图 -->
+          <div class="dins_chart" id="dinschart" style="height: 200px; width: 100%"></div>
         </div>
       </div>
-      <!-- 24h ins 统计图 -->
-      <div class="dinszone">
-        <span class="dins_title">24小时总进馆人流趋势</span>
-        <!-- 柱状统计图 -->
-        <div class="dins_chart" id="dinschart" style="height: 200px; width: 100%"></div>
-      </div>
-    </div>
-    <!-- 中间 -->
-    <div class="center">
-      <div class="ctop">24小时进馆人数</div>
-      <div class="cmid">
-        <div class="cmdiv">
-          <span class="cmdval">890,098</span>
-          <span class="cmdt">博物馆</span>
+      <!-- 中间 -->
+      <div class="center">
+        <div class="ctop">24小时进馆人数</div>
+        <div class="cmid">
+          <div class="cmdiv">
+            <span id="cmdval1" class="cmdval">890,098</span>
+            <span class="cmdt">博物馆</span>
+          </div>
+          <div class="cmdiv">
+            <span id="cmdval2" class="cmdval">890,098</span>
+            <span class="cmdt">文化馆</span>
+          </div>
         </div>
-        <div class="cmdiv">
-          <span class="cmdval">890,098</span>
-          <span class="cmdt">文化馆</span>
+        <div class="cbuttom">
+          <span id="cmdval3" class="cbval">23,334</span>
+          <span class="cbt">图书馆</span>
         </div>
       </div>
-      <div class="cbuttom">
-        <span class="cbval">23,334</span>
-        <span class="cbt">图书馆</span>
-      </div>
-    </div>
-    <!-- 右侧 -->
-    <div class="rightbox">
-      <!-- 各场馆人流趋势 -->
-      <div class="pcgrliu">
-        <span class="pcg_title">各场馆人流趋势</span>
-        <div id="pcgchart" style="width: 100%;height: 12vh;"></div>
-      </div>
-      <!-- 图书馆数据统计 -->
-      <div class="tsgrliu">
-        <span class="tsg_title">图书馆数据统计</span>
-        <div id="tsgchart" style="width: 100%;height: 12vh;"></div>
+      <!-- 右侧 -->
+      <div class="rightbox">
+        <!-- 各场馆人流趋势 -->
+        <div class="pcgrliu">
+          <span class="pcg_title">各场馆人流趋势</span>
+          <div id="pcgchart" style="width: 100%;height: 32vh;margin-top: 20px;"></div>
+        </div>
+        <!-- 图书馆数据统计 -->
+        <div class="tsgrliu">
+          <span class="tsg_title">图书馆数据统计</span>
+          <div id="tsgchart" style="width: 100%;height: 20vh;margin-top: 20px;"></div>
+        </div>
       </div>
-    </div>
 
-  </div>
+    </div>
+  </v-scale-screen>
 </template>
 <script>
 // 引入echarts
@@ -86,7 +88,15 @@ export default {
     }
     console.log(cc.classList)
     this.cultrue_bar1();
+    this.cultrue_bar2();
     this.cultrue_bar3();
+    this.addNumber(0,234098,'insv')
+    this.addNumber(0,234098,'insv2')
+    this.addNumber(0,234098,'insv3')
+    this.addNumber(0,890098,'cmdval1')
+    this.addNumber(0,890098,'cmdval2')
+    this.addNumber(0,234098,'cmdval3')
+    // var name = ['图书馆', '文化馆', '博物馆']
   },
   methods: {
     cultrue_bar1() {
@@ -119,7 +129,7 @@ export default {
         },
         xAxis: [{
           data: [
-          '08:00','09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00',
+            '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
           ],
           axisLine: {
             lineStyle: {
@@ -138,9 +148,9 @@ export default {
           axisLabel: {
             // interval: 0,
             // rotate: 0
-            show:true,
-            textStyle:{
-              color:'#fff'
+            show: true,
+            textStyle: {
+              color: '#fff'
             }
           }
         }],
@@ -156,9 +166,9 @@ export default {
           splitLine: {
             show: true,
             lineStyle: {
-        // 使用深浅的间隔色
-        color: '#027eff'
-    }
+              // 使用深浅的间隔色
+              color: '#027eff'
+            }
           },
           axisLabel: {
             color: '#0095FF',
@@ -221,20 +231,20 @@ export default {
           z: 2,
         },
         {
-            name: '背景',
-            type: 'bar',
-            barWidth: '10%',
-            barGap: '-100%',
-            data: [15000,15000,15000,15000,15000,15000,15000,15000,15000],
-            itemStyle: {
-                normal: {
-                    color: '#004298',
-                    barBorderRadius: 30,
-                    // backgroundColor:'#091C24'
-                    // borderColor:'#00D1F0'
-                }
-            },
-            z: 1,
+          name: '背景',
+          type: 'bar',
+          barWidth: '10%',
+          barGap: '-100%',
+          data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
+          itemStyle: {
+            normal: {
+              color: '#004298',
+              barBorderRadius: 30,
+              // backgroundColor:'#091C24'
+              // borderColor:'#00D1F0'
+            }
+          },
+          z: 1,
         },
         ]
       }
@@ -242,166 +252,416 @@ export default {
 
       option && myChart.setOption(option);
     },
-    cultrue_bar3() {
-      var chartDom = document.getElementById("tsgchart1");
+    cultrue_bar2() {
+      var chartDom = document.getElementById("pcgchart");
       var myChart = echarts.init(chartDom);
-      // var option;
-      // var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00', '22:00'];
 
-      // var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000]
-      // var data = [Math.random() * 300]
-      var option = {
+      var option
+      //       var xData = function() {
+      //     var data = [];
+      //     for (var i = 2011; i < 2017; i++) {
+      //         data.push(i + "年");
+      //     }
+      //     return data;
+      // }();
+      var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
+      var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
+      var name = ['图书馆', '文化馆', '博物馆']
+      var data = [
+        [137, 34, 135, 161, 74, 152, 110, 100, 150],
+        [174, 137, 135, 34, 152, 135, 140, 160, 100],
+        [134, 74, 137, 135, 161, 137, 300, 220, 250],
+        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
+        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
+        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
+        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
+        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
+        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
+      ]
+
+      var series = [];
+      for (var i = 0; i < 6; i++) {
+        series.push({
+          name: name[i],
+          type: "line",
+          symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
+          symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+          smooth: true, //是否平滑曲线显示
+          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: color[i]
+              }, {
+                offset: 0.8,
+                color: 'rgba(255,255,255,0)'
+              }], false),
+              // shadowColor: 'rgba(255,255,255, 0.1)',
+              shadowBlur: 10,
+              opacity: 0.3,
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: color[i],
+              lineStyle: {
+                width: 1,
+                type: 'solid' //'dotted'虚线 'solid'实线
+              },
+              borderColor: color[i], //图形的描边颜色。支持的格式同 color
+              borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
+              barBorderRadius: 0,
+              label: {
+                show: false,
+              },
+              opacity: 0.5,
+            }
+          },
+          data: data[i],
+
+        })
+      }
+      option = {
+        // backgroundColor: "#141f56",
+        legend: {
+          top: 0,
+          itemGap: 15,
+          itemWidth: 15,
+          textStyle: {
+            color: '#fff',
+            fontSize: '14'
+          },
+          data: name
+        },
+        title: {
+          // text: "负面言论分领域趋势",
+          textStyle: {
+            color: '#fff',
+            fontSize: '22',
+            fontWeight: 'normal',
+          },
+          subtextStyle: {
+            color: '#90979c',
+            fontSize: '16',
+
+          },
+        },
         tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
+          trigger: "axis",
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
+            lineStyle: {
+              color: '#57617B'
+            }
           },
-          formatter: function (params) {
-            return params[0].name + "</br>" + params[0].value
-          }
+          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
+          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
+          padding: [8, 10], //内边距
+          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
         },
-        // legend: {
-        //   data: ['厂用电量']
-        // },
         grid: {
-          left: '3%',
-          right: '3%',
-          bottom: '3%',
-          top: '10%',
-          containLabel: true
+          borderWidth: 0,
+          top: 240,
+          bottom: 240,
+          textStyle: {
+            color: "#fff"
+          }
         },
         xAxis: [{
-          data: [
-          '08:00','09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00',
-          ],
+          type: "category",
           axisLine: {
-            lineStyle: {
-              color: '#0095FF',
-              width: 1,
-              type: 'solid',
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            inside: false,
+            textStyle: {
+              color: '#FFFFFF',
+              fontWeight: 'normal',
+              fontSize: '12',
             },
-            show: true
           },
+          data: xData,
+        }],
+        yAxis: {
+          type: 'value',
           axisTick: {
+            show: false
+          },
+          axisLine: {
             show: false,
           },
           splitLine: {
-            show: false
+            show: true,
+            lineStyle: {
+              color: '#32346c ',
+            }
           },
           axisLabel: {
-            // interval: 0,
-            // rotate: 0
-            show:true,
-            textStyle:{
-              color:'#fff'
-            }
-          }
-        }],
+            textStyle: {
+              color: '#0095FF',
+              fontWeight: 'normal',
+              fontSize: '12',
+            },
+            formatter: '{value}',
+          },
+        },
+        series: series,
+      }
+
+      option && myChart.setOption(option);
+    },
+    cultrue_bar3() {
+      var chartDom = document.getElementById("tsgchart");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      var data = [{
+        name: '今日办证人数',
+        value: 323,
+      },
+      {
+        name: '今日还书册数',
+        value: 209,
+      },
+      {
+        name: '今日借书册数',
+        value: 323,
+      },
+        // {
+        //   name: 'user4',
+        //   value: 44,
+        //   sum: 60
+        // }, {
+        //   name: 'user1',
+        //   value: 10,
+        //   sum: 10
+        // },
+        // {
+        //   name: 'user2',
+        //   value: 20,
+        //   sum: 10
+        // },
+        // {
+        //   name: 'user3',
+        //   value: 53,
+        //   sum: 50
+        // },
+        // {
+        //   name: 'user4',
+        //   value: 24,
+        //   sum: 60
+        // }, {
+        //   name: 'user1',
+        //   value: 10,
+        //   sum: 10
+        // },
+        // {
+        //   name: 'user2',
+        //   value: 20,
+        //   sum: 10
+        // }
+      ];
+      var getArrByKey = (data, k) => {
+        let key = k || "value";
+        let res = [];
+        if (data) {
+          data.forEach(function (t) {
+            res.push(t[key]);
+          });
+        }
+        return res;
+      };
+      var getSymbolData = (data) => {
+        let arr = [];
+        for (var i = 0; i < data.length; i++) {
+          arr.push({
+            value: data[i].value,
+            symbolPosition: 'end'
+          })
+        }
+        return arr;
+      }
+      // var opt = {
+      //     index: 0
+      //   }
+      // var color = ['#A71A2B'];
+      // data = data.sort((a, b) => {
+      //   return b.value - a.value
+      // });
+
+      console.log(getSymbolData(data));
+      option = {
+        // backgroundColor: '#000000',
+        grid: {
+          top: '2%',
+          bottom: -15,
+          right: 30,
+          left: 30,
+          containLabel: true
+        },
+        xAxis: {
+          show: false
+        },
         yAxis: [{
-          type: 'value',
-          // name: '       今日发电量( KWh )',
+          triggerEvent: true,
+          show: true,
+          // inverse: true,
+          data: getArrByKey(data, 'name'),
           axisLine: {
             show: false
           },
+          splitLine: {
+            show: false
+          },
           axisTick: {
+            show: false
+          },
+          axisLabel: {
             show: false,
+            interval: 0,
+            color: '#fff',
+            align: 'left',
+            margin: 80,
+            fontSize: 12,
+            formatter: function (value) {
+              return '{title|' + value + '}'
+            },
+            rich: {
+              title: {
+                width: 165
+              }
+            }
+          },
+        }, {
+          triggerEvent: true,
+          show: true,
+          // inverse: true,
+          data: getArrByKey(data, 'name'),
+          axisLine: {
+            show: false
           },
           splitLine: {
-            show: true,
-            lineStyle: {
-        // 使用深浅的间隔色
-        color: '#027eff'
-    }
+            show: false
+          },
+          axisTick: {
+            show: false
           },
           axisLabel: {
-            color: '#0095FF',
+            interval: 0,
+            shadowOffsetX: '-20px',
+            color: '#fff',
+            align: 'right',
+            verticalAlign: 'bottom',
+            lineHeight: 30,
+            fontSize: 16,
+            formatter: function (value, index) {
+              return data[index].value + ' 册 '
+            },
           }
         }],
         series: [{
-          // name: '厂用电量',
+          name: 'XXX',
+          type: 'pictorialBar',
+          symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+          symbolSize: [50, 50],
+          symbolOffset: [20, 0],
+          z: 12,
+          itemStyle: {
+            normal: {
+              color: '#14b1eb'
+            }
+          },
+          data: getSymbolData(data)
+        }, {
+          name: '条',
           type: 'bar',
-          barGap: '5%',
-          barWidth: '10%',
-          barCategoryGap: '60%',
-          stack: 1,
+          showBackground: true,
+          barBorderRadius: 30,
+          yAxisIndex: 0,
+          data: data,
+          barWidth: 10,
+          // align: left,
           itemStyle: {
             normal: {
-              barBorderRadius: [30, 30, 0, 0],
               color: new echarts.graphic.LinearGradient(
-                0, 0, 0, 1, [{
+                0,
+                0,
+                1,
+                0,
+                [{
                   offset: 0,
-                  color: '#00feff'
+                  color: '#A71A2B'
+                },
+                {
+                  offset: 0.7,
+                  color: '#A71A2B'
                 },
-                // {
-                //   offset: 0.5,
-                //   color: '#00feff'
-                // },
                 {
                   offset: 1,
-                  color: '#0286ff'
+                  color: '#5EDEE5'
                 }
-              ]
-              )
-            }
+                ],
+
+                false
+              ),
+              barBorderRadius: 10
+            },
+            // color: '#A71A2B',
+            barBorderRadius: 4,
           },
-          data: [
-            14000,
-            11000,
-            10000,
-            9000,
-            8000,
-            7000,
-            5000,
-            4000,
-            3000,
-          ],
-          zlevel: 11
-        },
-        {
-          // name: '厂用电量',
-          type: 'scatter',
-          stack: 1,
-          xAxisIndex: 0,
-          symbolOffset: [0, 0], //相对于原本位置的偏移量
-          data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
-          itemStyle: {
+          label: {
             normal: {
-              color: '#fff'
+              color: '#fff',
+              show: true,
+              position: [0, '-20px'],
+              textStyle: {
+                fontSize: 16
+              },
+              formatter: function (a) {
+                return a.name
+              }
             }
-          },
-          symbolSize: 13,
-          zlevel: 10,
-          z: 2,
-        },
-        {
-            name: '背景',
-            type: 'bar',
-            barWidth: '10%',
-            barGap: '-100%',
-            data: [15000,15000,15000,15000,15000,15000,15000,15000,15000],
-            itemStyle: {
-                normal: {
-                    color: '#004298',
-                    barBorderRadius: 30,
-                    // backgroundColor:'#091C24'
-                    // borderColor:'#00D1F0'
-                }
-            },
-            z: 1,
-        },
-        ]
-      }
-
+          }
+        }]
+      };
 
       option && myChart.setOption(option);
     },
+    addNumber(start, end, id) {
+      var o = document.getElementById(id);
+      var i = start;
+      var Interval;
+      if (i < end) {
+        Interval = setInterval(function () {
+          i += 4000; // 设置每次增加的动态数字，可调整
+          if (i > end) {
+            clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
+            o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
+            i = 0;
+          } else {
+            o.innerHTML = i.toLocaleString();
+          }
+        }, 10); // 数据跳转的速度控制
+      }
+    }
   },
 };
 </script>
-<style>
+<style lang="scss" scoped="scoped">
 #cultrue {
-  width: 96%;
-  height: 100%;
+  width: 100%;
+  // height: 100%;
   /* float: left; */
   margin: 0 auto;
 }
@@ -419,6 +679,7 @@ export default {
   background-repeat: no-repeat;
   background-position: 0 0;
   height: 3.8rem;
+  // height: vh(142.5);
 }
 
 .leftbox .lb_wht span {
@@ -430,6 +691,7 @@ export default {
   /* line-height: 4.2rem; */
   text-align: right;
   padding-top: 120px;
+  /* padding-top: 3.2rem; */
 }
 
 .leftbox .lb_wht .wh_small {
@@ -652,10 +914,11 @@ export default {
   background-position: 0 center;
   padding-left: 0.68rem;
   color: #fff;
+  font-size: 16px;
 }
 
 .rightbox .tsgrliu {
-  margin: 4vh 0 0 0;
+  margin: 14vh 0 0 0;
   height: 26vh;
 }
 
@@ -668,10 +931,12 @@ export default {
   background-position: 0 center;
   padding-left: 0.68rem;
   color: #fff;
+  font-size: 16px;
 }
 
 /* 全局背景 */
 .wh_bg {
   clear: both;
   background-image: url("../../assets/wh/whbg.jpg") !important;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 3576418..0ae1701 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,149 +1,151 @@
 <template>
-  <div id="index">
-    <!-- 左边 -->
-    <div class="leftbox">
-      <!-- 客流 -->
-      <div class="keliu">
-        <span class="kliu_title">客流趋势</span>
-        <div class="kliu_st">
-          <span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
-          <span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span>
-          <span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
-        </div>
-        <!-- 柱状图 -->
-        <div class="tongjitu" id="homebar" style="height: 200px; width: 100%">
-          <!-- 柱图，注意样式 -->
-        </div>
-        <!-- 几大场馆预警图 -->
-        <div class="cgflow">
-          <!-- 左边的流量预警  -->
-          <div class="cgflow_leftbox">
-            <!-- 体育场的流量预警 -->
-            <div class="cgfitem">
-              <span class="cgtitle">体育场</span>
-              <span class="cgval">20%</span>
-              <span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
-            </div>
-            <!-- 体育馆 -->
-            <div class="cgfitem">
-              <span class="cgtitle">体育馆</span>
-              <span class="cgval">20%</span>
-              <span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
-            </div>
-            <!-- 游泳馆 -->
-            <div class="cgfitem">
-              <span class="cgtitle">游泳场</span>
-              <span class="cgval">20%</span>
-              <span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
-            </div>
+  <v-scale-screen width="1920" height="1080">
+    <div id="index">
+      <!-- 左边 -->
+      <div class="leftbox">
+        <!-- 客流 -->
+        <div class="keliu">
+          <span class="kliu_title">客流趋势</span>
+          <div class="kliu_st">
+            <span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
+            <span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span>
+            <span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
           </div>
-          <!-- 右边流量预警 -->
-          <div class="cgflow_rightbox">
-            <!-- 图书馆 -->
-            <div class="cgfitem">
-              <span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span>
-              <span class="cgval">20%</span>
-              <span class="cgtitle">图书馆</span>
-            </div>
-            <!-- 文化馆 -->
-            <div class="cgfitem">
-              <span class="cgimg"><img src="../assets/index/whg_icon.png" /></span>
-              <span class="cgval">20%</span>
-              <span class="cgtitle">文化馆</span>
+          <!-- 柱状图 -->
+          <div class="tongjitu" id="homebar" style="height: 200px; width: 100%">
+            <!-- 柱图，注意样式 -->
+          </div>
+          <!-- 几大场馆预警图 -->
+          <div class="cgflow">
+            <!-- 左边的流量预警  -->
+            <div class="cgflow_leftbox">
+              <!-- 体育场的流量预警 -->
+              <div class="cgfitem">
+                <span class="cgtitle">体育场</span>
+                <span class="cgval">20%</span>
+                <span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
+              </div>
+              <!-- 体育馆 -->
+              <div class="cgfitem">
+                <span class="cgtitle">体育馆</span>
+                <span class="cgval">20%</span>
+                <span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
+              </div>
+              <!-- 游泳馆 -->
+              <div class="cgfitem">
+                <span class="cgtitle">游泳场</span>
+                <span class="cgval">20%</span>
+                <span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
+              </div>
             </div>
-            <!-- 博物馆 -->
-            <div class="cgfitem">
-              <span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span>
-              <span class="cgval">20%</span>
-              <span class="cgtitle">博物馆</span>
+            <!-- 右边流量预警 -->
+            <div class="cgflow_rightbox">
+              <!-- 图书馆 -->
+              <div class="cgfitem">
+                <span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span>
+                <span class="cgval">20%</span>
+                <span class="cgtitle">图书馆</span>
+              </div>
+              <!-- 文化馆 -->
+              <div class="cgfitem">
+                <span class="cgimg"><img src="../assets/index/whg_icon.png" /></span>
+                <span class="cgval">20%</span>
+                <span class="cgtitle">文化馆</span>
+              </div>
+              <!-- 博物馆 -->
+              <div class="cgfitem">
+                <span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span>
+                <span class="cgval">20%</span>
+                <span class="cgtitle">博物馆</span>
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- 今日各场馆人数趋势 -->
-        <div class="gcgqs">
-          <div class="gcg_title">今日各场馆人数趋势</div>
-          <div id="kl-line" style="width: 100%; height: 180px"></div>
-        </div>
+          <!-- 今日各场馆人数趋势 -->
+          <div class="gcgqs">
+            <div class="gcg_title">今日各场馆人数趋势</div>
+            <div id="kl-line" style="width: 100%; height: 20vh"></div>
+          </div>
 
-      </div>
-    </div>
-    <!-- 中间 -->
-    <div class="centerbox">
-      <!-- 今日进馆人数 -->
-      <div class="jgrs">
-        <span class="jgval jgval1">345,235</span>
-        <span class="jgdesc jgdesc1">今日进馆人数</span>
-      </div>
-      <!-- 本周进馆人数 -->
-      <div class="jgrs">
-        <span class="jgval">345,235</span>
-        <span class="jgdesc">本周进馆人数</span>
-      </div>
-      <!-- 本月进馆人数 -->
-      <div class="jgrs">
-        <span class="jgval jgval3">345,235</span>
-        <span class="jgdesc jgdesc3">本月进馆人数</span>
-      </div>
-      <!-- 会动的体育馆image -->
-      <div class="tygpic"><img src="../assets/index/zt.png" /></div>
-      <!-- 年度进馆人数 -->
-      <div class="ndjgrs">
-        <span class="nddesc">年度进馆人数</span>
-        <span class="ndval">33,532,890</span>
-      </div>
-    </div>
-    <!-- 右边 -->
-    <div class="rbox">
-      <div class="rbox_title">各场馆实施实时进馆人数</div>
-      <div class="rbox_con">
-        <!-- 各场馆实时人数 cg1 -->
-        <div class="rbitem">
-          <span class="rbcgname">体育场</span>
-          <span class="rbtitle">当前人数</span>
-          <span class="rbval">4,738</span>
-          <span class="rbrate">40%</span>
-        </div>
-        <!-- 各场馆实时人数 cg2 -->
-        <div class="rbitem">
-          <span class="rbcgname">体育场</span>
-          <span class="rbtitle">当前人数</span>
-          <span class="rbval">4,738</span>
-          <span class="rbrate">50%</span>
         </div>
-        <!-- 各场馆实时人数 cg3 -->
-        <div class="rbitem">
-          <span class="rbcgname">体育场</span>
-          <span class="rbtitle">当前人数</span>
-          <span class="rbval">4,738</span>
-          <span class="rbrate">80%</span>
+      </div>
+      <!-- 中间 -->
+      <div class="centerbox">
+        <!-- 今日进馆人数 -->
+        <div class="jgrs">
+          <span id="jgval1" class="jgval jgval1">345,235</span>
+          <span class="jgdesc jgdesc1">今日进馆人数</span>
         </div>
-        <!-- 各场馆实时人数 cg4 -->
-        <div class="rbitem">
-          <span class="rbcgname">体育场</span>
-          <span class="rbtitle">当前人数</span>
-          <span class="rbval">4,738</span>
-          <span class="rbrate">25%</span>
+        <!-- 本周进馆人数 -->
+        <div class="jgrs">
+          <span id="jgval2" class="jgval">345,235</span>
+          <span class="jgdesc">本周进馆人数</span>
         </div>
-        <!-- 各场馆实时人数 cg5 -->
-        <div class="rbitem">
-          <span class="rbcgname">体育场</span>
-          <span class="rbtitle">当前人数</span>
-          <span class="rbval">4,738</span>
-          <span class="rbrate">90%</span>
+        <!-- 本月进馆人数 -->
+        <div class="jgrs">
+          <span id="jgval3" class="jgval jgval3">345,235</span>
+          <span class="jgdesc jgdesc3">本月进馆人数</span>
         </div>
-        <!-- 各场馆实时人数 cg6 -->
-        <div class="rbitem">
-          <span class="rbcgname">体育场</span>
-          <span class="rbtitle">当前人数</span>
-          <span class="rbval">4,738</span>
-          <span class="rbrate">75%</span>
+        <!-- 会动的体育馆image -->
+        <div class="tygpic"><img src="../assets/index/zt.png" /></div>
+        <!-- 年度进馆人数 -->
+        <div class="ndjgrs">
+          <span class="nddesc">年度进馆人数</span>
+          <span class="ndval">33,532,890</span>
         </div>
+      </div>
+      <!-- 右边 -->
+      <div class="rbox">
+        <div class="rbox_title">各场馆实施实时进馆人数</div>
+        <div class="rbox_con">
+          <!-- 各场馆实时人数 cg1 -->
+          <div class="rbitem">
+            <span class="rbcgname">体育场</span>
+            <span class="rbtitle">当前人数</span>
+            <span class="rbval">4,738</span>
+            <span class="rbrate">40%</span>
+          </div>
+          <!-- 各场馆实时人数 cg2 -->
+          <div class="rbitem">
+            <span class="rbcgname">体育场</span>
+            <span class="rbtitle">当前人数</span>
+            <span class="rbval">4,738</span>
+            <span class="rbrate">50%</span>
+          </div>
+          <!-- 各场馆实时人数 cg3 -->
+          <div class="rbitem">
+            <span class="rbcgname">体育场</span>
+            <span class="rbtitle">当前人数</span>
+            <span class="rbval">4,738</span>
+            <span class="rbrate">80%</span>
+          </div>
+          <!-- 各场馆实时人数 cg4 -->
+          <div class="rbitem">
+            <span class="rbcgname">体育场</span>
+            <span class="rbtitle">当前人数</span>
+            <span class="rbval">4,738</span>
+            <span class="rbrate">25%</span>
+          </div>
+          <!-- 各场馆实时人数 cg5 -->
+          <div class="rbitem">
+            <span class="rbcgname">体育场</span>
+            <span class="rbtitle">当前人数</span>
+            <span class="rbval">4,738</span>
+            <span class="rbrate">90%</span>
+          </div>
+          <!-- 各场馆实时人数 cg6 -->
+          <div class="rbitem">
+            <span class="rbcgname">体育场</span>
+            <span class="rbtitle">当前人数</span>
+            <span class="rbval">4,738</span>
+            <span class="rbrate">75%</span>
+          </div>
 
+        </div>
       </div>
-    </div>
 
-  </div>
+    </div>
+  </v-scale-screen>
 </template>
 <script>
 // 引入echarts
@@ -171,6 +173,10 @@ export default {
     this.home_bar();
     // 折线图
     this.line_zone();
+
+    this.addNumber(0,345235,'jgval1');
+    this.addNumber(0,345235,'jgval2');
+    this.addNumber(0,345235,'jgval3');
   },
   methods: {
     //选择年月日中的某个
@@ -516,74 +522,262 @@ export default {
     },
 
     // 大面积折线图
+    // line_zone() {
+    //   var chartDom = document.getElementById("kl-line");
+    //   var myChart = echarts.init(chartDom);
+    //   var option;
+
+    //   let base = +new Date(2022, 9, 3);
+    //   let oneDay = 24 * 3600 * 1000;
+    //   let date = [];
+    //   let data = [Math.random() * 300];
+    //   for (let i = 1; i < 20000; i++) {
+    //     var now = new Date((base += oneDay));
+    //     date.push(
+    //       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
+    //     );
+    //     data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+    //   }
+    //   option = {
+    //     xAxis: {
+    //       type: "category",
+    //       boundaryGap: false,
+    //       data: date,
+    //     },
+    //     yAxis: {
+    //       type: "value",
+    //       boundaryGap: [0, "100%"],
+    //       //网格线
+    //       splitLine: {
+    //         lineStyle: {
+    //           type: "soild",
+    //           color: "#2F00FF",
+    //         },
+    //       },
+    //     },
+
+    //     series: [
+    //       {
+    //         name: "Fake Data",
+    //         type: "line",
+    //         symbol: "none",
+    //         sampling: "lttb",
+    //         itemStyle: {
+    //           color: "rgb(255, 170, 131)",
+    //         },
+    //         areaStyle: {
+    //           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    //             {
+    //               offset: 0,
+    //               color: "rgba(255, 158, 68,0.6)",
+    //             },
+    //             {
+    //               offset: 1,
+    //               color: "rgb(255, 70, 131,0.6)",
+    //             },
+    //           ]),
+    //         },
+    //         data: data,
+    //       },
+    //     ],
+    //   };
+
+    //   option && myChart.setOption(option);
+    // },
+
     line_zone() {
       var chartDom = document.getElementById("kl-line");
       var myChart = echarts.init(chartDom);
       var option;
 
-      let base = +new Date(2022, 9, 3);
-      let oneDay = 24 * 3600 * 1000;
-      let date = [];
-      let data = [Math.random() * 300];
-      for (let i = 1; i < 20000; i++) {
-        var now = new Date((base += oneDay));
-        date.push(
-          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
-        );
-        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+      var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00'];
+      var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
+      var name = []
+      var data = [
+        [137, 34, 135, 161, 74, 152, 110, 100, 150,137, 34, 135, 161],
+        [174, 137, 135, 34, 152, 135, 140, 160, 100,174, 137, 135, 34],
+        [134, 74, 137, 135, 161, 137, 300, 220, 250,134, 74, 137, 135],
+        [147, 134, 155, 131, 174, 122, 140, 160, 150,127, 134, 175, 161],
+        [124, 147, 175, 134, 122, 175, 180, 110, 130,154, 187, 125, 134],
+        [154, 174, 157, 175, 121, 157, 200, 250, 280,134, 174, 157, 175],
+        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
+        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
+        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
+      ]
+
+      var series = [];
+      for (var i = 0; i < 6; i++) {
+        series.push({
+          name: name[i],
+          type: "line",
+          symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
+          symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+          smooth: true, //是否平滑曲线显示
+          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: color[i]
+              }, {
+                offset: 0.8,
+                color: 'rgba(255,255,255,0)'
+              }], false),
+              // shadowColor: 'rgba(255,255,255, 0.1)',
+              shadowBlur: 10,
+              opacity: 0.3,
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: color[i],
+              lineStyle: {
+                width: 1,
+                type: 'solid' //'dotted'虚线 'solid'实线
+              },
+              borderColor: color[i], //图形的描边颜色。支持的格式同 color
+              borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
+              barBorderRadius: 0,
+              label: {
+                show: false,
+              },
+              opacity: 0.5,
+            }
+          },
+          data: data[i],
+
+        })
       }
       option = {
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: date,
+        // backgroundColor: "#141f56",
+        legend: {
+          top: 0,
+          itemGap: 15,
+          itemWidth: 15,
+          textStyle: {
+            color: '#fff',
+            fontSize: '14'
+          },
+          data: name
         },
-        yAxis: {
-          type: "value",
-          boundaryGap: [0, "100%"],
-          //网格线
-          splitLine: {
+        title: {
+          // text: "负面言论分领域趋势",
+          textStyle: {
+            color: '#fff',
+            fontSize: '22',
+            fontWeight: 'normal',
+          },
+          subtextStyle: {
+            color: '#90979c',
+            fontSize: '16',
+
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
             lineStyle: {
-              type: "soild",
-              color: "#2F00FF",
-            },
+              color: '#57617B'
+            }
           },
+          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
+          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
+          padding: [8, 10], //内边距
+          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
         },
-
-        series: [
-          {
-            name: "Fake Data",
-            type: "line",
-            symbol: "none",
-            sampling: "lttb",
-            itemStyle: {
-              color: "rgb(255, 170, 131)",
+        grid: {
+          borderWidth: 0,
+          top: 160,
+          bottom: 160,
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        xAxis: [{
+          type: "category",
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#0B0765',
+            }
+          },
+          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            inside: false,
+            textStyle: {
+              color: '#FFFFFF',
+              fontWeight: 'normal',
+              fontSize: '12',
             },
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgba(255, 158, 68,0.6)",
-                },
-                {
-                  offset: 1,
-                  color: "rgb(255, 70, 131,0.6)",
-                },
-              ]),
+          },
+          data: xData,
+        }],
+        yAxis: {
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#0B0765 ',
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#0B0765 ',
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#0095FF',
+              fontWeight: 'normal',
+              fontSize: '12',
             },
-            data: data,
+            formatter: '{value}',
           },
-        ],
-      };
+        },
+        series: series,
+      }
 
       option && myChart.setOption(option);
     },
+
+    addNumber(start, end, id) {
+      var o = document.getElementById(id);
+      var i = start;
+      var Interval;
+      if (i < end) {
+        Interval = setInterval(function () {
+          i += 4000; // 设置每次增加的动态数字，可调整
+          if (i > end) {
+            clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
+            o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
+            i = 0;
+          } else {
+            o.innerHTML = i.toLocaleString();
+          }
+        }, 10); // 数据跳转的速度控制
+      }
+    }
   },
 };
 </script>
 <style>
 #index {
   width: 100%;
+  height: 100%;
   float: left;
 }
 
@@ -877,4 +1071,5 @@ export default {
 .page_bg {
   clear: both;
   background-image: url("../assets/index/bg.jpg") !important;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ty/index.vue b/src/views/ty/index.vue
index 7dbf6b6..0df5296 100644
--- a/src/views/ty/index.vue
+++ b/src/views/ty/index.vue
@@ -1,69 +1,64 @@
 <template>
-  <div id="ty">
+  <v-scale-screen width="1920" height="1080">
+    <div id="ty">
 
-    <div class="main">
-      <div class="left">
-        <div class="tiyuBla">
-          <div style="position: absolute; right: 28%; top: 52%">体育</div>
-        </div>
+      <div class="main">
+        <div class="left">
+          <div class="tiyuBla">
+            <div style="position: absolute; right: 28%; top: 52%">体育</div>
+          </div>
 
-        <div class="tongji"></div>
+          <div class="tongji"></div>
 
-        <div class="bfb">
-          <div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div>
+          <div class="bfb">
+            <div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div>
 
-          <div class="num">24,352,345</div>
+            <div class="num">24,352,345</div>
 
-          <!-- <div class="cntTxt">
+            <!-- <div class="cntTxt">
                      <div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
                      <div style="color: #0082FF;font-size: 14px;">人流饱和</div>
                   </div> -->
 
-          <div class="cntTxt">
-            <canvas
-              id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
-              :width="cWidth"
-              :height="cHeight"
-              class="charts"
-              @click="tap"
-            />
-          </div>
-
-          <div class="rsType">
-            <div class="typeItem">
-              <div>安静</div>
-              <img
-                style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/ty/quiet.png"
-              />
-            </div>
-            <div class="typeItem">
-              <div>舒适</div>
-              <img
-                style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/ty/soft.png"
-              />
+            <div class="cntTxt">
+              <canvas id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" :width="cWidth" :height="cHeight" class="charts"
+                @click="tap" />
             </div>
-            <div class="typeItem">
-              <div>拥挤</div>
-              <img
-                style="width: 45%; height: 40%; margin-top: 10%"
-                src="../../assets/ty/crowd.png"
-              />
+
+            <div class="rsType">
+              <div class="typeItem">
+                <div>安静</div>
+                <img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/quiet.png" />
+              </div>
+              <div class="typeItem">
+                <div>舒适</div>
+                <img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/soft.png" />
+              </div>
+              <div class="typeItem">
+                <div>拥挤</div>
+                <img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/crowd.png" />
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div class="right">
-        <div class="item" ></div>
-        <div class="item"></div>
-        <div class="item"></div>
-        <div class="item"></div>
+        <div class="center">
+          <div class="item"></div>
+          <div class="item"></div>
+          <div class="item"></div>
+          <!-- <div class="item"></div> -->
+        </div>
+
+        <div class="right">
+          <div class="item"></div>
+          <div class="item"></div>
+          <div class="item"></div>
+          <!-- <div class="item"></div> -->
+        </div>
       </div>
-    </div>
 
-  </div>
+    </div>
+  </v-scale-screen>
 </template>
 <script>
 export default {
@@ -92,13 +87,16 @@ export default {
 <style lang="less" scoped>
 .main {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-evenly;
+  
+
   .left {
-    width: 30%;
+    width: 38%;
     height: 75vh;
     // border: 1px solid red;
     margin-left: 2%;
     margin-top: -4%;
+
     .tiyuBla {
       width: 100%;
       height: 40%;
@@ -124,14 +122,17 @@ export default {
       background-repeat: no-repeat;
       background-size: 100% 100%;
       position: relative;
+
       .renshu {
-        span{
+        span {
           margin-right: 5px;
-          img{
+
+          img {
             width: 10px;
             height: 12px;
           }
         }
+
         position: absolute;
         top: 30%;
         left: 10%;
@@ -139,6 +140,7 @@ export default {
         font-weight: bold;
         font-size: 14px;
       }
+
       .num {
         color: white;
         font-weight: bold;
@@ -147,6 +149,7 @@ export default {
         top: 45%;
         left: 6%;
       }
+
       .cntTxt {
         width: 20%;
         height: 60%;
@@ -157,6 +160,7 @@ export default {
         text-align: center;
         padding-top: 2.5%;
       }
+
       .rsType {
         width: 30%;
         height: 35%;
@@ -166,6 +170,7 @@ export default {
         right: 4%;
         display: flex;
         justify-content: space-between;
+
         .typeItem {
           width: 30%;
           height: 95%;
@@ -177,36 +182,64 @@ export default {
     }
   }
 
-  .right {
+  .center {
     margin-top: 3%;
-    width: 65%;
-    height: 66vh;
+    width: 30%;
+    height: 76vh;
     // border: 1px solid #019ade;
     display: flex;
     flex-wrap: wrap;
     // align-items: center;
     align-content: center;
     justify-content: center;
-    background-image: url("../../assets/ty/vbig_bg.png") ;
-    background-size:contain;
-    background-repeat:no-repeat;
-    .item{
-      width: 40%; 
-      height: 40%; 
+    background-image: url("../../assets/ty/vbig_bg.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    .item {
+      width: 80%;
+      height: 30%;
       margin-top: 5px;
-      background-image: url("../../assets/ty/vsmall_bg.png") ;
-      background-size:contain;
-      background-repeat:no-repeat;
+      background-image: url("../../assets/ty/vsmall_bg.png");
+      background-size: contain;
+      background-repeat: no-repeat;
     }
-    .item:nth-child(2),.item:nth-child(4){
-      margin-right: 60px;
+  }
+
+  .right {
+    margin-top: 3%;
+    width: 38%;
+    height: 76vh;
+    // border: 1px solid #019ade;
+    display: flex;
+    flex-wrap: wrap;
+    // align-items: center;
+    align-content: center;
+    justify-content: center;
+    background-image: url("../../assets/ty/vbig_bg.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    .item {
+      width: 80%;
+      height: 30%;
+      margin-top: 5px;
+      background-image: url("../../assets/ty/vsmall_bg.png");
+      background-size: contain;
+      background-repeat: no-repeat;
     }
+
+    // .item:nth-child(2),
+    // .item:nth-child(4) {
+    //   margin-right: 60px;
+    // }
   }
 
   .charts {
     width: 225px;
     height: 150px;
   }
+
   .charts1 {
     width: 550px;
     height: 250px;