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/conter2.jpg b/src/views/bigScreen/drivingCabin/conter2.jpg deleted file mode 100644 index 57027a6..0000000 Binary files a/src/views/bigScreen/drivingCabin/conter2.jpg and /dev/null 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/left1.vue b/src/views/bigScreen/drivingCabin/left1.vue index d4d7876..f1b3034 100644 --- a/src/views/bigScreen/drivingCabin/left1.vue +++ b/src/views/bigScreen/drivingCabin/left1.vue @@ -6,12 +6,14 @@
- +
+ · + 总完成任务/完成率 + 55/80% + + +
@@ -30,6 +32,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 {Liquid} from '@antv/g2plot'; // import resize from '../../dashboard/mixins/resize' export default { @@ -39,74 +42,10 @@ 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: '部门二', - }, - ], - } + return {} }, mounted() { this.$nextTick(() => { @@ -117,18 +56,18 @@ export default { beforeDestroy() {}, methods: { initChart() { - const { Liquid, Pie } = G2Plot + const { 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 }, + { type: '类别一', value: Math.round(Math.random() * 100) }, + { type: '类别二', value: Math.round(Math.random() * 100) }, + { type: '类别三', value: Math.round(Math.random() * 100) }, + { type: '类别四', value: Math.round(Math.random() * 100) }, + { type: '类别五', value: Math.round(Math.random() * 100) }, + { type: '类别六', value: Math.round(Math.random() * 100) }, + { type: '类别七', value: Math.round(Math.random() * 100) }, + { type: '类别八', value: Math.round(Math.random() * 100) }, + { type: '类别九', value: Math.round(Math.random() * 100) }, + { type: '类别十', value: Math.round(Math.random() * 100) }, ] const calcAverageValue = (data, type) => { const items = data.filter(d => d.type === type) @@ -217,40 +156,42 @@ export default { 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(); + liquidPlot.render() }, initLine() { - const { Line } = G2Plot - let arr = this.data - const line = new Line(this.$refs.left2, { - // + const { Column } = G2Plot + const column = new Column(this.$refs.left2, { + data: [ + { 城市: '七台河', 销售额: 52827.32 }, + { 城市: '万县', 销售额: 16921.576 }, + { 城市: '三亚', 销售额: 22698.396 }, + { 城市: '三岔子', 销售额: 3262.98 }, + { 城市: '三明', 销售额: 1458.8 }, + { 城市: '上梅', 销售额: 11704.476 }, + { 城市: '上海', 销售额: 58245.567999 }, + { 城市: '上虞', 销售额: 10672.872 }, + { 城市: '东丰', 销售额: 1785.84 }, + { 城市: '东村', 销售额: 13692.14 }, + { 城市: '东海', 销售额: 4508.28 }, + { 城市: '东胜', 销售额: 12766.068 }, + { 城市: '东莞', 销售额: 10165.89 }, + { 城市: '东营', 销售额: 17153.92 }, + { 城市: '东台', 销售额: 2789.892 }, + { 城市: '东宁', 销售额: 2706.2 }, + ], + xField: '城市', + yField: '销售额', + xAxis: { + label: { + autoRotate: false, + }, + }, + slider: { + start: 0, + end: 0.5, + }, }) - // line.render() + column.render() }, }, } @@ -262,6 +203,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 { @@ -314,6 +265,13 @@ export default { box-sizing: border-box; display: flex; flex-direction: column; + height: 100%; + .chart2 { + margin: 0 auto; + width: 100%; + height: 192px; + background: transparent; + } .titWrap { height: 30px; diff --git a/src/views/bigScreen/drivingCabin/right1.vue b/src/views/bigScreen/drivingCabin/right1.vue index 9af5c77..345aafc 100644 --- a/src/views/bigScreen/drivingCabin/right1.vue +++ b/src/views/bigScreen/drivingCabin/right1.vue @@ -1,15 +1,22 @@