suzhou-jichuang-lanhai
/
taicangZongzhi
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

+1

Browse Source
lijinlong
许宏杰 2 years ago
parent 74919782a0
commit cb0a0b32f5
2 changed files with 187 additions and 186 deletions
Show Stats Download Patch File Download Diff File

372
src/views/privateOrder/positiveEnergy/components/componentRight.vue
Unescape View File

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

1
src/views/privateOrder/sentiment/components/WordCloud.vue
Unescape View File

@ -86,7 +86,6 @@ export default {
init() { init() {
const tags = document.querySelectorAll(".tag"); const tags = document.querySelectorAll(".tag");
const wrap = document.querySelector(".tag-wrap"); const wrap = document.querySelector(".tag-wrap");
const len = tags.length; const len = tags.length;
const valueList = Array.from(new Set(this.data.map((i) => i.count))); const valueList = Array.from(new Set(this.data.map((i) => i.count)));
const min = Math.min(...valueList); const min = Math.min(...valueList);

Write Preview
Loading…
Cancel
Save