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

init2

Browse Source
This commit is contained in:
hh
2021-11-23 08:38:22 +08:00
parent c2e6ad1b48
commit dc0f6752bc
15 changed files with 672 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -41,6 +41,7 @@
"clipboard": "2.0.6",
"core-js": "3.8.1",
"echarts": "4.9.0",
"echarts-liquidfill": "^2.0.2",
"element-ui": "2.15.6",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",

BIN
src/assets/logo/logo.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/logo/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
src/assets/logo/logo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

2
src/main.js
View File

@ -5,6 +5,8 @@ import Cookies from 'js-cookie'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import 'echarts-liquidfill';
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'

90
src/views/bigScreen/components/container2/index.vue
View File

@ -2,10 +2,19 @@
<template>
<div class="container2">
<div class="tit"><rocketTit>{{title}}</rocketTit></div>
<div class="content">
<slot />
<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>
@ -36,31 +45,60 @@ export default {
</script>
<style lang="scss" scoped>
.container2 {
display: flex;
flex-direction: column;
width: 536px;
height: 394px;
background-image: url(./bg.png);
background-size: cover;
color: #FFFFFF;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
display: flex;
flex-direction: column;
width: 536px;
height: 394px;
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;
}
.content {
flex: 1;
padding: 2px;
box-sizing: border-box;
overflow: hidden;
}
.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>

13
src/views/bigScreen/components/container3/index.vue
View File

@ -3,6 +3,7 @@
<template>
<div class="container3">
<slot />
<div class="container3bg"></div>
</div>
</template>
@ -35,5 +36,17 @@ export default {
background-image: url(./bg.png);
background-size: cover;
overflow: hidden;
z-index: 10;
.container3bg {
position: absolute;
top: 0;
left: 0;
width: 766px;
height: 632px;
background-image: url(./bg.png);
background-size: cover;
pointer-events: none;
user-select: none;
}
}
</style>

78
src/views/bigScreen/components/container4/index.vue
View File

@ -2,10 +2,15 @@
<template>
<div class="container2">
<div class="tit"><rocketTit>{{title}}</rocketTit></div>
<div class="content">
<slot />
<div class="tit">
<rocketTit>{{title}}</rocketTit>
<div class="datePicker">
<slot name="datePicker"></slot>
</div>
</div>
<div class="content">
<slot />
</div>
</div>
</template>
@ -36,31 +41,52 @@ export default {
</script>
<style lang="scss" scoped>
.container2 {
display: flex;
flex-direction: column;
width: 930px;
height: 311px;
background-image: url(./bg.png);
background-size: cover;
color: #FFFFFF;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
display: flex;
flex-direction: column;
width: 930px;
height: 311px;
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;
}
.content {
flex: 1;
padding: 2px;
box-sizing: border-box;
overflow: hidden;
}
.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;
}
}
</style>

4
src/views/bigScreen/components/scaleBox.vue
View File

@ -1,10 +1,12 @@
<template>
<div class="ScaleBox" ref="ScaleBox" :style="{
<div style="background-color: #000;height: 100%;width:100%">
<div class="ScaleBox" ref="ScaleBox" :style="{
width: width + 'px',
height: height + 'px'
}">
<slot></slot>
</div>
</div>
</template>
<script>

181
src/views/bigScreen/drivingCabin/bottom1.vue
View File

@ -1,7 +1,9 @@
<template>
<div>
<container4 title="总体经营情况">
<img src="./bottom1.png" style="width: 90%;display: block;margin: 0 auto">
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<div style="height:100%;width:100%;" ref="chart"></div>
</container4>
</div>
@ -20,20 +22,187 @@ export default {
container4,
},
data () {
return {}
return {
dateRange: [],
chart: null,
option: {
grid: {
top: '5%',
left: '3%',
right: '40%',
bottom: '3%',
containLabel: true
},
legend: {
right: 'center',
data: ['收入', '利润', '目标完成'],
textStyle: {
color: '#fff'
},
},
xAxis: {
type: 'category',
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
splitLine: {
show: false//不显示网格线
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
}
},
yAxis: {
type: 'value',
splitLine: {
show: false//不显示网格线
},
splitArea: {
show: false//不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
}
},
series: [
{
name: '利润',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210],
itemStyle: {
color: 'rgb(116,212,184)'
},
},
{
name: '收入',
type: 'bar',
stack: 'total',
data: [320, 332, 301, 334, 390, 330, 320],
barWidth: 30,
itemStyle: {
color: 'rgb(170,202,253)'
},
},
{
name: '目标完成',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310],
itemStyle: {
color: 'rgb(245,217,126)'
},
},
{
hoverAnimation: false,
type: 'pie',
radius: ['70%', '80%'],
center: ['75%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 5,
color: 'rgb(170,202,253)'
},
data: [
{ value: 30, name: '收入' },
],
label: {
},
labelLine: {
showAbove: true,
length: -40,
length2: 160,
// minTurnAngle: 90,
// maxSurfaceAngle: 90
}
},
{
hoverAnimation: false,
type: 'pie',
radius: ['40%', '50%'],
center: ['75%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 5,
color: 'rgb(116,212,184)'
},
data: [
{ value: 30, name: '利润' },
],
labelLine: {
showAbove: true,
length: -80,
length2: 160,
// minTurnAngle: 90,
// maxSurfaceAngle: 90
}
// label: {
// fontSize: 14,
// position: 'outer',
// alignTo: 'edge',
// margin: 10,
// },
// labelLine: {
// showAbove: true,
// }
},
{
hoverAnimation: false,
type: 'pie',
radius: ['55%', '65%'],
center: ['75%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 5,
color: 'rgb(245,217,126)',
},
data: [
{ value: 30, name: '目标' },
],
labelLine: {
showAbove: true,
length: -60,
length2: 145,
}
// label: {
// fontSize: 14,
// position: 'outer',
// alignTo: 'edge',
// margin: 10,
// },
// labelLine: {
// showAbove: true,
// }
},
]
}
}
},
mounted () {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy () {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart () {
this.chart = echarts.init(this.$refs.chart, 'macarons');
this.chart.setOption(this.option);
}
}
}
</script>
<style lang="scss" scoped>
</style>

321
src/views/bigScreen/drivingCabin/bottom2.vue
View File

@ -1,7 +1,9 @@
<template>
<div>
<container4 title="总体生产情况">
<img src="./bottom2.png" style="width: 90%;display: block;margin: 0 auto">
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<div style="height:100%;width:100%;" ref="chart"></div>
</container4>
</div>
@ -13,6 +15,7 @@ import container4 from "../components/container4/index.vue";
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import 'echarts-liquidfill'
export default {
mixins: [resize],
name: 'bottom1',
@ -20,20 +23,326 @@ export default {
container4,
},
data () {
return {}
return {
dateRange: [],
option: {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params, ticket, callback) {
console.log(params)
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
}
setTimeout(function () {
// 仅为了模拟异步回调
callback(ticket, res);
}, 100)
return 'loading...';
}
},
legend: {
data: ['交付产品', '装药量'],
textStyle: {
color: '#fff'
},
},
grid: {
top: '10%',
left: '3%',
right: '35%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
axisLabel: {
formatter: function (value) {
return Math.abs(value);//显示的数值都取绝对值
}
},
type: 'value',
splitLine: {
show: false//不显示网格线
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
}
}
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
// data : ['0~5岁','5~10岁','10-30岁','30-50岁','50-70岁','70-100','100以上']
data: ['2021.12', '2021.11', '2021.10', '2021.09', '2021.08'].reverse(),
splitLine: {
show: false//不显示网格线
},
splitArea: {
show: false//不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
},
}
],
title: {
text: `${80}%`,
left: "80%",
top: "40%",
textAlign: 'center',
textStyle: {
fontWeight: "normal",
fontSize: 26,
fontWeight: 'bold',
color: "rgb(255,255,255)",
},
},
series: [
{
name: '交付产品',
type: 'bar',
stack: '总量',
barWidth: 20,
label: {
normal: {
show: true,
position: 'inside',
}
},
data: [320, 302, 341, 374, 390],
itemStyle: {
color: 'rgb(115,208,183)'
},
},
{
name: '装药量',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'inside',
formatter: function (v) { return Math.abs(v.data) }
}
},
data: [-120, -132, -101, -134, -190],
itemStyle: {
color: 'rgb(151,186,255)'
},
},
{
type: 'liquidFill',
radius: '40%',
z: 1,
center: ['50%', '50%'],
amplitude: 20,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset:0,
color: '#324791',
},
{
offset: 1,
color: '#449090',
},
],
globalCoord: false,
},
data: [
0.4,
{
value: 0.4,
direction: 'left',
},
],
backgroundStyle: {
borderWidth: 1,
color: 'transparent',
},
label: {
normal: {
formatter: '',
},
},
outline: {
show: true,
itemStyle: {
borderWidth: 0,
},
borderDistance: 0,
},
},
{
type: "liquidFill", // 图表类型
radius: "70%",
center: ["80%", "50%"],
data: [
80 / 100,
80 / 100,
], // data个数代表波浪数
backgroundStyle: {
borderWidth: 1,
color: "rgba(255,255,255,0)"
},
label: {
normal: {
show: false, //不显示label 用副标题代替了
formatter: (0.5 * 100).toFixed(0) + "%",
textStyle: {
fontSize: 38,
color: "black"
}
}
},
color: [ //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: "rgba(82,157,240,0.1)"
},
{
offset: 0,
color: "rgba(104,222,219,0.5)"
}
],
globalCoord: false
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: "rgba(82,157,240,0.1)"
},
{
offset: 0,
color: "rgba(104,222,219,0.5)"
}
],
globalCoord: false
},
],
outline: {
show: false
}
},
//进度线
{
type: "pie",
center: ["80%", "50%"],
radius: ["75%", "80%"], //进度线粗细
hoverAnimation: false,
clockwise: false,
data: [
{
name: "",
value: 80, //进度
labelLine: {
show: false
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 2,
colorStops: [
// !! 在此添加渐变过程色 !!
{ offset: 0, color: "#68DEDB" },
{ offset: 1, color: "#529DF0" }
]
}
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
// color: "#5886f0"
}
}
},
{
//画剩余的刻度圆环
name: "",
value: 100 - 80,
clockwise: false,
itemStyle: {
color: "rgba(255,255,255,0)"
},
label: {
show: false
},
labelLine: {
show: false
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
color: "rgba(255,255,255,0)"
}
}
}
]
}
]
}
}
},
mounted () {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy () {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart () {
this.chart = echarts.init(this.$refs.chart, 'macarons');
this.chart.setOption(this.option);
}
}
}
</script>
<style lang="scss" scoped>
</style>

BIN
src/views/bigScreen/drivingCabin/conter.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

23
src/views/bigScreen/drivingCabin/left2.vue
View File

@ -1,6 +1,10 @@
<template>
<div>
<container2 title="生产总体走势">
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<span slot="snap">件</span>
<div style="height:100%;width:100%;" ref="chart"></div>
</container2>
</div>
@ -28,6 +32,7 @@ export default {
},
data () {
return {
dateRange: [],
chart: null,
option: {
backgroundColor: '',
@ -43,17 +48,26 @@ export default {
},
grid: {
left: '3%',
right: '4%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: ['03-21', '03-22', '03-23', '03-24', '03-25', '03-26', '03-27'],
splitLine: {
show: false//不显示网格线
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
},
axisLabel: {
interval: 0,
rotate: 320
}
},
yAxis: {
type: 'value',
@ -62,6 +76,11 @@ export default {
},
splitArea: {
show: false//不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
}
},
series: [

19
src/views/bigScreen/drivingCabin/right2.vue
View File

@ -1,6 +1,8 @@
<template>
<div>
<container2 title="经营总体走势">
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<div style="height:100%;width:100%;" ref="chart"></div>
</container2>
</div>
@ -28,6 +30,7 @@ export default {
},
data () {
return {
dateRange: [],
chart: null,
option: {
backgroundColor: '',
@ -43,7 +46,7 @@ export default {
},
grid: {
left: '3%',
right: '4%',
right: '8%',
bottom: '3%',
containLabel: true
},
@ -53,7 +56,16 @@ export default {
data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
splitLine: {
show: false//不显示网格线
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
},
axisLabel: {
interval: 0,
rotate: 320
}
},
yAxis: {
type: 'value',
@ -66,6 +78,11 @@ export default {
axisLabel: {
formatter: "{value}%"
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
},
min: 0,
max: 100
},

10
src/views/login.vue
View File

@ -34,7 +34,9 @@
</el-form-item>
</el-form>
<div class="copyright">思米西科技有限公司 地址：自由贸易试验区成都高新区吉泰二路266号18栋2单元11楼1107号 联系电话：010-888888 邮箱：****@qq.com</div>
<div class="copyright">
内蒙古航天红峡化工有限公司 <span style="padding: 0 10px;">|</span><img src="../assets/logo/logo.png" alt="">
</div>
</div>
</template>
@ -150,11 +152,15 @@ export default {
width: 100%;
bottom: 20px;
text-align: center;
font-size: 14px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 24px;
img {
height: 24px;
vertical-align: middle;
}
}
}