<template> <div class="nu"> <div class="main"> <Breadcrumb :breadData="breadData"></Breadcrumb> <div class="nu-tabs mt20"> <el-row class="uls" :gutter="10"> <el-col class="lis" :xs="24" :sm="24" :md="8" :lg="8" v-for="(item, index) in nu_tabs" :key="index" :class="[ { 'is-active': isActive == index }, { 'nu-disabled': index != 0 }, ]" > <div> <p v-if="index == 0">{{ item.name }}</p> <el-tooltip v-else class="item" effect="effect" content="建设中..." popper-class="sy-tooltip" placement="top" :visible-arrow="false" > <p>{{ item.name }}</p> </el-tooltip> </div> </el-col> </el-row> </div> <div class="urbanization-level unify-item"> <h3 class="module-tit">县城镇化水平</h3> <div class="ul-con"> <div class="ul-text"> <h4>县常住人口城镇化率</h4> <div> 2020年 <p style="color: #21c259"><span>61.82</span>%</p> </div> <div> 2021年目标 <p style="color: #000"><span>63</span>%</p> </div> </div> <div class="ul-img"> <!-- <div id="map" style="max-width: '100%'; height: 300px"></div> --> <img src="../assets/images/sy_map.png" alt="" width="200" /> </div> <div class="ul-table"> <el-table :data="ul_table" style="width: 100%; color: #333; font-size: 16px" size="mini" :row-class-name="tableRowClassName" > <el-table-column prop="rank" label="排名" width="100" align="center" > </el-table-column> <el-table-column prop="area" label="地区" width="100" align="center" > </el-table-column> <el-table-column prop="percentage" width="110" label="城镇化率" align="center" > </el-table-column> </el-table> </div> </div> </div> <el-row :gutter="20"> <el-col :xs="24" :sm="12" :md="12" :lg="12"> <div class="old-community unify-item"> <h3 class="module-tit">老旧小区改造</h3> <div class="oc-text"> <h4>全县老旧小区改造</h4> <div> <div> 2021年目标值 <span style="color: #333"><i>6</i>个</span> </div> </div> </div> <div id="bar_1" style="width: 100%; height: 320px"></div> </div> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12"> <div class="unify-item"> <h3 class="module-tit">未来社区建设</h3> <div class="oc-text"> <h4>未来社区建设</h4> <div> <div> 截至2021年第一季度 <span style="color: #21c259"><i>3.9</i>亿元</span> </div> <div> 2021年目标值 <span style="color: #333"><i>5</i>亿元</span> </div> </div> </div> <div id="line_1" style="width: 100%; height: 320px"></div> </div> </el-col> </el-row> <el-row :gutter="20"> <el-col :xs="24" :sm="12" :md="12" :lg="12"> <div class="task-practicable unify-item"> <h3 class="module-tit">年度任务落实情况</h3> <div class="tp-con"> <div id="circle_1" style="width: 315px; height: 200px; margin: 20px 0"></div> <div class="tp-text"> <p>总任务<span>12</span>项</p> <ul> <li v-for="(item, index) in task_completion_info" :key="index" > <div> <i :style="{ backgroundColor: item.bgc }"></i> {{ item.name }} </div> <span>{{ item.proportion }}</span> <span style="font-size: 18px; color: #333" >{{ item.value }}项</span > </li> </ul> </div> </div> <div class="tp-table"> <el-table :data="tp_table" style="width: 100%; color: #333; font-size: 16px" :header-cell-style="{ 'text-align': 'center' }" > <el-table-column prop="task_name" label="任务名" width="160" fixed > </el-table-column> <el-table-column prop="percentage" label="进度" width="75"> <template slot-scope="scope"> <span :style="{ color: scope.row.status === '完成' ? '#16BE50' : scope.row.status === '正常' ? '#1492ff' : '#D40000', fontWeight: '600', }" > {{ scope.row.percentage }}</span > </template> </el-table-column> <el-table-column prop="status_img" width="80" label="状态"> <template slot-scope="scope"> <img :src="scope.row.status_img" width="56" height="22" /> </template> </el-table-column> </el-table> </div> </div> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12"> <div class="unify-item characteristic-town"> <h3 class="module-tit">特色小镇数量</h3> <div class="tp-con"> <div id="circle_2" style="width: 48%; height: 160px; margin: 20px 0" ></div> <div class="tp-text"> <p>总数<span>14</span>个</p> <ul> <li v-for="(item, index) in ct_info" :key="index"> <div> <i :style="{ backgroundColor: item.bgc }"></i> {{ item.name }} </div> <span>{{ item.proportion }}</span> <span style="font-size: 18px; color: #333" >{{ item.value }}项</span > </li> </ul> </div> </div> <div id="bar_2" style="width: 100%; height: 280px"></div> </div> </el-col> </el-row> <div class="app-scen unify-item"> <h3 class="module-tit">应用场景</h3> <p class="as-tabs">丽水综合执法置能化提升</p> <div class="as-con"> <div class="current-task"> <h4>当前任务</h4> <div class="tp-con"> <div id="circle_3" style="width: 315px; height: 200px; margin: 20px 0" ></div> <div class="tp-text"> <p>总任务<span>12</span>项</p> <ul> <li v-for="(item, index) in as_info" :key="index"> <div> <i :style="{ backgroundColor: item.bgc }"></i> {{ item.name }} </div> <span>{{ item.proportion }}</span> <span style="font-size: 18px; color: #333" >{{ item.value }}项</span > </li> </ul> </div> </div> </div> <div class="current-task"> <h4>近一年执法完成情况</h4> <div id="bar_3" style="width: 100%; height: 280px"></div> </div> </div> </div> </div> </div> </template> <script> import geoJson from "@/assets/json/yunhe.json"; let one, two, three, four, five, six, seven; import Breadcrumb from "../components/Breadcrumb.vue"; export default { components: { Breadcrumb }, data() { return { breadData: { page_name: "新型城镇化", annual_target: "暂无数据", leading: "县发展和改革局", }, isActive: 0, nu_tabs: [ { name: "总体情况", }, { name: "促进中心城市、县城和小城镇协调发展", }, { name: "总打造海绵城市、韧性城市", }, { name: "加快城市有机更新", }, { name: "中心城市能级提升", }, ], ul_table: [ { rank: 1, area: "莲都区", percentage: "76.43%", }, { rank: 2, area: "云和县", percentage: "73.1%", }, { rank: 3, area: "龙泉市", percentage: "66.53%", }, { rank: 4, area: "庆元县", percentage: "63.5%", }, { rank: 5, area: "景宁县", percentage: "58.21%", }, { rank: 6, area: "缙云县", percentage: "56.82%", }, { rank: 7, area: "遂昌县", percentage: "55.03%", }, { rank: 8, area: "青田县", percentage: "53.1%", }, { rank: 9, area: "松阳县", percentage: "47.71%", }, ], task_completion_info: [ { value: 3, name: "正常", proportion: "25%", bgc: "#1492ff", }, { value: 6, name: "完成", proportion: "50%", bgc: "#55D081", }, { value: 3, name: "滞后", proportion: "25%", bgc: "#E70101", }, ], tp_table: [ { task_name: "开工老旧小区改造项目20个", percentage: "15%", status: "正常", status_img: require("../assets/images/normal.jpg"), }, { task_name: "开展省级“街容示范街”建设", percentage: "0%", status: "滞后", status_img: require("../assets/images/lag.png"), }, { task_name: "“丽水山居图”重要节点项目10个", percentage: "60%", status: "正常", status_img: require("../assets/images/normal.jpg"), }, { task_name: "兼顾人防工程总量突破800万平方米", percentage: "100%", status: "完成", status_img: require("../assets/images/finish.jpg"), }, ], ct_info: [ { value: 1, name: "命名", proportion: "7.14%", bgc: "#1492ff", }, { value: 10, name: "创建", proportion: "71.43%", bgc: "#15BF51", }, { value: 3, name: "培育", proportion: "21.43%", bgc: "#64779C", }, ], as_info: [ { value: 3, name: "紧急", proportion: "25%", bgc: "#1492ff", }, { value: 6, name: "重要", proportion: "50%", bgc: "#55D081", }, { value: 3, name: "一般", proportion: "25%", bgc: "#E70101", }, ], }; }, mounted() { // this.init_map(); this.init_bar_1(); this.init_line_1(); this.init_circle_1(); this.init_circle_2(); this.init_bar_2(); this.init_circle_3(); this.init_bar_3(); window.addEventListener("resize", function (e) { window.parent.postMessage(document.body.scrollHeight, '*'); }); }, methods: { tableRowClassName({ row }) { if (row.area == "青田县") { return "table-target"; } else { return ""; } }, init_map() { var that = this; that.$echarts.registerMap("yunhe", geoJson); var myChart2 = that.$echarts.init(document.getElementById("map")); var option = { series: [ { type: "map", map: "yunhe", aspectScale: 1, //地图长度比 label: { show: true, }, itemStyle: { borderColor: "#1492ff", areaColor: "#edf4ff", }, }, ], goe: { regions: { label: { show: true, }, }, }, }; myChart2.setOption(option); }, init_bar_1() { if (one != null && one != "" && one != undefined) { one.dispose(); //销毁 } one = this.$echarts.init(document.getElementById("bar_1")); one.setOption({ tooltip: { show: true, // 是否显示提示框,默认为true trigger: "item", // 数据项图形触发 axisPointer: { // 指示样式 type: "shadow", axis: "auto", }, padding: 5, textStyle: { // 提示框内容的样式 color: "#666", }, }, legend: { x: "center", y: "bottom", textStyle: { fontSize: 14, }, data: ["已开工", "2021年目标"], }, // - // ------ X轴 ------ xAxis: { type: "category", axisLine: { lineStyle: { color: "#666", }, }, axisLabel: { rotate: 30, interval: 0, formatter: function (params) { var val = ""; if (params.length > 4) { val = params.substr(0, 4) + "..."; return val; } else { return params; } }, }, show: true, // 是否显示 position: "bottom", // x轴的位置 offset: 0, // x轴相对于默认位置的偏移 nameLocation: "end", // 轴名称相对位置 nameTextStyle: { // 坐标轴名称样式 color: "#999", fontSize: 12, }, data: [ "市本级", "莲都区", "青田县", "缙云县", "庆元县", "松阳县", "遂昌县", "云和县", "景宁县", "龙泉市", ], }, // ------ y轴 ---------- yAxis: { name: "%", // 轴名称 show: true, // 是否显示 position: "left", // y轴位置 offset: 0, // y轴相对于默认位置的偏移 type: "value", // 轴类型,默认为 ‘category’ nameTextStyle: { // 坐标轴名称样式 color: "#333", padding: [5, 0, 0, 5], // 坐标轴名称相对位置 }, nameGap: 15, // 坐标轴名称与轴线之间的距离 splitArea: { // 网格区域 show: false, // 是否显示,默认为false }, }, // ------- 内容数据 ------- series: [ { name: "2021年目标", // 序列名称 type: "bar", // 类型 barGap: "-100%", legendHoverLink: true, // 是否启用图列 hover 时的联动高亮 label: { // 图形上的文本标签 show: false, position: "insideTop", // 相对位置 rotate: 0, // 旋转角度 color: "#999", }, itemStyle: { // 图形的形状 normal: { color: "#D9D9DA", label: { show: true, position: "top", textStyle: { color: "#333", fontSize: 14, }, }, }, }, barWidth: 20, // 柱形的宽度 barCategoryGap: "10%", // 柱形的间距 data: [0, 3, 5, 1, 0, 0, 5, 6, 0, 0], }, { name: "已开工", // 序列名称 type: "bar", // 类型 legendHoverLink: true, // 是否启用图列 hover 时的联动高亮 label: { // 图形上的文本标签 show: false, position: "insideTop", // 相对位置 rotate: 0, // 旋转角度 color: "#999", }, itemStyle: { // 图形的形状 normal: { color: "#1492ff", label: { show: true, position: "top", textStyle: { color: "#333", fontSize: 14, }, }, }, }, barWidth: 20, // 柱形的宽度 barCategoryGap: "10%", // 柱形的间距 data: [0, 2, 0, 0, 0, 0, 1, 0, 0, 0], }, ], grid: { top: "15%", left: "1%", right: "1%", bottom: "10%", containLabel: true, }, }); window.addEventListener("resize", () => { one.resize(); }); }, init_line_1() { if (two != null && two != "" && two != undefined) { two.dispose(); //销毁 } two = this.$echarts.init(document.getElementById("line_1")); two.setOption({ legend: { orient: "horizontal", x: "center", y: "bottom", data: ["累计投资同比增长率"], textStyle: { fontSize: 14, }, }, tooltip: { trigger: "axis", }, xAxis: { type: "category", axisLine: { lineStyle: { color: "#333", fontSize: 14, }, }, data: ["1月", "2月", "3月", "4月", "5月"], }, yAxis: { type: "value", name: "%", }, series: [ { name: "累计投资同比增长率", data: [0.5, 0.6, 0.8, 0.9, 1.1], type: "line", }, ], color: ["#1492ff"], grid: { top: "15%", left: "1%", right: "1%", bottom: "15%", containLabel: true, }, }); window.addEventListener("resize", () => { two.resize(); }); }, init_circle_1() { if (three != null && three != "" && three != undefined) { three.dispose(); //销毁 } three = this.$echarts.init(document.getElementById("circle_1")); three.setOption({ tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)", }, color: ["#1492ff", "#55D081", "#E70101"], series: [ { name: "任务落实情况", type: "pie", radius: ["50%", "80%"], // 半径 center: ["50%", "45%"], // 位置 label: { normal: { show: true, position: "outer", formatter: "{b}\n{d}%", textStyle: { fontSize: 14, }, }, }, data: this.task_completion_info, itemStyle: { borderWidth: 5, borderColor: "#fff", }, }, ], grid: { top: "20%", left: "1%", right: "1%", bottom: "5%", containLabel: false, }, }); window.addEventListener("resize", () => { three.resize(); }); }, init_circle_2() { if (four != null && four != "" && four != undefined) { four.dispose(); //销毁 } four = this.$echarts.init(document.getElementById("circle_2")); four.setOption({ tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)", }, color: ["#1492ff", "#15BF51", "#64779C"], series: [ { name: "特色小镇数量", type: "pie", radius: ["50%", "90%"], // 半径 center: ["50%", "50%"], // 位置 label: { normal: { show: true, position: "inner", formatter: "{c}", textStyle: { fontSize: 14, }, }, }, data: this.ct_info, itemStyle: { borderWidth: 1, borderColor: "#fff", }, }, ], }); window.addEventListener("resize", () => { four.resize(); }); }, init_bar_2() { if (five != null && five != "" && five != undefined) { five.dispose(); //销毁 } five = this.$echarts.init(document.getElementById("bar_2")); five.setOption({ title: { text: "各区县2021年投资完成情况", textStyle: { fontSize: 16, color: "#666", }, padding: 5, }, tooltip: { show: true, // 是否显示提示框,默认为true trigger: "item", // 数据项图形触发 axisPointer: { // 指示样式 type: "shadow", axis: "auto", }, padding: 5, textStyle: { // 提示框内容的样式 color: "#666", }, }, grid: { top: "25%", left: "1%", right: "1%", bottom: "3%", containLabel: true, }, // ---- gird区域 --- // ------ X轴 ------ xAxis: { type: "category", axisLine: { lineStyle: { color: "#666", }, }, axisLabel: { rotate: 30, interval: 0, formatter: function (params) { var val = ""; if (params.length > 4) { val = params.substr(0, 4) + "..."; return val; } else { return params; } }, }, show: true, // 是否显示 position: "bottom", // x轴的位置 offset: 0, // x轴相对于默认位置的偏移 nameLocation: "end", // 轴名称相对位置 nameTextStyle: { // 坐标轴名称样式 color: "#999", fontSize: 14, }, data: [ "市本级", "莲都", "龙泉", "青田", "松阳", "庆元", "缙云", "遂昌", "云和", "景宁", ], }, // ------ y轴 ---------- yAxis: { show: true, // 是否显示 name: "单位/亿元", // 轴名称 position: "left", // y轴位置 offset: 0, // y轴相对于默认位置的偏移 type: "value", // 轴类型,默认为 ‘category’ nameLocation: "end", // 轴名称相对位置value nameTextStyle: { // 坐标轴名称样式 color: "#666", padding: [5, 0, 0, 5], // 坐标轴名称相对位置 fontSize: 14, }, splitArea: { // 网格区域 show: false, // 是否显示,默认为false }, }, // ------- 内容数据 ------- series: [ { name: "完成情况", // 序列名称 type: "bar", // 类型 legendHoverLink: true, // 是否启用图列 hover 时的联动高亮 label: { // 图形上的文本标签 show: false, position: "insideTop", // 相对位置 rotate: 0, // 旋转角度 color: "#999", }, itemStyle: { // 图形的形状 color: "#48A1FF", }, barWidth: 15, // 柱形的宽度 barCategoryGap: "10%", // 柱形的间距 data: [0.63, 0.6, 2.62, 2.6, 1.58, 1.35, 2.78, 0.5, 1.6, 1.4], }, ], }); window.addEventListener("resize", () => { five.resize(); }); }, init_circle_3() { if (six != null && six != "" && six != undefined) { six.dispose(); //销毁 } six = this.$echarts.init(document.getElementById("circle_3")); six.setOption({ tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)", }, color: ["#1492ff", "#55D081", "#E70101"], series: [ { name: "当前任务", type: "pie", radius: ["50%", "80%"], // 半径 center: ["50%", "45%"], // 位置 label: { normal: { show: true, position: "outside", formatter: "{b}\n{d}%", textStyle: { fontSize: 14, }, }, }, data: this.as_info, itemStyle: { borderWidth: 5, borderColor: "#fff", }, }, ], grid: { top: "20%", left: "1%", right: "1%", bottom: "5%", containLabel: false, }, }); window.addEventListener("resize", () => { six.resize(); }); }, init_bar_3() { if (seven != null && seven != "" && seven != undefined) { seven.dispose(); //销毁 } seven = this.$echarts.init(document.getElementById("bar_3")); seven.setOption({ tooltip: { show: true, // 是否显示提示框,默认为true trigger: "item", // 数据项图形触发 axisPointer: { // 指示样式 type: "shadow", axis: "auto", }, padding: 5, textStyle: { // 提示框内容的样式 color: "#666", }, }, grid: { top: "20%", left: "1%", right: "1%", bottom: "3%", containLabel: true, }, // ---- gird区域 --- // ------ X轴 ------ xAxis: { type: "category", axisLine: { lineStyle: { color: "#666", }, }, axisLabel: { rotate: 30, interval: 0, }, show: true, // 是否显示 position: "bottom", // x轴的位置 offset: 0, // x轴相对于默认位置的偏移 nameLocation: "end", // 轴名称相对位置 nameTextStyle: { // 坐标轴名称样式 color: "#999", fontSize: 14, }, data: [ "202008", "202009", "202010", "202011", "202012", "202101", "202102", "202103", "202104", "202105", "202106", ], }, // ------ y轴 ---------- yAxis: { show: true, // 是否显示 name: "单位:项", // 轴名称 position: "left", // y轴位置 offset: 0, // y轴相对于默认位置的偏移 type: "value", // 轴类型,默认为 ‘category’ nameLocation: "end", // 轴名称相对位置value nameTextStyle: { // 坐标轴名称样式 color: "#666", padding: [5, 0, 0, 5], // 坐标轴名称相对位置 fontSize: 14, }, splitArea: { // 网格区域 show: false, // 是否显示,默认为false }, }, // ------- 内容数据 ------- series: [ { name: "执法完成情况", // 序列名称 type: "bar", // 类型 legendHoverLink: true, // 是否启用图列 hover 时的联动高亮 label: { // 图形上的文本标签 show: false, position: "insideTop", // 相对位置 rotate: 0, // 旋转角度 color: "#999", }, itemStyle: { // 图形的形状 color: "#48A1FF", }, barWidth: 15, // 柱形的宽度 barCategoryGap: "10%", // 柱形的间距 data: [18, 11, 7, 11, 5, 9, 6, 11, 3, 11, 11], }, ], }); window.addEventListener("resize", () => { seven.resize(); }); }, }, }; </script> <style lang="scss" scoped> @media screen and(min-width:1200px) { #app { width: 1200px; background: #efefef !important; } .main { width: 1200px !important; } } @media screen and(max-width:1200px) { .main { width: calc(100% - 20px); } } .main { margin: 0px auto; padding: 20px 0px 1px; } h3 { border-bottom: 1px solid #ddd; } .oc-text { width: 90%; margin: 0 auto; padding: 20px 20px 8px; box-sizing: border-box; border: 1px solid #ddd; margin-top: 20px; h4 { font-size: 18px; font-weight: 600; margin-bottom: 12px; } i { font-style: normal; font-size: 20px; } & > div { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 20px 0; color: #666; } } .tp-con { display: flex; flex-direction: column; // justify-content: space-between; align-items: center; margin: 20px 0 12px; width: 100%; .tp-text { width: 100%; color: #666; p { font-size: 18px; margin-bottom: 20px; text-align: center; span { color: #333; font-size: 20px; margin: 0 8px; } } ul { display: flex; flex-direction: column; align-items: center; li { width: 60%; margin: 12px 0; display: flex; justify-content: space-between; align-items: center; div { i { display: inline-block; width: 10px; height: 10px; } } } } } } .nu-tabs { background-color: #fff; border-radius: 4px; .uls { padding: 12px 20px 0; margin-bottom: 20px; font-size: 18px; .lis { // min-width: 150px; margin-bottom: 12px; padding: 12px; margin-right: 12px; background-color: #f1f1f1; text-align: center; border-radius: 4px; white-space: nowrap; cursor: pointer; } .is-active { color: #fff; background-color: #1492ff; } .nu-disabled { color: #999; } } } .urbanization-level { .ul-con { padding-top: 20px; .ul-text { padding: 20px 20px 0; border: 1px solid #ddd; height: 120px; overflow: auto; h4 { font-weight: 600; margin-bottom: 8px; font-size: 18px; } div { display: flex; align-items: center; color: #666; justify-content: space-between; margin: 12px 0; span { font-size: 20px; } } } .ul-img { img { width: 100%; height: auto; } } } } .task-practicable { .tp-table { margin-bottom: 20px; >>> .el-table__header { display: none; } } } .app-scen { .as-tabs { display: inline-block; padding: 12px 20px; color: #fff; background-color: #1492ff; border-radius: 4px; margin: 12px 0; cursor: pointer; } .as-con { h4 { font-size: 18px; font-weight: 600; } } } </style> <style> .ul-con .table-target { background-color: #a1defc; } </style>