diff --git a/src/assets/ty/bf8231e42be621a362407655f4da8af.png b/src/assets/ty/bf8231e42be621a362407655f4da8af.png
new file mode 100644
index 0000000..3c9cac1
Binary files /dev/null and b/src/assets/ty/bf8231e42be621a362407655f4da8af.png differ
diff --git a/src/assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png b/src/assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png
new file mode 100644
index 0000000..1a3a14c
Binary files /dev/null and b/src/assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png differ
diff --git a/src/views/cultrue/index.vue b/src/views/cultrue/index.vue
index f3f0944..bbee9a6 100644
--- a/src/views/cultrue/index.vue
+++ b/src/views/cultrue/index.vue
@@ -121,9 +121,9 @@ export default {
         //   data: ['厂用电量']
         // },
         grid: {
-          left: '3%',
-          right: '3%',
-          bottom: '3%',
+          left: 0,
+          right: 0,
+          bottom: 0,
           top: '10%',
           containLabel: true
         },
@@ -326,11 +326,15 @@ export default {
         // backgroundColor: "#141f56",
         legend: {
           top: 0,
-          itemGap: 15,
-          itemWidth: 15,
+          left:0,
+          itemGap: 25,
+          itemWidth: 0,
+          itemHeight:18,
+
           textStyle: {
             color: '#fff',
-            fontSize: '14'
+            fontSize: '14',
+            padding: [1, 12]
           },
           data: name
         },
@@ -362,8 +366,10 @@ export default {
         },
         grid: {
           borderWidth: 0,
-          top: 240,
-          bottom: 240,
+          top: 250,
+          bottom: 250,
+          right:15,
+          left:30,
           textStyle: {
             color: "#fff"
           }
@@ -506,7 +512,7 @@ export default {
         grid: {
           top: '2%',
           bottom: -15,
-          right: 30,
+          right: -48,
           left: 30,
           containLabel: true
         },
@@ -786,7 +792,7 @@ export default {
   margin-top: 4vh;
   width: 50%;
   float: left;
-  height: 78vh;
+  height: 74vh;
   padding-top: 2vh;
   background-image: url('../../assets/wh/center_bg.png');
   background-repeat: no-repeat;
@@ -862,7 +868,7 @@ export default {
 /* 中间底部 */
 .center .cbuttom {
   margin-top: 12vh;
-  padding-top: 6vh;
+  padding-top: 3.5vh;
   height: 6vh;
   line-height: 6vh;
   text-align: center;
@@ -939,4 +945,9 @@ export default {
   clear: both;
   background-image: url("../../assets/wh/whbg.jpg") !important;
 }
+
+
+.screen-box {
+  background: none !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 0ae1701..96686dc 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -12,7 +12,7 @@
             <span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
           </div>
           <!-- 柱状图 -->
-          <div class="tongjitu" id="homebar" style="height: 200px; width: 100%">
+          <div class="tongjitu" id="homebar" style="height: 230px; width: 100%">
             <!-- 柱图，注意样式 -->
           </div>
           <!-- 几大场馆预警图 -->
@@ -174,9 +174,9 @@ export default {
     // 折线图
     this.line_zone();
 
-    this.addNumber(0,345235,'jgval1');
-    this.addNumber(0,345235,'jgval2');
-    this.addNumber(0,345235,'jgval3');
+    this.addNumber(0, 345235, 'jgval1');
+    this.addNumber(0, 345235, 'jgval2');
+    this.addNumber(0, 345235, 'jgval3');
   },
   methods: {
     //选择年月日中的某个
@@ -316,10 +316,10 @@ export default {
         ],
         grid: {
           containLabel: true,
-          left: 20,
-          right: 20,
-          bottom: 10,
-          top: 40,
+          left: 30,
+          right: 0,
+          bottom: 0,
+          top: 60,
         },
         xAxis: {
           axisLabel: {
@@ -590,16 +590,16 @@ export default {
       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'];
+      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],
+        [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],
@@ -652,6 +652,8 @@ export default {
         // backgroundColor: "#141f56",
         legend: {
           top: 0,
+          right: 0,
+          bottom: 0,
           itemGap: 15,
           itemWidth: 15,
           textStyle: {
@@ -690,6 +692,8 @@ export default {
           borderWidth: 0,
           top: 160,
           bottom: 160,
+          right: 15,
+          left: 50,
           textStyle: {
             color: "#fff"
           }
@@ -926,11 +930,12 @@ export default {
   background-image: url('../assets/index/mid_bg.png');
   background-position: 0 0;
   background-size: 100% 100%;
-  width: 29%;
+  width: 30%;
   float: left;
   margin-left: 3%;
-  padding: 1%;
-  margin-top: 4%;
+  padding: 2%;
+  margin-top: 5%;
+  position: relative;
 }
 
 .centerbox .jgrs {
@@ -945,8 +950,8 @@ export default {
   color: white;
   font-size: 26px;
   position: absolute;
-  bottom: 38px;
-  left: 44px;
+  bottom: 54px;
+  left: 48px;
 }
 
 .centerbox .jgdesc {
@@ -954,28 +959,28 @@ export default {
   color: gray;
   font-size: 16px;
   position: absolute;
-  bottom: 10px;
-  left: 44px;
+  bottom: 14px;
+  left: 50px;
 }
 
 .centerbox .jgval1 {
-  bottom: 38px;
-  left: 76px;
+  bottom: 54px;
+  left: 70px;
 }
 
 .centerbox .jgdesc1 {
-  bottom: 10px;
-  left: 76px;
+  bottom: 16px;
+  left: 70px;
 }
 
 .centerbox .jgval3 {
-  bottom: 38px;
-  left: 14px;
+  bottom: 54px;
+  left: 25px;
 }
 
 .centerbox .jgdesc3 {
-  bottom: 10px;
-  left: 14px;
+  bottom: 14px;
+  left: 26px;
 }
 
 .centerbox .tygpic {
@@ -988,6 +993,25 @@ export default {
   margin: 12% auto;
 }
 
+.ndjgrs {
+  color: white;
+  text-align: center;
+  position: absolute;
+  bottom: 8%;
+  left: 41%;
+}
+
+.ndjgrs .nddesc {
+  font-size: 18px;
+  display: block;
+  margin-bottom: 19px;
+}
+
+.ndjgrs .ndval {
+  display: block;
+  font-size: 24px;
+}
+
 /* 右边 */
 .rbox {
   width: 30%;
@@ -1018,7 +1042,7 @@ export default {
   background-image: url('../assets/index/rb_data_bg.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  height: 2.2rem;
+  height: 2.4rem;
   width: 46%;
   margin-left: 0.28rem;
   float: left;
@@ -1051,7 +1075,8 @@ export default {
   width: 60%;
   height: 118px;
   text-align: center;
-  line-height: 118px;
+  /* line-height: 118px; */
+  line-height: 160px;
 }
 
 .rbox .rbox_con .rbitem .rbrate {
@@ -1061,15 +1086,32 @@ export default {
   text-align: center;
   line-height: 118px;
   position: absolute;
-  bottom: -14px;
+  bottom: -12px;
   right: 16px;
   color: #00D8FF;
 
 }
 
 /* 页面背景 */
-.page_bg {
+/* .page_bg {
   clear: both;
   background-image: url("../assets/index/bg.jpg") !important;
+  width: 100%;
+  height: 100%;
+  background-image: url('../assets/index/bg.jpg') !important;
+  background-size: 100% 100%;
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+} */
+.btgym {
+  width: 100%;
+  height: 100%;
+  background-image: url('../assets/index/bg.jpg') !important;
+  background-size: 100% 100%;
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+}
+.screen-box {
+  background: none !important;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ty/index.vue b/src/views/ty/index.vue
index 7924ef3..a141374 100644
--- a/src/views/ty/index.vue
+++ b/src/views/ty/index.vue
@@ -1,45 +1,73 @@
 <template>
-  <!-- <v-scale-screen width="1920" height="1080"> -->
+  <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 style="position: absolute; right: 32%; top: 52%">体育</div>
+            <span style="position: absolute; right: 12%; top: 72%;font-size: 16px;" class="wh_small">体育场 &nbsp; | &nbsp;
+              体育馆 &nbsp; | &nbsp; 游泳场馆</span>
           </div>
 
-          <div class="tongji"></div>
+          <div class="tongji">
+            <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="bfb">
-            <div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div>
+          <div class="dinszone">
+            <span class="dins_title">24小时总进馆人流趋势</span>
+            <!-- 柱状统计图 -->
+            <div class="dins_chart" id="dinschart" style="height: 22vh; width: 100%"></div>
+          </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">
+          <!-- <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>
-              <div class="typeItem">
-                <div>拥挤</div>
-                <img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/crowd.png" />
-              </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>
+            <div class="typeItem">
+              <div>拥挤</div>
+              <img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/crowd.png" />
             </div>
           </div>
+        </div> -->
         </div>
 
         <div class="center">
@@ -50,17 +78,59 @@
         </div>
 
         <div class="right">
-          <div class="item"></div>
-          <div class="item"></div>
-          <div class="item"></div>
+          <!-- <div class="item"></div> -->
+          <div class="pcgrliu">
+            <span class="pcg_title">各场馆人次占比</span>
+            <div class="venue_proportion_box" style="width: 100%; height: 290px">
+              <!-- <div class="venue_proportion">
+                <div class="venue_proportion_top">
+                  <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt="">
+                  <span class="venue_proportion_box_num">25%</span>
+                </div>
+                <div class="venue_proportion_bo">
+                  <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt="">
+                  <span>体育场</span>
+                </div>
+              </div>
+              <div class="venue_proportion">
+                <div class="venue_proportion_top">
+                  <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt="">
+                  <span class="venue_proportion_box_num">25%</span>
+                </div>
+                <div class="venue_proportion_bo">
+                  <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt="">
+                  <span>体育场</span>
+                </div>
+              </div>
+              <div class="venue_proportion">
+                <div class="venue_proportion_top">
+                  <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt="">
+                  <span class="venue_proportion_box_num">25%</span>
+                </div>
+                <div class="venue_proportion_bo">
+                  <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt="">
+                  <span>体育场</span>
+                </div>
+              </div> -->
+
+            </div>
+            <!-- <div id="pcgchart1" style="width: 100%;height: 25vh;margin-top: 20px;"></div> -->
+          </div>
+          <!-- 各场馆人流趋势 -->
+          <div class="pcgrliu">
+            <span class="pcg_title">各场馆人流趋势</span>
+            <div id="pcgchart2" style="width: 100%; height: 290px"></div>
+          </div>
           <!-- <div class="item"></div> -->
         </div>
       </div>
 
     </div>
-  <!-- </v-scale-screen> -->
+  </v-scale-screen>
 </template>
 <script>
+// 引入echarts
+import * as echarts from "echarts";
 export default {
   data() {
     return {};
@@ -74,8 +144,545 @@ export default {
     } else {
       cc.classList.add("ty_bg");
     }
+    this.ty_bar1()
+    // this.ty_bar2()
+    this.ty_bar3()
+    this.addNumber(0, 234098, 'insv')
+    this.addNumber(0, 234098, 'insv2')
+    this.addNumber(0, 234098, 'insv3')
+    // window.onresize = () => {
+    //   // 基于准备好的dom，初始化echarts实例
+    //     let myChart = this.$echarts.init(document.getElementById('pcgchart2'));
+    //     myChart.resize();
+    //     };
+  },
+  methods: {
+    ty_bar1() {
+      var chartDom = document.getElementById("dinschart");
+      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 = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: function (params) {
+            return params[0].name + "</br>" + params[0].value
+          }
+        },
+        // legend: {
+        //   data: ['厂用电量']
+        // },
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: '3%',
+          top: '10%',
+          containLabel: true
+        },
+        xAxis: [{
+          data: [
+            '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
+          ],
+          axisLine: {
+            lineStyle: {
+              color: '#0095FF',
+              width: 1,
+              type: 'solid',
+            },
+            show: true
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            // interval: 0,
+            // rotate: 0
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          // name: '       今日发电量( KWh )',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              // 使用深浅的间隔色
+              color: '#027eff'
+            }
+          },
+          axisLabel: {
+            color: '#0095FF',
+          }
+        }],
+        series: [{
+          // name: '厂用电量',
+          type: 'bar',
+          barGap: '5%',
+          barWidth: '10%',
+          barCategoryGap: '60%',
+          stack: 1,
+          itemStyle: {
+            normal: {
+              barBorderRadius: [30, 30, 0, 0],
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#00EAFF'
+                },
+                // {
+                //   offset: 0.5,
+                //   color: '#00feff'
+                // },
+                {
+                  offset: 1,
+                  color: '#001AFF'
+                }
+              ]
+              )
+            }
+          },
+          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: {
+            normal: {
+              color: '#fff'
+            }
+          },
+          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);
+    },
+
+    ty_bar2() {
+      var chartDom = document.getElementById("pcgchart1");
+      var myChart = echarts.init(chartDom);
+
+      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: 'line', // 默认为直线，可选为：'line' | 'shadow'
+            lineStyle: {
+              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);', //添加阴影
+        },
+        grid: {
+          borderWidth: 0,
+          top: 240,
+          bottom: 240,
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        xAxis: [{
+          type: "category",
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            inside: false,
+            textStyle: {
+              color: '#FFFFFF',
+              fontWeight: 'normal',
+              fontSize: '12',
+            },
+          },
+          data: xData,
+        }],
+        yAxis: {
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#32346c ',
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#0095FF',
+              fontWeight: 'normal',
+              fontSize: '12',
+            },
+            formatter: '{value}',
+          },
+        },
+        series: series,
+      }
+
+      option && myChart.setOption(option);
+    },
+    ty_bar3() {
+      var chartDom = document.getElementById("pcgchart2");
+      var myChart = echarts.init(chartDom);
+
+      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', '18:00', '19:00', '20:00'];
+      var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
+      var name = ['体育场', '体育馆', '游泳场馆']
+      var data = [
+        [0, 134, 435, 561, 674, 552, 810, 300, 550, 460, 650, 790],
+        [0, 437, 535, 634, 752, 435, 740, 560, 900, 440, 580, 350],
+        [0, 0, 337, 635, 861, 637, 500, 620, 450, 630, 800, 320],
+        // [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,
+            }
+          },
+          markPoint: {
+            data: [
+              {
+                name: '最大值',
+                type: 'max'
+              }
+            ]
+
+          },
+          data: data[i],
+
+        })
+      }
+      option = {
+        // backgroundColor: "#141f56",
+        legend: {
+          top: 270,
+          right: 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: 'line', // 默认为直线，可选为：'line' | 'shadow'
+            lineStyle: {
+              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);', //添加阴影
+        },
+        grid: {
+          borderWidth: 0,
+          top: 230,
+          bottom: 240,
+          right: 20,
+          left: 36,
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        xAxis: [{
+          type: "category",
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            inside: false,
+            textStyle: {
+              color: '#FFFFFF',
+              fontWeight: 'normal',
+              fontSize: '12',
+            },
+          },
+          data: xData,
+        }],
+        yAxis: {
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#32346c ',
+            }
+          },
+          splitNumber:10,
+          // interval:4.10,
+          axisLabel: {
+            textStyle: {
+              color: '#0095FF',
+              fontWeight: 'normal',
+              fontSize: '12',
+            },
+            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); // 数据跳转的速度控制
+      }
+    }
+
   },
-  methods: {},
 };
 </script>
 <style>
@@ -83,18 +690,23 @@ export default {
   clear: both;
   background-image: url("../../assets/ty/tybg.jpg") !important;
 }
+
+.screen-box {
+  background: none !important;
+}
 </style>
 <style lang="less" scoped>
 .main {
   display: flex;
-  justify-content: space-evenly;
-  
+  justify-content: space-around;
+
 
   .left {
-    width: 38%;
+    width: 33%;
     height: 75vh;
+    // height: 100%;
     // border: 1px solid red;
-    margin-left: 2%;
+    // margin-left: 2%;
     margin-top: -4%;
 
     .tiyuBla {
@@ -107,12 +719,97 @@ export default {
       font-size: 38px;
       font-weight: bold;
       position: relative;
+
+      .wh_small {
+        padding-top: 12px;
+        font-size: 12px;
+        text-align: right;
+        padding-right: 10px;
+        color: white;
+        position: absolute;
+        right: 0;
+        top: 0;
+
+      }
     }
 
     .tongji {
       width: 100%;
-      height: 35%;
-      border: 1px solid #019ade;
+      // float: left;
+      height: 2.4rem;
+      background-image: url("../../assets/wh/ins_count.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      margin-top: 0.48rem;
+
+      .institle {
+        color: #00c6ff;
+        padding-left: 0.9rem;
+        line-height: 0.38rem;
+        height: 0.38rem;
+        display: block;
+        font-size: 16px;
+      }
+
+      .insval {
+        width: 30%;
+        height: 1.68rem;
+        float: left;
+        margin-left: 0.16rem;
+      }
+
+      .insval:first {
+        margin-left: 0;
+      }
+
+      .insval img {
+        padding-top: 0.268rem;
+        display: block;
+        text-align: center;
+        height: 0.78rem;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .insval span {
+        display: block;
+        width: 100%;
+        text-align: center;
+      }
+
+      .insval .insv {
+        height: 0.48rem;
+        line-height: 0.18rem;
+        font-size: 22px;
+        color: white;
+      }
+
+      .insval .inst {
+        color: #6a6c7c;
+        font-size: 12px;
+        height: 0.12rem;
+        line-height: 0.12rem;
+      }
+    }
+
+    .dinszone {
+      margin-top: 0.22rem;
+      width: 100%;
+      height: 0.48rem;
+      float: left;
+    }
+
+    .dinszone .dins_title {
+      display: block;
+      height: 0.58rem;
+      line-height: 0.44rem;
+      color: #fff;
+      font-size: 0.2rem;
+      background-image: url('../../assets/wh/dins_title_bg.png');
+      background-size: 100% 100%;
+      background-position: 0 0;
+      background-repeat: no-repeat;
+      padding-left: 0.96rem;
     }
 
     .bfb {
@@ -185,7 +882,7 @@ export default {
   .center {
     margin-top: 3%;
     width: 30%;
-    height: 76vh;
+    height: 72vh;
     // border: 1px solid #019ade;
     display: flex;
     flex-wrap: wrap;
@@ -193,42 +890,99 @@ export default {
     align-content: center;
     justify-content: center;
     background-image: url("../../assets/ty/vbig_bg.png");
-    background-size: contain;
+    background-size: 100% 90%;
     background-repeat: no-repeat;
 
     .item {
-      width: 80%;
-      height: 30%;
-      margin-top: 5px;
+      width: 70%;
+      height: 34%;
+
       background-image: url("../../assets/ty/vsmall_bg.png");
       background-size: contain;
       background-repeat: no-repeat;
+
+      &:nth-child(1) {
+        margin-top: -65px;
+      }
     }
   }
 
   .right {
     margin-top: 3%;
-    width: 38%;
+    width: 33%;
     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;
+    // display: flex;
+    // flex-wrap: wrap;
 
-    .item {
-      width: 80%;
-      height: 30%;
-      margin-top: 5px;
-      background-image: url("../../assets/ty/vsmall_bg.png");
-      background-size: contain;
-      background-repeat: no-repeat;
+    .pcgrliu {
+      width: 100%;
+      // width: 634px;
+      // height: 290px;
+      flex: 1;
+
+      &:nth-child(2) {
+        // margin-top: 0.5rem;
+      }
+
+      .venue_proportion_box {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #00A7FF;
+
+        .venue_proportion {
+          flex: 1;
+          // text-align: center;
+
+          .venue_proportion_top {
+            text-align: center;
+
+            .venue_proportion_box_num {
+              color: white;
+            }
+          }
+
+          .venue_proportion_bo {
+
+            // text-align: center;
+            img {
+              margin-left: 48px;
+            }
+
+          }
+        }
+      }
+
+      .pcg_title {
+        display: block;
+        height: 4vh;
+        line-height: 3vh;
+        background: url('../../assets/wh/pcg_t_bg.png') no-repeat;
+        background-size: 100% 100%;
+        background-position: 0 center;
+        padding-left: 0.98rem;
+        color: #fff;
+        font-size: 16px;
+      }
     }
 
+    // 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;
@@ -244,5 +998,20 @@ export default {
     width: 550px;
     height: 250px;
   }
+
+  // .btgym {
+  //   width: 100%;
+  //   height: 100%;
+  //   background-image: url('../../assets/index/bg.jpg') !important;
+  //   background-size: 100% 100%;
+  //   background-position: 100% 100%;
+  //   background-repeat: no-repeat;
+  // }
+
+
+  // .wh_bg {
+  //   clear: both;
+  //   background-image: url("../../assets/wh/whbg.jpg") !important;
+  // }
 }
 </style>
\ No newline at end of file