williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

大屏1

Browse Source
This commit is contained in:
hh
2021-12-08 08:44:16 +08:00
parent 3047f7f63e
commit 6895a51323
13 changed files with 456 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/bigScreen/drivingCabin/center.vue
View File

@ -1,8 +1,36 @@
<template>
<div>
<container3>
<img src="./conter.png" style="width: 100%;height:100%">
<div class="con_right">
<img class="img" src="./conter.png" style="width: 100%;height:100%">
<rocketTit class="tit">今日动态</rocketTit>
<div class="data">
<div class="data-item">
<div>收入</div>
<div><span class="num">3380</span>万</div>
</div>
<div class="data-item">
<div>支出</div>
<div><span class="num">3380</span>万</div>
</div>
<div class="data-item">
<div>合同</div>
<div><span class="num">3380</span>份</div>
</div>
<div class="data-item">
<div>装药任务</div>
<div><span class="num">3380</span>件</div>
</div>
<div class="data-item">
<div>职工出勤数</div>
<div><span class="num">3380</span>人</div>
</div>
<div class="data-item">
<div>职工出勤数</div>
<div><span class="num">42<span style="font-size:22px">/80%</span></span>人</div>
</div>
</div>
<!-- <div class="con_right">
<div class="con_title">
<img src="./conter1-1.png" alt="">
<span style="margin-left:2px">正在工作</span>
@ -41,7 +69,7 @@
<img src="./conter2-2.png" alt="">
</div>
</div>
</div>
</div> -->
</container3>
</div>
@ -49,6 +77,7 @@
<script>
import container3 from "../components/container3/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
@ -58,6 +87,7 @@ export default {
name: 'left1',
components: {
container3,
rocketTit,
},
data () {
return {}
@ -75,6 +105,38 @@ export default {
</script>
<style lang="scss" scoped>
.tit {
padding: 16px 24px;
}
.img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.data {
display: flex;
margin: 0 15px;
background: rgba(2, 18, 63, 0.4);
color: #FFFFFF;
font-size: 18px;
.data-item {
flex: 1;
>div {
margin: 5px 0;
text-align: center;
}
.num {
font-size: 28px;
font-family: Roboto-BlackItalic, Roboto;
font-weight: 600;
color: #55C5A2;
vertical-align: sub;
padding-right: 3px;
}
}
}
.container3{
position: relative;
.con_right{

15
src/views/bigScreen/drivingCabin/index.vue
View File

@ -5,18 +5,17 @@
</div>
<!-- <div class="bg1"></div> -->
<div class="left1">
<left1></left1>
</div>
<div class="left2">
<left2></left2>
</div>
<div class="center1">
<center1></center1>
</div>
<div class="right1">
<right1></right1>
</div>
<!-- <div class="right1">
<right1></right1>
</div>
<div class="right2">
<right2></right2>
</div>
@ -25,7 +24,7 @@
</div>
<div class="bottom2">
<bottom2></bottom2>
</div>
</div> -->
</div>
</template>
@ -90,7 +89,7 @@ export default {
}
.center1 {
position: absolute;
top: 7px;
top: 20px;
left: 578px;
}

501
src/views/bigScreen/drivingCabin/left1.vue
View File

@ -1,238 +1,349 @@
<template>
<div>
<rocketTit style="margin-bottom: 9px">经营动态</rocketTit>
<container1>
<el-row style="height: 100%">
<el-col :span="12" style="height: 100%">
<el-row style="height: 100%">
<el-col :span="12" style="text-align:center,;padding: 26px 0 0 40px;">
<div>
今日收入
</div>
<div style="margin: 10px 0">
<span class="num">2890</span>万
</div>
<div>
同比增长
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<div ref="chart1" style="width: 100%;height:100%;"></div>
</el-col>
</el-row>
<container2 title="经营责任书完成概况">
<div class="wrap">
<el-row class="content1">
<el-col :span="12">
<div id="left1" ref="left1" class="chart1"></div>
</el-col>
<el-col :span="12" style="height: 100%">
<el-row style="height: 100%">
<el-col :span="12" style="text-align:center,;padding: 26px 0 0 40px;">
<div>
今日合同
</div>
<div style="margin: 10px 0">
<span class="num2">54</span>份
</div>
<div>
同比增长
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<div ref="chart2" style="width: 100%;height:100%;"></div>
</el-col>
</el-row>
<el-col :span="12">
<div class="record">
<div>0进展指标 <span class="num">2</span>个</div>
</div>
</el-col>
</el-row>
</container1>
</div>
<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>
</container2>
</template>
<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container1 from "../components/container1/index.vue";
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import container2 from "../components/container2/index.vue";
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
// import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize'
export default {
mixins: [resize],
// mixins: [resize],
name: 'left1',
components: {
scalseBox,
bigScreenHead,
rocketTit,
container1,
container2,
bigScreenTabs,
},
data () {
return {
chart1: null,
chart2: null,
option1: {
grid: {
top: "20%",
left: "10%",
right: "10%",
bottom: "20%"
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
show: false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
// axisTick: {
// show: false//不显示坐标轴刻度线
// },
// axisLine: {
// show: false,//不显示坐标轴线
// },
// axisLabel: {
// show: false,//不显示坐标轴上的文字
// },
// splitLine: {
// show: false//不显示网格线
// },
},
yAxis: {
type: 'value',
scale: true,
show: false,
// splitLine: {
// show: false//不显示网格线
// },
},
series: [
{
data: [30, 60, 80, 70, 80, 90, 110],
type: 'line',
symbol: 'none',
smooth: false,
lineStyle: {
color: '#f6d97e'
},
areaStyle: {//区域填充渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#f6d97e' // 0% 处的颜色
}, {
offset: .95, color: 'rgba(234,174,10, 0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
index: 0,
}
]
},
option2: {
grid: {
top: "20%",
left: "10%",
right: "10%",
bottom: "20%"
data: [
{
"year": "2021-01",
"value": ~~(Math.random() * 100),
"category": "部门一"
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
show: false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
// axisTick: {
// show: false//不显示坐标轴刻度线
// },
// axisLine: {
// show: false,//不显示坐标轴线
// },
// axisLabel: {
// show: false,//不显示坐标轴上的文字
// },
// splitLine: {
// show: false//不显示网格线
// },
{
"year": "2021-02",
"value": ~~(Math.random() * 100),
"category": "部门一"
},
yAxis: {
type: 'value',
scale: true,
show: false,
// splitLine: {
// show: false//不显示网格线
// },
{
"year": "2021-03",
"value": ~~(Math.random() * 100),
"category": "部门一"
},
series: [
{
data: [30, 60, 80, 70, 80, 90, 110],
type: 'line',
symbol: 'none',
smooth: false,
lineStyle: {
color: 'rgba(16, 152, 255, 1)'
},
areaStyle: {//区域填充渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(16, 152, 255, 1)' // 0% 处的颜色
}, {
offset: .95, color: 'rgba(16, 152, 255, 0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
]
},
{
"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 () {
this.$nextTick(() => {
this.initChart()
this.initLine()
})
},
beforeDestroy () {
if (!this.chart1 || !this.chart2) {
return
}
this.chart1.dispose()
this.chart2.dispose()
this.chart1 = null
this.chart2 = null
},
methods: {
initChart () {
this.chart1 = echarts.init(this.$refs.chart1, 'macarons');
this.chart2 = echarts.init(this.$refs.chart2, 'macarons');
this.chart1.setOption(this.option1);
this.chart2.setOption(this.option2);
const { Liquid } = G2Plot;
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())
// liquidPlot.render();
},
initLine () {
const { Line } = G2Plot;
let arr = this.data;
const line = new Line('left2', {
data: arr,
xField: 'year',
yField: 'value',
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>
<style lang="scss" scoped>
.wrap {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.content1 {
height: 200px;
.chart1 {
margin: 0 auto;
width: 192px;
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 {
font-size: 30px;
font-family: Roboto-Black, Roboto;
font-weight: 900;
color: #f6d97e;
line-height: 35px;
font-family: Roboto-BlackItalic, Roboto;
font-weight: normal;
color: #91d5fe;
vertical-align: sub;
// margin-right: 3px;
}
.num2 {
font-size: 30px;
font-family: Roboto-Black, Roboto;
font-weight: 900;
color: rgba(16, 152, 255, 1);
line-height: 35px;
.content2 {
padding: 20px;
flex: 1;
box-sizing: border-box;
display: flex;
flex-direction: column;
.titWrap {
height: 30px;
}
.tabContent {
flex: 1;
}
.tabContent > div {
width: 100%;
height: 100%;
}
.tit {
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
line-height: 22px;
position: relative;
padding-left: 15px;
}
.tit::after {
content: "";
display: block;
position: absolute;
top: 3px;
left: 0px;
width: 4px;
height: 16px;
background: #00ffff;
}
}
</style>

8
src/views/bigScreen/drivingCabin/right1.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<rocketTit style="margin-bottom: 9px">生产动态</rocketTit>
<container1>
<container4>
<el-row style="height: 100%">
<el-col :span="12" style="height: 100%">
<div class="right1_bg right1_bg1">
@ -20,14 +20,14 @@
</div>
</el-col>
</el-row>
</container1>
</container4>
</div>
</template>
<script>
import rocketTit from "../components/rocketTit/index.vue";
import container1 from "../components/container1/index.vue";
import container4 from "../components/container4/index.vue";
import resize from '../../dashboard/mixins/resize'
export default {
@ -35,7 +35,7 @@ export default {
name: 'right1',
components: {
rocketTit,
container1,
container4,
},
data () {
return {}