安全管理-1
This commit is contained in:
熊丽君
@ -1,11 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="min-width: 100px">
|
<div style="min-width: 100px">
|
||||||
<el-progress :show-text="false" :stroke-width="6" :percentage="percentage"></el-progress>
|
<el-progress :show-text="showText" :stroke-width="strokeWidth" :percentage="percentage"></el-progress>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
showText: {
|
||||||
|
type: Boolean,
|
||||||
|
require: true,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
strokeWidth: {
|
||||||
|
type: Number,
|
||||||
|
require: true,
|
||||||
|
default: 6,
|
||||||
|
},
|
||||||
percentage: {
|
percentage: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
require: true,
|
require: true,
|
||||||
|
|||||||
@ -12,7 +12,6 @@
|
|||||||
<span>总完成任务/完成率</span>
|
<span>总完成任务/完成率</span>
|
||||||
<i class="num">55/80%</i>
|
<i class="num">55/80%</i>
|
||||||
<progressBar :percentage="70" />
|
<progressBar :percentage="70" />
|
||||||
<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</container2>
|
</container2>
|
||||||
|
|||||||
382
src/views/bigScreen/securityManage/bottom1.vue
Normal file
382
src/views/bigScreen/securityManage/bottom1.vue
Normal file
@ -0,0 +1,382 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<container4 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>
|
||||||
|
</container4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import container4 from "../components/container4/index.vue";
|
||||||
|
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from '../../dashboard/mixins/resize'
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
name: 'bottom1',
|
||||||
|
components: {
|
||||||
|
container4,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dateRange: [],
|
||||||
|
chart: null,
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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)',
|
||||||
|
},
|
||||||
|
// label: {
|
||||||
|
// show : true,
|
||||||
|
// position : 'top',
|
||||||
|
// formatter : "{c}",
|
||||||
|
// textStyle : {
|
||||||
|
// color: '#fff'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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: ['55%', '65%'],
|
||||||
|
// center: ['75%', '50%'],
|
||||||
|
// roseType: 'area',
|
||||||
|
// itemStyle: {
|
||||||
|
// borderRadius: 5,
|
||||||
|
// color: 'rgb(245,217,126)',
|
||||||
|
// },
|
||||||
|
// data: [
|
||||||
|
// { value: 30, name: '目标' },
|
||||||
|
// ],
|
||||||
|
// label: {
|
||||||
|
// formatter: '{b}：{c}',
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// showAbove: true,
|
||||||
|
// length: -60,
|
||||||
|
// length2: 145,
|
||||||
|
// }
|
||||||
|
// // label: {
|
||||||
|
// // fontSize: 14,
|
||||||
|
// // position: 'outer',
|
||||||
|
// // alignTo: 'edge',
|
||||||
|
// // margin: 10,
|
||||||
|
// // },
|
||||||
|
// // labelLine: {
|
||||||
|
// // showAbove: true,
|
||||||
|
// // }
|
||||||
|
// },
|
||||||
|
//进度线
|
||||||
|
// {
|
||||||
|
// type: "pie",
|
||||||
|
// radius: ['55%', '65%'],
|
||||||
|
// center: ['75%', '50%'],
|
||||||
|
// itemStyle: {
|
||||||
|
// borderRadius: 5,
|
||||||
|
// color: 'rgb(245,217,126)',
|
||||||
|
// },
|
||||||
|
// hoverAnimation: false,
|
||||||
|
// clockwise: false,
|
||||||
|
// data: [
|
||||||
|
// {
|
||||||
|
// name: "",
|
||||||
|
// value: 80, //进度
|
||||||
|
// labelLine: {
|
||||||
|
// show: false
|
||||||
|
// },
|
||||||
|
|
||||||
|
// 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)"
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
// label: {
|
||||||
|
// formatter: '{b}：{c}',
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// showAbove: true,
|
||||||
|
// length: -60,
|
||||||
|
// length2: 145,
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: '利润',
|
||||||
|
type: 'pie',
|
||||||
|
hoverAnimation: false,
|
||||||
|
radius: ['55%', '65%'],
|
||||||
|
center: ['75%', '50%'],
|
||||||
|
labelLine: {
|
||||||
|
length: 30
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: '{b}：{c}',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 4,
|
||||||
|
alignTo: 'edge',
|
||||||
|
margin: '10'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 5,
|
||||||
|
color: 'rgb(116,212,184)'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 10, name: '利润' },
|
||||||
|
{
|
||||||
|
//画剩余的刻度圆环
|
||||||
|
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)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '目标',
|
||||||
|
type: 'pie',
|
||||||
|
hoverAnimation: false,
|
||||||
|
radius: ['40%', '50%'],
|
||||||
|
center: ['75%', '50%'],
|
||||||
|
labelLine: {
|
||||||
|
length: 30
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: '{b}：{c}',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 4,
|
||||||
|
alignTo: 'edge',
|
||||||
|
margin: '10'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 5,
|
||||||
|
color: 'rgb(245,217,126)'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 80, name: '目标' },
|
||||||
|
{
|
||||||
|
//画剩余的刻度圆环
|
||||||
|
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)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '收入',
|
||||||
|
type: 'pie',
|
||||||
|
hoverAnimation: false,
|
||||||
|
radius: ['70%', '80%'],
|
||||||
|
center: ['75%', '50%'],
|
||||||
|
labelLine: {
|
||||||
|
length: 30
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: '{b}：{c}',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 4,
|
||||||
|
alignTo: 'edge',
|
||||||
|
margin: '10'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 5,
|
||||||
|
color: 'rgb(170,202,253)'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 60, name: '收入' },
|
||||||
|
{
|
||||||
|
//画剩余的刻度圆环
|
||||||
|
name: "",
|
||||||
|
value: 60,
|
||||||
|
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>
|
||||||
348
src/views/bigScreen/securityManage/bottom2.vue
Normal file
348
src/views/bigScreen/securityManage/bottom2.vue
Normal file
@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<container4 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>
|
||||||
|
</container4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
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',
|
||||||
|
components: {
|
||||||
|
container4,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
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/securityManage/center.png
Normal file
BIN
src/views/bigScreen/securityManage/center.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
177
src/views/bigScreen/securityManage/center.vue
Normal file
177
src/views/bigScreen/securityManage/center.vue
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<container3>
|
||||||
|
<img class="img" src="./center.png" style="width: 100%; height: 100%" />
|
||||||
|
<div class="con_right">
|
||||||
|
<div class="con_title con_title_bg1">
|
||||||
|
<img src="./img/left1/icon.png" alt="" />
|
||||||
|
<span style="margin-left: 2px">一级危险点</span>
|
||||||
|
</div>
|
||||||
|
<div class="com_img"><img src="./img/left1/icon1.png" alt="" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="con_right con_two">
|
||||||
|
<div class="con_title con_title_bg2">
|
||||||
|
<img src="./img/left1/icon.png" alt="" />
|
||||||
|
<span style="margin-left: 2px">二级危险点</span>
|
||||||
|
</div>
|
||||||
|
<div class="com_img"><img src="./img/left1/icon2.png" alt="" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="con_right con_three">
|
||||||
|
<div class="con_title con_title_bg3">
|
||||||
|
<img src="./img/left1/icon.png" alt="" />
|
||||||
|
<span style="margin-left: 2px">三级危险点</span>
|
||||||
|
</div>
|
||||||
|
<div class="com_img"><img src="./img/left1/icon3.png" alt="" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<div class="data-item">
|
||||||
|
<div><span style="font-weight: bold">一级危险点/危险源数量</span></div>
|
||||||
|
<div class="box"><i>20/16</i><span class="num2">个</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="data-item">
|
||||||
|
<div><span style="font-weight: bold">二级危险点/危险源数量</span></div>
|
||||||
|
<div class="box"><i>13/23</i><span class="num2">个</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="data-item">
|
||||||
|
<div><span style="font-weight: bold">三级危险点/危险源数量</span></div>
|
||||||
|
<div class="box"><i>10/8</i><span class="num2">个</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="data-item">
|
||||||
|
<div><span style="font-weight: bold">四级危险源数量</span></div>
|
||||||
|
<div class="box"><i>8</i><span class="num2">个</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</container3>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import container3 from '../components/container3/index.vue'
|
||||||
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
|
import progressBar from './../components/progress/index.vue'
|
||||||
|
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from '../../dashboard/mixins/resize'
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
name: 'left1',
|
||||||
|
components: {
|
||||||
|
container3,
|
||||||
|
rocketTit,
|
||||||
|
progressBar,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
beforeDestroy() {},
|
||||||
|
methods: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tit {
|
||||||
|
padding: 16px 24px;
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.data {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin: 20px 0 0;
|
||||||
|
background: rgba(2, 18, 63, 0.33);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 18px;
|
||||||
|
.data-item {
|
||||||
|
// flex: 1;
|
||||||
|
margin-left: 15px;
|
||||||
|
width: 22%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
> div {
|
||||||
|
margin: 5px 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
img {
|
||||||
|
// width: 10px;
|
||||||
|
// height: 10px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
font-size: 26px;
|
||||||
|
font-family: Roboto-BlackItalic, Roboto;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #55c5a2;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.num2 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 5px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container3 {
|
||||||
|
position: relative;
|
||||||
|
.con_right {
|
||||||
|
width: 138px;
|
||||||
|
position: absolute;
|
||||||
|
top: 41%;
|
||||||
|
right: 43%;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.con_title {
|
||||||
|
width: 100%;
|
||||||
|
height: 42px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.con_title_bg1 {
|
||||||
|
background: url('./img/left1/1.png') no-repeat;
|
||||||
|
}
|
||||||
|
.con_title_bg2 {
|
||||||
|
background: url('./img/left1/2.png') no-repeat;
|
||||||
|
}
|
||||||
|
.con_title_bg3 {
|
||||||
|
background: url('./img/left1/3.png') no-repeat;
|
||||||
|
}
|
||||||
|
.com_img {
|
||||||
|
margin-top: 5px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.con_two {
|
||||||
|
top: 37%;
|
||||||
|
left: 13%;
|
||||||
|
}
|
||||||
|
.con_three {
|
||||||
|
top: 70%;
|
||||||
|
right: 16%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
163
src/views/bigScreen/securityManage/center2.vue
Normal file
163
src/views/bigScreen/securityManage/center2.vue
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<container4 title="今日动态">
|
||||||
|
<vue-seamless-scroll
|
||||||
|
:data="listData"
|
||||||
|
class="warp"
|
||||||
|
:class-option="{
|
||||||
|
singleHeight: 42,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<ul class="item">
|
||||||
|
<li>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="10"><img src="./img/center2/1.png" />今日收入</el-col>
|
||||||
|
<el-col :span="5">1234万</el-col>
|
||||||
|
<el-col :span="7"></el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="10"><img src="./img/center2/2.png" />今日支出</el-col>
|
||||||
|
<el-col :span="5">1234万</el-col>
|
||||||
|
<el-col :span="7"></el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="10"><img src="./img/center2/3.png" />今日新签合同</el-col>
|
||||||
|
<el-col :span="5">1234份</el-col>
|
||||||
|
<el-col :span="7"></el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="10"><img src="./img/center2/4.png" />今日安全问题</el-col>
|
||||||
|
<el-col :span="5">1234个</el-col>
|
||||||
|
<el-col :span="7"></el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="10"><img src="./img/center2/5.png" />今日质量问题</el-col>
|
||||||
|
<el-col :span="5">1234个</el-col>
|
||||||
|
<el-col :span="7"></el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="10"><img src="./img/center2/6.png" />今日设备数</el-col>
|
||||||
|
<el-col :span="5">123台</el-col>
|
||||||
|
<el-col :span="7">运行率：88%</el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="10"><img src="./img/center2/7.png" />今日职工数</el-col>
|
||||||
|
<el-col :span="5">890人</el-col>
|
||||||
|
<el-col :span="7">出勤率：73%</el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="10"><img src="./img/center2/8.png" />今日生产任务</el-col>
|
||||||
|
<el-col :span="5">890个</el-col>
|
||||||
|
<el-col :span="7">完成率：66%</el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</container4>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import container4 from './components/container4/index.vue'
|
||||||
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from '../../dashboard/mixins/resize'
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
name: 'left1',
|
||||||
|
components: {
|
||||||
|
container4,
|
||||||
|
rocketTit,
|
||||||
|
vueSeamlessScroll,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
beforeDestroy() {},
|
||||||
|
methods: {},
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.warp {
|
||||||
|
height: 280px;
|
||||||
|
width: 440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
li,
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
background: rgba(2, 18, 63, 0.33);
|
||||||
|
padding-left: 20px;
|
||||||
|
margin: 5px 0;
|
||||||
|
img {
|
||||||
|
vertical-align: sub;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,121 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container2">
|
||||||
|
<div class="tit">
|
||||||
|
<rocketTit>{{ title }}</rocketTit>
|
||||||
|
<hr style="border: 0; border-bottom: 1px solid #91d5fe" />
|
||||||
|
<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: 586px;
|
||||||
|
background-size: cover;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
border-bottom: 1px solid #91d5fe;
|
||||||
|
padding: 0 5px;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: -4px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background-color: #91d5fe;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: -4px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background-color: #91d5fe;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.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>
|
||||||
BIN
src/views/bigScreen/securityManage/components/container2/bg.png
Normal file
BIN
src/views/bigScreen/securityManage/components/container2/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,100 @@
|
|||||||
|
<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>
|
||||||
BIN
src/views/bigScreen/securityManage/components/container3/bg.png
Normal file
BIN
src/views/bigScreen/securityManage/components/container3/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,104 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="container3">
|
||||||
|
<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: 'container3',
|
||||||
|
components: {
|
||||||
|
rocketTit,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container3 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 673px;
|
||||||
|
height: 359px;
|
||||||
|
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 2px 2px 22px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
.snap {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 25px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/views/bigScreen/securityManage/components/container4/bg.png
Normal file
BIN
src/views/bigScreen/securityManage/components/container4/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,145 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="container4">
|
||||||
|
<div class="tit">
|
||||||
|
<div>{{title}}</div>
|
||||||
|
<!-- <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: 'container4',
|
||||||
|
components: {
|
||||||
|
rocketTit,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container4 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 501px;
|
||||||
|
height: 359px;
|
||||||
|
background-image: url(./bg.png);
|
||||||
|
background-size: cover;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
position: relative;
|
||||||
|
padding: 16px 16px 16px 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
left: -75px;
|
||||||
|
top: 25px;
|
||||||
|
width: 82px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(145, 213, 254, 0) 0%,
|
||||||
|
#91d5fe 100%
|
||||||
|
);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
right: -75px;
|
||||||
|
top: 25px;
|
||||||
|
width: 82px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#91d5fe 0%,
|
||||||
|
rgba(145, 213, 254, 0) 100%
|
||||||
|
);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
BIN
src/views/bigScreen/securityManage/img/center2/1.png
Normal file
BIN
src/views/bigScreen/securityManage/img/center2/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 561 B |
BIN
src/views/bigScreen/securityManage/img/center2/2.png
Normal file
BIN
src/views/bigScreen/securityManage/img/center2/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 B |
BIN
src/views/bigScreen/securityManage/img/center2/3.png
Normal file
BIN
src/views/bigScreen/securityManage/img/center2/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
BIN
src/views/bigScreen/securityManage/img/center2/4.png
Normal file
BIN
src/views/bigScreen/securityManage/img/center2/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 522 B |
BIN
src/views/bigScreen/securityManage/img/center2/5.png
Normal file
BIN
src/views/bigScreen/securityManage/img/center2/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 539 B |
BIN
src/views/bigScreen/securityManage/img/center2/6.png
Normal file
BIN
src/views/bigScreen/securityManage/img/center2/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 363 B |
BIN
src/views/bigScreen/securityManage/img/center2/7.png
Normal file
BIN
src/views/bigScreen/securityManage/img/center2/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 437 B |
BIN
src/views/bigScreen/securityManage/img/center2/8.png
Normal file
BIN
src/views/bigScreen/securityManage/img/center2/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 B |
BIN
src/views/bigScreen/securityManage/img/left1/1.jpg
Normal file
BIN
src/views/bigScreen/securityManage/img/left1/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
src/views/bigScreen/securityManage/img/left1/1.png
Normal file
BIN
src/views/bigScreen/securityManage/img/left1/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 B |
BIN
src/views/bigScreen/securityManage/img/left1/2.png
Normal file
BIN
src/views/bigScreen/securityManage/img/left1/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 357 B |
BIN
src/views/bigScreen/securityManage/img/left1/3.png
Normal file
BIN
src/views/bigScreen/securityManage/img/left1/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 355 B |
BIN
src/views/bigScreen/securityManage/img/left1/icon.png
Normal file
BIN
src/views/bigScreen/securityManage/img/left1/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 447 B |
BIN
src/views/bigScreen/securityManage/img/left1/icon1.png
Normal file
BIN
src/views/bigScreen/securityManage/img/left1/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
src/views/bigScreen/securityManage/img/left1/icon2.png
Normal file
BIN
src/views/bigScreen/securityManage/img/left1/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
src/views/bigScreen/securityManage/img/left1/icon3.png
Normal file
BIN
src/views/bigScreen/securityManage/img/left1/icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -1,18 +1,117 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="securityManage">
|
<div class="drivingCabin">
|
||||||
安全管理
|
<div class="left1">
|
||||||
</div>
|
<left1></left1>
|
||||||
|
</div>
|
||||||
|
<div class="left2">
|
||||||
|
<left2></left2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="center1">
|
||||||
|
<center1></center1>
|
||||||
|
</div>
|
||||||
|
<div class="center2">
|
||||||
|
<center2></center2>
|
||||||
|
</div>
|
||||||
|
<div class="right1">
|
||||||
|
<right1></right1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right2">
|
||||||
|
<right2></right2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 left1 from './left1.vue'
|
||||||
|
import left2 from './left2.vue'
|
||||||
|
import center1 from './center.vue'
|
||||||
|
import center2 from './center2.vue'
|
||||||
|
import right1 from './right1.vue'
|
||||||
|
import right2 from './right2.vue'
|
||||||
|
import bottom1 from './bottom1.vue'
|
||||||
|
import bottom2 from './bottom2.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'SecurityManage',
|
name: 'SecurityManage',
|
||||||
components: {
|
components: {
|
||||||
}
|
scalseBox,
|
||||||
|
bigScreenHead,
|
||||||
|
rocketTit,
|
||||||
|
container1,
|
||||||
|
left1,
|
||||||
|
left2,
|
||||||
|
center1,
|
||||||
|
right1,
|
||||||
|
right2,
|
||||||
|
bottom1,
|
||||||
|
bottom2,
|
||||||
|
center2,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.drivingCabin {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
// background-image: url("../img/bg.png");
|
||||||
|
background-size: cover;
|
||||||
|
.bg1 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 1920px;
|
||||||
|
height: 485px;
|
||||||
|
background-image: url('../img/bg-1.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
.left1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 24px;
|
||||||
|
}
|
||||||
|
.left2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 605px;
|
||||||
|
left: 24px;
|
||||||
|
}
|
||||||
|
.center1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 578px;
|
||||||
|
}
|
||||||
|
.center2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 605px;
|
||||||
|
left: 710px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
.right2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 605px;
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
.bottom1 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
left: 24px;
|
||||||
|
}
|
||||||
|
.bottom2 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
426
src/views/bigScreen/securityManage/left1.vue
Normal file
426
src/views/bigScreen/securityManage/left1.vue
Normal file
@ -0,0 +1,426 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<container title="危险点危险源区域分布视频监控情况">
|
||||||
|
<div class="wrap">
|
||||||
|
<el-row class="content1">
|
||||||
|
<el-col :span="24">
|
||||||
|
<!-- <div id="left1" ref="left1" class="chart1"></div> -->
|
||||||
|
<div style="height: 270px; margin: 14px 0 8px">
|
||||||
|
<img style="width: 100%; height: 100%" src="./img/left1/1.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div style="text-align: right; margin-bottom: 14px; font-size: 14px">
|
||||||
|
<span style="opacity: 0.9">视频监控 / </span>
|
||||||
|
<span style="opacity: 0.7">奖惩播放 / </span>
|
||||||
|
<span style="opacity: 0.7">典型案例播放</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center; margin-bottom: 28px">
|
||||||
|
<span>危险点视频覆盖率</span>
|
||||||
|
<progressBar :showText="true" :strokeWidth="10" :percentage="89" style="flex: 1; margin-left: 10px" />
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24" style="margin-bottom: 1px">
|
||||||
|
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||||
|
<el-col style="text-align: center" :span="3">序号</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">危险点</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">危险级别</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">运行状态</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<vue-seamless-scroll
|
||||||
|
:data="listData"
|
||||||
|
class="warp-scroll"
|
||||||
|
:class-option="{
|
||||||
|
singleHeight: 43,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<ul class="item">
|
||||||
|
<li v-for="item in scrollList" :key="item.id">
|
||||||
|
<el-row>
|
||||||
|
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">{{ item.name }}</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">
|
||||||
|
<el-tag v-if="item.level == '一级'" style="background-color: unset" type="danger" effect="plain">
|
||||||
|
{{ item.level }}</el-tag
|
||||||
|
>
|
||||||
|
<el-tag
|
||||||
|
v-else-if="item.level == '二级'"
|
||||||
|
style="background-color: unset"
|
||||||
|
type="warning"
|
||||||
|
effect="plain"
|
||||||
|
>
|
||||||
|
{{ item.level }}</el-tag
|
||||||
|
>
|
||||||
|
<el-tag v-else style="background-color: unset" effect="plain"> {{ item.level }}</el-tag>
|
||||||
|
</el-col>
|
||||||
|
<el-col style="text-align: center" :span="7">
|
||||||
|
<section class="box">
|
||||||
|
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||||
|
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||||
|
>·</span
|
||||||
|
>
|
||||||
|
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
||||||
|
<span v-if="item.status == 1">运行中</span>
|
||||||
|
<span v-else-if="item.status == 3">已损坏</span>
|
||||||
|
<span v-else>未开始</span>
|
||||||
|
</section>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
|
import container from './components/container/index.vue'
|
||||||
|
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||||
|
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||||
|
import colorList from '@/utils/colorPalette'
|
||||||
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||||
|
// import {Liquid} from '@antv/g2plot';
|
||||||
|
// import resize from '../../dashboard/mixins/resize'
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
export default {
|
||||||
|
// mixins: [resize],
|
||||||
|
name: 'left1',
|
||||||
|
components: {
|
||||||
|
rocketTit,
|
||||||
|
container,
|
||||||
|
bigScreenTabs,
|
||||||
|
progressBar,
|
||||||
|
vueSeamlessScroll,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data: [
|
||||||
|
{ value: 154, name: '类别一' },
|
||||||
|
{ value: 775, name: '类别二' },
|
||||||
|
{ value: 679, name: '类别三' },
|
||||||
|
{ value: 679, name: '类别四' },
|
||||||
|
{ value: 679, name: '类别五' },
|
||||||
|
{ value: 679, name: '类别六' },
|
||||||
|
{ value: 679, name: '类别七' },
|
||||||
|
{ value: 679, name: '类别八' },
|
||||||
|
],
|
||||||
|
colorList,
|
||||||
|
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||||
|
scrollList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '危险点一',
|
||||||
|
level: '一级',
|
||||||
|
status: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '危险点二',
|
||||||
|
level: '二级',
|
||||||
|
status: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '危险点三',
|
||||||
|
level: '三级',
|
||||||
|
status: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '危险点四',
|
||||||
|
level: '二级',
|
||||||
|
status: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: '危险点五',
|
||||||
|
level: '三级',
|
||||||
|
status: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// this.initChart()
|
||||||
|
// this.initLine()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||||
|
this.setOptions()
|
||||||
|
},
|
||||||
|
setOptions() {
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||||
|
},
|
||||||
|
color: this.colorList,
|
||||||
|
legend: {
|
||||||
|
data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
|
||||||
|
orient: 'vertical',
|
||||||
|
// left: '60%',
|
||||||
|
right: '2%',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
//图例文字的样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '概括',
|
||||||
|
type: 'pie',
|
||||||
|
radius: [0, '85%'],
|
||||||
|
center: ['35%', '50%'],
|
||||||
|
label: {
|
||||||
|
formatter: '',
|
||||||
|
position: 'inner',
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: this.data,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initLine() {
|
||||||
|
this.chart = echarts.init(this.$refs.left2)
|
||||||
|
this.setOptions2()
|
||||||
|
},
|
||||||
|
setOptions2() {
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: '{a1}<br/>{b1}：{c1}',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['收入', '实际', '目标'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', //legend字体颜色
|
||||||
|
},
|
||||||
|
// selectedMode: false,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
left: 20,
|
||||||
|
right: 10,
|
||||||
|
top: 30,
|
||||||
|
bottom: 50,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: [
|
||||||
|
'2021-01',
|
||||||
|
'2021-02',
|
||||||
|
'2021-03',
|
||||||
|
'2021-04',
|
||||||
|
'2021-05',
|
||||||
|
'2021-06',
|
||||||
|
'2021-07',
|
||||||
|
'2021-08',
|
||||||
|
'2021-09',
|
||||||
|
'2021-10',
|
||||||
|
'2021-11',
|
||||||
|
'2021-12',
|
||||||
|
],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataZoom: {
|
||||||
|
type: 'slider',
|
||||||
|
start: 0,
|
||||||
|
end: 50,
|
||||||
|
},
|
||||||
|
color: ['#ccc', 'red'],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: '件',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
// 改变轴线颜色
|
||||||
|
lineStyle: {
|
||||||
|
// 使用深浅的间隔色
|
||||||
|
color: ['rgba(255, 255, 255,.5)'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
interval: 20,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} %',
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false, //不显示网格线
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false, //不显示网格区域
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '收入',
|
||||||
|
type: 'bar',
|
||||||
|
z: '-1',
|
||||||
|
barGap: '-75%',
|
||||||
|
barWidth: 30,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(85, 197, 162, .3)',
|
||||||
|
},
|
||||||
|
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '实际',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 15,
|
||||||
|
position: [0, 0],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(90, 216, 166, 0.85)',
|
||||||
|
},
|
||||||
|
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '目标',
|
||||||
|
type: 'scatter',
|
||||||
|
symbol: 'rect',
|
||||||
|
symbolSize: [30, 4],
|
||||||
|
symbolOffset: [3, 0],
|
||||||
|
position: [0, 0],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F6D97E',
|
||||||
|
},
|
||||||
|
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep .el-progress-bar__inner {
|
||||||
|
background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%) !important;
|
||||||
|
}
|
||||||
|
.warp-scroll {
|
||||||
|
height: 126px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
li,
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
background: rgba(42, 67, 125, 1);
|
||||||
|
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||||
|
margin-bottom: 1px;
|
||||||
|
img {
|
||||||
|
vertical-align: sub;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content1 {
|
||||||
|
// height: 200px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.chart1 {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 192px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: Roboto-BlackItalic, Roboto;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #91d5fe;
|
||||||
|
vertical-align: sub;
|
||||||
|
// margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content2 {
|
||||||
|
padding: 20px;
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.chart2 {
|
||||||
|
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>
|
||||||
252
src/views/bigScreen/securityManage/left2.vue
Normal file
252
src/views/bigScreen/securityManage/left2.vue
Normal file
@ -0,0 +1,252 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<container3 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>
|
||||||
|
</container3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import scalseBox from '../components/scaleBox.vue'
|
||||||
|
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
||||||
|
import rocketTit from "../components/rocketTit/index.vue";
|
||||||
|
import container3 from "./components/container3/index.vue";
|
||||||
|
|
||||||
|
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from '../../dashboard/mixins/resize'
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
name: 'left2',
|
||||||
|
components: {
|
||||||
|
scalseBox,
|
||||||
|
bigScreenHead,
|
||||||
|
rocketTit,
|
||||||
|
container3,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dateRange: [],
|
||||||
|
chart: null,
|
||||||
|
option: {
|
||||||
|
legend: {
|
||||||
|
data: ['利润', '利润预测', '利润目标完成率'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '6%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'2021-01',
|
||||||
|
'2021-02',
|
||||||
|
'2021-03',
|
||||||
|
'2021-04',
|
||||||
|
'2021-05',
|
||||||
|
'2021-06',
|
||||||
|
'2021-07',
|
||||||
|
'2021-08',
|
||||||
|
'2021-09',
|
||||||
|
'2021-10',
|
||||||
|
'2021-11',
|
||||||
|
'2021-12',
|
||||||
|
],
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '万元',
|
||||||
|
min: 0,
|
||||||
|
max: 250,
|
||||||
|
interval: 50,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false//不显示网格线
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false//不显示网格区域
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 25,
|
||||||
|
interval: 5,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} %'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false//不显示网格线
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false//不显示网格区域
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
width: "99%",
|
||||||
|
left: 0,
|
||||||
|
top: 50,
|
||||||
|
bottom: 50,
|
||||||
|
},
|
||||||
|
dataZoom: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '利润',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
data: [
|
||||||
|
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(118,196,166)'
|
||||||
|
},
|
||||||
|
barGap: '0'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '利润预测',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
data: [
|
||||||
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear', // 线性渐变
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#B5D3FE' // 0%处的颜色为红色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#7EA7FC' // 100%处的颜色为蓝
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '利润目标完成率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
smooth: false,
|
||||||
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#55C5A2'
|
||||||
|
},
|
||||||
|
symbol: 'none'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// yAxis: {
|
||||||
|
// type: 'value',
|
||||||
|
// splitLine: {
|
||||||
|
// show: false//不显示网格线
|
||||||
|
// },
|
||||||
|
// splitArea: {
|
||||||
|
// show: false//不显示网格区域
|
||||||
|
// },
|
||||||
|
// axisLine: {
|
||||||
|
// lineStyle: {
|
||||||
|
// color: 'rgb(255, 255, 255)'
|
||||||
|
// },
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// series: [
|
||||||
|
// {
|
||||||
|
// name: '利润',
|
||||||
|
// type: 'bar',
|
||||||
|
// data: [
|
||||||
|
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '利润预测',
|
||||||
|
// type: 'bar',
|
||||||
|
// data: [
|
||||||
|
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '利润目标完成率',
|
||||||
|
// type: 'line',
|
||||||
|
// yAxisIndex: 1,
|
||||||
|
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||||
|
// }
|
||||||
|
|
||||||
|
// ]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.num {
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: Roboto-Black, Roboto;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #f6d97e;
|
||||||
|
line-height: 35px;
|
||||||
|
// margin-right: 3px;
|
||||||
|
}
|
||||||
|
.num2 {
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: Roboto-Black, Roboto;
|
||||||
|
font-weight: 900;
|
||||||
|
color: rgba(16, 152, 255, 1);
|
||||||
|
line-height: 35px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/views/bigScreen/securityManage/right1-1.png
Normal file
BIN
src/views/bigScreen/securityManage/right1-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/views/bigScreen/securityManage/right1-2.png
Normal file
BIN
src/views/bigScreen/securityManage/right1-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
353
src/views/bigScreen/securityManage/right1.vue
Normal file
353
src/views/bigScreen/securityManage/right1.vue
Normal file
@ -0,0 +1,353 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<container2 title="重点危险源部门分布">
|
||||||
|
<div style="height: 100%; width: 100%" ref="left1"></div>
|
||||||
|
</container2>
|
||||||
|
<container2 title="重大危险点部门分布" style="margin-top: 10px">
|
||||||
|
<div style="height: 100%; width: 100%" ref="left2"></div>
|
||||||
|
</container2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
|
import container2 from './components/container2/index.vue'
|
||||||
|
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||||
|
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||||
|
import colorList from '@/utils/colorPalette'
|
||||||
|
// import {Liquid} from '@antv/g2plot';
|
||||||
|
// import resize from '../../dashboard/mixins/resize'
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
export default {
|
||||||
|
// mixins: [resize],
|
||||||
|
name: 'left1',
|
||||||
|
components: {
|
||||||
|
rocketTit,
|
||||||
|
container2,
|
||||||
|
bigScreenTabs,
|
||||||
|
progressBar,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
colorList,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
this.initLine()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$refs.left1)
|
||||||
|
this.setOptions()
|
||||||
|
},
|
||||||
|
setOptions() {
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', //legend字体颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 20,
|
||||||
|
right: 20,
|
||||||
|
top: 30,
|
||||||
|
bottom: 50,
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
dataZoom: {
|
||||||
|
type: 'slider',
|
||||||
|
// start: 0,
|
||||||
|
// end: 50,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: '个',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
// 改变轴线颜色
|
||||||
|
lineStyle: {
|
||||||
|
// 使用深浅的间隔色
|
||||||
|
color: ['rgba(255, 255, 255,.5)'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '四级危险源',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#FF9F43',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '三级危险源',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F7DC87',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '二级危险源',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#55C5A2',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '一级危险源',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#5B8FF9',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initLine() {
|
||||||
|
this.chart = echarts.init(this.$refs.left2)
|
||||||
|
this.setOptions2()
|
||||||
|
},
|
||||||
|
setOptions2() {
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['一级危险源', '二级危险源', '三级危险源'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff', //legend字体颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 20,
|
||||||
|
right: 20,
|
||||||
|
top: 30,
|
||||||
|
bottom: 50,
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
dataZoom: {
|
||||||
|
type: 'slider',
|
||||||
|
// start: 0,
|
||||||
|
// end: 50,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
name: '个',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
// 改变轴线颜色
|
||||||
|
lineStyle: {
|
||||||
|
// 使用深浅的间隔色
|
||||||
|
color: ['rgba(255, 255, 255,.5)'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '三级危险源',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F7DC87',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '二级危险源',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#55C5A2',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '一级危险源',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#5B8FF9',
|
||||||
|
},
|
||||||
|
barWidth: 30,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
.box {
|
||||||
|
padding: 0 0 5px 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.num {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content1 {
|
||||||
|
// height: 200px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.chart1 {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 192px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: Roboto-BlackItalic, Roboto;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #91d5fe;
|
||||||
|
vertical-align: sub;
|
||||||
|
// margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content2 {
|
||||||
|
padding: 20px;
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.chart2 {
|
||||||
|
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>
|
||||||
253
src/views/bigScreen/securityManage/right2.vue
Normal file
253
src/views/bigScreen/securityManage/right2.vue
Normal file
@ -0,0 +1,253 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<container3 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>
|
||||||
|
</container3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import scalseBox from '../components/scaleBox.vue'
|
||||||
|
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
||||||
|
import rocketTit from "../components/rocketTit/index.vue";
|
||||||
|
import container3 from "./components/container3/index.vue";
|
||||||
|
|
||||||
|
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from '../../dashboard/mixins/resize'
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
name: 'right2',
|
||||||
|
components: {
|
||||||
|
scalseBox,
|
||||||
|
bigScreenHead,
|
||||||
|
rocketTit,
|
||||||
|
container3,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dateRange: [],
|
||||||
|
chart: null,
|
||||||
|
option: {
|
||||||
|
legend: {
|
||||||
|
data: ['利润', '利润预测', '利润目标完成率'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '6%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'2021-01',
|
||||||
|
'2021-02',
|
||||||
|
'2021-03',
|
||||||
|
'2021-04',
|
||||||
|
'2021-05',
|
||||||
|
'2021-06',
|
||||||
|
'2021-07',
|
||||||
|
'2021-08',
|
||||||
|
'2021-09',
|
||||||
|
'2021-10',
|
||||||
|
'2021-11',
|
||||||
|
'2021-12',
|
||||||
|
],
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '万元',
|
||||||
|
min: 0,
|
||||||
|
max: 250,
|
||||||
|
interval: 50,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false//不显示网格线
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false//不显示网格区域
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 25,
|
||||||
|
interval: 5,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} %'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false//不显示网格线
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false//不显示网格区域
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgb(255, 255, 255)'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
width: "99%",
|
||||||
|
left: 0,
|
||||||
|
top: 50,
|
||||||
|
bottom: 50,
|
||||||
|
},
|
||||||
|
dataZoom: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '利润',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
data: [
|
||||||
|
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgb(118,196,166)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '利润预测',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
data: [
|
||||||
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear', // 线性渐变
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#B5D3FE' // 0%处的颜色为红色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#7EA7FC' // 100%处的颜色为蓝
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '利润目标完成率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
smooth: false,
|
||||||
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#F6D97E'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
symbol: 'none'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// yAxis: {
|
||||||
|
// type: 'value',
|
||||||
|
// splitLine: {
|
||||||
|
// show: false//不显示网格线
|
||||||
|
// },
|
||||||
|
// splitArea: {
|
||||||
|
// show: false//不显示网格区域
|
||||||
|
// },
|
||||||
|
// axisLine: {
|
||||||
|
// lineStyle: {
|
||||||
|
// color: 'rgb(255, 255, 255)'
|
||||||
|
// },
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// series: [
|
||||||
|
// {
|
||||||
|
// name: '利润',
|
||||||
|
// type: 'bar',
|
||||||
|
// data: [
|
||||||
|
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '利润预测',
|
||||||
|
// type: 'bar',
|
||||||
|
// data: [
|
||||||
|
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '利润目标完成率',
|
||||||
|
// type: 'line',
|
||||||
|
// yAxisIndex: 1,
|
||||||
|
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||||
|
// }
|
||||||
|
|
||||||
|
// ]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.num {
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: Roboto-Black, Roboto;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #f6d97e;
|
||||||
|
line-height: 35px;
|
||||||
|
// margin-right: 3px;
|
||||||
|
}
|
||||||
|
.num2 {
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: Roboto-Black, Roboto;
|
||||||
|
font-weight: 900;
|
||||||
|
color: rgba(16, 152, 255, 1);
|
||||||
|
line-height: 35px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user