jtjsc-front/src/views/jxzt/Jczh.vue

<template>
  <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 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 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 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 class="select_time">
            <span v-bind:class="{ active: isActive }" @click="monthClick">月</span>
            <span v-bind:class="{ active: isNotActive }" @click="yearClick">年</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 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 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: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 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>
  </scale-box>
</template>

<script>

import {getEchartInstance} from "@/api/jczh";
import ScaleBox from "vue2-scale-box";

export default {
  name: "drain",
  components: {getEchartInstance,ScaleBox},
  data() {
    return {
      isActive: true,//月
      isNotActive: false,//年
      isDept: true,//省政府
      isMarket: false,//市场监督管理局
      isPolice: false,//省公安厅
      left1Data: [
        {
          name: '四好农村路',
          time: '2024-06-20',
          content: '         一是全力以赴保通保畅，服务经济社会发展大局。二是努力扩大有效投资，加快建设现代化交通基础设施体系。三是积极推动交通物流降本提质增效，大力发展现代运输服务业。四是进一步全面深化交通运输改革，加强法治建设，优化营商环境。五是加大科技创新力度，推进交通运输智慧绿色发展。六是服务大局、服务基层、服务人民，有力保障城乡融合和区域协调发展。七是积极服务共建“一带一路”高质量发展，持续推动全球交通合作。八是点面结合加强试点，做好加快建设交通强国各项具体工作。九是全力抓好交通运输安全生产工作，牢牢守住安全生产底线。十是加强党的全面领导，加强党的建设，深化党风廉政建设和反腐败斗争。'
        },
        {
          name: '2024年交通运输工作重点',
          time: '2023-12-21',
          content: '         一是全力以赴保通保畅，服务经济社会发展大局。二是努力扩大有效投资，加快建设现代化交通基础设施体系。三是积极推动交通物流降本提质增效，大力发展现代运输服务业。四是进一步全面深化交通运输改革，加强法治建设，优化营商环境。五是加大科技创新力度，推进交通运输智慧绿色发展。六是服务大局、服务基层、服务人民，有力保障城乡融合和区域协调发展。七是积极服务共建“一带一路”高质量发展，持续推动全球交通合作。八是点面结合加强试点，做好加快建设交通强国各项具体工作。九是全力抓好交通运输安全生产工作，牢牢守住安全生产底线。十是加强党的全面领导，加强党的建设，深化党风廉政建设和反腐败斗争。'
        },
      ],
      left2Data: [
        {
          name: '省交通运输厅省财政厅省发展和改革委员会关于对氢能车辆行驶吉林省高速公路实施优惠的通知',
          time: '2024-08-12',
          content: '         2024年9月1日0时至2026年8月31日24时，安装ETC套装设备的吉林省籍氢能车辆，在吉林省各高速公路收费站间点对点免费通行，相应的高速公路通行费由省财政统一支付。'
        },
        {
          name: '省交通运输厅与辽宁省交通运输厅签订《国家区域性公路交通应急管理协同联动战略合作框架协议》',
          time: '2024-06-28',
          content: '         为响应《东北“三省一区”协同推进交通运输高质量发展行动倡议》，近日，省交通运输厅与辽宁省交通运输厅签订了《国家区域性公路交通应急管理协同联动战略合作框架协议》，旨在切实加强吉林、辽宁交通运输应急处置联动协作，实现互联互通，进一步提高跨区域应急救援协同处置能力，推动交通运输高质量发展。'
        },
      ],
      left3Data: [
        {
          name: '平安交通',
          time: '2024-08-19',
          content: '         根据《交通运输部关于印发交通运输系统“平安交通”创建活动实施方案的通知》（交安监发〔2013〕116号）部署，交通运输系统开展了为期5年的“平安交通”创建活动。目前，“平安交通”建设已进入关键阶段，各部门、各单位要结合安全生产责任体系、隐患排查治理、风险管理、安全诚信、企业标准化等工作，坚持问题导向、目标导向，聚焦重点领域，全面推进“平安交通”建设。\n'
        },
        {
          name: '交通运输惠企政策',
          time: '2024-04-23',
          content: '         根据《交通运输部关于印发交通运输系统“平安交通”创建活动实施方案的通知》（交安监发〔2013〕116号）部署，交通运输系统开展了为期5年的“平安交通”创建活动。目前，“平安交通”建设已进入关键阶段，各部门、各单位要结合安全生产责任体系、隐患排查治理、风险管理、安全诚信、企业标准化等工作，坚持问题导向、目标导向，聚焦重点领域，全面推进“平安交通”建设。\n'
        },
      ],
      ywData:{
        time:'2024/6/11',
        content:'对省十四届人大三次会议第0233号代表建议的答复\n'+
            '徐凤娟代表：\n' +
            '       您在省十四届人大三次会议上提出的《关于延长出租车驾驶员从业年龄的建议》收悉，经认真研究，现答复如下：\n' +
            '       首先，感谢您对出租汽车驾驶员从业资格管理工作的关心和支持。近年来，省委省政府、省交通运输厅高度重视道路运输从业资格“放管服”工作，于2023年，在全国率先实施出租汽车驾驶员从业资格考试省内异地约考，破解驾驶员报名难、考试难问题。拟于2024年7月1日前，实施出租汽车驾驶员巡游和网络预约从业资格“两考合一”，方便出租汽车驾驶员在巡游和网络预约两种业态之间从事经营活动，为人民群众在道路运输从业、就业、创业、择业创造良好环境。\n' +
            ''
      },
    }
  },
  created() {
    //初始化
  },
  mounted() {
    //加载
    this.initData();
  },
  methods: {
    //初始化数据方法
    initData() {
      this.conterChart();
      this.rightOneChart();
      this.rightTwoChart();
      this.rightThreeChart();
      this.rightFourChart();
    },
    //查询年数据
    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: {
            // color:'#ccc',//'red'，字体颜色
            // fontStyle:'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
            // fontWeight:'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontSize: fontSize(18),//字体大小
            lineHeight: 18,//字体行高
            color:'#84ACE8',
          },
          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: ['省政府', '市场监督管理局', '省公安厅'],
          textStyle:{
            color:'#84ACE8',
            fontSize: fontSize(12),//字体大小
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: "#84ACE8",
            }
          },
          data: data
        },
        yAxis: {
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: "#84ACE8",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'//Y轴坐标虚线
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '省政府',
            type: 'line',
            // stack: 'Total',
            data: zfData,
          },
          {
            name: '市场监督管理局',
            type: 'line',
            // stack: 'Total',
            data: sjjData
          },
          {
            name: '省公安厅',
            type: 'line',
            // stack: 'Total',
            data: gatData
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener('resize', myChart.resize);
    },
    rightOneChart() {
      let myChart = getEchartInstance("right1Chart");

      let data = [
        {
          name: "已处理",
          value: 156
        },
        {
          name: "未处理",
          value: 231
        },
      ];
      let option = {
        //环形图中间文字
        // title: {
        //   text: "已处理回复",
        //   textStyle: {
        //     fontSize: 12,
        //     color: "rgba(0,0,0,0.65)",
        //     fontWeight: 400
        //   },
        //   subtextStyle: {
        //     fontSize: 20,
        //     color: "#000000",
        //     fontWeight: 500
        //   },
        //   textAlign: "center", //图例文字居中显示
        //   x: "45%",   //距离左边的距离
        //   y: "40%"    //距离上边的距离
        // },
        //数据的颜色设置
        color: ["#009862", "#5CC7A7"],
        //鼠标移入显示的文字
        tooltip: {
          trigger: 'item'
        },
        //图例设置
        legend: {
          // orient: "vertical",  //竖直展示，如果横着的话，这个可以直接去掉
          // right: "10%",
          // align: "left",
          // itemGap: 20,  //数据上下的距离
          // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          // data: data,
          // top:'5%',
          bottom: '0%',
          left: 'center',
          textStyle: {
            color: "#84ACE8",
            fontSize:10,
          }
        },
        series: [
          {
            name: '12345热线',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener('resize', myChart.resize);
    },
    rightTwoChart() {
      let myChart = getEchartInstance("right2Chart");
      let data = [
        {
          name: "已处理",
          value: 456
        },
        {
          name: "未处理",
          value: 231
        },
      ];
      let option = {
        //环形图中间文字
        // title: {
        //   text: "已处理回复",
        //   textStyle: {
        //     fontSize: 12,
        //     color: "rgba(0,0,0,0.65)",
        //     fontWeight: 400
        //   },
        //   subtextStyle: {
        //     fontSize: 20,
        //     color: "#000000",
        //     fontWeight: 500
        //   },
        //   textAlign: "center", //图例文字居中显示
        //   x: "45%",   //距离左边的距离
        //   y: "40%"    //距离上边的距离
        // },
        //数据的颜色设置
        color: ["#DC8400", "#FFBF5F"],
        //鼠标移入显示的文字
        tooltip: {
          trigger: 'item',
          // formatter: "{b}<br/> {c}人  ({d}%)"
        },
        //图例设置
        legend: {
          // orient: "vertical",  //竖直展示，如果横着的话，这个可以直接去掉
          // right: "10%",
          // align: "left",
          // itemGap: 20,  //数据上下的距离
          // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          // data: data,
          // top:'5%',
          bottom: '0%',
          left: 'center',
          textStyle: {
            color: "#84ACE8",
            fontSize:10,
          }
        },
        series: [
          {
            name: '12328热线',
            radius: ["50%", "70%"], //第一个是中间圆的大小，第二个是外边圆的大小
            // center: ["40%", "50%"], //左边的距离，上边的距离
            type: 'pie',
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener('resize', myChart.resize);
    },
    rightThreeChart() {
      let myChart = getEchartInstance("right3Chart");
      let data = [
        {
          name: "已处理回复",
          value: 456
        },
        {
          name: "未处理",
          value: 231
        },
      ];
      let option = {
        //环形图中间文字
        // title: {
        //   text: "已处理回复",
        //   textStyle: {
        //     fontSize: 12,
        //     color: "rgba(0,0,0,0.65)",
        //     fontWeight: 400
        //   },
        //   subtextStyle: {
        //     fontSize: 20,
        //     color: "#000000",
        //     fontWeight: 500
        //   },
        //   textAlign: "center", //图例文字居中显示
        //   x: "45%",   //距离左边的距离
        //   y: "40%"    //距离上边的距离
        // },
        //数据的颜色设置
        color: ["#365ADF", "#6094E4"],
        tooltip: {
          trigger: 'item'
        },
        //图例设置
        legend: {
          // orient: "vertical",  //竖直展示，如果横着的话，这个可以直接去掉
          // right: "10%",
          // align: "left",
          // itemGap: 20,  //数据上下的距离
          // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          // data: data,
          // top:'5%',
          bottom: '0%',
          left: 'center',
          textStyle: {
            color: "#84ACE8",
            fontSize:10,
          }
        },
        series: [
          {
            name: '局厅长信箱',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener('resize', myChart.resize);
    },
    rightFourChart() {
      let myChart = getEchartInstance("right4Chart");
      let data = [
        {
          name: "已处理回复",
          value: 456
        },
        {
          name: "未处理",
          value: 231
        },
      ];
      let option = {
        //环形图中间文字
        // title: {
        //   text: "已处理回复",
        //   textStyle: {
        //     fontSize: 12,
        //     color: "rgba(0,0,0,0.65)",
        //     fontWeight: 400
        //   },
        //   subtextStyle: {
        //     fontSize: 20,
        //     color: "#000000",
        //     fontWeight: 500
        //   },
        //   textAlign: "center", //图例文字居中显示
        //   x: "45%",   //距离左边的距离
        //   y: "40%"    //距离上边的距离
        // },
        //数据的颜色设置
        color: ["#FD3F3F", "#FF8B8B"],
        tooltip: {
          trigger: 'item'
        },
        //图例设置
        legend: {
          // orient: "vertical",  //竖直展示，如果横着的话，这个可以直接去掉
          // right: "10%",
          // align: "left",
          // itemGap: 20,  //数据上下的距离
          // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          // data: data,
          // top:'5%',
          bottom: '0%',
          left: 'center',
          textStyle: {
            color: "#84ACE8",
            fontSize:10,
          }
        },
        series: [
          {
            name: '网络舆情',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener('resize', myChart.resize);
    },
    //大屏跳转
    checkAll(url) {
      if (!url) {
        return;
      }
      this.$router.push(`/views/${url}`)
    },
  }

}
</script>

<style scoped>

html, body{
  width: 100%;
  height: 1080px;
  margin-top: 0;
}

.all {
  width: 100%;
  height: calc(100vh - 80px);
  color: #FFFFFF;
  background-image: url('../../assets/img/bj.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: 5%;
}

.left-all {
  width: 32%;
  height: 100%;
  float: left;
  margin-left: 1%;
}

.left-all-wai {
  width: 100%;
  height: 100%;
  float: left;
}

.left-title {
  width: 100%;
  height: 5%;
  background-image: url('../../assets/img/zcdc.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.left-conent {
  width: 100%;
  height: 90%;
  float: left;
}

.left-title-gjzc {
  width: 100%;
  height: 33%;
  float: left;
  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;
}

.left-guoJzc {
  width: 100%;
  height: 100%;
  margin-left: 30%;
  background-image: url('../../assets/img/gjzc.png');
  background-repeat: no-repeat;
  background-size: 40% 100%;
}

.left-sJzc {
  width: 100%;
  height: 100%;
  margin-left: 30%;
  background-image: url('../../assets/img/sjzc.png');
  background-repeat: no-repeat;
  background-size: 40% 100%;
}

.left-benTzd {
  width: 100%;
  height: 100%;
  margin-left: 30%;
  background-image: url('../../assets/img/btzd.png');
  background-repeat: no-repeat;
  background-size: 40% 100%;
}

.left-yeWzy {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/img/ywzy.png');
  background-repeat: no-repeat;
  background-size: 20% 80%;
}

.left-content-detail {
  white-space: pre-wrap;
  margin-left: 2%;
  font-size: calc(100vw*12/1920);
  color: #84ACE8;
  letter-spacing: 0em;
  //text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 1.5em;
  -webkit-line-clamp: 8;
  //line-clamp: 12;
  -webkit-box-orient: vertical;
}

.ckgd {
  width: 10%;
  height: 50%;
  float: right;
  margin-right: 2%;
  background-image: url('../../assets/img/ckgd.png');
  background-repeat: no-repeat;
  background-size: 100% 80%;
  cursor:pointer;
}

.center-content {
  width: 100%;
  height: 5%;
  background-image: url('../../assets/img/hyxt.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: calc(100vw*20/1920);
}

.right-content {
  width: 100%;
  height: 5%;
  background-image: url('../../assets/img/bxjy.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: calc(100vw*20/1920);
}

.right-echarts {
  float: left;
  width: 100%;
  height: 46%;
}

.right-echarts-child {
  width: 46%;
  height: 100%;
  margin-left: 2%;
  float: left;
}

.z-file {
  width: 100%;
  height: 15%;
  margin-bottom: 0px;
}

.z-file-t {
  float: left;
  width: 16.5%;
  height: 100%;
}

.z-file-ts {
  float: left;
  width: 100%;
  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>