大屏1
This commit is contained in:
hh
@ -36,6 +36,7 @@
|
||||
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g2plot": "^2.3.40",
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.21.0",
|
||||
"clipboard": "2.0.6",
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
|
||||
<title><%= webpackConfig.name %></title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
|
||||
62
src/views/bigScreen/components/bigScreenTabs/index.vue
Normal file
62
src/views/bigScreen/components/bigScreenTabs/index.vue
Normal file
@ -0,0 +1,62 @@
|
||||
|
||||
|
||||
<template>
|
||||
<div class="BigScreenTabs">
|
||||
<div v-for="(v,index) in titleArr" :key="index" class="button" :class="{active:value == index}">
|
||||
<div @click="updateVal(index)">{{v}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BigScreenTabs',
|
||||
props: {
|
||||
value: {
|
||||
type: Number
|
||||
},
|
||||
titleArr: {
|
||||
type: Array,
|
||||
default: ['部门', '类型'],
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateVal: function (val) {
|
||||
// 2、手动触发父组件的input事件并将值传给父组件
|
||||
this.$emit('input', val);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.button {
|
||||
display: inline-block;
|
||||
background: rgba(145, 213, 254, 0.2);
|
||||
width: 77px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
transform: skewX(-20deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.button.active {
|
||||
background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%);
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.button > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: skewX(20deg);
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 55 KiB |
@ -48,8 +48,8 @@ export default {
|
||||
.container2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 536px;
|
||||
height: 394px;
|
||||
width: 538px;
|
||||
height: 589px;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 74 KiB |
@ -31,8 +31,8 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container3 {
|
||||
width: 766px;
|
||||
height: 632px;
|
||||
width: 769px;
|
||||
height: 586px;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
@ -41,8 +41,8 @@ export default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 766px;
|
||||
height: 632px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
pointer-events: none;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 35 KiB |
@ -1,7 +1,7 @@
|
||||
|
||||
|
||||
<template>
|
||||
<div class="container2">
|
||||
<div class="container4">
|
||||
<div class="tit">
|
||||
<rocketTit>{{title}}</rocketTit>
|
||||
<div class="datePicker">
|
||||
@ -27,10 +27,6 @@ export default {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@ -41,11 +37,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container2 {
|
||||
.container4 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 930px;
|
||||
height: 311px;
|
||||
width: 537px;
|
||||
height: 528px;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
|
||||
@ -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{
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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 {}
|
||||
|
||||
Reference in New Issue
Block a user