From e85f3c855524c636bbf14b548930b0902f15c3c8 Mon Sep 17 00:00:00 2001
From: ygs <ygs0521@126.com>
Date: Fri, 3 Jan 2025 16:12:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A4=E7=95=85=E6=99=BA=E6=B1=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/jxzt/Jczh.vue | 568 ++++++++++++++++++++++++++--------------
 1 file changed, 378 insertions(+), 190 deletions(-)

diff --git a/src/views/jxzt/Jczh.vue b/src/views/jxzt/Jczh.vue
index e897bdf..fdaeeee 100644
--- a/src/views/jxzt/Jczh.vue
+++ b/src/views/jxzt/Jczh.vue
@@ -1,162 +1,166 @@
 <template>
-  <div class="all">
-    <!--左侧-->
-    <div class="left-all">
-      <div class="left-all-wai"><!--外层-->
-        <div class="left-title"></div>
-        <div class="left-conent"><!--内容-->
-          <div class="left-title-gjzc">
-            <!-- 国家政策 -->
-            <div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0">
-              <div style="Position: fixed;" class="left-guoJzc"></div>
-              <div style="margin-top: -3%;" class="ckgd"></div>
-            </div>
-            <div v-for="(item,index) in left1Data" style="width: 100%;top:50px;">
-              <div style="width: 50%; float:left;">
-                <div style="font-size: 10px; font-weight:bold; text-align: center; letter-spacing: 0.04em;">
-                  {{ item.name }}
-                </div>
-                <div style="font-size: 8px; font-weight: normal; letter-spacing: 0.04em;">{{ item.time }}</div>
-                <div class="left-content-detail">
-                  {{ item.content != null ? item.content : "" }}
+  <scale-box class="scale-box" :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="true">
+    <div class="all">
+      <!--左侧-->
+      <div class="left-all">
+        <div class="left-all-wai"><!--外层-->
+          <div class="left-title"></div>
+          <div class="left-conent"><!--内容-->
+            <div class="left-title-gjzc">
+              <!-- 国家政策 -->
+              <div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0">
+                <div style="Position: fixed;" class="left-guoJzc"></div>
+                <div style="margin-top: -3%;" class="ckgd" @click="checkAll('')"></div>
+              </div>
+              <div v-for="(item,index) in left1Data" style="width: 100%;top:50px;">
+                <div style="width: 50%; float:left;">
+                  <div style="font-size: calc(100vw*14/1920); font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;">
+                    {{ item.name }}
+                  </div>
+                  <div style="font-size: calc(100vw*12/1920); font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">{{ item.time }}</div>
+                  <div class="left-content-detail">
+                    {{ item.content != null ? item.content : "" }}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <div class="left-title-gjzc">
-            <!-- 省级政策 -->
-            <div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0">
-              <div style="Position: fixed;" class="left-sJzc"></div>
-              <div style="margin-top: -3%;" class="ckgd"></div>
-            </div>
-            <div v-for="(item,index) in left2Data" style="width: 100%;top:50px;">
-              <div style="width: 50%; float:left;">
-                <div style="font-size: 10px; font-weight:bold; text-align: center; letter-spacing: 0.04em;">
-                  {{ item.name }}
-                </div>
-                <div style="font-size: 8px; font-weight: normal; letter-spacing: 0.04em;">{{ item.time }}</div>
-                <div class="left-content-detail">
-                  {{ item.content != null ? item.content : "" }}
+            <div class="left-title-gjzc">
+              <!-- 省级政策 -->
+              <div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0">
+                <div style="Position: fixed;" class="left-sJzc"></div>
+                <div style="margin-top: -3%;" class="ckgd" @click="checkAll('')"></div>
+              </div>
+              <div v-for="(item,index) in left2Data" style="width: 100%;top:50px;">
+                <div style="width: 50%; float:left;">
+                  <div style="font-size: calc(100vw*14/1920); font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;">
+                    {{ item.name }}
+                  </div>
+                  <div style="font-size: calc(100vw*12/1920); font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">{{ item.time }}</div>
+                  <div class="left-content-detail">
+                    {{ item.content != null ? item.content : "" }}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
 
-          <div class="left-title-gjzc">
-            <!-- 本厅政策 -->
-            <div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0">
-              <div style="Position: fixed;" class="left-benTzd"></div>
-              <div style="margin-top: -3%;" class="ckgd"></div>
-            </div>
-            <div v-for="(item,index) in left3Data" style="width: 100%;top:50px;">
-              <div style="width: 50%; float:left;">
-                <div style="font-size: 10px; font-weight:bold; text-align: center; letter-spacing: 0.04em;">
-                  {{ item.name }}
-                </div>
-                <div style="font-size: 8px; font-weight: normal; letter-spacing: 0.04em;">{{ item.time }}</div>
-                <div class="left-content-detail">
-                  {{ item.content != null ? item.content : "" }}
+            <div class="left-title-gjzc">
+              <!-- 本厅政策 -->
+              <div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0">
+                <div style="Position: fixed;" class="left-benTzd"></div>
+                <div style="margin-top: -3%;" class="ckgd" @click="checkAll('')"></div>
+              </div>
+              <div v-for="(item,index) in left3Data" style="width: 100%;top:50px;">
+                <div style="width: 50%; float:left;">
+                  <div style="font-size: calc(100vw*14/1920); font-weight:bold; text-align: center; letter-spacing: 0.04em; line-height: 1.5em; margin: 0 10px;">
+                    {{ item.name }}
+                  </div>
+                  <div style="font-size: calc(100vw*12/1920); font-weight: normal; letter-spacing: 0.04em; line-height: 1.5em;">{{ item.time }}</div>
+                  <div class="left-content-detail">
+                    {{ item.content != null ? item.content : "" }}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-
-    <!--中间-->
-    <div class=" " style="width: 30%; height: 100%; float:left; margin-left: 2%; margin-right:2%;">
-      <div style="width: 100%; height: 100%; float:left;">
-        <div class="center-content"></div>
 
-        <div id="conterChart" style="width: 100%; height: 50%;"></div>
+      <!--中间-->
+      <div class=" " style="width: 30%; height: 100%; float:left; margin-left: 2%; margin-right:2%;">
+        <div style="width: 100%; height: 100%; float:left;">
+          <div class="center-content"></div>
 
-        <div
-            style="width: 100%; height: 35%;background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%);box-sizing: border-box;border: 1px solid;border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2;">
-          <div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0">
-            <div class="left-yeWzy"></div>
-            <div style="margin-top: -4%;" class="ckgd"></div>
+          <div class="select_time">
+            <span v-bind:class="{ active: isActive }" @click="monthClick">月</span>
+            <span v-bind:class="{ active: isNotActive }" @click="yearClick">年</span>
           </div>
-          <div style="width: 100%; height: 80%;">
-            <div>
-              <div class=" ">
-                <span class=" ">省政府</span>
-                <span class=" ">市场监督管理局</span>
-                <span class=" ">省公安厅</span>
-              </div>
+          <div id="conterChart" style="width: 100%; height: 50%;"></div>
 
+          <div class="z-content">
+            <div style="width: 100%; height: 10%; float:left; margin:1% 0 1% 0">
+              <div class="left-yeWzy"></div>
+              <div style="margin-top: -4%;" class="ckgd" @click="checkAll('')"></div>
+            </div>
+            <div style="float:left; width: 100%; height: 80%;">
+              <div class="ywzy">
+                <span v-bind:class="{ active: isDept }" @click="businessDept">省政府</span>
+                <span v-bind:class="{ active: isMarket }" @click="businessMarket">市场监督管理局</span>
+                <span v-bind:class="{ active: isPolice }" @click="businessPolice">省公安厅</span>
+              </div>
+              <div style="width: 100%;height: 95%;float: left;">
+                <div style="float: left;font-size: calc(100vw*12/1920);color: #FFFFFF;margin: 1% 2%">{{ ywData.time }}</div>
+                <div style="white-space: pre-wrap; float: left;font-size: calc(100vw*12/1920);color: #84ACE8;margin: 0 2%;text-align: left;">{{ ywData.content }}</div>
+              </div>
             </div>
-
           </div>
-        </div>
 
-        <div class="z-file">
-          <div class="z-file-t">
-            <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/cxlwt.png"></div>
-            <div style="float: left;width: 100%;height: 20%; font-size: 8px;">畅行瞭望台</div>
-          </div>
-          <div class="z-file-t">
-            <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/ssjh.png"></div>
-            <div style="float: left;width: 100%;height: 20%; font-size: 8px;">三省交辉</div>
-          </div>
-          <div class="z-file-t">
-            <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/stlj.png"></div>
-            <div style="float: left;width: 100%;height: 20%; font-size: 8px;">省途亮绩</div>
-          </div>
-          <div class="z-file-t">
-            <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jczh.png"></div>
-            <div style="float: left;width: 100%;height: 20%; font-size: 8px;">交畅智汇</div>
-          </div>
-          <div class="z-file-t">
-            <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/yjlh.png"></div>
-            <div style="float: left;width: 100%;height: 20%; font-size: 8px;">应急领航</div>
-          </div>
-          <div class="z-file-t">
-            <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jwjd.png"></div>
-            <div style="float: left;width: 100%;height: 20%; font-size: 8px;">吉问吉答</div>
+          <div class="z-file">
+            <div class="z-file-t" style="margin-left: 0.5%">
+              <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/cxlwt.png"></div>
+              <div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">畅行瞭望台</div>
+            </div>
+            <div class="z-file-t">
+              <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/ssjh.png"></div>
+              <div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">三省交辉</div>
+            </div>
+            <div class="z-file-t">
+              <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/stlj.png"></div>
+              <div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">省途亮绩</div>
+            </div>
+            <div class="z-file-t">
+              <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jczh.png"></div>
+              <div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">交畅智汇</div>
+            </div>
+            <div class="z-file-t">
+              <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/yjlh.png"></div>
+              <div style="float: left;width: 100%;height: 20%; font-size:calc(100vw*14/1920);">应急领航</div>
+            </div>
+            <div class="z-file-t">
+              <div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jwjd.png"></div>
+              <div style="float: left;width: 100%;height: 20%; font-size: calc(100vw*14/1920);">吉问吉答</div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!--右侧-->
-    <div style="width: 32%; height: 100%; float:left; margin-right: 1%">
-      <div style="width: 100%; height: 100%; float:left;">
-        <div class="right-content"></div>
+      <!--右侧-->
+      <div style="width: 32%; height: 100%; float:left; margin-right: 1%">
+        <div style="width: 100%; height: 100%; float:left;">
+          <div class="right-content"></div>
 
-        <div class="right-echarts">
-          <div class="right-echarts-child">
-            <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/rx.png"></div>
-            <div id="right1Chart" style="width:100%; height: 75%"></div>
-            <div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div>
-          </div>
-          <div class="right-echarts-child">
-            <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/rxs.png"></div>
-            <div id="right2Chart" style="width:100%; height: 75%"></div>
-            <div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div>
+          <div class="right-echarts">
+            <div class="right-echarts-child">
+              <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/rx.png">
+              </div>
+              <div id="right1Chart" style="width:100%; height: 75%"></div>
+              <div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div>
+            </div>
+            <div class="right-echarts-child">
+              <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/rxs.png"></div>
+              <div id="right2Chart" style="width:100%; height: 75%"></div>
+              <div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div>
+            </div>
           </div>
-        </div>
 
-        <div class="right-echarts">
-          <div class="right-echarts-child">
-            <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/tjzxx.png"></div>
-            <div id="right3Chart" style="width:100%; height: 75%"></div>
-            <div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div>
-          </div>
-          <div class="right-echarts-child">
-            <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/wlyq.png"></div>
-            <div id="right4Chart" style="width:100%; height: 75%"></div>
-            <div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div>
+          <div class="right-echarts">
+            <div class="right-echarts-child">
+              <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/tjzxx.png"></div>
+              <div id="right3Chart" style="width:100%; height: 75%"></div>
+              <div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div>
+            </div>
+            <div class="right-echarts-child">
+              <div style="width:100%; height: 10%; margin-top:5%;"><img style="width:90%; height: 100%;" src="../../assets/img/wlyq.png"></div>
+              <div id="right4Chart" style="width:100%; height: 75%"></div>
+              <div style="width:100%; height: 10%"><img style="width:90%;" src="../../assets/img/right-bottom.png"></div>
+            </div>
           </div>
-        </div>
 
+        </div>
       </div>
-
     </div>
-
-  </div>
+  </scale-box>
 </template>
 
 <script>
@@ -168,6 +172,11 @@ export default {
   components: {getEchartInstance},
   data() {
     return {
+      isActive: true,//月
+      isNotActive: false,//年
+      isDept: true,//省政府
+      isMarket: false,//市场监督管理局
+      isPolice: false,//省公安厅
       left1Data: [
         {
           name: '四好农村路',
@@ -204,22 +213,14 @@ export default {
           content: '         根据《交通运输部关于印发交通运输系统“平安交通”创建活动实施方案的通知》（交安监发〔2013〕116号）部署，交通运输系统开展了为期5年的“平安交通”创建活动。目前，“平安交通”建设已进入关键阶段，各部门、各单位要结合安全生产责任体系、隐患排查治理、风险管理、安全诚信、企业标准化等工作，坚持问题导向、目标导向，聚焦重点领域，全面推进“平安交通”建设。\n'
         },
       ],
-      right1Chart: [
-        {value: 1048, name: '已处理'},
-        {value: 735, name: '未处理'},
-      ],
-      right2Chart: [
-        {value: 1048, name: '已处理'},
-        {value: 735, name: '未处理'},
-      ],
-      right3Chart: [
-        {value: 1048, name: '已处理回复'},
-        {value: 735, name: '未处理'},
-      ],
-      right4Chart: [
-        {value: 1048, name: '已处理回复'},
-        {value: 735, name: '未处理'},
-      ],
+      ywData:{
+        time:'2024/6/11',
+        content:'对省十四届人大三次会议第0233号代表建议的答复\n'+
+            '徐凤娟代表：\n' +
+            '       您在省十四届人大三次会议上提出的《关于延长出租车驾驶员从业年龄的建议》收悉，经认真研究，现答复如下：\n' +
+            '       首先，感谢您对出租汽车驾驶员从业资格管理工作的关心和支持。近年来，省委省政府、省交通运输厅高度重视道路运输从业资格“放管服”工作，于2023年，在全国率先实施出租汽车驾驶员从业资格考试省内异地约考，破解驾驶员报名难、考试难问题。拟于2024年7月1日前，实施出租汽车驾驶员巡游和网络预约从业资格“两考合一”，方便出租汽车驾驶员在巡游和网络预约两种业态之间从事经营活动，为人民群众在道路运输从业、就业、创业、择业创造良好环境。\n' +
+            ''
+      },
     }
   },
   created() {
@@ -238,37 +239,113 @@ export default {
       this.rightThreeChart();
       this.rightFourChart();
     },
-    conterChart() {
+    //查询年数据
+    yearClick() {
+      this.isActive = false;
+      this.isNotActive = true;
+      this.conterChart('year');//数据回显
+    },
+    //查询月数据
+    monthClick() {
+      this.isActive = true;
+      this.isNotActive = false;
+      this.conterChart('month');//数据回显
+    },
+    businessDept() {
+      this.isDept = true;//省政府
+      this.isMarket = false;//市场监督管理局
+      this.isPolice = false;//省公安厅
+      this.getYwData('szf');
+    },
+    businessMarket() {
+      this.isDept = false;//省政府
+      this.isMarket = true;//市场监督管理局
+      this.isPolice = false;//省公安厅
+      this.getYwData('sjj');
+    },
+    businessPolice() {
+      this.isDept = false;//省政府
+      this.isMarket = false;//市场监督管理局
+      this.isPolice = true;//省公安厅
+      this.getYwData('gat');
+    },
+    //获取业务摘要信息
+    getYwData(item){
+      if (item === 'szf'){
+        //调用方法获取数据给ywData赋值
+        this.ywData.time = '2024-06-11';
+        // this.ywData.content = '';
+      }else if (item === 'sjj'){
+        //调用方法获取数据给ywData赋值
+        this.ywData.time = '2024/06/11';
+        // this.ywData.content = '';
+      }else{
+        //调用方法获取数据给ywData赋值
+        this.ywData.time = '2024-06-11';
+        // this.ywData.content = '';
+      }
+    },
+    conterChart(item) {
+      function fontSize(res){
+        let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
+        if (!clientWidth) return;
+        let fontSize = (clientWidth/1920);
+        return res*fontSize;
+      }
       let myChart = getEchartInstance("conterChart");
+      let data = [];//年月
+      let zfData = [];//省政府
+      let sjjData = [];//市场监督管理局
+      let gatData = [];//省公安厅
+      if (item === 'year'){
+        //调用查询年数据方法
+        //给data，zfData，sjjData，gatData赋值
+        data = ['2019年', '2020', '2021年', '2022年', '2023年', '2024年']
+        zfData = [150, 232, 201, 154, 190, 330]
+        sjjData = [320, 332, 301, 334, 390, 230]
+        gatData = [120, 132, 101, 134, 190, 130]
+      }else{
+        //调用查询月数据方法
+        //给data，zfData，sjjData，gatData赋值
+        data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        zfData = [150, 232, 201, 154, 190, 230, 410, 201, 254, 290, 230, 410]
+        sjjData = [320, 332, 301, 334, 390, 330, 320, 301, 354, 390, 330, 210]
+        gatData = [120, 132, 101, 134, 290, 130, 130, 101, 154, 190, 130, 140]
+      }
       let option = {
         title: {
           text: '件',
-          textStyle:{
+          textStyle: {
             // color:'#ccc',//'red'，字体颜色
             // fontStyle:'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
             // fontWeight:'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
-            fontSize:14,//字体大小
-            lineHeight:18,//字体行高
+            fontSize: fontSize(18),//字体大小
+            lineHeight: 18,//字体行高
+            color:'#84ACE8',
           },
-          textAlign:'auto',//整体（包括 text 和 subtext）的水平对齐
-          textVerticalAlign:'auto',//整体（包括 text 和 subtext）的垂直对齐
-          padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
-          left:'auto',//'5' | '5%'，title 组件离容器左侧的距离
-          right:'auto',//'title 组件离容器右侧的距离
-          top:'auto',//title 组件离容器上侧的距离
-          bottom:'auto',//title 组件离容器下侧的距离
+          textAlign: 'auto',//整体（包括 text 和 subtext）的水平对齐
+          textVerticalAlign: 'auto',//整体（包括 text 和 subtext）的垂直对齐
+          padding: 0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
+          left: '5%',//'5' | '5%'，title 组件离容器左侧的距离
+          right: 'auto',//'title 组件离容器右侧的距离
+          top: '5%',//title 组件离容器上侧的距离
+          bottom: 'auto',//title 组件离容器下侧的距离
         },
         tooltip: {
           trigger: 'axis'
         },
         legend: {
-          data: ['省政府', '市场监督管理局', '省公安厅']
+          data: ['省政府', '市场监督管理局', '省公安厅'],
+          textStyle:{
+            color:'#84ACE8',
+            fontSize: fontSize(12),//字体大小
+          },
         },
         grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
-          containLabel: true
+          containLabel: true,
         },
         toolbox: {
           feature: {
@@ -278,13 +355,24 @@ export default {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+          axisLabel: {//x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "#84ACE8",
+            }
+          },
+          data: data
         },
         yAxis: {
-          splitLine:{
-            show:true,
-            lineStyle:{
-              type:'dashed'//Y轴坐标虚线
+          axisLabel: {//y轴文字的配置
+            textStyle: {
+              color: "#84ACE8",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed'//Y轴坐标虚线
             }
           },
           type: 'value'
@@ -294,26 +382,28 @@ export default {
             name: '省政府',
             type: 'line',
             // stack: 'Total',
-            data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
+            data: zfData,
           },
           {
             name: '市场监督管理局',
             type: 'line',
             // stack: 'Total',
-            data: [320, 332, 301, 334, 390, 330, 320, 201, 154, 190, 330, 210]
+            data: sjjData
           },
           {
             name: '省公安厅',
             type: 'line',
             // stack: 'Total',
-            data: [120, 132, 101, 134, 190, 130, 130, 101, 154, 190, 130, 140]
+            data: gatData
           }
         ]
       };
       option && myChart.setOption(option);
+      window.addEventListener('resize', myChart.resize);
     },
     rightOneChart() {
       let myChart = getEchartInstance("right1Chart");
+
       let data = [
         {
           name: "已处理",
@@ -343,7 +433,7 @@ export default {
         //   y: "40%"    //距离上边的距离
         // },
         //数据的颜色设置
-        color: ["#2BCB95", "#F6BD16"],
+        color: ["#009862", "#5CC7A7"],
         //鼠标移入显示的文字
         tooltip: {
           trigger: 'item'
@@ -355,11 +445,16 @@ export default {
           // align: "left",
           // itemGap: 20,  //数据上下的距离
           // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
-          itemWidth: 15, // 设置宽度
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
           // data: data,
           // top:'5%',
           bottom: '0%',
-          left: 'center'
+          left: 'center',
+          textStyle: {
+            color: "#84ACE8",
+            fontSize:10,
+          }
         },
         series: [
           {
@@ -374,7 +469,7 @@ export default {
             emphasis: {
               label: {
                 show: true,
-                fontSize: 20,
+                fontSize: 16,
                 fontWeight: 'bold'
               }
             },
@@ -386,6 +481,7 @@ export default {
         ]
       };
       option && myChart.setOption(option);
+      window.addEventListener('resize', myChart.resize);
     },
     rightTwoChart() {
       let myChart = getEchartInstance("right2Chart");
@@ -418,7 +514,7 @@ export default {
         //   y: "40%"    //距离上边的距离
         // },
         //数据的颜色设置
-        color: ["#F6BD16", "#FF3B30"],
+        color: ["#DC8400", "#FFBF5F"],
         //鼠标移入显示的文字
         tooltip: {
           trigger: 'item',
@@ -431,11 +527,16 @@ export default {
           // align: "left",
           // itemGap: 20,  //数据上下的距离
           // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
-          itemWidth: 15, // 设置宽度
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
           // data: data,
           // top:'5%',
           bottom: '0%',
-          left: 'center'
+          left: 'center',
+          textStyle: {
+            color: "#84ACE8",
+            fontSize:10,
+          }
         },
         series: [
           {
@@ -451,7 +552,7 @@ export default {
             emphasis: {
               label: {
                 show: true,
-                fontSize: 20,
+                fontSize: 16,
                 fontWeight: 'bold'
               }
             },
@@ -463,6 +564,7 @@ export default {
         ]
       };
       option && myChart.setOption(option);
+      window.addEventListener('resize', myChart.resize);
     },
     rightThreeChart() {
       let myChart = getEchartInstance("right3Chart");
@@ -495,7 +597,7 @@ export default {
         //   y: "40%"    //距离上边的距离
         // },
         //数据的颜色设置
-        color: ["#365ADF", "#F6BD16"],
+        color: ["#365ADF", "#6094E4"],
         tooltip: {
           trigger: 'item'
         },
@@ -506,11 +608,16 @@ export default {
           // align: "left",
           // itemGap: 20,  //数据上下的距离
           // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
-          itemWidth: 15, // 设置宽度
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
           // data: data,
           // top:'5%',
           bottom: '0%',
-          left: 'center'
+          left: 'center',
+          textStyle: {
+            color: "#84ACE8",
+            fontSize:10,
+          }
         },
         series: [
           {
@@ -525,7 +632,7 @@ export default {
             emphasis: {
               label: {
                 show: true,
-                fontSize: 20,
+                fontSize: 16,
                 fontWeight: 'bold'
               }
             },
@@ -537,6 +644,7 @@ export default {
         ]
       };
       option && myChart.setOption(option);
+      window.addEventListener('resize', myChart.resize);
     },
     rightFourChart() {
       let myChart = getEchartInstance("right4Chart");
@@ -569,7 +677,7 @@ export default {
         //   y: "40%"    //距离上边的距离
         // },
         //数据的颜色设置
-        color: ["#FD3F3F","#365ADF"],
+        color: ["#FD3F3F", "#FF8B8B"],
         tooltip: {
           trigger: 'item'
         },
@@ -580,11 +688,16 @@ export default {
           // align: "left",
           // itemGap: 20,  //数据上下的距离
           // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
-          itemWidth: 15, // 设置宽度
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
           // data: data,
           // top:'5%',
           bottom: '0%',
-          left: 'center'
+          left: 'center',
+          textStyle: {
+            color: "#84ACE8",
+            fontSize:10,
+          }
         },
         series: [
           {
@@ -599,7 +712,7 @@ export default {
             emphasis: {
               label: {
                 show: true,
-                fontSize: 20,
+                fontSize: 16,
                 fontWeight: 'bold'
               }
             },
@@ -611,13 +724,14 @@ export default {
         ]
       };
       option && myChart.setOption(option);
+      window.addEventListener('resize', myChart.resize);
     },
     //大屏跳转
-    toBigScreen(url) {
+    checkAll(url) {
       if (!url) {
         return;
       }
-      this.$router.push(`/bigScreen/${url}`)
+      this.$router.push(`/views/${url}`)
     },
   }
 
@@ -625,6 +739,13 @@ export default {
 </script>
 
 <style scoped>
+
+html, body{
+  width: 100%;
+  height: 1080px;
+  margin-top: 0;
+}
+
 .all {
   width: 100%;
   height: calc(100vh - 80px);
@@ -658,7 +779,7 @@ export default {
 
 .left-conent {
   width: 100%;
-  height: 95%;
+  height: 90%;
   float: left;
 }
 
@@ -668,7 +789,7 @@ export default {
   float: left;
   background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%);
   box-sizing: border-box;
-  border: 1px solid;
+  border: calc(100vw*2/1920) solid;
   border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2;
 }
 
@@ -708,15 +829,19 @@ export default {
 }
 
 .left-content-detail {
+  white-space: pre-wrap;
   margin-left: 2%;
-  font-size: 8px;
+  font-size: calc(100vw*12/1920);
   color: #84ACE8;
   letter-spacing: 0em;
-  text-overflow: -o-ellipsis-lastline;
+  //text-overflow: -o-ellipsis-lastline;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-//-webkit-line-clamp: 4; //line-clamp: 12; -webkit-box-orient: vertical;
+  line-height: 1.5em;
+  -webkit-line-clamp: 8;
+  //line-clamp: 12;
+  -webkit-box-orient: vertical;
 }
 
 .ckgd {
@@ -727,6 +852,7 @@ export default {
   background-image: url('../../assets/img/ckgd.png');
   background-repeat: no-repeat;
   background-size: 100% 80%;
+  cursor:pointer;
 }
 
 .center-content {
@@ -735,7 +861,7 @@ export default {
   background-image: url('../../assets/img/hyxt.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  font-size: 18px;
+  font-size: calc(100vw*20/1920);
 }
 
 .right-content {
@@ -744,13 +870,13 @@ export default {
   background-image: url('../../assets/img/bxjy.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  font-size: 18px;
+  font-size: calc(100vw*20/1920);
 }
 
 .right-echarts {
   float: left;
   width: 100%;
-  height: 47%;
+  height: 46%;
 }
 
 .right-echarts-child {
@@ -762,13 +888,13 @@ export default {
 
 .z-file {
   width: 100%;
-  height: 10%;
+  height: 15%;
   margin-bottom: 0px;
 }
 
 .z-file-t {
   float: left;
-  width: 16%;
+  width: 16.5%;
   height: 100%;
 }
 
@@ -778,4 +904,66 @@ export default {
   height: 70%;
 }
 
+.z-content {
+  width: 100%;
+  height: 30%;
+  background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%);
+  box-sizing: border-box;
+  border: calc(100vw*2/1920) solid;
+  border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2;
+}
+
+.select_time {
+  cursor:pointer;
+  position:relative;
+  float: right;
+  background: #1e3d64;
+  margin-top: 2%;
+//position: absolute;
+  z-index: 999;
+  border-radius: calc(100vh*2/1080) calc(100vh*2/1080);
+  border: #52A5E7 calc(100vw*1/1920) solid;
+}
+
+.select_time span {
+  display: block;
+  width: calc(100vw*30/1920);
+  height: calc(100vh*20/1080);
+  float: left;
+  text-align: center;
+  line-height: calc(100vh*20/1080);
+  color: #FFFFFF;
+  font-size: calc(100vw*14/1920);
+}
+
+.select_time .active {
+  background-color: #52A5E7;
+  color: #FFFFFF;
+}
+
+
+.ywzy {
+  cursor:pointer;
+  position:relative;
+  float: left;
+  z-index: 999;
+  color: #84ACE8;
+  width: 100%;
+  padding-bottom: 1%;
+  height: 2vh;
+}
+
+.ywzy span {
+  display: block;
+  float: left;
+  text-align: center;
+  color: #84ACE8;
+  font-size: calc(100vw*16/1920);
+  margin-left: 2%;
+}
+.ywzy .active {
+  color: #FFFFFF;
+  font-weight: bold;
+  border-bottom: #30AEF5 calc(100vw*2/1920) solid;
+}
 </style>