diff --git a/src/views/bigScreen/components/progress/index.vue b/src/views/bigScreen/components/progress/index.vue new file mode 100644 index 0000000..3427fbb --- /dev/null +++ b/src/views/bigScreen/components/progress/index.vue @@ -0,0 +1,26 @@ + + + diff --git a/src/views/bigScreen/drivingCabin/center.vue b/src/views/bigScreen/drivingCabin/center.vue index 8aad0fe..0efea1a 100644 --- a/src/views/bigScreen/drivingCabin/center.vue +++ b/src/views/bigScreen/drivingCabin/center.vue @@ -1,232 +1,202 @@ \ No newline at end of file + diff --git a/src/views/bigScreen/drivingCabin/conter.png b/src/views/bigScreen/drivingCabin/conter.png index 9c5b95d..6331ce8 100644 Binary files a/src/views/bigScreen/drivingCabin/conter.png and b/src/views/bigScreen/drivingCabin/conter.png differ diff --git a/src/views/bigScreen/drivingCabin/icon1.png b/src/views/bigScreen/drivingCabin/icon1.png new file mode 100644 index 0000000..17d4713 Binary files /dev/null and b/src/views/bigScreen/drivingCabin/icon1.png differ diff --git a/src/views/bigScreen/drivingCabin/icon2.png b/src/views/bigScreen/drivingCabin/icon2.png new file mode 100644 index 0000000..532a873 Binary files /dev/null and b/src/views/bigScreen/drivingCabin/icon2.png differ diff --git a/src/views/bigScreen/drivingCabin/icon3.png b/src/views/bigScreen/drivingCabin/icon3.png new file mode 100644 index 0000000..8b69b71 Binary files /dev/null and b/src/views/bigScreen/drivingCabin/icon3.png differ diff --git a/src/views/bigScreen/drivingCabin/icon4.png b/src/views/bigScreen/drivingCabin/icon4.png new file mode 100644 index 0000000..951022e Binary files /dev/null and b/src/views/bigScreen/drivingCabin/icon4.png differ diff --git a/src/views/bigScreen/drivingCabin/index.vue b/src/views/bigScreen/drivingCabin/index.vue index e06223e..6fc45f7 100644 --- a/src/views/bigScreen/drivingCabin/index.vue +++ b/src/views/bigScreen/drivingCabin/index.vue @@ -1,29 +1,27 @@ \ No newline at end of file + diff --git a/src/views/bigScreen/drivingCabin/left1.vue b/src/views/bigScreen/drivingCabin/left1.vue index d4d7876..a7de00e 100644 --- a/src/views/bigScreen/drivingCabin/left1.vue +++ b/src/views/bigScreen/drivingCabin/left1.vue @@ -6,22 +6,25 @@
- +
+ · + 总完成任务/完成率 + 55/80% + + +
-
+
+
@@ -30,8 +33,11 @@ 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 {Liquid} from '@antv/g2plot'; // import resize from '../../dashboard/mixins/resize' +import echarts from 'echarts' +require('echarts/theme/macarons') // echarts theme export default { // mixins: [resize], name: 'left1', @@ -39,73 +45,11 @@ export default { rocketTit, container2, bigScreenTabs, + progressBar, }, data() { return { index: 0, - - data: [ - { - year: '2021-01', - value: ~~(Math.random() * 100), - category: '部门一', - }, - { - year: '2021-02', - value: ~~(Math.random() * 100), - category: '部门一', - }, - { - year: '2021-03', - value: ~~(Math.random() * 100), - category: '部门一', - }, - { - year: '2021-04', - value: ~~(Math.random() * 100), - category: '部门一', - }, - { - year: '2021-05', - value: ~~(Math.random() * 100), - category: '部门一', - }, - { - year: '2021-06', - value: ~~(Math.random() * 100), - category: '部门一', - }, - { - year: '2021-01', - value: ~~(Math.random() * 100), - category: '部门二', - }, - { - year: '2021-02', - value: ~~(Math.random() * 100), - category: '部门二', - }, - { - year: '2021-03', - value: ~~(Math.random() * 100), - category: '部门二', - }, - { - year: '2021-04', - value: ~~(Math.random() * 100), - category: '部门二', - }, - { - year: '2021-05', - value: ~~(Math.random() * 100), - category: '部门二', - }, - { - year: '2021-06', - value: ~~(Math.random() * 100), - category: '部门二', - }, - ], } }, mounted() { @@ -117,140 +61,145 @@ export default { beforeDestroy() {}, methods: { initChart() { - const { Liquid, Pie } = G2Plot - const data = [ - { type: '类别一', value: 235 }, - { type: '类别二', value: 565 }, - { type: '类别三', value: 927 }, - { type: '类别四', value: 574 }, - { type: '类别五', value: 214 }, - { type: '类别六', value: 214 }, - { type: '类别七', value: 214 }, - { type: '类别八', value: 214 }, - { type: '类别九', value: 214 }, - { type: '类别十', value: 214 }, - ] - const calcAverageValue = (data, type) => { - const items = data.filter(d => d.type === type) - return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-' - } - const liquidPlot = new Pie(this.$refs.left1, { - data: data, - angleField: 'value', - colorField: 'type', + this.chart = echarts.init(this.$refs.left1, 'macarons') + this.setOptions() + }, + setOptions() { + this.chart.setOption({ + tooltip: { + trigger: 'item', + formatter: '{a}
{b}: {c} ({d}%)', + }, legend: { - itemHeight: 13, - pageNavigator: { - marker: { - style: { - // 非激活，不可点击态时的填充色设置 - inactiveFill: '#fff', - inactiveOpacity: 0.45, - // 默认填充色设置 - fill: '#fff', - opacity: 0.8, - size: 12, - }, - }, - text: { - style: { - fill: '#fff', - fontSize: 8, - }, - }, - }, - offsetX: -30, - itemName: { - style: { - fill: '#fff', - }, - }, - itemValue: { - formatter: (text, item) => { - return calcAverageValue(data, item.value) - }, - style: (item, index) => { - return { - fill: '#fff', - } - }, + data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'], + orient: 'vertical', + // left: '60%', + right: '2%', + y: 'center', + textStyle: { + //图例文字的样式 + color: '#fff', + fontSize: 16, }, }, - // legend: { - // position: 'right-top', - // offsetX: 8, - // title: { - // text: '产品类别 (平均销售量）', - // spacing: 8, - // }, - // itemName: { - // style: (item, index) => { - // return { - // fill: calcAverageValue(data, item.value) > 10000 ? 'red' : 'green', - // }; - // }, - // }, - // itemValue: { - // formatter: (text, item) => { - // return calcAverageValue(data, item.value); - // }, - // style: (item, index) => { - // return { - // fill: calcAverageValue(data, item.value) > 10000 ? 'red' : 'green', - // }; - // }, - // }, - // }, - color: ['#4e7cde', '#4eba97', '#506186', '#d2a31d', '#c65a49'], - radius: 0.9, - label: { - type: 'inner', - offset: '-30%', - content: ({ percent }) => `${(percent * 100).toFixed(0)}%`, - style: { - fontSize: 14, - textAlign: 'center', + series: [ + { + name: '概括', + type: 'pie', + radius: [0, '85%'], + center: ['35%', '50%'], + label: { + formatter: '{d}%', + position: 'inner', + fontSize: 14, + }, + 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: '类别八' }, + ], }, - }, - interactions: [{ type: 'element-active' }], - pieStyle: { - lineWidth: 0, - }, + ], }) - // const liquidPlot = new Liquid(this.$refs.left1, { - // percent: 0.25, - // statistic: { - // content: { - // style: { - // color: 'rgb(255,255,255)', - // fontSize: 18, - // }, - // customHtml: (container, view, { percent }) => { - // const text = `总体
完成情况 ${(percent * 100).toFixed(0)}%`; - // return `
${text}
`; - // }, - // } - // }, - // outline: { - // border: 4, - // style: { - // stroke: 'l(0) 0:rgba(89, 184, 244, 1) 0.5:rgba(106, 232, 216, 1) 1:rgba(88, 151, 240, 1)' - // } - // }, - // wave: { - // length: 128, - // }, - // }); - console.log(liquidPlot.render()) - // liquidPlot.render(); }, initLine() { - const { Line } = G2Plot - let arr = this.data - const line = new Line(this.$refs.left2, { - // + this.chart = echarts.init(this.$refs.left2) + this.setOptions2() + }, + setOptions2() { + this.chart.setOption({ + tooltip: { + trigger: 'axis', + formatter: '{a1}
{b1}：{c1}%', + }, + legend: { + data: ['收入', '实际', '目标'], + textStyle: { + color: '#fff', //legend字体颜色 + }, + }, + grid: { + containLabel: true, + left: 50, + top: 30, + bottom: 50, + }, + xAxis: { + data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08'], + axisLine: { + lineStyle: { + color: 'rgb(255, 255, 255)', + }, + }, + }, + dataZoom: { + type: 'slider', + start: 0, + end: 50, + }, + color: ['#ccc', 'red'], + yAxis: { + splitLine: { + show: true, + // 改变轴线颜色 + lineStyle: { + // 使用深浅的间隔色 + color: ['rgba(255, 255, 255,.5)'], + }, + }, + axisLabel: { + formatter: '{value}%', + }, + axisLine: { + lineStyle: { + color: 'rgb(255, 255, 255)', + }, + }, + }, + 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: 15, + position: [0, 0], + itemStyle: { + color: 'rgba(90, 216, 166, 0.85)', + }, + data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95], + }, + { + 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], + }, + ], }) - // line.render() }, }, } @@ -262,6 +211,16 @@ export default { flex-direction: column; height: 100%; width: 100%; + .box { + padding: 0 0 5px 15px; + display: flex; + align-items: center; + .num { + font-size: 24px; + font-weight: 600; + margin: 0 10px; + } + } } .content1 { @@ -270,33 +229,10 @@ export default { .chart1 { margin: 0 auto; - // width: 192px; width: 100%; height: 192px; background: transparent; } - - .record { - display: flex; - align-items: center; - height: 192px; - padding-left: 30px; - > div { - flex: 1; - position: relative; - ::before { - content: ''; - display: inline-block; - width: 9px; - height: 9px; - background: #ffffff; - border-radius: 50%; - position: absolute; - left: -18px; - top: 18px; - } - } - } } .num { @@ -311,19 +247,11 @@ export default { .content2 { padding: 20px; flex: 1; + height: 100%; box-sizing: border-box; display: flex; flex-direction: column; - - .titWrap { - height: 30px; - } - - .tabContent { - flex: 1; - } - .tabContent > div { - width: 100%; + .chart2 { height: 100%; } diff --git a/src/views/bigScreen/drivingCabin/right1.vue b/src/views/bigScreen/drivingCabin/right1.vue index 9af5c77..e5a66f7 100644 --- a/src/views/bigScreen/drivingCabin/right1.vue +++ b/src/views/bigScreen/drivingCabin/right1.vue @@ -1,93 +1,285 @@