信息化管理
This commit is contained in:
熊丽君
@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="min-width: 100px">
|
<div style="min-width: 100px">
|
||||||
<el-progress :show-text="showText" :stroke-width="strokeWidth" :percentage="percentage"></el-progress>
|
<el-progress
|
||||||
|
:show-text="showText"
|
||||||
|
:stroke-width="strokeWidth"
|
||||||
|
:percentage="percentage > 100 ? 100 : parseFloat(percentage)"
|
||||||
|
></el-progress>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -2,61 +2,50 @@
|
|||||||
<div>
|
<div>
|
||||||
<container3>
|
<container3>
|
||||||
<rocketTit class="tit">信息化指标</rocketTit>
|
<rocketTit class="tit">信息化指标</rocketTit>
|
||||||
<!-- <img class="img" src="./center.png" style="width: 100%; height: 100%" /> -->
|
|
||||||
<!-- <div class="con_right">
|
|
||||||
<div class="con_title con_title_bg1">
|
|
||||||
<img src="./img/left1/icon.png" alt="" />
|
|
||||||
<span style="margin-left: 2px">一级危险点</span>
|
|
||||||
</div>
|
|
||||||
<div class="com_img"><img src="./img/left1/icon1.png" alt="" /></div>
|
|
||||||
</div>
|
|
||||||
<div class="con_right con_two">
|
|
||||||
<div class="con_title con_title_bg2">
|
|
||||||
<img src="./img/left1/icon.png" alt="" />
|
|
||||||
<span style="margin-left: 2px">二级危险点</span>
|
|
||||||
</div>
|
|
||||||
<div class="com_img"><img src="./img/left1/icon2.png" alt="" /></div>
|
|
||||||
</div>
|
|
||||||
<div class="con_right con_three">
|
|
||||||
<div class="con_title con_title_bg3">
|
|
||||||
<img src="./img/left1/icon.png" alt="" />
|
|
||||||
<span style="margin-left: 2px">三级危险点</span>
|
|
||||||
</div>
|
|
||||||
<div class="com_img"><img src="./img/left1/icon3.png" alt="" /></div>
|
|
||||||
</div> -->
|
|
||||||
<div>
|
<div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<div class="data-item">
|
<div class="data-item">
|
||||||
<div><span style="font-weight: bold">全年信息化投入</span></div>
|
<div><span style="font-weight: bold">全年信息化投入</span></div>
|
||||||
<div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
<div class="box">
|
||||||
|
<i>{{ dataInfo.informationInvested }}/</i><i class="num">{{ dataInfo.informationTargetInveste }}</i
|
||||||
|
><span class="num2">万</span>
|
||||||
|
</div>
|
||||||
<div style="width: 100%">
|
<div style="width: 100%">
|
||||||
<progressBar :percentage="70" />
|
<progressBar :percentage="percentage" v-if="percentage" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-item">
|
<div class="data-item">
|
||||||
<div><span style="font-weight: bold">全年网络运维率</span></div>
|
<div><span style="font-weight: bold">全年网络运维率</span></div>
|
||||||
<div class="box"><i>80%/</i><span class="num">100%</span></div>
|
<div class="box">
|
||||||
|
<i>{{ dataInfo.alreadyNetworkOperation }}%/</i
|
||||||
|
><span class="num">{{ dataInfo.targetNetworkOperation }}%</span>
|
||||||
|
</div>
|
||||||
<div style="width: 100%">
|
<div style="width: 100%">
|
||||||
<progressBar :percentage="70" />
|
<progressBar :percentage="dataInfo.alreadyNetworkOperation" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-item">
|
<div class="data-item">
|
||||||
<div><span style="font-weight: bold">全年设备接入率</span></div>
|
<div><span style="font-weight: bold">全年设备接入率</span></div>
|
||||||
<div class="box"><i>80%/</i><span class="num">100%</span></div>
|
<div class="box">
|
||||||
|
<i>{{ dataInfo.alreadyDeviceAccess }}%/</i><span class="num">{{ dataInfo.targetDeviceAccess }}%</span>
|
||||||
|
</div>
|
||||||
<div style="width: 100%">
|
<div style="width: 100%">
|
||||||
<progressBar :percentage="70" />
|
<progressBar :percentage="dataInfo.alreadyDeviceAccess" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-item">
|
<div class="data-item">
|
||||||
<div><span style="font-weight: bold">全年业务覆盖率</span></div>
|
<div><span style="font-weight: bold">全年业务覆盖率</span></div>
|
||||||
<div class="box"><i>80%/</i><span class="num">100%</span></div>
|
<div class="box">
|
||||||
|
<i>{{ dataInfo.alreadyBusinessCoverage }}%/</i
|
||||||
|
><span class="num">{{ dataInfo.targetBusinessCoverage }}%</span>
|
||||||
|
</div>
|
||||||
<div style="width: 100%">
|
<div style="width: 100%">
|
||||||
<progressBar :percentage="70" />
|
<progressBar :percentage="dataInfo.alreadyBusinessCoverage" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="_img">
|
<div class="_img">
|
||||||
<img class="img" src="./center2.png" />
|
<img class="img" :src="dataInfo.bigPic" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</container3>
|
</container3>
|
||||||
@ -80,11 +69,30 @@ export default {
|
|||||||
progressBar,
|
progressBar,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
dataInfo: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
percentage() {
|
||||||
|
return (this.dataInfo.informationInvested / this.dataInfo.informationTargetInveste) * 100
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
beforeDestroy() {},
|
beforeDestroy() {},
|
||||||
methods: {},
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.request({
|
||||||
|
url: '/hx/informationManagement/getHxInformationIndex',
|
||||||
|
method: 'get',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.dataInfo = data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -10,9 +10,8 @@
|
|||||||
<div class="than">
|
<div class="than">
|
||||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||||
<span>已完成任务/完成率</span>
|
<span>已完成任务/完成率</span>
|
||||||
<i class="num">55/80%</i>
|
<i class="num">{{ totalAndRate.total }}/{{ Math.floor(totalAndRate.rate * 100) / 100 }}%</i>
|
||||||
<progressBar :percentage="70" />
|
<progressBar :percentage="totalAndRate.rate" />
|
||||||
<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
|
|
||||||
</div>
|
</div>
|
||||||
<el-col :span="24" style="margin-bottom: 1px">
|
<el-col :span="24" style="margin-bottom: 1px">
|
||||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||||
@ -23,27 +22,34 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</el-col>
|
</el-col>
|
||||||
<vue-seamless-scroll
|
<vue-seamless-scroll
|
||||||
:data="listData"
|
:data="dataList"
|
||||||
|
ref="seamlessScroll"
|
||||||
class="warp-scroll"
|
class="warp-scroll"
|
||||||
:class-option="{
|
:class-option="{
|
||||||
singleHeight: 43,
|
singleHeight: 43,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<ul class="item">
|
<ul class="item">
|
||||||
<li v-for="item in scrollList" :key="item.id">
|
<li v-for="item in dataList" :key="item.id">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7">{{ item.name }}</el-col>
|
<el-col style="text-align: center" :span="7">{{ item.responsibilityContent }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7"> 部门一 </el-col>
|
<el-col style="text-align: center" :span="7">{{ item.deptName }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7">
|
<el-col style="text-align: center" :span="7">
|
||||||
<section class="box">
|
<section class="box">
|
||||||
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
<span
|
||||||
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
v-if="item.completionStatus == '已完成'"
|
||||||
|
style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
|
||||||
|
>·</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-else-if="item.completionStatus == '未完成'"
|
||||||
|
style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||||
>·</span
|
>·</span
|
||||||
>
|
>
|
||||||
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
|
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
|
||||||
<span v-if="item.status == 1">已完成</span>
|
<span v-if="item.completionStatus == '已完成'">已完成</span>
|
||||||
<span v-else-if="item.status == 3">未完成</span>
|
<span v-else-if="item.completionStatus == '未完成'">未完成</span>
|
||||||
<span v-else>进行中</span>
|
<span v-else>进行中</span>
|
||||||
</section>
|
</section>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -71,7 +77,7 @@
|
|||||||
<div class="than">
|
<div class="than">
|
||||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||||
<span>已完成任务/完成率</span>
|
<span>已完成任务/完成率</span>
|
||||||
<i class="num">55/80%</i>
|
<i class="num">{{ totalAndRateTwo.total }}/{{ totalAndRateTwo.rate }}%</i>
|
||||||
<progressBar :percentage="70" />
|
<progressBar :percentage="70" />
|
||||||
<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
|
<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
|
||||||
</div>
|
</div>
|
||||||
@ -88,6 +94,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<vue-seamless-scroll
|
<vue-seamless-scroll
|
||||||
:data="listData"
|
:data="listData"
|
||||||
|
ref="seamlessScroll2"
|
||||||
class="warp-scroll"
|
class="warp-scroll"
|
||||||
:class-option="{
|
:class-option="{
|
||||||
singleHeight: 43,
|
singleHeight: 43,
|
||||||
@ -95,20 +102,26 @@
|
|||||||
style="height: 168px"
|
style="height: 168px"
|
||||||
>
|
>
|
||||||
<ul class="item">
|
<ul class="item">
|
||||||
<li v-for="item in scrollList" :key="item.id">
|
<li v-for="item in listData" :key="item.id">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7">{{ item.name }}</el-col>
|
<el-col style="text-align: center" :span="7">{{ item.workPlanName }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7"> 部门一 </el-col>
|
<el-col style="text-align: center" :span="7">{{ item.deptName }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7">
|
<el-col style="text-align: center" :span="7">
|
||||||
<section class="box">
|
<section class="box">
|
||||||
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
<span
|
||||||
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
v-if="item.completedStatus == '已完成'"
|
||||||
|
style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
|
||||||
|
>·</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-else-if="item.completedStatus == '未完成'"
|
||||||
|
style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||||
>·</span
|
>·</span
|
||||||
>
|
>
|
||||||
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
|
<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
|
||||||
<span v-if="item.status == 1">已完成</span>
|
<span v-if="item.completedStatus == '已完成'">已完成</span>
|
||||||
<span v-else-if="item.status == 3">未完成</span>
|
<span v-else-if="item.completedStatus == '未完成'">未完成</span>
|
||||||
<span v-else>进行中</span>
|
<span v-else>进行中</span>
|
||||||
</section>
|
</section>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -144,42 +157,45 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
dataList: [],
|
||||||
|
totalAndRate: {},
|
||||||
|
totalAndRateTwo: {},
|
||||||
index: 0,
|
index: 0,
|
||||||
chart: null,
|
chart: null,
|
||||||
colorList,
|
colorList,
|
||||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
listData: [],
|
||||||
scrollList: [
|
// scrollList: [
|
||||||
{
|
// {
|
||||||
id: 1,
|
// id: 1,
|
||||||
name: '计划一',
|
// name: '计划一',
|
||||||
level: '一级',
|
// level: '一级',
|
||||||
status: 1,
|
// status: 1,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 2,
|
// id: 2,
|
||||||
name: '计划二',
|
// name: '计划二',
|
||||||
level: '二级',
|
// level: '二级',
|
||||||
status: 2,
|
// status: 2,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 3,
|
// id: 3,
|
||||||
name: '计划三',
|
// name: '计划三',
|
||||||
level: '三级',
|
// level: '三级',
|
||||||
status: 3,
|
// status: 3,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 4,
|
// id: 4,
|
||||||
name: '计划四',
|
// name: '计划四',
|
||||||
level: '二级',
|
// level: '二级',
|
||||||
status: 2,
|
// status: 2,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 5,
|
// id: 5,
|
||||||
name: '计划五',
|
// name: '计划五',
|
||||||
level: '三级',
|
// level: '三级',
|
||||||
status: 3,
|
// status: 3,
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -188,6 +204,8 @@ export default {
|
|||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart()
|
this.initChart()
|
||||||
})
|
})
|
||||||
|
} else {
|
||||||
|
this.getData2()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -198,14 +216,55 @@ export default {
|
|||||||
},
|
},
|
||||||
beforeDestroy() {},
|
beforeDestroy() {},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
getData() {
|
||||||
this.chart = echarts.init(this.$refs.chart)
|
this.request({
|
||||||
this.setOptions()
|
url: '/hx/informationManagement/getHxResponsibilityStatusPic',
|
||||||
|
method: 'get',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.dataList = data.list
|
||||||
|
this.totalAndRate = data.totalAndRate
|
||||||
|
this.$refs.seamlessScroll.reset()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
setOptions() {
|
getData2() {
|
||||||
|
this.request({
|
||||||
|
url: '/hx/informationManagement/getHxWorkPlanPic',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
type: '2',
|
||||||
|
},
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.listData = data.list
|
||||||
|
this.$refs.seamlessScroll2.reset()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initChart() {
|
||||||
|
this.request({
|
||||||
|
url: '/hx/informationManagement/getHxWorkPlanPic',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
type: '1',
|
||||||
|
},
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.totalAndRateTwo = data.totalAndRate
|
||||||
|
this.chart = echarts.init(this.$refs.chart)
|
||||||
|
this.setOptions(data.list)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setOptions(resData) {
|
||||||
|
// console.log(resData)
|
||||||
|
let titList = []
|
||||||
|
let rate = []
|
||||||
|
let completedNum = []
|
||||||
|
for (let i = 0; i < resData.length; i++) {
|
||||||
|
const item = resData[i]
|
||||||
|
titList.push(item.name)
|
||||||
|
rate.push(item.value.rate)
|
||||||
|
completedNum.push(item.value.completedNum)
|
||||||
|
}
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
// trigger: 'axis',
|
trigger: 'axis',
|
||||||
// formatter: '{a1}<br/>{b1}：{c1}',
|
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
@ -223,7 +282,7 @@ export default {
|
|||||||
bottom: 10,
|
bottom: 10,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'],
|
data: titList,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)',
|
color: 'rgb(255, 255, 255)',
|
||||||
@ -278,23 +337,12 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
// {
|
|
||||||
// name: '目标',
|
|
||||||
// type: 'bar',
|
|
||||||
// z: '-1',
|
|
||||||
// barGap: '-75%',
|
|
||||||
// barWidth: 30,
|
|
||||||
// itemStyle: {
|
|
||||||
// color: 'rgba(85, 197, 162, .3)',
|
|
||||||
// },
|
|
||||||
// data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
name: '数量',
|
name: '数量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 30,
|
barWidth: 30,
|
||||||
position: [0, 0],
|
position: [0, 0],
|
||||||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
data: completedNum,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear', // 线性渐变
|
type: 'linear', // 线性渐变
|
||||||
@ -322,15 +370,19 @@ export default {
|
|||||||
symbolSize: [30, 4],
|
symbolSize: [30, 4],
|
||||||
symbolOffset: [0, 0],
|
symbolOffset: [0, 0],
|
||||||
position: [0, 0],
|
position: [0, 0],
|
||||||
|
yAxisIndex: 1,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#F6D97E',
|
color: '#F6D97E',
|
||||||
},
|
},
|
||||||
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
data: rate,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -51,14 +51,47 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
initChart() {
|
||||||
this.chart = echarts.init(this.$refs.chart)
|
this.request({
|
||||||
this.setOptions()
|
url: '/hx/informationManagement/getHxSystemRadarPic',
|
||||||
|
method: 'get',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.chart = echarts.init(this.$refs.chart)
|
||||||
|
this.setOptions(data)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
setOptions() {
|
setOptions(resData) {
|
||||||
|
let titList = [] // 标题title
|
||||||
|
let titData = [] // 雷达指标名称
|
||||||
|
let month = [] // 当月
|
||||||
|
let monthTotal = [] // 当月累计
|
||||||
|
for (let i = 0; i < resData.length; i++) {
|
||||||
|
const item = resData[i]
|
||||||
|
titList.push(item.systemName + '系统')
|
||||||
|
titData.push([])
|
||||||
|
month.push([])
|
||||||
|
monthTotal.push([])
|
||||||
|
for (let j = 0; j < item.month.length; j++) {
|
||||||
|
const item2 = item.month[j]
|
||||||
|
titData[i].push({
|
||||||
|
name: item2.indexName,
|
||||||
|
axisLabel: {
|
||||||
|
show: j == 0 ? true : false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
month[i].push(item2.allount)
|
||||||
|
}
|
||||||
|
for (let j = 0; j < item.total.length; j++) {
|
||||||
|
const item2 = item.total[j]
|
||||||
|
if (titData[i][j]) {
|
||||||
|
Object.assign(titData[i][j], { max: item2.allount })
|
||||||
|
}
|
||||||
|
monthTotal[i].push(item2.allount)
|
||||||
|
}
|
||||||
|
}
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
title: [
|
title: [
|
||||||
{
|
{
|
||||||
text: 'PDM系统',
|
text: titList[0],
|
||||||
left: '9%',
|
left: '9%',
|
||||||
bottom: 5,
|
bottom: 5,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -70,7 +103,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'MES系统',
|
text: titList[1],
|
||||||
left: '34%',
|
left: '34%',
|
||||||
bottom: 5,
|
bottom: 5,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -82,7 +115,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '质量管理系统',
|
text: titList[2],
|
||||||
left: '58%',
|
left: '58%',
|
||||||
bottom: 5,
|
bottom: 5,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -94,7 +127,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'ERP系统',
|
text: titList[3],
|
||||||
left: '85%',
|
left: '85%',
|
||||||
bottom: 5,
|
bottom: 5,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -119,14 +152,15 @@ export default {
|
|||||||
color: ['#5B8FF9', '#5AD8A6'],
|
color: ['#5B8FF9', '#5AD8A6'],
|
||||||
radar: [
|
radar: [
|
||||||
{
|
{
|
||||||
indicator: [
|
indicator: titData[0],
|
||||||
{ name: '登陆频次', max: 6500, axisLabel: { show: true }, color: '#fff' },
|
// indicator: [
|
||||||
{ name: '指标二', max: 16000 },
|
// { name: '登陆频次', max: 6500, axisLabel: { show: true }, color: '#fff' },
|
||||||
{ name: '指标三', max: 30000 },
|
// { name: '指标二', max: 16000, color: '#fff' },
|
||||||
{ name: '指标四', max: 38000 },
|
// { name: '指标三', max: 30000, color: '#fff' },
|
||||||
{ name: '指标五', max: 52000 },
|
// { name: '指标四', max: 38000, color: '#fff' },
|
||||||
{ name: '指标六', max: 25000 },
|
// { name: '指标五', max: 52000, color: '#fff' },
|
||||||
],
|
// { name: '指标六', max: 25000, color: '#fff' },
|
||||||
|
// ],
|
||||||
center: ['12.5%', '50%'],
|
center: ['12.5%', '50%'],
|
||||||
radius: 70,
|
radius: 70,
|
||||||
// name: {
|
// name: {
|
||||||
@ -141,104 +175,99 @@ export default {
|
|||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
indicator: [
|
indicator: titData[1],
|
||||||
{ name: '登陆频次', max: 6500, axisLabel: { show: true } },
|
|
||||||
{ name: '指标二', max: 16000 },
|
|
||||||
{ name: '指标三', max: 30000 },
|
|
||||||
{ name: '指标四', max: 38000 },
|
|
||||||
{ name: '指标五', max: 52000 },
|
|
||||||
{ name: '指标六', max: 25000 },
|
|
||||||
],
|
|
||||||
radius: 70,
|
radius: 70,
|
||||||
center: ['37.5%', '50%'],
|
center: ['37.5%', '50%'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
indicator: [
|
indicator: titData[2],
|
||||||
{ name: '登陆频次', max: 6500, axisLabel: { show: true } },
|
|
||||||
{ name: '指标二', max: 16000 },
|
|
||||||
{ name: '指标三', max: 30000 },
|
|
||||||
{ name: '指标四', max: 38000 },
|
|
||||||
{ name: '指标五', max: 52000 },
|
|
||||||
{ name: '指标六', max: 25000 },
|
|
||||||
],
|
|
||||||
center: ['62.5%', '50%'],
|
center: ['62.5%', '50%'],
|
||||||
radius: 70,
|
radius: 70,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
indicator: [
|
indicator: titData[3],
|
||||||
{ name: '登陆频次', max: 6500, axisLabel: { show: true } },
|
|
||||||
{ name: '指标二', max: 16000 },
|
|
||||||
{ name: '指标三', max: 30000 },
|
|
||||||
{ name: '指标四', max: 38000 },
|
|
||||||
{ name: '指标五', max: 52000 },
|
|
||||||
{ name: '指标六', max: 25000 },
|
|
||||||
],
|
|
||||||
center: ['87.5%', '50%'],
|
center: ['87.5%', '50%'],
|
||||||
radius: 70,
|
radius: 70,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
...titData.map((e, index) => {
|
||||||
type: 'radar',
|
return {
|
||||||
data: [
|
type: 'radar',
|
||||||
{
|
radarIndex: index,
|
||||||
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
data: [
|
||||||
name: '当月',
|
{
|
||||||
label: {
|
value: month[index],
|
||||||
normal: {
|
name: '当月',
|
||||||
// show: true,
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
{
|
value: monthTotal[index],
|
||||||
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
name: '累积',
|
||||||
name: '累积',
|
},
|
||||||
},
|
],
|
||||||
],
|
}
|
||||||
},
|
}),
|
||||||
{
|
// {
|
||||||
type: 'radar',
|
// type: 'radar',
|
||||||
radarIndex: 1,
|
// data: [
|
||||||
data: [
|
// {
|
||||||
{
|
// value: month[0],
|
||||||
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
// name: '当月',
|
||||||
name: '当月',
|
// label: {
|
||||||
},
|
// normal: {
|
||||||
{
|
// // show: true,
|
||||||
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
// color: '#fff',
|
||||||
name: '累积',
|
// },
|
||||||
},
|
// },
|
||||||
],
|
// },
|
||||||
},
|
// {
|
||||||
{
|
// value: monthTotal[0],
|
||||||
type: 'radar',
|
// name: '累积',
|
||||||
radarIndex: 2,
|
// },
|
||||||
data: [
|
// ],
|
||||||
{
|
// },
|
||||||
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
// {
|
||||||
name: '当月',
|
// type: 'radar',
|
||||||
},
|
// radarIndex: 1,
|
||||||
{
|
// data: [
|
||||||
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
// {
|
||||||
name: '累积',
|
// value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||||
},
|
// name: '当月',
|
||||||
],
|
// },
|
||||||
},
|
// {
|
||||||
{
|
// value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||||
type: 'radar',
|
// name: '累积',
|
||||||
radarIndex: 3,
|
// },
|
||||||
data: [
|
// ],
|
||||||
{
|
// },
|
||||||
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
// {
|
||||||
name: '当月',
|
// type: 'radar',
|
||||||
},
|
// radarIndex: 2,
|
||||||
{
|
// data: [
|
||||||
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
// {
|
||||||
name: '累积',
|
// value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||||
},
|
// name: '当月',
|
||||||
],
|
// },
|
||||||
},
|
// {
|
||||||
|
// value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||||
|
// name: '累积',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: 'radar',
|
||||||
|
// radarIndex: 3,
|
||||||
|
// data: [
|
||||||
|
// {
|
||||||
|
// value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||||
|
// name: '当月',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||||
|
// name: '累积',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|||||||
@ -9,6 +9,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="24" style="margin: 20px 0">
|
<el-col :span="24" style="margin: 20px 0">
|
||||||
|
<div style="text-align: right; margin-right: 30px">
|
||||||
|
<el-date-picker
|
||||||
|
style="width: 30%"
|
||||||
|
v-model="value"
|
||||||
|
value-format="yyyy-MM"
|
||||||
|
type="month"
|
||||||
|
size="mini"
|
||||||
|
placeholder="选择月"
|
||||||
|
:clearable="false"
|
||||||
|
:editable="false"
|
||||||
|
@change="initLine"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
<div style="height: 270px; margin: 14px 0 8px">
|
<div style="height: 270px; margin: 14px 0 8px">
|
||||||
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -30,22 +44,20 @@
|
|||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<ul class="item">
|
<ul class="item">
|
||||||
<li v-for="item in scrollList" :key="item.id">
|
<li v-for="item in listData" :key="item.id">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||||
<el-col style="text-align: center" :span="5">{{ item.name }}</el-col>
|
<el-col style="text-align: center" :span="5">{{ item.planName }}</el-col>
|
||||||
<el-col style="text-align: center" :span="5">部门一 </el-col>
|
<el-col style="text-align: center" :span="5">{{ item.deptName }}</el-col>
|
||||||
<el-col style="text-align: center" :span="7">2021-12-12 </el-col>
|
<el-col style="text-align: center" :span="7">{{ item.todayDate }}</el-col>
|
||||||
<el-col style="text-align: center" :span="4">
|
<el-col style="text-align: center" :span="4">
|
||||||
<section class="box">
|
<section class="box">
|
||||||
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
<span v-if="item.status == '已完成'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
|
||||||
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
|
||||||
>·</span
|
>·</span
|
||||||
>
|
>
|
||||||
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
<span v-else style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
|
||||||
<span v-if="item.status == 1">已完成</span>
|
<span v-if="item.status == '已完成'">已完成</span>
|
||||||
<span v-else-if="item.status == 3">未完成</span>
|
<span v-else>未完成</span>
|
||||||
<span v-else>未开始</span>
|
|
||||||
</section>
|
</section>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -82,6 +94,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
|
value: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),
|
||||||
chart2: null,
|
chart2: null,
|
||||||
data: [
|
data: [
|
||||||
{ value: 154, name: '类别一' },
|
{ value: 154, name: '类别一' },
|
||||||
@ -94,7 +107,7 @@ export default {
|
|||||||
{ value: 679, name: '类别八' },
|
{ value: 679, name: '类别八' },
|
||||||
],
|
],
|
||||||
colorList,
|
colorList,
|
||||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
listData: [],
|
||||||
scrollList: [
|
scrollList: [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
@ -136,14 +149,36 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
getData() {
|
||||||
this.chart = echarts.init(this.$refs.chart)
|
this.request({
|
||||||
this.setOptions()
|
url: '/hx/informationManagement/getHxPlanCompletedListPic',
|
||||||
|
method: 'get',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.listData = data
|
||||||
|
})
|
||||||
},
|
},
|
||||||
setOptions() {
|
initChart() {
|
||||||
|
this.request({
|
||||||
|
url: '/hx/informationManagement/getHxPlanCompletedPic',
|
||||||
|
method: 'get',
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.chart = echarts.init(this.$refs.chart)
|
||||||
|
this.setOptions(data)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setOptions(resData) {
|
||||||
|
let month = []
|
||||||
|
let total = []
|
||||||
|
let rate = []
|
||||||
|
for (let i = 0; i < resData.length; i++) {
|
||||||
|
const item = resData[i]
|
||||||
|
month.push(item.month)
|
||||||
|
total.push(item.data.total)
|
||||||
|
rate.push(item.data.rate)
|
||||||
|
}
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
// trigger: 'axis',
|
trigger: 'axis',
|
||||||
// formatter: '{a1}<br/>{b1}：{c1}',
|
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
@ -161,20 +196,7 @@ export default {
|
|||||||
bottom: 50,
|
bottom: 50,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: [
|
data: month,
|
||||||
'2021-01',
|
|
||||||
'2021-02',
|
|
||||||
'2021-03',
|
|
||||||
'2021-04',
|
|
||||||
'2021-05',
|
|
||||||
'2021-06',
|
|
||||||
'2021-07',
|
|
||||||
'2021-08',
|
|
||||||
'2021-09',
|
|
||||||
'2021-10',
|
|
||||||
'2021-11',
|
|
||||||
'2021-12',
|
|
||||||
],
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)',
|
color: 'rgb(255, 255, 255)',
|
||||||
@ -184,7 +206,10 @@ export default {
|
|||||||
dataZoom: {
|
dataZoom: {
|
||||||
type: 'slider',
|
type: 'slider',
|
||||||
start: 0,
|
start: 0,
|
||||||
end: 50,
|
end: this.dataZoomEnd(month.length, 5),
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
color: ['#ccc', 'red'],
|
color: ['#ccc', 'red'],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
@ -238,7 +263,8 @@ export default {
|
|||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: 'rgba(85, 197, 162, .3)',
|
color: 'rgba(85, 197, 162, .3)',
|
||||||
},
|
},
|
||||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
yAxisIndex: 1,
|
||||||
|
data: rate,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '数量',
|
name: '数量',
|
||||||
@ -248,7 +274,7 @@ export default {
|
|||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: 'rgba(90, 216, 166, 0.85)',
|
color: 'rgba(90, 216, 166, 0.85)',
|
||||||
},
|
},
|
||||||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
data: total,
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// name: '目标',
|
// name: '目标',
|
||||||
@ -266,13 +292,31 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
initLine() {
|
initLine() {
|
||||||
this.chart2 = echarts.init(this.$refs.chart2)
|
this.request({
|
||||||
this.setOptions2()
|
url: '/hx/informationManagement/getHxPlanCompletedByMonthPic',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
month: this.value,
|
||||||
|
},
|
||||||
|
}).then(({ data }) => {
|
||||||
|
this.chart2 = echarts.init(this.$refs.chart2)
|
||||||
|
this.setOptions2(data)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
setOptions2() {
|
setOptions2(resData) {
|
||||||
|
let deptName = []
|
||||||
|
let total = []
|
||||||
|
let rate = []
|
||||||
|
for (let i = 0; i < resData.length; i++) {
|
||||||
|
const item = resData[i]
|
||||||
|
deptName.push(item.deptName)
|
||||||
|
total.push(item.total)
|
||||||
|
rate.push(item.rate)
|
||||||
|
}
|
||||||
|
|
||||||
this.chart2.setOption({
|
this.chart2.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
// trigger: 'axis',
|
trigger: 'axis',
|
||||||
// formatter: '{a1}<br/>{b1}：{c1}',
|
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
@ -290,7 +334,7 @@ export default {
|
|||||||
bottom: 50,
|
bottom: 50,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: ['部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门'],
|
data: deptName,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)',
|
color: 'rgb(255, 255, 255)',
|
||||||
@ -300,7 +344,10 @@ export default {
|
|||||||
dataZoom: {
|
dataZoom: {
|
||||||
type: 'slider',
|
type: 'slider',
|
||||||
start: 0,
|
start: 0,
|
||||||
end: 50,
|
end: this.dataZoomEnd(deptName.length, 5),
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
color: ['#ccc', 'red'],
|
color: ['#ccc', 'red'],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
@ -359,9 +406,10 @@ export default {
|
|||||||
{
|
{
|
||||||
name: '数量',
|
name: '数量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 15,
|
barGap: '-100%',
|
||||||
|
barWidth: 30,
|
||||||
position: [0, 0],
|
position: [0, 0],
|
||||||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
data: total,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear', // 线性渐变
|
type: 'linear', // 线性渐变
|
||||||
@ -387,17 +435,21 @@ export default {
|
|||||||
type: 'scatter',
|
type: 'scatter',
|
||||||
symbol: 'rect',
|
symbol: 'rect',
|
||||||
symbolSize: [30, 4],
|
symbolSize: [30, 4],
|
||||||
symbolOffset: [3, 0],
|
symbolOffset: [0, 0],
|
||||||
position: [0, 0],
|
position: [0, 0],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#F64F58',
|
color: '#F64F58',
|
||||||
},
|
},
|
||||||
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
yAxisIndex: 1,
|
||||||
|
data: rate,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -71,7 +71,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="月份" prop="month">
|
<el-form-item label="月份" prop="month">
|
||||||
<el-date-picker v-model="form.month" type="month" value-format="yyyy-MM" placeholder="选择年">
|
<el-date-picker v-model="form.month" type="month" value-format="yyyy-MM" placeholder="选择月">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="目标完成率" prop="targetCompletionRate">
|
<!-- <el-form-item label="目标完成率" prop="targetCompletionRate">
|
||||||
|
|||||||
Reference in New Issue
Block a user