ccongli
1 year ago
parent
c616fdcbd1
commit
e57ac99570
@ -0,0 +1 @@
|
||||
作业启动:西门子设备采集(5s一次)
|
||||
@ -0,0 +1,128 @@
|
||||
// 折线图
|
||||
let chartLeft1 = {
|
||||
// color: ["#37a2da", "#32c5e9","#67e0e3"], // 图表折线默认配色
|
||||
title: {
|
||||
text: '周销售额趋势',
|
||||
offset: [-300, -30], // 标题[左右 上下]偏移
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
textBaseline: 'bpttom'
|
||||
}
|
||||
},
|
||||
legend:{ // 图例标签
|
||||
data: ['图例一', '图例二'],
|
||||
orient: 'horizontal', // 横向
|
||||
left:"50%",
|
||||
top: '10%',
|
||||
itemGap: 20, // 标签间距
|
||||
textStyle: {
|
||||
fontFamily: 'Arial',
|
||||
fontSize: 13,
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
xAxis: { // x轴
|
||||
name: '日期',
|
||||
data: ['周一1', '周二2', '周三3', '周四4', '周五5', '周六6', '周日7'],
|
||||
nameTextStyle: { // 名称样式
|
||||
fill: '#fff',
|
||||
fontSize: 10
|
||||
},
|
||||
axisLine: { // 坐标轴
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
lineWidth: 2
|
||||
}
|
||||
},
|
||||
axisTick:{ // 坐标轴刻度线
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
lineWidth: 2
|
||||
}
|
||||
},
|
||||
axisLabel: { // 坐标轴标签
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 12,
|
||||
rotate: 10 // 倾斜度
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '销售额',
|
||||
data: 'value',
|
||||
axisLine: { // 坐标轴
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
lineWidth: 2
|
||||
}
|
||||
},
|
||||
axisTick:{ // 坐标轴刻度线
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
lineWidth: 2
|
||||
}
|
||||
},
|
||||
axisLabel: { // 坐标轴标签
|
||||
show:true, // 显示
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 12,
|
||||
rotate: 10 // 倾斜度
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "图例一",
|
||||
data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
|
||||
type: 'line',
|
||||
label: {
|
||||
show: true,
|
||||
formatter : '{value}件',
|
||||
style: {
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "图例二",
|
||||
data: [2200, 1230, 1900, 2200, 2500, 3200, 2985],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
// tooltip:{ // dataV暂不支持此功能
|
||||
// trigger:'item',
|
||||
// show:true
|
||||
// }
|
||||
};
|
||||
|
||||
// 柱状图
|
||||
let chartLeft2 = {
|
||||
title: {
|
||||
text: '周销售额趋势'
|
||||
},
|
||||
xAxis: {
|
||||
name: '第一周',
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
},
|
||||
yAxis: {
|
||||
name: '销售额',
|
||||
data: 'value' // x或y坐标轴应至少有一个配置为'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export { chartLeft1, chartLeft2 }
|
||||
|
After Width: | Height: | Size: 7.7 KiB |
@ -0,0 +1,326 @@
|
||||
.big-data-container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #1400a8;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
|
||||
.header {
|
||||
height: 80px;
|
||||
// background: url(./head_bg.png) no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.header-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
.version {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.topic {
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
right: 40%;
|
||||
}
|
||||
|
||||
.dv-decoration-8 {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.dv-decoration-5 {
|
||||
width: 85%;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-container {
|
||||
height:1000px;
|
||||
margin: 0px 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 80px;
|
||||
bottom: 0;
|
||||
|
||||
.border-box-content {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.data-left,
|
||||
.data-right {
|
||||
flex:1;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.data-left-item,
|
||||
.data-right-item {
|
||||
flex: 1;
|
||||
border: 1px solid rgba(25, 186, 139, 0.17);
|
||||
padding: 2px 4px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
z-index: 10;
|
||||
|
||||
&::before {
|
||||
border-left: 2px solid #02a6b5;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-right: 2px solid #02a6b5;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// .title {
|
||||
// color: #fff;
|
||||
// font-size: 16px;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
.data-foot-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
&::before, &::after {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border-bottom: 2px solid #02a6b5;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-left: 2px solid #02a6b5;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-right: 2px solid #02a6b5;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// .head h1 {
|
||||
// margin: 0;
|
||||
// color: #fff;
|
||||
// text-align: center;
|
||||
// /* font-size: .4rem; */
|
||||
// /* line-height: .8rem; */
|
||||
// line-height: 71px;
|
||||
// }
|
||||
|
||||
// .data-container {
|
||||
// /* margin: 5px 15px;
|
||||
// height:100%; */
|
||||
|
||||
// margin: 0px 15px;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// top: 76px;
|
||||
// bottom: 0;
|
||||
// }
|
||||
|
||||
// .data-container > div {
|
||||
// float: left;
|
||||
// /* border: 1px solid white; */
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// .data-center {
|
||||
// padding: 0 0.9rem;
|
||||
// width: 40%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// // .center-top{
|
||||
// // height: 210px;
|
||||
// // background: red;
|
||||
// // }
|
||||
// .chart-center{
|
||||
// flex: 1;
|
||||
// }
|
||||
// }
|
||||
// .chart-center{
|
||||
// width: 100%;
|
||||
// display: flex;
|
||||
// // background: white;
|
||||
// }
|
||||
// .data-left,
|
||||
// .data-right {
|
||||
// width: 30%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// }
|
||||
|
||||
// .data-left-item,
|
||||
// .data-right-item,.center-top,.center-top-num,.chart-center {
|
||||
// border: 1px solid rgba(25, 186, 139, 0.17);
|
||||
// padding: 0 0.2rem 0.4rem 0.15rem;
|
||||
// background: rgba(255, 255, 255, 0.04);
|
||||
// background-size: 100% auto;
|
||||
// position: relative;
|
||||
// margin-bottom: 0.15rem;
|
||||
// z-index: 10;
|
||||
// }
|
||||
|
||||
// .data-foot-line {
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// width: 100%;
|
||||
// left: 0;
|
||||
// }
|
||||
|
||||
// .data-foot-line:before,
|
||||
// .data-foot-line:after {
|
||||
// position: absolute;
|
||||
// width: 10px;
|
||||
// height:10px;
|
||||
// content: "";
|
||||
// border-bottom: 2px solid #02a6b5;
|
||||
// bottom: 0;
|
||||
// }
|
||||
|
||||
// .boxall:before,
|
||||
// .data-foot-line:before {
|
||||
// border-left: 2px solid #02a6b5;
|
||||
// left: 0;
|
||||
// }
|
||||
|
||||
// .boxall:after,
|
||||
// .data-foot-line:after {
|
||||
// border-right: 2px solid #02a6b5;
|
||||
// right: 0;
|
||||
// }
|
||||
|
||||
// .boxall:before,
|
||||
// .boxall:after {
|
||||
// position: absolute;
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
// content: "";
|
||||
// border-top: 2px solid #02a6b5;
|
||||
// top: 0;
|
||||
// }
|
||||
|
||||
// .data-left-item:before,
|
||||
// .data-right-item:before,
|
||||
// .center-top-num:before,
|
||||
// .center-top:before{
|
||||
// border-left: 2px solid #02a6b5;
|
||||
// left: 0;
|
||||
// position: absolute;
|
||||
// width: 10px;
|
||||
// height:10px;
|
||||
// content: "";
|
||||
// border-top: 2px solid #02a6b5;
|
||||
// top: 0;
|
||||
// }
|
||||
|
||||
// .data-left-item:after,
|
||||
// .data-right-item:after,
|
||||
// .center-top-num:after,
|
||||
// .center-top:after {
|
||||
// border-right: 2px solid #02a6b5;
|
||||
// right: 0;
|
||||
// position: absolute;
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
// content: "";
|
||||
// border-top: 2px solid #02a6b5;
|
||||
// top: 0;
|
||||
// }
|
||||
|
||||
// .data-left,
|
||||
// .data-right {
|
||||
// /* display: flex; */
|
||||
// }
|
||||
|
||||
// .data-left > .data-left-item,
|
||||
// .data-right > .data-right-item {
|
||||
// flex: 1;
|
||||
// margin-bottom: 0.9rem;
|
||||
// }
|
||||
|
||||
// .data-center .title,
|
||||
// .data-left > .data-left-item .title,
|
||||
// .data-right > .data-right-item .title {
|
||||
// /* font-size: .2rem; */
|
||||
// font-size: 1rem;
|
||||
// padding: 7px 0;
|
||||
// color: #fff;
|
||||
// text-align: center;
|
||||
// /* line-height: .5rem; */
|
||||
// }
|
||||
|
||||
// .data-center .chart-center{
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// .center-top-num{
|
||||
// height: 80px;
|
||||
// padding-top: 7px;
|
||||
// margin-bottom: 0.8rem;
|
||||
// display: flex;
|
||||
// .item{
|
||||
// flex: 1;
|
||||
// text-align: center;
|
||||
// }
|
||||
// .text{
|
||||
// color: #fcf0d8;
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// .num{
|
||||
// font-size: 34px;
|
||||
// font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
// font-weight: bold;
|
||||
// color: #67caca;
|
||||
// }
|
||||
// }
|
||||
@ -0,0 +1,116 @@
|
||||
|
||||
<template>
|
||||
<div id="big-data-container" class="big-data-container">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<dv-full-screen-container v-else>
|
||||
<div class="header">
|
||||
<div class="header-item">
|
||||
<h3 class="version">CHANKO V1.0.0</h3>
|
||||
<dv-decoration-8 />
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<h2 class="topic">大屏数据看板</h2>
|
||||
<dv-decoration-5 />
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<h3 class="datetime">{{ datetime }}</h3>
|
||||
<dv-decoration-8 :reverse="true" />
|
||||
</div>
|
||||
<!-- <dv-decoration-10 style="width:100%;height:5px; transform: rotateY(180deg);" /> -->
|
||||
</div>
|
||||
<!-- 四方格样式 -->
|
||||
<div class="data-container">
|
||||
<dv-border-box-13>
|
||||
<div class="data-left">
|
||||
<div class="data-left-item">
|
||||
<!-- <div class="title">商品销量分类</div> -->
|
||||
<dv-charts :option="chartLeft1"></dv-charts>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-left-item">
|
||||
<dv-charts :option="chartLeft1"></dv-charts>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-right">
|
||||
<div class="data-right-item">
|
||||
<dv-charts :option="chartLeft1"></dv-charts>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-right-item">
|
||||
<dv-charts :option="chartLeft1"></dv-charts>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</dv-full-screen-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
chartLeft1,
|
||||
chartLeft2
|
||||
} from "./chart-options";
|
||||
import myMixin from '@/mixin';
|
||||
import "./index.less";
|
||||
import { changeDefaultConfig } from '@jiaminghi/charts'
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
mixins: [myMixin],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
datetime: '',
|
||||
chartLeft1: {},
|
||||
chartLeft2: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.onLoading();
|
||||
this.datetime = this.base.getDate(true);
|
||||
setInterval(() => {
|
||||
this.datetime = this.base.getDate(true);
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
// changeDefaultConfig('color', ['#67e0e3']); // 修改默认颜色
|
||||
this.chartLeft1 = chartLeft1;
|
||||
this.chartLeft2 = chartLeft2;
|
||||
},
|
||||
methods: {
|
||||
onLoading() {
|
||||
setTimeout(() => {
|
||||
this.loading = false; // todo
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
// $chartLeft1 = null;
|
||||
// $chartLeft2 = null;
|
||||
// $chartLeft3 = null;
|
||||
// $chartCenter = null;
|
||||
// $chartRight1 = null;
|
||||
// $chartGauge1 = null;
|
||||
// $chartGauge2 = null;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// vue3 改写dv-loading样式
|
||||
:deep(.dv-loading) {
|
||||
justify-content: start;
|
||||
margin-top: 100px;
|
||||
color: #fff;
|
||||
|
||||
.loading-tip {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in new issue