首页left1

This commit is contained in:
熊丽君
2021-12-08 14:13:08 +08:00
parent 6895a51323
commit cc2569e366
6 changed files with 494 additions and 371 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<container3> <container3>
<img class="img" src="./conter.png" style="width: 100%;height:100%"> <img class="img" src="./conter2.jpg" style="width: 100%;height:100%">
<rocketTit class="tit">今日动态</rocketTit> <rocketTit class="tit">今日动态</rocketTit>
<div class="data"> <div class="data">
<div class="data-item"> <div class="data-item">

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -0,0 +1,104 @@
<template>
<div class="container2">
<div class="tit">
<rocketTit>{{title}}</rocketTit>
<div class="datePicker">
<slot name="datePicker"></slot>
</div>
</div>
<div class="content">
<div class="snap">
<slot name="snap"></slot>
</div>
<slot />
</div>
</div>
</template>
<script>
import rocketTit from "../../../components/rocketTit/index.vue";
export default {
name: 'Container2',
components: {
rocketTit,
},
props: {
title: {
type: String,
default: '',
},
selected: {
type: Boolean,
default: false,
},
},
data () {
return {
}
},
}
</script>
<style lang="scss" scoped>
.container2 {
display: flex;
flex-direction: column;
width: 538px;
height: 288px;
background-image: url(./bg.png);
background-size: cover;
color: #ffffff;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
.tit {
padding: 16px 16px 16px 24px;
position: relative;
.datePicker {
position: absolute;
right: 16px;
top: 12px;
::v-deep .el-date-editor {
border-radius: 0;
box-shadow: none !important;
border: 1px solid rgba(255, 255, 255, 0.2);
vertical-align: middle;
color: #fff;
background-color: transparent;
.el-range-input,
.el-range-separator {
color: #fff;
}
.el-range-editor.is-active {
border-color: #fff !important;
}
input {
background-color: transparent;
}
}
}
}
.content {
flex: 1;
padding: 2px;
box-sizing: border-box;
overflow: hidden;
position: relative;
.snap {
position: absolute;
top: 20px;
left: 25px;
font-weight: 300;
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 432 KiB

View File

@ -1,39 +1,35 @@
<template> <template>
<div>
<container2 title="经营责任书完成概况"> <container2 title="经营责任书完成概况">
<div class="wrap"> <div class="wrap">
<el-row class="content1"> <el-row class="content1">
<el-col :span="12"> <el-col :span="24">
<div id="left1" ref="left1" class="chart1"></div> <div id="left1" ref="left1" class="chart1"></div>
</el-col> </el-col>
<el-col :span="12"> <!-- <el-col :span="12">
<div class="record"> <div class="record">
<div>0进展指标 <span class="num">2</span></div> <div>0进展指标 <span class="num">2</span></div>
</div> </div>
</el-col> </el-col> -->
</el-row> </el-row>
<el-row class="content2">
<el-row class="titWrap">
<el-col :span="12" class="tit">责任书各类完成情况百分比</el-col>
<el-col :span="12" style="text-align:right">
<bigScreenTabs v-model="index" :titleArr="['部门', '类型']"></bigScreenTabs>
</el-col>
</el-row>
<div class="tabContent" v-show="index == 0">
<div id="left2"></div>
</div>
<div class="tabContent" v-show="index == 1">
<div id="left3"></div>
</div>
</el-row>
</div> </div>
</container2> </container2>
<container2 title="收入概况" style="margin-top: 10px">
<div class="wrap">
<el-row class="content2">
<el-col :span="24">
<div id="left2" ref="left2" class="chart2"></div>
</el-col>
</el-row>
</div>
</container2>
</div>
</template> </template>
<script> <script>
import rocketTit from "../components/rocketTit/index.vue"; import rocketTit from '../components/rocketTit/index.vue'
import container2 from "../components/container2/index.vue"; import container2 from './components/container2/index.vue'
import bigScreenTabs from "../components/bigScreenTabs/index.vue"; import bigScreenTabs from '../components/bigScreenTabs/index.vue'
// import {Liquid} from '@antv/g2plot'; // import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize' // import resize from '../../dashboard/mixins/resize'
export default { export default {
@ -44,217 +40,219 @@ export default {
container2, container2,
bigScreenTabs, bigScreenTabs,
}, },
data () { data() {
return { return {
index: 0, index: 0,
data: [ data: [
{ {
"year": "2021-01", year: '2021-01',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门一" category: '部门一',
}, },
{ {
"year": "2021-02", year: '2021-02',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门一" category: '部门一',
}, },
{ {
"year": "2021-03", year: '2021-03',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门一" category: '部门一',
}, },
{ {
"year": "2021-04", year: '2021-04',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门一" category: '部门一',
}, },
{ {
"year": "2021-05", year: '2021-05',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门一" category: '部门一',
}, },
{ {
"year": "2021-06", year: '2021-06',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门一" category: '部门一',
}, },
{ {
"year": "2021-01", year: '2021-01',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门二" category: '部门二',
}, },
{ {
"year": "2021-02", year: '2021-02',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门二" category: '部门二',
}, },
{ {
"year": "2021-03", year: '2021-03',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门二" category: '部门二',
}, },
{ {
"year": "2021-04", year: '2021-04',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门二" category: '部门二',
}, },
{ {
"year": "2021-05", year: '2021-05',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门二" category: '部门二',
}, },
{ {
"year": "2021-06", year: '2021-06',
"value": ~~(Math.random() * 100), value: ~~(Math.random() * 100),
"category": "部门二" category: '部门二',
}, },
] ],
} }
}, },
mounted () { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart()
this.initLine() this.initLine()
}) })
}, },
beforeDestroy () { beforeDestroy() {},
},
methods: { methods: {
initChart () { initChart() {
const { Liquid } = G2Plot; const { Liquid, Pie } = G2Plot
const liquidPlot = new Liquid(this.$refs.left1, { const data = [
percent: 0.25, { type: '类别一', value: 235 },
statistic: { { type: '类别二', value: 565 },
content: { { 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',
legend: {
itemHeight: 13,
pageNavigator: {
marker: {
style: { style: {
color: 'rgb(255,255,255)', // 非激活,不可点击态时的填充色设置
fontSize: 18, inactiveFill: '#fff',
inactiveOpacity: 0.45,
// 默认填充色设置
fill: '#fff',
opacity: 0.8,
size: 12,
}, },
customHtml: (container, view, { percent }) => {
const text = `总体<br/>完成情况 ${(percent * 100).toFixed(0)}%`;
return `<div>${text}</div>`;
}, },
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',
} }
}, },
outline: { },
border: 4, },
// 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: { style: {
stroke: 'l(0) 0:rgba(89, 184, 244, 1) 0.5:rgba(106, 232, 216, 1) 1:rgba(88, 151, 240, 1)' fontSize: 14,
} textAlign: 'center',
}, },
wave: {
length: 128,
}, },
}); 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 = `总体<br/>完成情况 ${(percent * 100).toFixed(0)}%`;
// return `<div>${text}</div>`;
// },
// }
// },
// 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()) console.log(liquidPlot.render())
// liquidPlot.render(); // liquidPlot.render();
}, },
initLine () { initLine() {
const { Line } = G2Plot; const { Line } = G2Plot
let arr = this.data; let arr = this.data
const line = new Line('left2', { const line = new Line(this.$refs.left2, {
data: arr, //
xField: 'year', })
yField: 'value', line.render()
padding: 'auto',
seriesField: 'category',
legend: {
position: 'top',
title: {
style: {
color: '#ffffff'
}
},
itemName: {
style: {
fill: '#ffffff'
}
}
},
// 配置折线趋势填充
area: {
style: {
fillOpacity: 0.15,
}, },
}, },
xAxis: {
type: 'time',
label: {
// 数值格式化为千分位
style: {
stroke: 'rgba(145, 213, 254, 0.1)',
fill: '#ffffff',
}
},
},
yAxis: {
label: {
// 数值格式化为千分位
formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
style: {
stroke: 'rgba(145, 213, 254, 0.1)',
fill: '#ffffff',
}
},
grid: {
line: {
style: {
stroke: 'rgba(145, 213, 254, 0.1)',
fill: '#ffffff',
lineWidth: 2,
lineDash: [4, 5],
strokeOpacity: 0,
cursor: 'pointer'
}
}
},
line: {
style: {
stroke: 'rgba(145, 213, 254, 0.1)',
fill: '#ffffff',
lineWidth: 2,
}
}
},
});
const line1 = new Line('left3', {
data: arr,
xField: 'year',
yField: 'value',
padding: 'auto',
seriesField: 'category',
legend: {
position: 'top',
title: {
style: {
color: '#ffffff'
}
}
},
// 配置折线趋势填充
area: {
style: {
fillOpacity: 0.15,
},
},
xAxis: {
type: 'time',
},
yAxis: {
label: {
// 数值格式化为千分位
formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
},
},
});
line.render();
line1.render();
}
}
} }
</script> </script>
@ -267,10 +265,13 @@ export default {
} }
.content1 { .content1 {
height: 200px; // height: 200px;
height: 100%;
.chart1 { .chart1 {
margin: 0 auto; margin: 0 auto;
width: 192px; // width: 192px;
width: 100%;
height: 192px; height: 192px;
background: transparent; background: transparent;
} }
@ -284,7 +285,7 @@ export default {
flex: 1; flex: 1;
position: relative; position: relative;
::before { ::before {
content: ""; content: '';
display: inline-block; display: inline-block;
width: 9px; width: 9px;
height: 9px; height: 9px;
@ -336,7 +337,7 @@ export default {
padding-left: 15px; padding-left: 15px;
} }
.tit::after { .tit::after {
content: ""; content: '';
display: block; display: block;
position: absolute; position: absolute;
top: 3px; top: 3px;

View File

@ -1,6 +1,29 @@
<template> <template>
<div> <div>
<rocketTit style="margin-bottom: 9px">生产动态</rocketTit> <container2 title="经营责任书完成概况">
<div class="wrap">
<el-row class="content1">
<el-col :span="24">
<div id="left1" ref="left1" class="chart1"></div>
</el-col>
<!-- <el-col :span="12">
<div class="record">
<div>0进展指标 <span class="num">2</span></div>
</div>
</el-col> -->
</el-row>
</div>
</container2>
<container2 title="收入概况" style="margin-top: 10px">
<div class="wrap">
<el-row class="content2">
<el-col :span="24">
<div id="left2" ref="left2" class="chart2"></div>
</el-col>
</el-row>
</div>
</container2>
<!-- <rocketTit style="margin-bottom: 9px">生产动态</rocketTit>
<container4> <container4>
<el-row style="height: 100%"> <el-row style="height: 100%">
<el-col :span="12" style="height: 100%"> <el-col :span="12" style="height: 100%">
@ -20,14 +43,13 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</container4> </container4> -->
</div> </div>
</template> </template>
<script> <script>
import rocketTit from "../components/rocketTit/index.vue"; import rocketTit from '../components/rocketTit/index.vue'
import container4 from "../components/container4/index.vue"; import container4 from '../components/container4/index.vue'
import resize from '../../dashboard/mixins/resize' import resize from '../../dashboard/mixins/resize'
export default { export default {
@ -37,16 +59,12 @@ export default {
rocketTit, rocketTit,
container4, container4,
}, },
data () { data() {
return {} return {}
}, },
mounted () { mounted() {},
beforeDestroy() {},
}, methods: {},
beforeDestroy () {
},
methods: {
}
} }
</script> </script>
@ -59,7 +77,7 @@ export default {
padding: 10px 0 10px 0; padding: 10px 0 10px 0;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
font-size: 14px; font-size: 14px;
.num { .num {
font-size: 30px; font-size: 30px;
font-family: Roboto-Black, Roboto; font-family: Roboto-Black, Roboto;