<template> <div class="live"> <div class="main"> <Breadcrumb :breadData="breadData"></Breadcrumb> <el-row :gutter="20" class="mt20"> <el-col :xs="24" :sm="12" :md="12" :lg="12"> <div class="task"> <div class="task-census"> <div class="flex column acenter"> <i class="iconfont mb5 icon-huanzhuangtu1" style="color: #1492ff" ></i> 110项任务 </div> <div class="flex column acenter"> <i class="iconfont mb5 icon-zhengchang" style="color: #6495fa" ></i> 正常0项 </div> <div class="flex column acenter"> <i class="iconfont mb5 icon-jingshi" style="color: #ff8401"></i> 预警0项 </div> <div class="flex column acenter"> <i class="iconfont mb5 icon-zhihou" style="color: #e96c5c"></i> 滞后0项 </div> </div> <el-row class="task-desc" :gutter="0"> <el-col v-for="(item, index) in task_info" :key="index" :xs="24" :sm="24" :md="24" :lg="12" class="lis" > <p class="task-name"> <i class="iconfont icon-yuan" style="color: #1492ff; font-weight: 600; font-size: 18px" ></i >{{ item.task_name }} </p> <div class="quota-con"> <div class="quota-item" v-for="(qitem, qindex) in item.quota_info" :key="qindex" > <p class="quota-name">{{ qitem.quota_name }}</p> <p class="quota-value"> 目标值:<span>{{ qitem.target_value }}</span> 当前进度:{{ qitem.current_value }} </p> <div class="quota-progress"> 进度: <el-progress :percentage="50" :stroke-width="10" ></el-progress> </div> </div> </div> </el-col> </el-row> <!-- <ul class="task-desc"> <li v-for="(item, index) in task_info" :key="index"> <p class="task-name"> <i class="iconfont icon-yuan" style="color: #1492ff; font-weight: 600; font-size: 18px" ></i >{{ item.task_name }} </p> <div class="quota-con"> <div class="quota-item" v-for="(qitem, qindex) in item.quota_info" :key="qindex" > <p class="quota-name">{{ qitem.quota_name }}</p> <p class="quota-value"> 目标值:<span>{{ qitem.target_value }}</span> 当前进度:{{ qitem.current_value }} </p> <div class="quota-progress"> 进度: <el-progress :percentage="50" :stroke-width="10" ></el-progress> </div> </div> </div> </li> </ul> --> </div> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12"> <div class="xzzj unify-item"> <h4 class="module-tit">学在</h4> <el-row class="uls" :gutter="10"> <el-col class="lis" :xs="12" :sm="12" :md="8" :lg="8" v-for="(item, index) in xzzj_info" :key="index" > <div :class="[ { 'is-active': isActive == index }, { 'xz-disabled': index != 0 }, ]" > <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 id="bar_1" style="width: 100%; height: 300px"></div> </div> <div class="hlw unify-item"> <h4 class="module-tit">互联网+医疗健康</h4> <el-row class="uls" :gutter="10"> <el-col class="lis" :xs="12" :sm="12" :md="8" :lg="8" v-for="(item, index) in hlw_info" :key="index" > <div :class="[ { 'is-active': isActive == index }, { 'hlw-disabled': index != 0 }, ]" > <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 id="bar_2" style="width: 100%; height: 300px"></div> </div> </el-col> </el-row> </div> </div> </template> <script> let one, two; import Breadcrumb from "../components/Breadcrumb.vue"; export default { components: { Breadcrumb }, name: "live", data() { return { breadData: { page_name: "民生保障", annual_target: "暂无数据", leading: "县发展和改革局", }, task_info: [ { task_name: "幼有所育", quota_info: [ { quota_name: "每千人托位数", target_value: 2.5, current_value: "...", }, { quota_name: "3岁以下婴幼儿托育机构覆盖率", target_value: "35%", current_value: "...", }, ], }, { task_name: "学有所教", quota_info: [ { quota_name: "儿童青少年学生近视率下降数", target_value: "1%", current_value: "...", }, { quota_name: "一、二级幼儿园覆盖率", target_value: "70%", current_value: "...", }, ], }, { task_name: "劳有所得", quota_info: [ { quota_name: "退役军人专场招聘活动举办次数", target_value: 3, current_value: "...", }, { quota_name: "重点人群流感疫苗免费接种人数", target_value: 8000, current_value: "...", }, ], }, { task_name: "老有所得", quota_info: [ { quota_name: "每万老年人拥有持证养老护理员数", target_value: 17, current_value: "...", }, { quota_name: "护理型床位占养老机构床位比例", target_value: "54%", current_value: "...", }, ], }, { task_name: "弱有所扶", quota_info: [ { quota_name: "未成年人救助保护机构覆盖率", target_value: "30%", current_value: "...", }, { quota_name: "新建乡镇(街道)未成年人保护工作站数量", target_value: 2, current_value: "...", }, ], }, { task_name: "住有所居", quota_info: [ { quota_name: "新开工棚户区改造数", target_value: "...", current_value: "...", }, ], }, { task_name: "文有所化", quota_info: [ { quota_name: "县级台电视频道高清率", target_value: "75%", current_value: "...", }, ], }, ], xzzj_info: [ { name: "贯通学校数量", }, { name: "幼儿园入学人数", }, { name: "义务教育入学人数", }, { name: "证书证明办件量", }, { name: "资助学生人数", }, { name: "考试优待人数", }, ], isActive: 0, hlw_info: [ { name: "预约挂号", }, { name: "电子健康卡", }, { name: "检验报告查询", }, { name: "医学影像查询", }, { name: "电子健康档案", }, ], isActiveh: 0, }; }, mounted() { this.init_bar_1(); this.init_bar_2(); window.addEventListener("resize", function (e) { window.parent.postMessage(document.body.scrollHeight, '*'); }); }, methods: { xtab(i) { this.isActive = i; }, 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", }, }, 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: "#666", fontSize: 16, }, data: [ "高中", "初中", "小学", "公办幼儿园", "成人文化技术学校", "教师进修学校", "青田电大", ], }, yAxis: { show: true, // 是否显示 position: "left", // y轴位置 offset: 0, // y轴相对于默认位置的偏移 type: "value", // 轴类型,默认为 ‘category’ name: "库存量", // 轴名称 nameLocation: "end", // 轴名称相对位置value nameTextStyle: { // 坐标轴名称样式 color: "#fff", padding: [5, 0, 0, 5], // 坐标轴名称相对位置 }, nameGap: 15, // 坐标轴名称与轴线之间的距离 nameRotate: 270, // 坐标轴名字旋转 splitArea: { // 网格区域 show: false, // 是否显示,默认为false }, }, series: [ { name: "学校数量", // 序列名称 type: "bar", // 类型 legendHoverLink: true, // 是否启用图列 hover 时的联动高亮 label: { // 图形上的文本标签 show: false, position: "insideTop", // 相对位置 rotate: 0, // 旋转角度 color: "#999", }, itemStyle: { // 图形的形状 color: "#48A1FF", }, barWidth: 20, // 柱形的宽度 barCategoryGap: "10%", // 柱形的间距 data: [3, 5, 21, 3, 4, 1, 1], }, ], }); window.addEventListener("resize", () => { one.resize(); }); }, htab(i) { this.isActiveh = i; }, init_bar_2() { if (two != null && two != "" && two != undefined) { two.dispose(); //销毁 } two = this.$echarts.init(document.getElementById("bar_2")); two.setOption({ // ---- legend ---- // legend: { // type: "plain", // 图列类型,默认为 'plain' // top: "1%", // 图列相对容器的位置 top\bottom\left\right // left: "1%", // textStyle: { // // 图列内容样式 // color: "#333", // 字体颜色 // backgroundColor: "black", // 字体背景色 // }, // data: [ // // 图列内容 // { // name: "库存量", // icon: "circle", // textStyle: { // color: "#333", // 单独设置某一个图列的颜色 // backgroundColor: "transparent", // 单独设置某一个图列的字体背景色 // }, // }, // ], // }, // --- 提示框 ---- tooltip: { show: true, // 是否显示提示框,默认为true trigger: "item", // 数据项图形触发 axisPointer: { // 指示样式 type: "shadow", axis: "auto", }, padding: 5, textStyle: { // 提示框内容的样式 color: "#666", }, }, // ---- 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, // 是否显示 position: "left", // y轴位置 offset: 0, // y轴相对于默认位置的偏移 type: "value", // 轴类型,默认为 ‘category’ name: "库存量", // 轴名称 nameLocation: "end", // 轴名称相对位置value nameTextStyle: { // 坐标轴名称样式 color: "#fff", padding: [5, 0, 0, 5], // 坐标轴名称相对位置 }, nameGap: 15, // 坐标轴名称与轴线之间的距离 nameRotate: 270, // 坐标轴名字旋转 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: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78], }, ], }); window.addEventListener("resize", () => { two.resize(); }); }, }, }; </script> <style lang="scss" scoped> @media screen and(min-width:1200px) { #app { width: 1200px; background: #efefef !important; } .main { width: 1200px !important; } } .main { width: calc(100% - 20px); margin: 0px auto; padding: 20px 0px 0px; } .task { .task-census { border-radius: 4px; width: 100%; display: flex; box-sizing: border-box; padding: 12px 20px; justify-content: space-around; background-color: #fff; } .task-desc { margin-top: 20px; .lis { border-radius: 4px; background-color: #fff; margin-bottom: 20px; padding: 12px; .task-name { font-size: 20px; color: #333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .quota-item { margin: 12px 0; color: #333; .quota-name { font-size: 18px; font-weight: 600; } .quota-value { color: #666; margin: 8px 0; span { color: #1492ff; font-weight: 600; margin-right: 20px; } } .quota-progress { color: #333; display: flex; align-items: center; width: 100%; } } } } } .xzzj { .uls { margin: 15px 0 0; .lis { line-height: 45px; text-align: center; margin: 0 0 20px 0; cursor: pointer; color: #333; } .xz-disabled { color: #999; background: #ddd; } .is-active { background-color: #1492ff; color: #fff; } } } .hlw { .uls { margin: 12px 0 0; .lis { line-height: 45px; text-align: center; margin: 0 0 20px 0; cursor: pointer; color: #333; } .hlw-disabled { color: #999; background-color: #ddd; } .is-active { background-color: #1492ff; color: #fff; } } } .mb5 { margin-bottom: 5px; } </style> <style> /* @media only screen and (max-width: 767px) { .el-col-xs-12 { width: 49% !important; } } */ .el-progress { width: 80% !important; } .el-progress__text { color: #1492ff; } </style>