jtjsc-front/src/views/sanshengjiaohui/index.vue

<template>
  <div class="bgbox">
    <div class="titlk">
      <div class="titlk_1">
        <span class="titlk_1_2"></span>
        <span class="titlk_1_3">长春市</span>
        <span class="titlk_1_4">晴   17~28℃</span>
      </div>
      <div class="titlk_2">
        <span class="titlk_2_2"></span>
        <span class="titlk_1_3">2024-5-18</span>
        <span class="titlk_1_4">12:28:59</span>
      </div>
    </div>
    <div class="con">
      <div class="con_one">
        <div class="con_one_a">规划建设</div>
        <div class="con_one_a_k">
          <div class="tzqk">投资情况</div>
        </div>
        <div class="con_one_a_a">
          <div
            id="con_one_a_b"
            style="width: 100%; height: 100%;"
          ></div>
          <div class="con_one_a_b_a"></div>
        </div>
        <div class="con_one_1">
            <div class="tzqk">计划情况</div>
            <div class="con_one_2">
              <div class="con_one_3">基础设施</div>
              <div class="con_one_4">运输装备</div>
              <div class="con_one_4">运输服务</div>
              <div class="con_one_6">固定资产投资</div>
              <div class="con_one_4">安全生产</div>
              <div class="con_one_4">科技创新</div>
            </div>
        </div>
        <div class="con_one_a_a">
          <div
            id="con_one_a_b_c"
            style="width: 100%; height: 100%;"
          ></div>
          <div class="con_one_a_b_a"></div>
        </div>
      </div>
      <div class="con_one">
        <div class="con_one_1_2">
            <div class="tzqk">公路现状</div>
            <div class="con_one_2">
              <div class="con_one_3">公路建设</div>
              <div class="con_one_4">公路管理</div>
              <div class="con_one_4">公路养护</div>
              <div class="con_one_4">公路运营</div>
            </div>
        </div>
        <div class="con_one_a_a">
          <div
            id="con_one_a_b_c_1"
            style="width: 100%; height: 100%;"
          ></div>
          <div class="con_one_a_b_a"></div>
        </div>
        <div class="con_one_1_2_3">
            <div class="tzqk">水路现状</div>
        </div>
        <div class="con_one_a_a_vb">
          <div
            id="con_one_a_b_c_1_o"
            style="width: 100%; height: 100%;"
          ></div>
          <div class="con_one_a_b_a_i"></div>
        </div>
        <div class="con_one_a_a_vb_o">
          <div class="con_one_a_a_vb_o1">
            <span class="con_text_a">畅行瞭望台</span>
          </div>
          <div class="con_one_a_a_vb_o2">
            <span class="con_text_a">三省交辉</span>
          </div>
          <div class="con_one_a_a_vb_o3">
            <span class="con_text_a">省途亮绩</span>
          </div>
          <div class="con_one_a_a_vb_o4">
            <span class="con_text_a">交畅智汇</span>
          </div>
          <div class="con_one_a_a_vb_o5">
            <span class="con_text_a">应急领航</span>
          </div>
          <div class="con_one_a_a_vb_o6">
            <span class="con_text_a">吉问吉答</span>
          </div>
        </div>
      </div>
      <div class="con_one">
        <div class="con_one_a">政策差异化</div>
        <div class="con_one_a_nm">
          <div class="con_one_a_nm_1">
            <div class="con_one_a_nm_12">
              <div>黑龙江省道路运输条例</div>
              <div >黑龙江省公路条例</div>
              <div >道路旅客运输及客运站管理规定</div>
              <div >国际道路运输管理规定</div>
            </div>
          </div>
          <div class="con_one_a_nm_2">
            <div class="con_one_a_nm_12_9">
              <div>吉林省高速公路管理办法</div>
              <div>(2021修改)</div>
              <div >吉林省道路运输条例(2023修改)</div>
              <div >吉林省水路交通条例(2022修改) </div>
              <div >吉林省农村公路条例(2022修改)</div>
              <div >吉林省城市公共客运管理条例</div>
              <div >吉林省农村公路条例(2022修改)</div>
            </div>
          </div>
          <div class="con_one_a_nm_3">
            <div class="con_one_a_nm_12">
              <div>辽宁省道路运输管理条例</div>
              <div >辽宁省高速公路管理条例</div>
              <div >国内水路运输管理条例</div>
              <div >收费公路管理条例</div>
              <div >防治船舶污染海洋环境管理条例</div>
              <div >铁路安全管理条例</div>
            </div>
          </div>
        </div>
        <div class="con_one_a">亮点业绩</div>
        <div class="con_one_a_ns">
          <div class="con_one_a_ns_o"></div>
          <div class="con_one_a_ns_o_g">查看更多> </div>
          <div class="con_one_a_ns_o_g1">
            <div class="con_one_a_ns_o_g1_p">黑龙江逐路逐桥逐隧再排查再整治</div>
            <div class="con_one_a_ns_o_g1_p1">7月21日，在原有12个督导检查组的基础上，黑龙江省交通运输厅增补24个工作组190人，指导各地逐路逐桥逐隧进行再排查、再整治，重点排查桥梁导流设施、锥坡、墩台墩柱等隐患部位，以及高边坡、山区沟谷、临水临崖、靠山易积水路段和采空区的安全隐患。黑龙江省印发《公路防汛隐患排查及抢险技术指南》，邀请专家辅导培训，抽调16名桥梁技术专家提供技术指导，提升排查整治精准度和实效性。</div>
          </div>
        </div>
        <div class="con_one_a_ns">
          <div class="con_one_a_ns_o_o"></div>
          <div class="con_one_a_ns_o_g">查看更多> </div>
          <div class="con_one_a_ns_o_g1">
            <div class="con_one_a_ns_o_g1_p">黑龙江逐路逐桥逐隧再排查再整治</div>
            <div class="con_one_a_ns_o_g1_p1">7月21日，在原有12个督导检查组的基础上，黑龙江省交通运输厅增补24个工作组190人，指导各地逐路逐桥逐隧进行再排查、再整治，重点排查桥梁导流设施、锥坡、墩台墩柱等隐患部位，以及高边坡、山区沟谷、临水临崖、靠山易积水路段和采空区的安全隐患。黑龙江省印发《公路防汛隐患排查及抢险技术指南》，邀请专家辅导培训，抽调16名桥梁技术专家提供技术指导，提升排查整治精准度和实效性。</div>
          </div>
        </div>
        <div class="con_one_a_ns">
          <div class="con_one_a_ns_o_o_0"></div>
          <div class="con_one_a_ns_o_g">查看更多> </div>
          <div class="con_one_a_ns_o_g1">
            <div class="con_one_a_ns_o_g1_p">黑龙江逐路逐桥逐隧再排查再整治</div>
            <div class="con_one_a_ns_o_g1_p1">7月21日，在原有12个督导检查组的基础上，黑龙江省交通运输厅增补24个工作组190人，指导各地逐路逐桥逐隧进行再排查、再整治，重点排查桥梁导流设施、锥坡、墩台墩柱等隐患部位，以及高边坡、山区沟谷、临水临崖、靠山易积水路段和采空区的安全隐患。黑龙江省印发《公路防汛隐患排查及抢险技术指南》，邀请专家辅导培训，抽调16名桥梁技术专家提供技术指导，提升排查整治精准度和实效性。</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getEchartInstance } from "../../api/jczh";
export default {
  name:'three',
  data(){
    return{
    }
  },
  mounted(){
    this.init()
  },
  methods:{
    init() {
      this.initChartsleftOne()
      this.initChartslefttwo()
      this.initChartsleftthree()
      this.initChartslefttfour()
    },
    initChartsleftOne() {
      let con_one_a_b_charts = getEchartInstance("con_one_a_b");
      const con_one_a_b_charts_option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          data: ['计划投资总额', '中央投资总额', '已完成投资总额'],
          axisLabel: {
            interval: 0,
            inside: false, // 本来是true，改为false后将图形中的字移到图形外边
            color: "#FFF", // 修改坐标轴字体颜色
            fontSize: 36, // 调整坐标轴字体大小
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "万元",
          nameTextStyle: {
            padding: [20, 10, 10, -50], // 四个数字分别为上右下左与原位置距离
            fontSize: 36, // 调整坐标轴字体大小
            color: "#FFF",
          },
          axisLabel: {
            color: "#FFF", // 修改坐标轴字体颜色
            fontSize: 36, // 调整坐标轴字体大小
          },
          splitLine: {
            show: false,
          },
        },
        // grid: {
        //     // left: '10%', // 图表整体与容器左侧的距离
        //     // right: '10%', // 图表整体与容器右侧的距离
        //     // top: '90%', // 图表整体与容器顶部的距离
        //     // bottom: '10%', // 图表整体与容器底部的距离
        //     containLabel: true // 确保坐标轴标签在网格区域内
        // },
        legend: {
          data: ["黑龙江",'吉林','辽宁'],
          textStyle: {
            // 图例文字的样式
            color: "#FFF", // 图例文字颜色
            fontSize: 36, // 图例文字大小
          },
          right:'2%'
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "黑龙江",
            data: [50, 100, 150, 200,300],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },
          {
            name: "吉林",
            data: [50, 100, 150, 200,300],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },
          {
            name: "辽宁",
            data: [50, 100, 150, 200,300],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },

        ],
      };
      con_one_a_b_charts.setOption(con_one_a_b_charts_option);
    },
    initChartslefttwo() {
      let con_one_a_b_c_charts = getEchartInstance("con_one_a_b_c");
      const con_one_a_b_c_charts_option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          data: ['铁路', '公路', '水路','民航','邮政','城市客运'],
          axisLabel: {
            interval: 0,
            inside: false, // 本来是true，改为false后将图形中的字移到图形外边
            color: "#FFF", // 修改坐标轴字体颜色
            fontSize: 36, // 调整坐标轴字体大小
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "数量（个）",
          nameTextStyle: {
            padding: [10, 10, 5, 60],
            fontSize: 36, // 调整坐标轴字体大小
            color: "#FFF",
          },
          axisLabel: {
            color: "#FFF", // 修改坐标轴字体颜色
            fontSize: 36, // 调整坐标轴字体大小
          },
          splitLine: {
            show: false,
          },
        },
        legend: {
          data: ["黑龙江",'吉林','辽宁'],
          textStyle: {
            // 图例文字的样式
            color: "#FFF", // 图例文字颜色
            fontSize: 36, // 图例文字大小
          },
          right:'2%'
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "黑龙江",
            data: [50, 100, 150, 200,300,150,260,500],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },
          {
            name: "吉林",
            data: [50, 100, 150, 200,300,150,260,500],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },
          {
            name: "辽宁",
            data: [50, 100, 150, 200,300,150,260,500],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },

        ],
      };
      con_one_a_b_c_charts.setOption(con_one_a_b_c_charts_option);
    },
    initChartsleftthree() {
      let con_one_a_b_c_1 = getEchartInstance("con_one_a_b_c_1");
      const con_one_a_b_c_1_option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          data: ['公路建设里程', '桥梁建设总数', '隧道建设总数','隧道建设总数','客运站建设数量'],
          axisLabel: {
            interval: 0,
            inside: false, // 本来是true，改为false后将图形中的字移到图形外边
            color: "#FFF", // 修改坐标轴字体颜色
            fontSize: 36, // 调整坐标轴字体大小
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "数量（个）",
          nameTextStyle: {
            padding: [10, 10, 5, 60],
            fontSize: 36, // 调整坐标轴字体大小
            color: "#FFF",
          },
          axisLabel: {
            color: "#FFF", // 修改坐标轴字体颜色
            fontSize: 36, // 调整坐标轴字体大小
          },
          splitLine: {
            show: false,
          },
        },
        legend: {
          data: ["黑龙江",'吉林','辽宁'],
          textStyle: {
            // 图例文字的样式
            color: "#FFF", // 图例文字颜色
            fontSize: 36, // 图例文字大小
          },
          right:'2%'
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "黑龙江",
            data: [200,300,150,260,500],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },
          {
            name: "吉林",
            data: [50, 100, 150, 200,300],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },
          {
            name: "辽宁",
            data: [50, 100, 150, 260,500],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },

        ],
      };
      con_one_a_b_c_1.setOption(con_one_a_b_c_1_option);
    },
    initChartslefttfour() {
      let con_one_a_b_c_1_o = getEchartInstance("con_one_a_b_c_1_o");
      const con_one_a_b_c_1_o_option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          data: ['江河/湖泊/水库', '航道', '船舶/船舶检验','水运设施','水运企业/运力'],
          axisLabel: {
            interval: 0,
            inside: false, // 本来是true，改为false后将图形中的字移到图形外边
            color: "#FFF", // 修改坐标轴字体颜色
            fontSize: 36, // 调整坐标轴字体大小
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "数量（个）",
          nameTextStyle: {
            padding: [10, 10, 5, 60],
            fontSize: 36, // 调整坐标轴字体大小
            color: "#FFF",
          },
          axisLabel: {
            color: "#FFF", // 修改坐标轴字体颜色
            fontSize: 36, // 调整坐标轴字体大小
          },
          splitLine: {
            show: false,
          },
        },
        legend: {
          data: ["黑龙江",'吉林','辽宁'],
          textStyle: {
            // 图例文字的样式
            color: "#FFF", // 图例文字颜色
            fontSize: 36, // 图例文字大小
          },
          right:'2%'
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "黑龙江",
            data: [50, 100, 150, 200,300,150,260,500],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },
          {
            name: "吉林",
            data: [50, 100, 150, 200,300,150,260,500],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },
          {
            name: "辽宁",
            data: [50, 100, 150, 200,300,150,260,500],
            type: "bar",
            barWidth:25,
            barGap:'1',
          },

        ],
      };
      con_one_a_b_c_1_o.setOption(con_one_a_b_c_1_o_option);
    }
  }
}
</script>
<style>
.bgbox {
  width: 100%;
  height: 3420px;
  background: url('./assets/jtzl.png') no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  color: #fff;
}
.con {
  padding-top: 150px;
  display: flex;
}
.con_one {
  width: 33.33%;
  padding: 0 100px;
}
.con_one_a {
  height: 117px;    
  font-size: 64px;
  font-family: Alimama ShuHeiTi;
  text-align: left;
  padding-left: 10%;
  padding-top: 2%;
  font-weight: bold;
  color: #FFFFFF;
  background: url('./assets/2284.png') no-repeat;
  background-size: 100% 100%;
  /* background-attachment: fixed; */
}
.con_one_a_a {
  width: 1712px;
  height: 1000px;
  padding-left: 4%;
  position: relative;
  margin-bottom: 8%;
}
.con_one_a_a_vb {
  width: 1712px;
  height: 900px;
  padding-left: 4%;
  position: relative;
  margin-bottom: 5%;
}
#con_one_a_b{
  width: 100%;
  height: 100%;
}
.con_one_a_k {
  display: flex;
  height: 90px;
  margin-bottom: 6%;
  margin-top: 6%;
  padding-left: 2%;
}
.tzqk {
  /* width: 345px;
  height: 89px; */
  /* background: url('./assets/tzqk.png') no-repeat;
  background-size: 100% 100%; */
  width: 345px;
  font-size: 42px;
  line-height: 90px;
  background: linear-gradient(270deg, rgba(54, 111, 172, 0) 0%, rgba(54, 111, 172, 0.88) 53%, rgba(54, 111, 172, 0) 100%);
}
.con_one_a_b_a {
  position: absolute;
  top: 960px;
  left: 80px;
  width: 1712px;
  height: 124px;
  background: url('./assets/kjk.png') no-repeat;
  background-size: 100% 100%;
  align-items: center;
}
.con_one_a_b_a_i {
  position: absolute;
  top: 860px;
  left: 80px;
  width: 1712px;
  height: 124px;
  background: url('./assets/kjk.png') no-repeat;
  background-size: 100% 100%;
  align-items: center;
}
.con_one_a_b_a_p {
  width: 0%;
  font-size: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.con_one_1 {
  height: 90px;
  display: flex;
  margin-bottom: 6%;
  margin-top: 6%;
}
.con_one_1_2 {
  height: 90px;
  display: flex;
  margin-bottom: 6%;
  margin-top: 15%;
}
.con_one_1_2_3 {
  height: 90px;
  display: flex;
  margin-bottom: 6%;
  margin-top: 6%;
}
.con_one_2 {
  display: flex;
  margin-left: 98px;
  font-size: 40px;
  line-height: 90px;
}
.con_one_3 {
  width: 171px;
  height: 48px;
}
.con_one_4 {
  width: 163px;
  height: 48px;
  margin-left: 44px;
}
.con_one_6 {
  height: 48px;
  width: 245px;
  margin-left: 44px;
}
.con_one_a_a_vb_o {
  display: flex;
  justify-content: space-between;
}
.con_one_a_a_vb_o1 {
  position: relative;
  width: 246px;
  height: 246px;
  background: url('./assets/j1.png') no-repeat;
  background-size: 100% 100%;
}
.con_one_a_a_vb_o2 {
  position: relative;

  width: 246px;
  height: 246px;
  background: url('./assets/j2.png') no-repeat;
  background-size: 100% 100%;
}
.con_one_a_a_vb_o3 {
  position: relative;

  width: 246px;
  height: 246px;
  background: url('./assets/j3.png') no-repeat;
  background-size: 100% 100%;
}
.con_one_a_a_vb_o4 {
  position: relative;

  width: 246px;
  height: 246px;
  background: url('./assets/j4.png') no-repeat;
  background-size: 100% 100%;
}
.con_one_a_a_vb_o5 {
  position: relative;

  width: 246px;
  height: 246px;
  background: url('./assets/j5.png') no-repeat;
  background-size: 100% 100%;
}
.con_one_a_a_vb_o6 {
  position: relative;

  width: 246px;
  height: 246px;
  background: url('./assets/j6.png') no-repeat;
  background-size: 100% 100%;
}
.con_text_a {
  position: absolute;
  bottom: -70px;
  left: 8%;
  font-size: 44px;
  margin: 0 auto;
}
.con_one_a_nm {
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 82px;
}
.con_one_a_nm_1 {
  width: 558px;
  height: 782px;
  background: url('./assets/12x.png') no-repeat;
  background-size: 100% 100%;
}
.con_one_a_nm_12 {
  width: 504px;
  padding: 260px 27px 258px 27px;
  font-family: Source Han Sans;
  font-size: 36px;
  font-weight: normal;
  line-height: 66px;
  letter-spacing: 0em;
  text-align: left;
}
.con_one_a_nm_12_9 {
  width: 501px;
  height: 462px;
  padding: 260px 27px 258px 27px;
  font-family: Source Han Sans;
  font-size: 36px;
  font-weight: normal;
  text-align: left;
  overflow: hidden;
}
.con_one_a_nm_2 {
  width: 558px;
  height: 782px;
  background: url('./assets/13x.png') no-repeat;
  background-size: 100% 100%;
}
.con_one_a_nm_3 {
  width: 558px;
  height: 782px;
  background: url('./assets/14x.png') no-repeat;
  background-size: 100% 100%;
}
.con_one_a_ns {
  position: relative;
  width: 1754px;
  height: 468px;
  background: url('./assets/jjxx.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 48px;
}
.con_one_a_ns_o {
  width: 385px;
  height: 48px;
  background: url('./assets/sfs.png') no-repeat;
  background-size: 100% 100%;
  margin-left: 40%;
  margin-right: 24%;
}
.con_one_a_ns_o_o {
  width: 385px;
  height: 48px;
  background: url('./assets/jlkm.png') no-repeat;
  background-size: 100% 100%;
  margin-left: 40%;
  margin-right: 24%;
}
.con_one_a_ns_o_o_0 {
  width: 385px;
  height: 48px;
  background: url('./assets/5sd.png') no-repeat;
  background-size: 100% 100%;
  margin-left: 40%;
  margin-right: 24%;
}
.con_one_a_ns_o_g {
  position: absolute;
  top: 0;
  right:20px;
  font-size: 36px;
  width: 173px;
  height: 68px;
  display: inline-block;
}
.con_one_a_ns_o_g1 {
  width: 1674px;
height: 294px;
margin: 32px 40px 35px 40px;
}
.con_one_a_ns_o_g1_p {
  font-size: 40px;
}
.con_one_a_ns_o_g1_p1 {
  font-family: Source Han Sans;
  font-size: 36px;
  font-weight: normal;
  line-height: 68px;
  color: #84ACE8;
  height: 202px;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.titlk {
  display: flex;
  justify-content: space-between;
  height: 66px;
  line-height: 66px;
  font-size: 42px;
  font-weight: 500;
  padding-top: 78px;
  align-items: center;
}
.titlk_1{
  /* width: 50%; */
  padding-left: 248px;
  line-height: 66px;
  text-align: left;
}
.titlk_1_2{
  display: inline-block;
  width: 110px;
  height: 66px;
  background: url('./assets/lj1.png') no-repeat;
  background-size: 100% 100%;
}
.titlk_2 {
  /* width: 50%; */
  height: 66px;
  padding-right: 120px;
}
.titlk_2_2 {
  width: 110px;
  height: 66px;
  background: url('./assets/路径@1x.png') no-repeat;
  background-size: 100% 100%;
}
</style>