diff --git a/src/views/bigScreen/management/center.vue b/src/views/bigScreen/management/center.vue index 99a3809..56c48ef 100644 --- a/src/views/bigScreen/management/center.vue +++ b/src/views/bigScreen/management/center.vue @@ -2,6 +2,9 @@
+
+ +
收入
3380/12342万
@@ -17,22 +20,55 @@
-
装药量
-
999/12342万件
+
EVA
+
999/12342万
-
-
交付数量
-
999/12342万件
-
- +
+
两金
+
+
+
+ 999/12342万 +
+ 产成品 +
+ +
+
+
+
+ 999/12342万 +
+ 应收账款 +
+ +
+
-
-
+
+ 部门收入完成率 + + + +
+
+
+
+ 成本分析 + + +
+ + +
+ + +
@@ -40,7 +76,10 @@ diff --git a/src/views/bigScreen/management/right1.vue b/src/views/bigScreen/management/right1.vue index cbe1475..e230a18 100644 --- a/src/views/bigScreen/management/right1.vue +++ b/src/views/bigScreen/management/right1.vue @@ -2,11 +2,114 @@
- +
+
+
+
·总体完成率
+ + 80% +
+
+
+
+
+
·总体完成率
+ + 80% +
+
- - + + + + + 序号 + 项目名称 + 负责人 + 团队 + 完成情况 + + + +
    +
  • + + {{ item.id }} + XX开发项目 + 闵茗 + 部门一 + +
    + · + · + · + 已完成 + 未完成 + 进行中 +
    +     +     +
    • +
+ + + + + + 序号 + 部门 + 公示内容 + 时间 + + + +
    +
  • + + {{ item.id }} + 部门一 + 易燃作业 + 2021-12-12 + +
    • +
+ +
@@ -16,6 +119,7 @@ import rocketTit from '../components/rocketTit/index.vue' import container2 from './components/container2/index.vue' import bigScreenTabs from '../components/bigScreenTabs/index.vue' import progressBar from '@/views/bigScreen/components/progress/index.vue' +import vueSeamlessScroll from 'vue-seamless-scroll' import colorList from '@/utils/colorPalette' // import {Liquid} from '@antv/g2plot'; // import resize from '../../dashboard/mixins/resize' @@ -23,147 +127,127 @@ import echarts from 'echarts' require('echarts/theme/macarons') // echarts theme export default { // mixins: [resize], - name: 'left1', + name: 'right1', components: { rocketTit, container2, bigScreenTabs, progressBar, + vueSeamlessScroll, }, data() { return { index: 0, + index2: 0, colorList, + chart: null, + chart2: null, + 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, + }, + ], } }, mounted() { this.$nextTick(() => { this.initChart() - this.initLine() }) }, beforeDestroy() {}, + watch: { + index(newVal, oldVal) { + if (newVal == 0) { + this.chart2.dispose() + this.chart2 = null + this.$nextTick(() => { + this.initChart() + }) + } else { + this.chart.dispose() + this.chart = null + this.$nextTick(() => { + this.initLine() + }) + } + }, + }, methods: { initChart() { - this.chart = echarts.init(this.$refs.left1, 'macarons') + this.chart = echarts.init(this.$refs.chart) this.setOptions() }, setOptions() { - this.chart.setOption({ - tooltip: { - trigger: 'item', - formatter: '{a}
{b}: {c} ({d}%)', - }, - color: this.colorList, - legend: { - data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'], - orient: 'vertical', - // left: '60%', - right: '2%', - y: 'center', - textStyle: { - //图例文字的样式 - color: '#fff', - fontSize: 16, - }, - }, - series: [ - { - name: '概括', - type: 'pie', - radius: ['40%', '80%'], - center: ['35%', '50%'], - avoidLabelOverlap: false, - label: { - show: false, - position: 'center', - }, - emphasis: { - label: { - show: false, - fontSize: '40', - fontWeight: 'bold', - }, - }, - labelLine: { - show: false, - }, - data: [ - { value: 154, name: '型号一' }, - { value: 775, name: '型号二' }, - { value: 679, name: '型号三' }, - { value: 679, name: '型号四' }, - { value: 679, name: '型号五' }, - { value: 679, name: '型号六' }, - { value: 679, name: '型号七' }, - { value: 679, name: '型号八' }, - ], - }, - ], - }) - }, - initLine() { - this.chart = echarts.init(this.$refs.left2) - this.setOptions2() - }, - setOptions2() { this.chart.setOption({ tooltip: { trigger: 'axis', - formatter: '{a1}
{b1}：{c1}', + axisPointer: { + type: 'shadow', + }, }, legend: { - data: ['预测', '实际', '目标'], + data: ['综合', '绩效'], textStyle: { color: '#fff', //legend字体颜色 }, - // selectedMode: false, }, grid: { - containLabel: true, left: 20, - right: 10, + right: 20, top: 30, bottom: 50, - }, - xAxis: { - data: [ - '型号一', - '型号二', - '型号三', - '型号四', - '型号五', - '型号六', - '型号七', - '型号八', - '型号九', - '型号十', - '型号十一', - '型号十二', - '型号十三', - '型号十四', - '型号十五', - '型号十六', - '型号十七', - '型号十八', - '型号十九', - '型号二十', - ], - axisLine: { - lineStyle: { - color: 'rgb(255, 255, 255)', - }, - }, + containLabel: true, }, dataZoom: { type: 'slider', - start: 0, - end: 50, + // start: 0, + // end: 50, + textStyle: { + color: '#fff', + }, }, - color: ['#ccc', 'red'], + xAxis: [ + { + type: 'category', + data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'], + axisLine: { + lineStyle: { + color: 'rgb(255, 255, 255)', + }, + }, + }, + ], yAxis: [ { - name: '件', + name: '个', splitLine: { show: true, // 改变轴线颜色 @@ -204,38 +288,198 @@ export default { ], series: [ { - name: '预测', + name: '绩效', type: 'bar', - // z: '-1', - barGap: '-75%', + stack: 'Ad', + emphasis: { + focus: 'series', + }, + itemStyle: { + color: '#F64F58', + }, barWidth: 30, - itemStyle: { - color: 'rgba(85, 197, 162, .3)', - }, - data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30], + data: [150, 232, 201, 154, 190, 330, 410], }, { - name: '实际', + name: '综合', type: 'bar', - barWidth: 15, - position: [0, 0], - itemStyle: { - color: 'rgba(90, 216, 166, 0.85)', + stack: 'Ad', + emphasis: { + focus: 'series', }, - data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30], - }, - { - name: '目标', - type: 'scatter', - symbol: 'rect', - symbolSize: [30, 4], - symbolOffset: [3, 0], - position: [0, 0], itemStyle: { color: '#F6D97E', }, - data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90], + barWidth: 30, + data: [150, 232, 201, 154, 190, 330, 410], }, + { + name: '', + type: 'line', + smooth: false, + data: [500, 550, 700, 520, 650, 520, 550], + itemStyle: { + color: '#F6D97E', + }, + symbol: 'none', + }, + { + name: '', + type: 'line', + smooth: false, + itemStyle: { + color: '#F64F58', + }, + data: [600, 500, 700, 620, 750, 800, 600], + symbol: 'none', + }, + ], + }) + }, + initLine() { + this.chart2 = echarts.init(this.$refs.chart2) + this.setOptions2() + }, + setOptions2() { + this.chart2.setOption({ + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + }, + legend: { + data: ['综合', '绩效'], + textStyle: { + color: '#fff', //legend字体颜色 + }, + }, + grid: { + left: 20, + right: 20, + top: 30, + bottom: 50, + containLabel: true, + }, + dataZoom: { + type: 'slider', + // start: 0, + // end: 50, + textStyle: { + color: '#fff', + }, + }, + xAxis: [ + { + type: 'category', + data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'], + axisLine: { + lineStyle: { + color: 'rgb(255, 255, 255)', + }, + }, + }, + ], + yAxis: [ + { + name: '个', + splitLine: { + show: true, + // 改变轴线颜色 + lineStyle: { + // 使用深浅的间隔色 + color: ['rgba(255, 255, 255,.5)'], + }, + }, + axisLabel: { + formatter: '{value}', + }, + axisLine: { + lineStyle: { + color: 'rgb(255, 255, 255)', + }, + }, + }, + { + type: 'value', + min: 0, + max: 100, + interval: 20, + axisLabel: { + formatter: '{value} %', + }, + splitLine: { + show: false, //不显示网格线 + }, + splitArea: { + show: false, //不显示网格区域 + }, + axisLine: { + lineStyle: { + color: 'rgb(255, 255, 255)', + }, + }, + }, + ], + series: [ + { + name: '绩效', + type: 'bar', + stack: 'Ad', + emphasis: { + focus: 'series', + }, + itemStyle: { + color: '#F64F58', + }, + barWidth: 30, + data: [150, 232, 201, 154, 190, 330, 410], + }, + { + name: '综合', + type: 'bar', + stack: 'Ad', + emphasis: { + focus: 'series', + }, + itemStyle: { + color: '#F6D97E', + }, + barWidth: 30, + data: [150, 232, 201, 154, 190, 330, 410], + }, + { + name: '完成率', + type: 'scatter', + symbol: 'rect', + symbolSize: [30, 4], + symbolOffset: [0, 0], + position: [0, 0], + itemStyle: { + color: '#7EA7FC', + }, + data: [600, 650, 700, 750, 800, 750, 700], + }, + // { + // name: '', + // type: 'line', + // smooth: false, + // data: [500, 550, 700, 520, 650, 520, 550], + // itemStyle: { + // color: '#F6D97E', + // }, + // symbol: 'none', + // }, + // { + // name: '', + // type: 'line', + // smooth: false, + // itemStyle: { + // color: '#F64F58', + // }, + // data: [600, 500, 700, 620, 750, 800, 600], + // symbol: 'none', + // }, ], }) }, @@ -244,22 +488,50 @@ export default { diff --git a/src/views/bigScreen/securityManage/center.png b/src/views/bigScreen/securityManage/center.png index 88b5e78..703c4ba 100644 Binary files a/src/views/bigScreen/securityManage/center.png and b/src/views/bigScreen/securityManage/center.png differ