|
|
<!--
|
|
|
* @Author: lough
|
|
|
* @Date: 2021-12-17 10:07:07
|
|
|
* @LastEditors: lough
|
|
|
* @LastEditTime: 2022-11-15 14:16:58
|
|
|
* @Description:
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
<div class="module-container">
|
|
|
<div class="section-proportion">
|
|
|
<span class="proportion-title">本级上级网评指令比例（月）</span>
|
|
|
<div>
|
|
|
<!-- 圆柱 -->
|
|
|
<div id="cylinder" />
|
|
|
<img
|
|
|
src="@/assets/privateOrder/positiveEnergy/底座3.png"
|
|
|
alt=""
|
|
|
class="cylinderBottom"
|
|
|
/>
|
|
|
<div class="proportion-ratio">
|
|
|
<div class="proportion-ratio-bl">
|
|
|
<img
|
|
|
src="@/assets/privateOrder/positiveEnergy/本级网评指令比例.png"
|
|
|
alt=""
|
|
|
/>
|
|
|
<span>本级网评指令比例 </span>
|
|
|
<span style="margin-left: 20px; color: #71e8fb">
|
|
|
{{ sjNum }}%
|
|
|
</span>
|
|
|
<div class="progress">
|
|
|
<div
|
|
|
:style="{
|
|
|
backgroundColor: '#71e8fb',
|
|
|
height: 9,
|
|
|
width: sjNum + '%',
|
|
|
}"
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="proportion-ratio-bl">
|
|
|
<img
|
|
|
src="@/assets/privateOrder/positiveEnergy/上级网评指令比例.png"
|
|
|
alt=""
|
|
|
/>
|
|
|
<span>上级网评指令比例</span>
|
|
|
<span style="margin-left: 20px; color: #79ffd0">
|
|
|
{{ bjNum }}%
|
|
|
</span>
|
|
|
<div class="progress">
|
|
|
<div
|
|
|
:style="{
|
|
|
backgroundColor: '#79ffd0',
|
|
|
height: 9,
|
|
|
width: bjNum + '%',
|
|
|
}"
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="setion-percentage">
|
|
|
<span class="percentage-title">网评员任务完成率</span>
|
|
|
<div id="bar" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getComplete } from "@/api/common";
|
|
|
import {
|
|
|
networkAppraisercomplete,
|
|
|
networkAppraiser,
|
|
|
} from "@/api/zongzhi/st.js";
|
|
|
export default {
|
|
|
components: {},
|
|
|
filters: {
|
|
|
numFilter(value) {
|
|
|
const realVal = Number(value).toFixed(2);
|
|
|
return Number(realVal);
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
sjNum: 0,
|
|
|
bjNum: 0,
|
|
|
percentageList: null,
|
|
|
percentageName: [],
|
|
|
percentageValue: [],
|
|
|
sjdata: null,
|
|
|
bjdata: null,
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
created() {
|
|
|
const tableObject = require("./data.json");
|
|
|
this.tableData = tableObject["网评文章录用情况"];
|
|
|
},
|
|
|
destroyed() {},
|
|
|
mounted() {
|
|
|
this.getpercentageData();
|
|
|
this.getNetworkAppraiser();
|
|
|
// this.sjdata = Math.round(this.sjNum)
|
|
|
// this.bjdata = Math.round(this.bjNum)
|
|
|
// this.inItCylinder()
|
|
|
},
|
|
|
methods: {
|
|
|
getNetworkAppraiser() {
|
|
|
networkAppraiser().then((res) => {
|
|
|
this.sjNum = res.data[0].pt;
|
|
|
this.bjNum = res.data[1].pt;
|
|
|
this.sjdata = Math.round(this.bjNum);
|
|
|
this.bjdata = Math.round(this.sjNum);
|
|
|
this.inItCylinder();
|
|
|
});
|
|
|
},
|
|
|
// 获取任务完成率data
|
|
|
getpercentageData() {
|
|
|
networkAppraisercomplete().then((res) => {
|
|
|
res.data.forEach((item) => {
|
|
|
this.percentageName.push(item.name);
|
|
|
this.percentageValue.push(item.pt);
|
|
|
this.inItBar();
|
|
|
});
|
|
|
});
|
|
|
// this.percentageName = ['陆渡街道', '港区', '浮桥镇', '编办', '老干部局', '党校', '档案馆']
|
|
|
// this.percentageValue = [80, 90, 60, 90, 90, 70, 50]
|
|
|
// this.inItBar()
|
|
|
// getComplete().then((res) => {
|
|
|
// this.percentageName = res['T_DEPT_COMPLETE[]'].map(e => {
|
|
|
// return e.dept_name
|
|
|
// })
|
|
|
// this.percentageValue = res['T_DEPT_COMPLETE[]'].map((e) => {
|
|
|
// return e.dept_completion_rate
|
|
|
// })
|
|
|
// this.inItBar()
|
|
|
// })
|
|
|
},
|
|
|
inItBar() {
|
|
|
const myChartBar = this.$echarts.init(document.getElementById("bar"));
|
|
|
const option = {
|
|
|
animation: true,
|
|
|
grid: {
|
|
|
top: "20%",
|
|
|
bottom: "10%",
|
|
|
left: "5%",
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
formatter: "{b} : {c}%",
|
|
|
textStyle: {
|
|
|
fontSize: 26,
|
|
|
fontWight: "bold",
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: this.percentageName,
|
|
|
axisLine: {
|
|
|
show: true, // 隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: "rgb(255,255,255,0.5)",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false, // 隐藏X轴轴线
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
show: true,
|
|
|
margin: 12,
|
|
|
fontSize: 28,
|
|
|
textStyle: {
|
|
|
color: "rgb(255,255,255,1)", // X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
gridIndex: 0,
|
|
|
min: 0,
|
|
|
max: 100,
|
|
|
interval: 20,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
type: "dashed",
|
|
|
color: "rgba(77, 128, 254, 0.2)",
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "rgba(77, 128, 254, 0)",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
margin: 14,
|
|
|
fontSize: 24,
|
|
|
textStyle: {
|
|
|
color: "#68cff9",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "网评员任务完成率",
|
|
|
type: "bar",
|
|
|
barWidth: 25,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#39b3ff",
|
|
|
},
|
|
|
},
|
|
|
data: this.percentageValue,
|
|
|
z: 10,
|
|
|
zlevel: 0,
|
|
|
},
|
|
|
{
|
|
|
name: "网评员任务完成率",
|
|
|
// 分隔
|
|
|
type: "pictorialBar",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#0F375F",
|
|
|
},
|
|
|
},
|
|
|
symbolRepeat: "fixed",
|
|
|
symbolMargin: 3,
|
|
|
symbol: "rect",
|
|
|
symbolClip: true,
|
|
|
symbolSize: [18, 7],
|
|
|
symbolPosition: "start",
|
|
|
symbolOffset: [-3, 1],
|
|
|
data: this.percentageValue,
|
|
|
width: 2,
|
|
|
z: 1,
|
|
|
zlevel: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "外框",
|
|
|
type: "bar",
|
|
|
barGap: "-130%", // 设置外框粗细
|
|
|
data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
|
|
|
barWidth: 40,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgba(14, 41, 78, 0.3)", // 填充色
|
|
|
barBorderColor: "#2b405b", // 边框色
|
|
|
barBorderWidth: 1, // 边框宽度
|
|
|
label: {
|
|
|
// 标签显示位置
|
|
|
show: false,
|
|
|
position: "top",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
z: 0,
|
|
|
},
|
|
|
],
|
|
|
dataZoom: [
|
|
|
{
|
|
|
type: "slider",
|
|
|
show: false,
|
|
|
xAxisIndex: [0],
|
|
|
endValue: 6,
|
|
|
startValue: 0,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
if (option && typeof option === "object") {
|
|
|
myChartBar.setOption(option, true);
|
|
|
// 定时自动滚动
|
|
|
setInterval(() => {
|
|
|
if (option.dataZoom[0].endValue === this.percentageValue?.length) {
|
|
|
option.dataZoom[0].endValue = 6;
|
|
|
option.dataZoom[0].startValue = 0;
|
|
|
} else {
|
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
|
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
|
|
|
}
|
|
|
myChartBar.setOption(option, true);
|
|
|
}, 2000);
|
|
|
}
|
|
|
},
|
|
|
// 初始化圆柱
|
|
|
inItCylinder() {
|
|
|
const myChartCylinder = this.$echarts.init(
|
|
|
document.getElementById("cylinder")
|
|
|
);
|
|
|
const option = {
|
|
|
grid: {
|
|
|
height: 280,
|
|
|
width: 130,
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: ["上级"],
|
|
|
show: false,
|
|
|
},
|
|
|
yAxis: {
|
|
|
show: false,
|
|
|
type: "value",
|
|
|
},
|
|
|
series: [
|
|
|
// 最下面的圆片
|
|
|
{
|
|
|
name: "",
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [111, 30],
|
|
|
symbolOffset: [-9, 15],
|
|
|
z: 12,
|
|
|
data: [
|
|
|
{
|
|
|
name: "",
|
|
|
value: this.sjdata,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgba(89,211,255,1)", // 最下圆
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
// 上最面圆片
|
|
|
{
|
|
|
name: "", // 头部
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [111, 30],
|
|
|
symbolOffset: [-9, -15],
|
|
|
z: 12,
|
|
|
data: [
|
|
|
{
|
|
|
name: "",
|
|
|
value: this.sjdata + this.sjdata / 2.4 + this.bjdata * 1.2,
|
|
|
symbolPosition: "end",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgba(57,119,119,1)", // 最上面的圆
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
// 中部的圆
|
|
|
{
|
|
|
name: "",
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [113, 40],
|
|
|
symbolOffset: [-10, -20],
|
|
|
z: 12,
|
|
|
data: [
|
|
|
{
|
|
|
name: "",
|
|
|
value: this.sjdata * 1.4 - 2,
|
|
|
symbolPosition: "end",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#43bafe",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
// 下半截柱状图
|
|
|
{
|
|
|
name: "",
|
|
|
type: "bar",
|
|
|
barWidth: 250,
|
|
|
barGap: "-100%",
|
|
|
itemStyle: {
|
|
|
// lenged文本
|
|
|
color: "rgba(56,117,168,0.2)",
|
|
|
},
|
|
|
data: [
|
|
|
{
|
|
|
name: "",
|
|
|
value: this.sjdata * 1.4,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
type: "linear",
|
|
|
global: false,
|
|
|
colorStops: [
|
|
|
{
|
|
|
// 第一节下面
|
|
|
offset: 0,
|
|
|
color: "rgba(56,117,168,0.3)",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#43bafe",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "inside",
|
|
|
offset: [-10, this.sjdata / 3],
|
|
|
color: "#70c1f9",
|
|
|
fontSize: 20,
|
|
|
fontStyle: "bold",
|
|
|
align: "center",
|
|
|
formatter: "上级" + "\n" + this.sjdata + "%",
|
|
|
},
|
|
|
textStyle: {},
|
|
|
},
|
|
|
// 。。。中下？？
|
|
|
{
|
|
|
// 替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20
|
|
|
type: "bar",
|
|
|
barWidth: 250,
|
|
|
barGap: "-100%",
|
|
|
stack: "网评",
|
|
|
itemStyle: {
|
|
|
color: "transparent",
|
|
|
},
|
|
|
data: [this.sjdata + this.sjdata / 2.4],
|
|
|
},
|
|
|
|
|
|
// 上半部
|
|
|
{
|
|
|
name: "本级",
|
|
|
type: "bar",
|
|
|
barWidth: 250,
|
|
|
barGap: "-100%",
|
|
|
stack: "网评",
|
|
|
// 上班截开始
|
|
|
data: [
|
|
|
{
|
|
|
name: "本级网评比例",
|
|
|
value: this.bjdata * 1.2,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
type: "linear",
|
|
|
global: false,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(70,141,132,1)",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgba(131,237,169,1)",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "inside",
|
|
|
offset: [-10, 10],
|
|
|
color: "rgba(131,237,169,1)",
|
|
|
fontSize: 20,
|
|
|
fontStyle: "bold",
|
|
|
align: "center",
|
|
|
formatter: "本级" + "\n" + this.bjdata + "%",
|
|
|
rich: {
|
|
|
a: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChartCylinder.setOption(option, true);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
//圆柱
|
|
|
#cylinder {
|
|
|
position: absolute;
|
|
|
left: 25px;
|
|
|
top: 186px;
|
|
|
width: 123px;
|
|
|
height: 390px;
|
|
|
}
|
|
|
// //进度条
|
|
|
// #progress {
|
|
|
// position: relative;
|
|
|
// top: -8px;
|
|
|
// left: 31px;
|
|
|
// display: inline-block;
|
|
|
// width: 799px;
|
|
|
// height: 10px;
|
|
|
// }
|
|
|
//任务完成率
|
|
|
#bar {
|
|
|
width: 1200px;
|
|
|
height: 380px;
|
|
|
position: relative;
|
|
|
left: 60px;
|
|
|
top: 10px;
|
|
|
}
|
|
|
.container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
.module-container {
|
|
|
width: 1229px;
|
|
|
height: 971px;
|
|
|
margin: 130px 0 0 -50px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
align-content: space-between;
|
|
|
.section-proportion {
|
|
|
width: 1229px;
|
|
|
height: 474px;
|
|
|
background: url("~@/assets/privateOrder/positiveEnergy/网评比例-bj.png")
|
|
|
no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
.proportion-title {
|
|
|
position: relative;
|
|
|
left: 389px;
|
|
|
top: 50px;
|
|
|
font-family: PangMenZhengDao;
|
|
|
font-size: 38px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
letter-spacing: 0px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
.cylinderBottom {
|
|
|
position: absolute;
|
|
|
top: 432px;
|
|
|
left: -6px;
|
|
|
}
|
|
|
.proportion-ratio {
|
|
|
position: relative;
|
|
|
left: 250px;
|
|
|
top: 90px;
|
|
|
.proportion-ratio-bl {
|
|
|
margin-bottom: 40px;
|
|
|
width: 910px;
|
|
|
height: 127px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 36px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
letter-spacing: 0px;
|
|
|
color: #ffffff;
|
|
|
background: url("~@/assets/privateOrder/positiveEnergy/bjsj网评.png")
|
|
|
no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
.progress {
|
|
|
position: relative;
|
|
|
top: 21px;
|
|
|
left: 102px;
|
|
|
width: 799px;
|
|
|
height: 8px;
|
|
|
background-color: #3a5270;
|
|
|
div {
|
|
|
height: 8px;
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
div:nth-child(1) {
|
|
|
position: relative;
|
|
|
img {
|
|
|
position: absolute;
|
|
|
top: 40px;
|
|
|
left: 32px;
|
|
|
}
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
margin-top: 35px;
|
|
|
margin-left: 120px;
|
|
|
}
|
|
|
}
|
|
|
div:nth-child(2) {
|
|
|
position: relative;
|
|
|
img {
|
|
|
position: absolute;
|
|
|
top: 40px;
|
|
|
left: 32px;
|
|
|
}
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
margin-top: 35px;
|
|
|
margin-left: 120px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.setion-percentage {
|
|
|
width: 1229px;
|
|
|
height: 474px;
|
|
|
background: url("~@/assets/privateOrder/positiveEnergy/完成率-bj.png");
|
|
|
background-size: 100% 100%;
|
|
|
.percentage-title {
|
|
|
position: relative;
|
|
|
left: 473px;
|
|
|
top: 47px;
|
|
|
font-family: PangMenZhengDao;
|
|
|
font-size: 38px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
letter-spacing: 0px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
