From c602a3c06719191c57370ca255d79cd59a91d392 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Wed, 22 Dec 2021 15:44:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=8C=96=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../bigScreen/components/progress/index.vue | 6 +-
src/views/bigScreen/information/center.vue | 74 +++---
src/views/bigScreen/information/left1.vue | 194 +++++++++------
src/views/bigScreen/information/left2.vue | 227 ++++++++++--------
src/views/bigScreen/information/right1.vue | 138 +++++++----
src/views/chartList/page1/right3.vue | 2 +-
6 files changed, 393 insertions(+), 248 deletions(-)
diff --git a/src/views/bigScreen/components/progress/index.vue b/src/views/bigScreen/components/progress/index.vue
index 04f50f8..a12c91b 100644
--- a/src/views/bigScreen/components/progress/index.vue
+++ b/src/views/bigScreen/components/progress/index.vue
@@ -1,6 +1,10 @@
-
+
diff --git a/src/views/bigScreen/information/left1.vue b/src/views/bigScreen/information/left1.vue
index 8ba1770..38dd1a2 100644
--- a/src/views/bigScreen/information/left1.vue
+++ b/src/views/bigScreen/information/left1.vue
@@ -10,9 +10,8 @@
·
已完成任务/完成率
-
55/80%
-
-
+
{{ totalAndRate.total }}/{{ Math.floor(totalAndRate.rate * 100) / 100 }}%
+
@@ -23,27 +22,34 @@
- -
+
-
{{ item.id }}
- {{ item.name }}
- 部门一
+ {{ item.responsibilityContent }}
+ {{ item.deptName }}
- ·
- ·
+ ·
·
- 已完成
- 未完成
+ 已完成
+ 未完成
进行中
@@ -71,7 +77,7 @@
·
已完成任务/完成率
-
55/80%
+
{{ totalAndRateTwo.total }}/{{ totalAndRateTwo.rate }}%
@@ -88,6 +94,7 @@
- -
+
-
{{ item.id }}
- {{ item.name }}
- 部门一
+ {{ item.workPlanName }}
+ {{ item.deptName }}
- ·
- ·
+ ·
·
- 已完成
- 未完成
+ 已完成
+ 未完成
进行中
@@ -144,42 +157,45 @@ export default {
},
data() {
return {
+ dataList: [],
+ totalAndRate: {},
+ totalAndRateTwo: {},
index: 0,
chart: null,
colorList,
- listData: [1, 2, 3, 4, 5, 6, 7, 8],
- scrollList: [
- {
- id: 1,
- name: '计划一',
- level: '一级',
- status: 1,
- },
- {
- id: 2,
- name: '计划二',
- level: '二级',
- status: 2,
- },
- {
- id: 3,
- name: '计划三',
- level: '三级',
- status: 3,
- },
- {
- id: 4,
- name: '计划四',
- level: '二级',
- status: 2,
- },
- {
- id: 5,
- name: '计划五',
- level: '三级',
- status: 3,
- },
- ],
+ listData: [],
+ // scrollList: [
+ // {
+ // id: 1,
+ // name: '计划一',
+ // level: '一级',
+ // status: 1,
+ // },
+ // {
+ // id: 2,
+ // name: '计划二',
+ // level: '二级',
+ // status: 2,
+ // },
+ // {
+ // id: 3,
+ // name: '计划三',
+ // level: '三级',
+ // status: 3,
+ // },
+ // {
+ // id: 4,
+ // name: '计划四',
+ // level: '二级',
+ // status: 2,
+ // },
+ // {
+ // id: 5,
+ // name: '计划五',
+ // level: '三级',
+ // status: 3,
+ // },
+ // ],
}
},
watch: {
@@ -188,6 +204,8 @@ export default {
this.$nextTick(() => {
this.initChart()
})
+ } else {
+ this.getData2()
}
},
},
@@ -198,14 +216,55 @@ export default {
},
beforeDestroy() {},
methods: {
- initChart() {
- this.chart = echarts.init(this.$refs.chart)
- this.setOptions()
+ getData() {
+ this.request({
+ 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({
tooltip: {
- // trigger: 'axis',
+ trigger: 'axis',
// formatter: '{a1}
{b1}：{c1}',
},
legend: {
@@ -223,7 +282,7 @@ export default {
bottom: 10,
},
xAxis: {
- data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'],
+ data: titList,
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
@@ -278,23 +337,12 @@ export default {
},
],
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: '数量',
type: 'bar',
barWidth: 30,
position: [0, 0],
- data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
+ data: completedNum,
itemStyle: {
color: {
type: 'linear', // 线性渐变
@@ -322,15 +370,19 @@ export default {
symbolSize: [30, 4],
symbolOffset: [0, 0],
position: [0, 0],
+ yAxisIndex: 1,
itemStyle: {
color: '#F6D97E',
},
- data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
+ data: rate,
},
],
})
},
},
+ created() {
+ this.getData()
+ },
}
diff --git a/src/views/bigScreen/information/left2.vue b/src/views/bigScreen/information/left2.vue
index e9bced6..b78f07a 100644
--- a/src/views/bigScreen/information/left2.vue
+++ b/src/views/bigScreen/information/left2.vue
@@ -51,14 +51,47 @@ export default {
},
methods: {
initChart() {
- this.chart = echarts.init(this.$refs.chart)
- this.setOptions()
+ this.request({
+ 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({
title: [
{
- text: 'PDM系统',
+ text: titList[0],
left: '9%',
bottom: 5,
textStyle: {
@@ -70,7 +103,7 @@ export default {
},
},
{
- text: 'MES系统',
+ text: titList[1],
left: '34%',
bottom: 5,
textStyle: {
@@ -82,7 +115,7 @@ export default {
},
},
{
- text: '质量管理系统',
+ text: titList[2],
left: '58%',
bottom: 5,
textStyle: {
@@ -94,7 +127,7 @@ export default {
},
},
{
- text: 'ERP系统',
+ text: titList[3],
left: '85%',
bottom: 5,
textStyle: {
@@ -119,14 +152,15 @@ export default {
color: ['#5B8FF9', '#5AD8A6'],
radar: [
{
- indicator: [
- { name: '登陆频次', max: 6500, axisLabel: { show: true }, color: '#fff' },
- { name: '指标二', max: 16000 },
- { name: '指标三', max: 30000 },
- { name: '指标四', max: 38000 },
- { name: '指标五', max: 52000 },
- { name: '指标六', max: 25000 },
- ],
+ indicator: titData[0],
+ // indicator: [
+ // { name: '登陆频次', max: 6500, axisLabel: { show: true }, color: '#fff' },
+ // { name: '指标二', max: 16000, color: '#fff' },
+ // { name: '指标三', max: 30000, color: '#fff' },
+ // { name: '指标四', max: 38000, color: '#fff' },
+ // { name: '指标五', max: 52000, color: '#fff' },
+ // { name: '指标六', max: 25000, color: '#fff' },
+ // ],
center: ['12.5%', '50%'],
radius: 70,
// name: {
@@ -141,104 +175,99 @@ export default {
// },
},
{
- indicator: [
- { name: '登陆频次', max: 6500, axisLabel: { show: true } },
- { name: '指标二', max: 16000 },
- { name: '指标三', max: 30000 },
- { name: '指标四', max: 38000 },
- { name: '指标五', max: 52000 },
- { name: '指标六', max: 25000 },
- ],
+ indicator: titData[1],
radius: 70,
center: ['37.5%', '50%'],
},
{
- indicator: [
- { name: '登陆频次', max: 6500, axisLabel: { show: true } },
- { name: '指标二', max: 16000 },
- { name: '指标三', max: 30000 },
- { name: '指标四', max: 38000 },
- { name: '指标五', max: 52000 },
- { name: '指标六', max: 25000 },
- ],
+ indicator: titData[2],
center: ['62.5%', '50%'],
radius: 70,
},
{
- indicator: [
- { name: '登陆频次', max: 6500, axisLabel: { show: true } },
- { name: '指标二', max: 16000 },
- { name: '指标三', max: 30000 },
- { name: '指标四', max: 38000 },
- { name: '指标五', max: 52000 },
- { name: '指标六', max: 25000 },
- ],
+ indicator: titData[3],
center: ['87.5%', '50%'],
radius: 70,
},
],
series: [
- {
- type: 'radar',
- data: [
- {
- value: [4200, 3000, 20000, 35000, 50000, 18000],
- name: '当月',
- label: {
- normal: {
- // show: true,
- color: '#fff',
- },
+ ...titData.map((e, index) => {
+ return {
+ type: 'radar',
+ radarIndex: index,
+ data: [
+ {
+ value: month[index],
+ name: '当月',
},
- },
- {
- value: [5000, 14000, 28000, 26000, 42000, 21000],
- name: '累积',
- },
- ],
- },
- {
- type: 'radar',
- radarIndex: 1,
- data: [
- {
- value: [4200, 3000, 20000, 35000, 50000, 18000],
- name: '当月',
- },
- {
- value: [5000, 14000, 28000, 26000, 42000, 21000],
- name: '累积',
- },
- ],
- },
- {
- type: 'radar',
- radarIndex: 2,
- data: [
- {
- 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: '累积',
- },
- ],
- },
+ {
+ value: monthTotal[index],
+ name: '累积',
+ },
+ ],
+ }
+ }),
+ // {
+ // type: 'radar',
+ // data: [
+ // {
+ // value: month[0],
+ // name: '当月',
+ // label: {
+ // normal: {
+ // // show: true,
+ // color: '#fff',
+ // },
+ // },
+ // },
+ // {
+ // value: monthTotal[0],
+ // name: '累积',
+ // },
+ // ],
+ // },
+ // {
+ // type: 'radar',
+ // radarIndex: 1,
+ // data: [
+ // {
+ // value: [4200, 3000, 20000, 35000, 50000, 18000],
+ // name: '当月',
+ // },
+ // {
+ // value: [5000, 14000, 28000, 26000, 42000, 21000],
+ // name: '累积',
+ // },
+ // ],
+ // },
+ // {
+ // type: 'radar',
+ // radarIndex: 2,
+ // data: [
+ // {
+ // 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: '累积',
+ // },
+ // ],
+ // },
],
})
},
diff --git a/src/views/bigScreen/information/right1.vue b/src/views/bigScreen/information/right1.vue
index b434ef6..77e5984 100644
--- a/src/views/bigScreen/information/right1.vue
+++ b/src/views/bigScreen/information/right1.vue
@@ -9,6 +9,20 @@
+
+
+
+
@@ -30,22 +44,20 @@
}"
>
- -
+
-
{{ item.id }}
- {{ item.name }}
- 部门一
- 2021-12-12
+ {{ item.planName }}
+ {{ item.deptName }}
+ {{ item.todayDate }}
- ·
- ·
- ·
- 已完成
- 未完成
- 未开始
+ ·
+ 已完成
+ 未完成
@@ -82,6 +94,7 @@ export default {
data() {
return {
chart: null,
+ value: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),
chart2: null,
data: [
{ value: 154, name: '类别一' },
@@ -94,7 +107,7 @@ export default {
{ value: 679, name: '类别八' },
],
colorList,
- listData: [1, 2, 3, 4, 5, 6, 7, 8],
+ listData: [],
scrollList: [
{
id: 1,
@@ -136,14 +149,36 @@ export default {
})
},
methods: {
- initChart() {
- this.chart = echarts.init(this.$refs.chart)
- this.setOptions()
+ getData() {
+ this.request({
+ 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({
tooltip: {
- // trigger: 'axis',
+ trigger: 'axis',
// formatter: '{a1}
{b1}：{c1}',
},
legend: {
@@ -161,20 +196,7 @@ export default {
bottom: 50,
},
xAxis: {
- data: [
- '2021-01',
- '2021-02',
- '2021-03',
- '2021-04',
- '2021-05',
- '2021-06',
- '2021-07',
- '2021-08',
- '2021-09',
- '2021-10',
- '2021-11',
- '2021-12',
- ],
+ data: month,
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
@@ -184,7 +206,10 @@ export default {
dataZoom: {
type: 'slider',
start: 0,
- end: 50,
+ end: this.dataZoomEnd(month.length, 5),
+ textStyle: {
+ color: '#fff',
+ },
},
color: ['#ccc', 'red'],
yAxis: [
@@ -238,7 +263,8 @@ export default {
itemStyle: {
color: 'rgba(85, 197, 162, .3)',
},
- data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
+ yAxisIndex: 1,
+ data: rate,
},
{
name: '数量',
@@ -248,7 +274,7 @@ export default {
itemStyle: {
color: 'rgba(90, 216, 166, 0.85)',
},
- data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
+ data: total,
},
// {
// name: '目标',
@@ -266,13 +292,31 @@ export default {
})
},
initLine() {
- this.chart2 = echarts.init(this.$refs.chart2)
- this.setOptions2()
+ this.request({
+ 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({
tooltip: {
- // trigger: 'axis',
+ trigger: 'axis',
// formatter: '{a1}
{b1}：{c1}',
},
legend: {
@@ -290,7 +334,7 @@ export default {
bottom: 50,
},
xAxis: {
- data: ['部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门'],
+ data: deptName,
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
@@ -300,7 +344,10 @@ export default {
dataZoom: {
type: 'slider',
start: 0,
- end: 50,
+ end: this.dataZoomEnd(deptName.length, 5),
+ textStyle: {
+ color: '#fff',
+ },
},
color: ['#ccc', 'red'],
yAxis: [
@@ -359,9 +406,10 @@ export default {
{
name: '数量',
type: 'bar',
- barWidth: 15,
+ barGap: '-100%',
+ barWidth: 30,
position: [0, 0],
- data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
+ data: total,
itemStyle: {
color: {
type: 'linear', // 线性渐变
@@ -387,17 +435,21 @@ export default {
type: 'scatter',
symbol: 'rect',
symbolSize: [30, 4],
- symbolOffset: [3, 0],
+ symbolOffset: [0, 0],
position: [0, 0],
itemStyle: {
color: '#F64F58',
},
- data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
+ yAxisIndex: 1,
+ data: rate,
},
],
})
},
},
+ created() {
+ this.getData()
+ },
}
diff --git a/src/views/chartList/page1/right3.vue b/src/views/chartList/page1/right3.vue
index 0ecfb2f..e1dd792 100644
--- a/src/views/chartList/page1/right3.vue
+++ b/src/views/chartList/page1/right3.vue
@@ -71,7 +71,7 @@
-
+