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

<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 : "" }}
                </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>
              </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>
              </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
            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>
          <div style="width: 100%; height: 80%;">
            <div>
              <div class=" ">
                <span class=" ">省政府</span>
                <span class=" ">市场监督管理局</span>
                <span class=" ">省公安厅</span>
              </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>
        </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: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>
        </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>
        </div>

      </div>

    </div>

  </div>
</template>

<script>

import {getEchartInstance} from "@/api/jczh";

export default {
  name: "drain",
  components: {getEchartInstance},
  data() {
    return {
      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'
        },
      ],
      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: '未处理'},
      ],
    }
  },
  created() {
    //初始化
  },
  mounted() {
    //加载
    this.initData();
  },
  methods: {
    //初始化数据方法
    initData() {
      this.conterChart();
      this.rightOneChart();
      this.rightTwoChart();
      this.rightThreeChart();
      this.rightFourChart();
    },
    conterChart() {
      let myChart = getEchartInstance("conterChart");
      let option = {
        title: {
          text: '件',
          textStyle:{
            // color:'#ccc',//'red'，字体颜色
            // fontStyle:'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
            // fontWeight:'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontSize:14,//字体大小
            lineHeight:18,//字体行高
          },
          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 组件离容器下侧的距离
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['省政府', '市场监督管理局', '省公安厅']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        },
        yAxis: {
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed'//Y轴坐标虚线
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '省政府',
            type: 'line',
            // stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
          },
          {
            name: '市场监督管理局',
            type: 'line',
            // stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320, 201, 154, 190, 330, 210]
          },
          {
            name: '省公安厅',
            type: 'line',
            // stack: 'Total',
            data: [120, 132, 101, 134, 190, 130, 130, 101, 154, 190, 130, 140]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    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: ["#2BCB95", "#F6BD16"],
        //鼠标移入显示的文字
        tooltip: {
          trigger: 'item'
        },
        //图例设置
        legend: {
          // orient: "vertical",  //竖直展示，如果横着的话，这个可以直接去掉
          // right: "10%",
          // align: "left",
          // itemGap: 20,  //数据上下的距离
          // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
          itemWidth: 15, // 设置宽度
          // data: data,
          // top:'5%',
          bottom: '0%',
          left: 'center'
        },
        series: [
          {
            name: '12345热线',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
    },
    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: ["#F6BD16", "#FF3B30"],
        //鼠标移入显示的文字
        tooltip: {
          trigger: 'item',
          // formatter: "{b}<br/> {c}人  ({d}%)"
        },
        //图例设置
        legend: {
          // orient: "vertical",  //竖直展示，如果横着的话，这个可以直接去掉
          // right: "10%",
          // align: "left",
          // itemGap: 20,  //数据上下的距离
          // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
          itemWidth: 15, // 设置宽度
          // data: data,
          // top:'5%',
          bottom: '0%',
          left: 'center'
        },
        series: [
          {
            name: '12328热线',
            radius: ["50%", "70%"], //第一个是中间圆的大小，第二个是外边圆的大小
            // center: ["40%", "50%"], //左边的距离，上边的距离
            type: 'pie',
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
    },
    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", "#F6BD16"],
        tooltip: {
          trigger: 'item'
        },
        //图例设置
        legend: {
          // orient: "vertical",  //竖直展示，如果横着的话，这个可以直接去掉
          // right: "10%",
          // align: "left",
          // itemGap: 20,  //数据上下的距离
          // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
          itemWidth: 15, // 设置宽度
          // data: data,
          // top:'5%',
          bottom: '0%',
          left: 'center'
        },
        series: [
          {
            name: '局厅长信箱',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
    },
    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","#365ADF"],
        tooltip: {
          trigger: 'item'
        },
        //图例设置
        legend: {
          // orient: "vertical",  //竖直展示，如果横着的话，这个可以直接去掉
          // right: "10%",
          // align: "left",
          // itemGap: 20,  //数据上下的距离
          // icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示
          itemWidth: 15, // 设置宽度
          // data: data,
          // top:'5%',
          bottom: '0%',
          left: 'center'
        },
        series: [
          {
            name: '网络舆情',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
    },
    //大屏跳转
    toBigScreen(url) {
      if (!url) {
        return;
      }
      this.$router.push(`/bigScreen/${url}`)
    },
  }

}
</script>

<style scoped>
.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: 95%;
  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: 1px 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 {
  margin-left: 2%;
  font-size: 8px;
  color: #84ACE8;
  letter-spacing: 0em;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
//-webkit-line-clamp: 4; //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%;
}

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

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

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

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

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

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

.z-file-ts {
  float: left;
  width: 100%;
  height: 70%;
}

</style>