mirror of
https://gitee.com/beecue/fastbee.git
synced 2025-12-17 16:36:03 +08:00
大屏展示
This commit is contained in:
孙阿龙
65
vue/src/views/bigScreen/components/echart/index.vue
Normal file
65
vue/src/views/bigScreen/components/echart/index.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tdTheme from './theme.json' // 引入默认主题
|
||||
|
||||
export default {
|
||||
name: 'echart',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: ()=>({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
handler (options) {
|
||||
// 设置true清空echart缓存
|
||||
this.chart.setOption(options, true)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
// 初始化echart
|
||||
this.chart = echarts.init(this.$el, 'tdTheme')
|
||||
this.chart.setOption(this.options, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
490
vue/src/views/bigScreen/components/echart/theme.json
Normal file
490
vue/src/views/bigScreen/components/echart/theme.json
Normal file
@@ -0,0 +1,490 @@
|
||||
{
|
||||
"color": [
|
||||
"#2d8cf0",
|
||||
"#19be6b",
|
||||
"#ff9900",
|
||||
"#E46CBB",
|
||||
"#9A66E4",
|
||||
"#ed3f14"
|
||||
],
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#516b91"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#93b7e3"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "2"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "2"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "2"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "2"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"bar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"pie": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scatter": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"boxplot": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"parallel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"sankey": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"gauge": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#edafda",
|
||||
"color0": "transparent",
|
||||
"borderColor": "#d680bc",
|
||||
"borderColor0": "#8fd3e8",
|
||||
"borderWidth": "2"
|
||||
}
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": 1,
|
||||
"color": "#aaa"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true,
|
||||
"color": [
|
||||
"#2d8cf0",
|
||||
"#19be6b",
|
||||
"#f5ae4a",
|
||||
"#9189d5",
|
||||
"#56cae2",
|
||||
"#cbb0e3"
|
||||
],
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#f3f3f3",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(165,231,240,1)",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(81,107,145)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#f3f3f3",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(165,231,240,1)",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(81,107,145)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"logAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"toolbox": {
|
||||
"iconStyle": {
|
||||
"normal": {
|
||||
"borderColor": "#999"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderColor": "#666"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#8fd3e8",
|
||||
"width": 1
|
||||
},
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#8fd3e8",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
},
|
||||
"controlStyle": {
|
||||
"normal": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "#8fd3e8",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "#8fd3e8",
|
||||
"borderWidth": 0.5
|
||||
}
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "rgba(138,124,168,0.37)"
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"color": [
|
||||
"#516b91",
|
||||
"#59c4e6",
|
||||
"#a5e7f0"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"dataBackgroundColor": "rgba(255,255,255,0.3)",
|
||||
"fillerColor": "rgba(167,183,204,0.4)",
|
||||
"handleColor": "#a7b7cc",
|
||||
"handleSize": "100%",
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
90
vue/src/views/bigScreen/components/item-wrap/item-wrap.vue
Normal file
90
vue/src/views/bigScreen/components/item-wrap/item-wrap.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<dv-border-box-13 class="lr_titles">
|
||||
<div class="item_title" v-if="title !== ''">
|
||||
<div class="zuo"></div>
|
||||
<span class="title-inner"> {{ title }} </span>
|
||||
<div class="you"></div>
|
||||
</div>
|
||||
<div
|
||||
:class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: () => "",
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
$item-title-height: 38px;
|
||||
$item_title_content-height: calc(100% - 38px);
|
||||
|
||||
.lr_titles {
|
||||
box-sizing: border-box;
|
||||
|
||||
::v-deep .border-box-content {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 16px 0px;
|
||||
}
|
||||
|
||||
.item_title {
|
||||
height: $item-title-height;
|
||||
line-height: $item-title-height;
|
||||
width: 100%;
|
||||
color: #31abe3;
|
||||
text-align: center;
|
||||
// background: linear-gradient(to right, transparent, #0f0756, transparent);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.zuo,
|
||||
.you {
|
||||
width: 58px;
|
||||
height: 14px;
|
||||
background-image: url("../../../../assets/bigScreen/img/titles/zuo.png");
|
||||
}
|
||||
|
||||
.you {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.title-inner {
|
||||
font-weight: 900;
|
||||
letter-spacing: 2px;
|
||||
background: linear-gradient(
|
||||
92deg,
|
||||
#0072ff 0%,
|
||||
#00eaff 48.8525390625%,
|
||||
#01aaff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.item_title_content {
|
||||
height: $item_title_content-height;
|
||||
}
|
||||
|
||||
.item_title_content_def {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
vue/src/views/bigScreen/components/kong.vue
Normal file
43
vue/src/views/bigScreen/components/kong.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class='kong'>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props:{
|
||||
data:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
init(){
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.kong{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
49
vue/src/views/bigScreen/components/message/message.js
Normal file
49
vue/src/views/bigScreen/components/message/message.js
Normal file
@@ -0,0 +1,49 @@
|
||||
/*
|
||||
* @Author: daidai
|
||||
* @Date: 2022-02-16 17:08:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-04-25 10:12:36
|
||||
* @FilePath: \yhht-ui\yhht-ui\packagesEle\getXY\src\main.js
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
import Main from './message.vue';
|
||||
import {isObject,isVNode} from '@/lib/types'
|
||||
let Message = Vue.extend(Main);
|
||||
let instance;
|
||||
var message = function (options) {
|
||||
if (Vue.prototype.$isServer) return;
|
||||
if(!instance){
|
||||
instance = new Message({
|
||||
data: {
|
||||
...options
|
||||
},
|
||||
|
||||
});
|
||||
instance.$mount();
|
||||
}
|
||||
instance.destroy=()=>{
|
||||
document.body.removeChild(instance.$el);
|
||||
instance&&instance.$destroy()
|
||||
instance=null
|
||||
return null
|
||||
}
|
||||
instance.init(options)
|
||||
document.body.appendChild(instance.$el);
|
||||
return instance;
|
||||
};
|
||||
['success', 'warning', 'info', 'error'].forEach(type => {
|
||||
message[type] = (options) => {
|
||||
if (isObject(options) && !isVNode(options)) {
|
||||
return message({
|
||||
...options,
|
||||
type
|
||||
});
|
||||
}
|
||||
return message({
|
||||
type,
|
||||
text: options
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
export default message;
|
||||
67
vue/src/views/bigScreen/components/message/message.vue
Normal file
67
vue/src/views/bigScreen/components/message/message.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="messages" v-if="visible">
|
||||
<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="message-icon">
|
||||
<path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
|
||||
fill-opacity="0.9" v-if="'warning'==type"></path>
|
||||
</svg>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
text: "",
|
||||
type:'warning'
|
||||
};
|
||||
},
|
||||
props: {},
|
||||
created() { },
|
||||
|
||||
mounted() { },
|
||||
methods: {
|
||||
init(param) {
|
||||
clearTimeout(this.timer);
|
||||
this.visible = true;
|
||||
this.text = param.text || "";
|
||||
this.type = param.type || "success";
|
||||
this.timer = setTimeout(() => {
|
||||
this.visible = false;
|
||||
clearTimeout(this.timer);
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.messages {
|
||||
position: fixed;
|
||||
min-width: 200px;
|
||||
top: 160px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
border: solid 1px #4b4b4b;
|
||||
// box-shadow: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%),
|
||||
// 0 8px 10px rgba(0, 0, 0, 20%), inset 0 0.5px 0 #5e5e5e,
|
||||
// inset 0.5px 0 0 #5e5e5e, inset 0 -0.5px 0 #5e5e5e, inset -0.5px 0 0 #5e5e5e;
|
||||
width: fit-content;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background-color: #242424;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
padding: 13px 16px;
|
||||
|
||||
.message-icon {
|
||||
color: #cf6e2d;
|
||||
font-size: 20px;
|
||||
margin-right: 8px;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
vue/src/views/bigScreen/components/reacquire/reacquire.vue
Normal file
63
vue/src/views/bigScreen/components/reacquire/reacquire.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class='reacquire flex justify-center blocks cursor-pointer' :style="{ lineHeight: lineHeight }"
|
||||
@click="getData">
|
||||
<span>
|
||||
重新获取
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
lineHeight: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
init() {
|
||||
},
|
||||
getData(e){
|
||||
this.$emit("onclick",e)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.reacquire {
|
||||
|
||||
user-select:none;
|
||||
color: rgb(168, 168, 168);
|
||||
span:hover{
|
||||
// color:$primary-color ;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.blocks {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
267
vue/src/views/bigScreen/home.scss
Normal file
267
vue/src/views/bigScreen/home.scss
Normal file
@@ -0,0 +1,267 @@
|
||||
#index {
|
||||
color: #d3d6dd;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
|
||||
&.pageisScale {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px 16px 10px 16px;
|
||||
box-sizing: border-box;
|
||||
background-image: url("../../assets/bigScreen/img/pageBg.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.host-body {
|
||||
height: 100%;
|
||||
|
||||
.title_wrap {
|
||||
height: 60px;
|
||||
background-image: url("../../assets/bigScreen/img/top.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.guang {
|
||||
position: absolute;
|
||||
bottom: -26px;
|
||||
background-image: url("../../assets/bigScreen/img/guang.png");
|
||||
background-position: 80px center;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.zuojuxing,
|
||||
.youjuxing {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 140px;
|
||||
height: 6px;
|
||||
background-image: url("../../assets/bigScreen/img/headers/juxing1.png");
|
||||
}
|
||||
|
||||
.zuojuxing {
|
||||
|
||||
left: 11%;
|
||||
}
|
||||
|
||||
.youjuxing {
|
||||
right: 11%;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.timers {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 30px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.blq-icon-shezhi02 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
// width: 500px;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
color: transparent;
|
||||
height: 60px;
|
||||
line-height: 46px;
|
||||
|
||||
.title-text {
|
||||
font-size: 38px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 6px;
|
||||
width: 100%;
|
||||
background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.index_home {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #03050C;
|
||||
.pagetab {
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
width: 130px;
|
||||
height: 36px;
|
||||
border-radius: 18px 0px 0px 18px;
|
||||
color: #00FBF8;
|
||||
text-indent: 26px;
|
||||
line-height: 36px;
|
||||
font-size: 16px;
|
||||
margin-right: 20px;
|
||||
background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.left_shu {
|
||||
color: #000;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
text-indent: 10px;
|
||||
padding:16px 0 10px 0 ;
|
||||
&::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
height: 16px;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background: #0072FF;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.setting_dislog {
|
||||
background-color: rgba($color: #000000, $alpha: .5);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.setting_inner {
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
width: 340px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
color: #000000;
|
||||
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
|
||||
|
||||
.setting_header {
|
||||
font-size: 20px;
|
||||
color: rgb(0, 0, 0);
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.setting_body {
|
||||
padding: 0px 16px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.setting_item {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
||||
// display: flex;
|
||||
.setting_label {
|
||||
color: #555454;
|
||||
}
|
||||
.setting_label_tip{
|
||||
font-size: 12px;
|
||||
color: #838282;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting_inner {
|
||||
animation: rtl-drawer-out .3s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.settingShow {
|
||||
.setting_inner {
|
||||
animation: rtl-drawer-in .3s 1ms;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.yh-setting-fade-enter-active {
|
||||
animation: yh-setting-fade-in .3s;
|
||||
}
|
||||
|
||||
.yh-setting-fade-leave-active {
|
||||
|
||||
animation: yh-setting-fade-out .3s;
|
||||
|
||||
}
|
||||
|
||||
@keyframes yh-setting-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes yh-setting-fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes rtl-drawer-in {
|
||||
0% {
|
||||
transform: translate(100%, 0)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rtl-drawer-out {
|
||||
0% {
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(100%, 0)
|
||||
}
|
||||
}
|
||||
93
vue/src/views/bigScreen/home.vue
Normal file
93
vue/src/views/bigScreen/home.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div id="index" ref="appRef" class="index_home" :class="{ pageisScale: true }">
|
||||
<div class="bg">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="host-body">
|
||||
<!-- 头部 s -->
|
||||
<div class="d-flex jc-center title_wrap">
|
||||
<div class="zuojuxing"></div>
|
||||
<div class="youjuxing"></div>
|
||||
<div class="guang"></div>
|
||||
<div class="d-flex jc-center">
|
||||
<div class="title">
|
||||
<span class="title-text">物美智能系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timers ">
|
||||
|
||||
{{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
||||
<i class=" blq-icon-shezhi02" style="margin-left:10px" @click="showSetting"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 头部 e-->
|
||||
<!-- 内容 s-->
|
||||
<index></index>
|
||||
<!-- 内容 e -->
|
||||
</div>
|
||||
</div>
|
||||
<Setting ref="setting"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drawMixin from "../../utils/bigScreen/drawMixin";
|
||||
import { formatTime } from "../../utils/bigScreen/index.js";
|
||||
import Setting from './setting.vue'
|
||||
import index from './indexs/index.vue'
|
||||
export default {
|
||||
mixins: [drawMixin],
|
||||
components:{Setting,index},
|
||||
data() {
|
||||
return {
|
||||
timing: null,
|
||||
loading: true,
|
||||
dateDay: null,
|
||||
dateYear: null,
|
||||
dateWeek: null,
|
||||
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
created(){
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.timeFn();
|
||||
this.cancelLoading();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timing);
|
||||
},
|
||||
methods: {
|
||||
showSetting(){
|
||||
this.$refs.setting.init()
|
||||
},
|
||||
timeFn() {
|
||||
this.timing = setInterval(() => {
|
||||
this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
||||
this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
||||
this.dateWeek = this.weekday[new Date().getDay()];
|
||||
}, 1000);
|
||||
},
|
||||
cancelLoading() {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./home.scss";
|
||||
</style>
|
||||
179
vue/src/views/bigScreen/indexs/center-bottom.vue
Normal file
179
vue/src/views/bigScreen/indexs/center-bottom.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="center_bottom">
|
||||
<Echart :options="options" id="bottomLeftChart" class="echarts_bottom"></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {currentGET} from '@/api/bigScreen/modules'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
currentGET('big6', { companyName: this.companyName }).then(res => {
|
||||
console.log('安装计划', res);
|
||||
if (res.success) {
|
||||
this.init(res.data)
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
init(newData) {
|
||||
this.options = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
formatter: function (params) {
|
||||
// 添加单位
|
||||
var result = params[0].name + "<br>";
|
||||
params.forEach(function (item) {
|
||||
if (item.value) {
|
||||
if(item.seriesName=="安装率"){
|
||||
result += item.marker + " " + item.seriesName + " : " + item.value + "%</br>";
|
||||
}else{
|
||||
result += item.marker + " " + item.seriesName + " : " + item.value + "个</br>";
|
||||
}
|
||||
} else {
|
||||
result += item.marker + " " + item.seriesName + " : - </br>";
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["已安装", "计划安装", "安装率"],
|
||||
textStyle: {
|
||||
color: "#B4B4B4"
|
||||
},
|
||||
top: "0"
|
||||
},
|
||||
grid: {
|
||||
left: "50px",
|
||||
right: "40px",
|
||||
bottom: "30px",
|
||||
top: "20px",
|
||||
},
|
||||
xAxis: {
|
||||
data: newData.category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
formatter: "{value}"
|
||||
}
|
||||
},
|
||||
{
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#B4B4B4"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value}% "
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
name: "已安装",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#956FD4" },
|
||||
{ offset: 1, color: "#3EACE5" }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: newData.barData
|
||||
},
|
||||
{
|
||||
name: "计划安装",
|
||||
type: "bar",
|
||||
barGap: "-100%",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(156,107,211,0.8)" },
|
||||
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
|
||||
{ offset: 1, color: "rgba(156,107,211,0.2)" }
|
||||
])
|
||||
}
|
||||
},
|
||||
z: -12,
|
||||
data: newData.lineData
|
||||
},
|
||||
{
|
||||
name: "安装率",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
showAllSymbol: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F02FC2"
|
||||
}
|
||||
},
|
||||
data: newData.rateData
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center_bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.echarts_bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
398
vue/src/views/bigScreen/indexs/center-map.vue
Normal file
398
vue/src/views/bigScreen/indexs/center-map.vue
Normal file
@@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<div class="centermap">
|
||||
<div class="maptitle">
|
||||
<div class="zuo"></div>
|
||||
<span class="titletext">{{ maptitle }}</span>
|
||||
<div class="you"></div>
|
||||
</div>
|
||||
<div class="mapwrap">
|
||||
<dv-border-box-13 >
|
||||
<div class="quanguo" @click="getData(-1)" v-if="code !== 'china' && userCode == -1">
|
||||
中国
|
||||
</div>
|
||||
|
||||
<Echart id="CenterMap" :options="options" ref="CenterMap" />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import xzqCode from "../../../utils/bigScreen/map/xzqCode";
|
||||
import { currentGET } from '@/api/bigScreen/modules'
|
||||
|
||||
import { GETNOBASE } from '@/api/bigScreen/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
maptitle: "设备分布图",
|
||||
options: {},
|
||||
code: "china",
|
||||
userCode: -1,//-1 代表中国 用户权限的行政区code
|
||||
echartBindClick: false
|
||||
};
|
||||
},
|
||||
created() { },
|
||||
|
||||
mounted() {
|
||||
// console.log(xzqCode);
|
||||
this.getData()
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData(code) {
|
||||
currentGET('big8',{regionCode:code}).then(res => {
|
||||
console.log('设备分布', res);
|
||||
if (res.success) {
|
||||
if (!code) {
|
||||
this.userCode = res.data.regionCode;
|
||||
}
|
||||
this.getGeojson(res.data.regionCode, res.data.dataList);
|
||||
this.mapclick();
|
||||
|
||||
} else {
|
||||
this.$Message.warning(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
getGeojson(name, mydata) {
|
||||
|
||||
if (name == -1) {
|
||||
name = 'china'
|
||||
}
|
||||
this.code = name;
|
||||
GETNOBASE("./map-geojson/" + name + ".json").then((res) => {
|
||||
// console.log('地图行政区划', name, res);
|
||||
let cityCenter = {};
|
||||
let arr = res.features;
|
||||
arr.map((item) => {
|
||||
cityCenter[item.properties.name] =
|
||||
item.properties.centroid || item.properties.center;
|
||||
});
|
||||
let newData = [];
|
||||
// console.log('中心点',cityCenter);
|
||||
mydata.map((item) => {
|
||||
if (cityCenter[item.name]) {
|
||||
let color = this.getColor(item.value);
|
||||
newData.push({
|
||||
name: item.name,
|
||||
value: cityCenter[item.name].concat(item.value),
|
||||
// itemStyle: {
|
||||
// color: color,
|
||||
// borderColor: color,
|
||||
// // borderWidth: 4,
|
||||
// },
|
||||
});
|
||||
}
|
||||
});
|
||||
let mapjson = echarts.getMap(name);
|
||||
if (!mapjson) {
|
||||
echarts.registerMap(name, res);
|
||||
}
|
||||
this.init(name, mydata, newData);
|
||||
});
|
||||
},
|
||||
getColor(num) {
|
||||
if (num > 0 && num < 9) {
|
||||
return "#035cf5";
|
||||
} else if (num > 10 && num < 49) {
|
||||
return "#3375e4";
|
||||
} else if (num > 50 && num < 199) {
|
||||
return "#6797ef";
|
||||
} else if (num > 200 && num < 499) {
|
||||
return "#96b5ef";
|
||||
} else if (num > 500 && num < 9999) {
|
||||
return "#bacae8";
|
||||
} else if (num > 1000) {
|
||||
return "#3FF4FF";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
init(name, data, data2) {
|
||||
let top = 45;
|
||||
let zoom = 1.05;
|
||||
if (name == "china") {
|
||||
top = 140;
|
||||
zoom = 1.42;
|
||||
}
|
||||
|
||||
let option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
visualMap: {
|
||||
left: 20,
|
||||
bottom: 20,
|
||||
pieces: [
|
||||
{ gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||
{ gte: 600, lte: 999, label: "600-999个" },
|
||||
{ gte: 200, lte: 599, label: "200-599个" },
|
||||
{ gte: 50, lte: 199, label: "49-199个" },
|
||||
{ gte: 10, lte: 49, label: "10-49个" },
|
||||
{ lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
],
|
||||
inRange: {
|
||||
// 渐变颜色，从小到大
|
||||
color: [
|
||||
"#c3d7df",
|
||||
"#5cb3cc",
|
||||
"#8abcd1",
|
||||
"#66a9c9",
|
||||
"#2f90b9",
|
||||
"#1781b5",
|
||||
],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: name,
|
||||
roam: false,
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: zoom,
|
||||
top: top,
|
||||
aspectScale: 0.78,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
}, //地图中文字内容及样式控制
|
||||
itemStyle: {
|
||||
areaColor: "rgba(0,0,0,0)",
|
||||
borderColor: "rgba(0,0,0,0)",
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "MAP",
|
||||
type: "map",
|
||||
mapType: name,
|
||||
aspectScale: 0.78,
|
||||
data: data,
|
||||
// data: [1,100],
|
||||
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: zoom,
|
||||
geoIndex: 1,
|
||||
top: top,
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
if (params.data) {
|
||||
return params.name + "：" + params.data["value"];
|
||||
} else {
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
color: "#000",
|
||||
// position: [-10, 0],
|
||||
formatter: function (val) {
|
||||
// console.log(val)
|
||||
if (val.data !== undefined) {
|
||||
return val.name.slice(0, 2);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
rich: {},
|
||||
emphasis: { show: false },
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺为 false
|
||||
},
|
||||
shadowColor: "rgba(128, 217, 248, .3)",
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10,
|
||||
emphasis: {
|
||||
areaColor: "#389BB7",
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
data: data2,
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
symbolSize: function (val) {
|
||||
return 4;
|
||||
// return val[2] / 50;
|
||||
},
|
||||
legendHoverLink: true,
|
||||
showEffectOn: "render",
|
||||
rippleEffect: {
|
||||
// period: 4,
|
||||
scale: 6,
|
||||
color: "rgba(255,255,255, 1)",
|
||||
brushType: "fill",
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
if (params.data) {
|
||||
return params.name + "：" + params.data["value"][2];
|
||||
} else {
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: (param) => {
|
||||
return param.name.slice(0, 2);
|
||||
},
|
||||
|
||||
fontSize: 11,
|
||||
offset: [0, 2],
|
||||
position: "bottom",
|
||||
textBorderColor: "#fff",
|
||||
textShadowColor: "#000",
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: "#FFF",
|
||||
show: true,
|
||||
},
|
||||
// colorBy: "data",
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
borderColor: "rgba(2255,255,255,2)",
|
||||
borderWidth: 4,
|
||||
shadowColor: "#000",
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.options = option;
|
||||
},
|
||||
message(text) {
|
||||
this.$Message({
|
||||
text: text,
|
||||
type: 'warning'
|
||||
})
|
||||
},
|
||||
mapclick() {
|
||||
if (this.echartBindClick || this.userCode !== -1) return
|
||||
//单击切换到级地图，当mapCode有值,说明可以切换到下级地图
|
||||
this.$refs.CenterMap.chart.on("click", (params) => {
|
||||
// console.log(params);
|
||||
let xzqData = xzqCode[params.name];
|
||||
if (xzqData) {
|
||||
this.getData(xzqData.adcode);
|
||||
} else {
|
||||
this.message("暂无下级地市!");
|
||||
}
|
||||
});
|
||||
this.echartBindClick = true
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.centermap {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.maptitle {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.titletext {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 6px;
|
||||
background: linear-gradient(92deg,
|
||||
#0072ff 0%,
|
||||
#00eaff 48.8525390625%,
|
||||
#01aaff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.zuo,
|
||||
.you {
|
||||
background-size: 100% 100%;
|
||||
width: 29px;
|
||||
height: 20px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.zuo {
|
||||
background: url("../../../assets/bigScreen/img/xiezuo.png") no-repeat;
|
||||
}
|
||||
|
||||
.you {
|
||||
background: url("../../../assets/bigScreen/img/xieyou.png") no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.mapwrap {
|
||||
|
||||
height: 548px;
|
||||
width: 100%;
|
||||
// padding: 0 0 10px 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.quanguo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: -46px;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
border: 1px solid #00eded;
|
||||
border-radius: 10px;
|
||||
color: #00f7f6;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
|
||||
0 0 6px rgba(0, 237, 237, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
154
vue/src/views/bigScreen/indexs/index.vue
Normal file
154
vue/src/views/bigScreen/indexs/index.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="contents">
|
||||
<div class="contetn_left">
|
||||
<div class="pagetab">
|
||||
<!-- <div class="item">实时监测</div> -->
|
||||
|
||||
</div>
|
||||
<ItemWrap class="contetn_left-top contetn_lr-item" title="设备总览">
|
||||
<LeftTop/>
|
||||
|
||||
</ItemWrap>
|
||||
<ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
|
||||
<LeftCenter />
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="设备提醒"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<LeftBottom />
|
||||
</ItemWrap>
|
||||
</div>
|
||||
<div class="contetn_center">
|
||||
<CenterMap class="contetn_center_top" />
|
||||
<ItemWrap class="contetn_center-bottom" title="安装计划">
|
||||
<CenterBottom />
|
||||
</ItemWrap>
|
||||
</div>
|
||||
<div class="contetn_right">
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="报警次数"
|
||||
>
|
||||
<RightTop />
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="报警排名(TOP8)"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<RightCenter />
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="数据统计图 "
|
||||
>
|
||||
<RightBottom />
|
||||
</ItemWrap>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftTop from './left-top.vue'
|
||||
import LeftCenter from "./left-center.vue";
|
||||
import LeftBottom from "./left-bottom.vue";
|
||||
import CenterMap from "./center-map.vue";
|
||||
import CenterBottom from "./center-bottom.vue";
|
||||
import RightTop from "./right-top.vue";
|
||||
import RightCenter from "./right-center.vue";
|
||||
import RightBottom from "./right-bottom.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LeftTop,
|
||||
LeftCenter,
|
||||
LeftBottom,
|
||||
CenterMap,
|
||||
RightTop,
|
||||
RightCenter,
|
||||
RightBottom,
|
||||
CenterBottom,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// 内容
|
||||
.contents {
|
||||
.contetn_left,
|
||||
.contetn_right {
|
||||
width: 540px;
|
||||
box-sizing: border-box;
|
||||
// padding: 16px 0;
|
||||
}
|
||||
|
||||
.contetn_center {
|
||||
width: 720px;
|
||||
}
|
||||
|
||||
//左右两侧 三个块
|
||||
.contetn_lr-item {
|
||||
height: 310px;
|
||||
}
|
||||
|
||||
.contetn_center_top {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 中间
|
||||
.contetn_center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.contetn_center-bottom {
|
||||
height: 315px;
|
||||
}
|
||||
|
||||
//左边 右边 结构一样
|
||||
.contetn_left,
|
||||
.contetn_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
-webkit-transform: rotate(0) scale(1);
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg) scale(1.1);
|
||||
transform: rotate(180deg) scale(1.1);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg) scale(1);
|
||||
transform: rotate(360deg) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
246
vue/src/views/bigScreen/indexs/left-bottom.vue
Normal file
246
vue/src/views/bigScreen/indexs/left-bottom.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="pageflag"
|
||||
class="left_boottom_wrap beautify-scroll-def"
|
||||
:class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
|
||||
>
|
||||
<component :is="components" :data="list" :class-option="defaultOption">
|
||||
<ul class="left_boottom">
|
||||
<li class="left_boottom_item" v-for="(item, i) in list" :key="i">
|
||||
<span class="orderNum doudong">{{ i + 1 }}</span>
|
||||
<div class="inner_right">
|
||||
<div class="dibu"></div>
|
||||
<div class="flex">
|
||||
<div class="info">
|
||||
<span class="labels">设备ID：</span>
|
||||
<span class="contents zhuyao doudong wangguan">
|
||||
{{ item.gatewayno }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span class="labels">时间：</span>
|
||||
<span class="contents " style="font-size: 12px">
|
||||
{{ item.createTime }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="types doudong"
|
||||
:class="{
|
||||
typeRed: item.onlineState == 0,
|
||||
typeGreen: item.onlineState == 1,
|
||||
}"
|
||||
>{{ item.onlineState == 1 ? "上线" : "下线" }}</span
|
||||
>
|
||||
|
||||
<div class="info addresswrap">
|
||||
<span class="labels">地址：</span>
|
||||
<span class="contents ciyao" style="font-size: 12px">
|
||||
{{ addressHandle(item) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</component>
|
||||
</div>
|
||||
|
||||
<Reacquire v-else @onclick="getData" style="line-height: 200px" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from "@/api/bigScreen/modules";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
|
||||
import Kong from "../components/kong.vue";
|
||||
export default {
|
||||
components: { vueSeamlessScroll, Kong },
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
pageflag: true,
|
||||
components: vueSeamlessScroll,
|
||||
defaultOption: {
|
||||
...this.$store.state.settings.defaultOption,
|
||||
singleHeight: 240,
|
||||
limitMoveNum: 5,
|
||||
step: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sbtxSwiperFlag() {
|
||||
let sbtxSwiper = this.$store.state.settings.sbtxSwiper;
|
||||
if (sbtxSwiper) {
|
||||
this.components = vueSeamlessScroll;
|
||||
} else {
|
||||
this.components = Kong;
|
||||
}
|
||||
return sbtxSwiper;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
methods: {
|
||||
addressHandle(item) {
|
||||
let name = item.provinceName;
|
||||
if (item.cityName) {
|
||||
name += "/" + item.cityName;
|
||||
if (item.countyName) {
|
||||
name += "/" + item.countyName;
|
||||
}
|
||||
}
|
||||
return name;
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
// this.pageflag =false
|
||||
currentGET("big3", { limitNum: 20 }).then((res) => {
|
||||
console.log("设备提醒", res);
|
||||
if (res.success) {
|
||||
this.countUserNumData = res.data;
|
||||
this.list = res.data.list;
|
||||
let timer = setTimeout(() => {
|
||||
clearTimeout(timer);
|
||||
this.defaultOption.step =
|
||||
this.$store.state.settings.defaultOption.step;
|
||||
}, this.$store.state.settings.defaultOption.waitTime);
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.left_boottom_wrap {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.doudong {
|
||||
// vertical-align:middle;
|
||||
overflow: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.left_boottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.left_boottom_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
.orderNum {
|
||||
margin: 0 16px 0 -20px;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.labels {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.zhuyao {
|
||||
// color: $primary-color;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ciyao {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #e6a23c;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.inner_right {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 380px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.dibu {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 104%;
|
||||
background-image: url("../../../assets/bigScreen/img/zuo_xuxian.png");
|
||||
bottom: -10px;
|
||||
left: -2%;
|
||||
background-size: cover;
|
||||
}
|
||||
.addresswrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.wangguan {
|
||||
color: #1890ff;
|
||||
font-weight: 900;
|
||||
font-size: 15px;
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
// color: rgba(211, 210, 210,.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
// @include text-overflow(1);
|
||||
}
|
||||
|
||||
.types {
|
||||
width: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.typeRed {
|
||||
color: #fc1a1a;
|
||||
}
|
||||
|
||||
.typeGreen {
|
||||
color: #29fc29;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
223
vue/src/views/bigScreen/indexs/left-center.vue
Normal file
223
vue/src/views/bigScreen/indexs/left-center.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
|
||||
<Reacquire v-else @onclick="getData" style="line-height:200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from '@/api/bigScreen/modules'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
countUserNumData: {
|
||||
lockNum: 0,
|
||||
onlineNum: 0,
|
||||
offlineNum: 0,
|
||||
totalNum: 0
|
||||
},
|
||||
pageflag: true,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
currentGET('big1').then(res => {
|
||||
//只打印一次
|
||||
if (!this.timer) {
|
||||
console.log("设备总览", res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.countUserNumData = res.data
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
this.switper()
|
||||
})
|
||||
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
|
||||
let myChart = this.$refs.charts.chart
|
||||
myChart.on('mouseover', params => {
|
||||
this.clearData()
|
||||
});
|
||||
myChart.on('mouseout', params => {
|
||||
this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
|
||||
});
|
||||
},
|
||||
init() {
|
||||
let total = this.countUserNumData.totalNum;
|
||||
let colors = ["#ECA444", "#33A1DB", "#56B557"];
|
||||
let piedata = {
|
||||
name: "用户总览",
|
||||
type: "pie",
|
||||
radius: ["42%", "65%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: "rgba(0,0,0,0)",
|
||||
borderWidth: 2,
|
||||
},
|
||||
|
||||
color: colors,
|
||||
data: [
|
||||
// {
|
||||
// value: 0,
|
||||
// name: "告警",
|
||||
// label: {
|
||||
// shadowColor: colors[0],
|
||||
// },
|
||||
// },
|
||||
{
|
||||
value: this.countUserNumData.lockNum,
|
||||
name: "锁定",
|
||||
label: {
|
||||
shadowColor: colors[0],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.countUserNumData.onlineNum,
|
||||
name: "在线",
|
||||
label: {
|
||||
shadowColor: colors[2],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.countUserNumData.offlineNum,
|
||||
name: "离线",
|
||||
label: {
|
||||
shadowColor: colors[1],
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
};
|
||||
this.options = {
|
||||
title: {
|
||||
// zlevel: 0,
|
||||
text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
|
||||
top: "center",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
rich: {
|
||||
value: {
|
||||
color: "#ffffff",
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
lineHeight: 20,
|
||||
},
|
||||
name: {
|
||||
color: "#ffffff",
|
||||
lineHeight: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
top: "5%",
|
||||
left: "center",
|
||||
},
|
||||
series: [
|
||||
//展示圆点
|
||||
{
|
||||
...piedata,
|
||||
tooltip: { show: true },
|
||||
label: {
|
||||
formatter: " {b|{b}} \n {c|{c}个} {per|{d}%} ",
|
||||
// position: "outside",
|
||||
rich: {
|
||||
b: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
lineHeight: 26,
|
||||
},
|
||||
c: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
per: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 20, // 第一段线 长度
|
||||
length2: 36, // 第二段线 长度
|
||||
show: true,
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
...piedata,
|
||||
tooltip: { show: true },
|
||||
itemStyle: {},
|
||||
label: {
|
||||
backgroundColor: "auto", //圆点颜色，auto：映射的系列色
|
||||
height: 0,
|
||||
width: 0,
|
||||
lineHeight: 0,
|
||||
borderRadius: 2.5,
|
||||
shadowBlur: 8,
|
||||
shadowColor: "auto",
|
||||
padding: [2.5, -2.5, 2.5, -2.5],
|
||||
},
|
||||
labelLine: {
|
||||
length: 20, // 第一段线 长度
|
||||
length2: 36, // 第二段线 长度
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
222
vue/src/views/bigScreen/indexs/left-top.vue
Normal file
222
vue/src/views/bigScreen/indexs/left-top.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<ul class="user_Overview flex" v-if="pageflag">
|
||||
<li class="user_Overview-item" style="color: #00fdfa">
|
||||
<div class="user_Overview_nums allnum ">
|
||||
<dv-digital-flop :config="config" style="width:100%;height:100%;" />
|
||||
</div>
|
||||
<p>总设备数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #07f7a8">
|
||||
<div class="user_Overview_nums online">
|
||||
<dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
|
||||
</div>
|
||||
<p>在线数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #e3b337">
|
||||
<div class="user_Overview_nums offline">
|
||||
<dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
|
||||
|
||||
</div>
|
||||
<p>掉线数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #f5023d">
|
||||
<div class="user_Overview_nums laramnum">
|
||||
<dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
|
||||
</div>
|
||||
<p>告警次数</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Reacquire v-else @onclick="getData" line-height="200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from '@/api/bigScreen/modules'
|
||||
let style = {
|
||||
fontSize: 24
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
userOverview: {
|
||||
alarmNum: 0,
|
||||
offlineNum: 0,
|
||||
onlineNum: 0,
|
||||
totalNum: 0,
|
||||
},
|
||||
pageflag: true,
|
||||
timer: null,
|
||||
config: {
|
||||
number: [100],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#00fdfa",
|
||||
fill: "#00fdfa",
|
||||
},
|
||||
},
|
||||
onlineconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#07f7a8",
|
||||
fill: "#07f7a8",
|
||||
},
|
||||
},
|
||||
offlineconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#e3b337",
|
||||
fill: "#e3b337",
|
||||
},
|
||||
},
|
||||
laramnumconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#f5023d",
|
||||
fill: "#f5023d",
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
currentGET("big2").then((res) => {
|
||||
if (!this.timer) {
|
||||
console.log("设备总览", res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.userOverview = res.data;
|
||||
this.onlineconfig = {
|
||||
...this.onlineconfig,
|
||||
number: [res.data.onlineNum]
|
||||
}
|
||||
this.config = {
|
||||
...this.config,
|
||||
number: [res.data.totalNum]
|
||||
}
|
||||
this.offlineconfig = {
|
||||
...this.offlineconfig,
|
||||
number: [res.data.offlineNum]
|
||||
}
|
||||
this.laramnumconfig = {
|
||||
...this.laramnumconfig,
|
||||
number: [res.data.alarmNum]
|
||||
}
|
||||
this.switper()
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message.warning(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.user_Overview {
|
||||
li {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user_Overview_nums {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 22px;
|
||||
margin: 50px auto 30px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.bgdonghua::before {
|
||||
animation: rotating 14s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.allnum {
|
||||
|
||||
// background-image: url("../../assets/img/left_top_lan.png");
|
||||
&::before {
|
||||
background-image: url("../../../assets/bigScreen/img/left_top_lan.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.online {
|
||||
&::before {
|
||||
background-image: url("../../../assets/bigScreen/img/left_top_lv.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.offline {
|
||||
&::before {
|
||||
background-image: url("../../../assets/bigScreen/img/left_top_huang.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.laramnum {
|
||||
&::before {
|
||||
background-image: url("../../../assets/bigScreen/img/left_top_hong.png");
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
vue/src/views/bigScreen/indexs/right-bottom.vue
Normal file
187
vue/src/views/bigScreen/indexs/right-bottom.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
|
||||
<component :is="components" :data="list" :class-option="defaultOption">
|
||||
<ul class="right_center ">
|
||||
<li class="right_center_item" v-for="(item, i) in list" :key="i">
|
||||
<span class="orderNum">{{ i + 1 }}</span>
|
||||
<div class="inner_right">
|
||||
<div class="dibu"></div>
|
||||
<div class="flex">
|
||||
<div class="info">
|
||||
<span class="labels ">设备ID：</span>
|
||||
<span class="contents zhuyao"> {{ item.gatewayno }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span class="labels">型号：</span>
|
||||
<span class="contents "> {{ item.terminalno }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span class="labels">告警值：</span>
|
||||
<span class="contents warning"> {{ item.alertvalue | montionFilter }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex">
|
||||
|
||||
<div class="info">
|
||||
<span class="labels"> 地址：</span>
|
||||
<span class="contents ciyao" style="font-size:12px"> {{ item.provinceName }}/{{ item.cityName }}/{{ item.countyName }}</span>
|
||||
</div>
|
||||
<div class="info time">
|
||||
<span class="labels">时间：</span>
|
||||
<span class="contents" style="font-size:12px"> {{ item.createtime }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex">
|
||||
|
||||
<div class="info">
|
||||
<span class="labels">报警内容：</span>
|
||||
<span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</component>
|
||||
</div>
|
||||
<Reacquire v-else @onclick="getData" style="line-height:200px" />
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from '@/api/bigScreen/modules'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll' // vue2引入方式
|
||||
import Kong from '../components/kong.vue'
|
||||
export default {
|
||||
components: { vueSeamlessScroll, Kong },
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
pageflag: true,
|
||||
defaultOption: {
|
||||
...this.$store.state.settings.defaultOption,
|
||||
limitMoveNum: 3,
|
||||
singleHeight: 250,
|
||||
step:0,
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sbtxSwiperFlag() {
|
||||
let ssyjSwiper = this.$store.state.settings.ssyjSwiper
|
||||
if (ssyjSwiper) {
|
||||
this.components = vueSeamlessScroll
|
||||
} else {
|
||||
this.components = Kong
|
||||
}
|
||||
return ssyjSwiper
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
methods: {
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
currentGET('big5', { limitNum: 50 }).then(res => {
|
||||
console.log('实时预警', res);
|
||||
if (res.success) {
|
||||
this.list = res.data.list
|
||||
let timer = setTimeout(() => {
|
||||
clearTimeout(timer)
|
||||
this.defaultOption.step=this.$store.state.settings.defaultOption.step
|
||||
}, this.$store.state.settings.defaultOption.waitTime);
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.$Message.warning(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.right_center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.right_center_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
|
||||
.orderNum {
|
||||
margin: 0 20px 0 -20px;
|
||||
}
|
||||
|
||||
|
||||
.inner_right {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 400px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1.5;
|
||||
|
||||
.dibu {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 104%;
|
||||
background-image: url("../../../assets/bigScreen/img/zuo_xuxian.png");
|
||||
bottom: -12px;
|
||||
left: -2%;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.labels {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.zhuyao {
|
||||
// color: $primary-color;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ciyao {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #E6A23C;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.right_center_wrap {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
157
vue/src/views/bigScreen/indexs/right-center.vue
Normal file
157
vue/src/views/bigScreen/indexs/right-center.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="right_bottom">
|
||||
<dv-capsule-chart :config="config" style="width:100%;height:260px" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from '@/api/bigScreen/modules'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gatewayno: '',
|
||||
config: {
|
||||
showValue: true,
|
||||
unit: "次",
|
||||
data: []
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
mounted() { },
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
currentGET('big7', { gatewayno: this.gatewayno }).then(res => {
|
||||
|
||||
if (!this.timer) {
|
||||
console.log('报警排名', res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.config = {
|
||||
...this.config,
|
||||
data: res.data
|
||||
}
|
||||
this.switper()
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.srcList = []
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.list_Wrap {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
::v-deep .kong {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sbtxSwiperclass {
|
||||
.img_wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right_bottom {
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
|
||||
.searchform {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.searchform_item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
margin-right: 10px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
input {}
|
||||
}
|
||||
}
|
||||
|
||||
.img_wrap {
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0 20px;
|
||||
// overflow-x: auto;
|
||||
|
||||
li {
|
||||
width: 105px;
|
||||
height: 137px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
// background: #84ccc9;
|
||||
// border: 1px solid #ffffff;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin: 0 10px;
|
||||
|
||||
img {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.noData {
|
||||
width: 100%;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
color: rgb(129, 128, 128);
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
294
vue/src/views/bigScreen/indexs/right-top.vue
Normal file
294
vue/src/views/bigScreen/indexs/right-top.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<Echart
|
||||
id="rightTop"
|
||||
:options="option"
|
||||
class="right_top_inner"
|
||||
v-if="pageflag"
|
||||
ref="charts"
|
||||
/>
|
||||
<Reacquire v-else @onclick="getData" style="line-height: 200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from "@/api/bigScreen/modules";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
pageflag: false,
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
beforeDestroy() {
|
||||
this.clearData();
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
// this.pageflag =false
|
||||
currentGET("big4").then((res) => {
|
||||
if (!this.timer) {
|
||||
console.log("报警次数", res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.countUserNumData = res.data;
|
||||
this.$nextTick(() => {
|
||||
this.init(res.data.dateList, res.data.numList, res.data.numList2),
|
||||
this.switper();
|
||||
});
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return;
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData();
|
||||
};
|
||||
this.timer = setInterval(
|
||||
looper,
|
||||
this.$store.state.settings.echartsAutoTime
|
||||
);
|
||||
let myChart = this.$refs.charts.chart;
|
||||
myChart.on("mouseover", (params) => {
|
||||
this.clearData();
|
||||
});
|
||||
myChart.on("mouseout", (params) => {
|
||||
this.timer = setInterval(
|
||||
looper,
|
||||
this.$store.state.settings.echartsAutoTime
|
||||
);
|
||||
});
|
||||
},
|
||||
init(xData, yData, yData2) {
|
||||
this.option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
boundaryGap: false, // 不留白，从原点开始
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.2)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
// show:false,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#7EB7FD",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.2)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#7EB7FD",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
//布局
|
||||
show: true,
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "28px",
|
||||
containLabel: true,
|
||||
borderColor: "#1F63A3",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "none", //去除点
|
||||
name: "报警1次数",
|
||||
color: "rgba(252,144,16,.7)",
|
||||
areaStyle: {
|
||||
normal: {
|
||||
//右，下，左，上
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(252,144,16,.7)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(252,144,16,.0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "rect",
|
||||
symbolSize: [60, 26],
|
||||
symbolOffset: [0, -20],
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
},
|
||||
label: {
|
||||
color: "#FC9010",
|
||||
backgroundColor: "rgba(252,144,16,0.1)",
|
||||
borderRadius: 6,
|
||||
padding: [7, 14],
|
||||
borderWidth: 0.5,
|
||||
borderColor: "rgba(252,144,16,.5)",
|
||||
formatter: "报警1：{c}",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: "#FC9010",
|
||||
shadowColor: "#FC9010",
|
||||
shadowBlur: 8,
|
||||
},
|
||||
label: {
|
||||
formatter: "",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
data: yData2,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "none", //去除点
|
||||
name: "报警2次数",
|
||||
color: "rgba(9,202,243,.7)",
|
||||
areaStyle: {
|
||||
normal: {
|
||||
//右，下，左，上
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(9,202,243,.7)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(9,202,243,.0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "rect",
|
||||
symbolSize: [60, 26],
|
||||
symbolOffset: [0, -20],
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
},
|
||||
label: {
|
||||
color: "#09CAF3",
|
||||
backgroundColor: "rgba(9,202,243,0.1)",
|
||||
|
||||
borderRadius: 6,
|
||||
borderColor: "rgba(9,202,243,.5)",
|
||||
padding: [7, 14],
|
||||
formatter: "报警2：{c}",
|
||||
borderWidth: 0.5,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: "#09CAF3",
|
||||
shadowColor: "#09CAF3",
|
||||
shadowBlur: 8,
|
||||
},
|
||||
label: {
|
||||
formatter: "",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.right_top_inner {
|
||||
margin-top: -8px;
|
||||
}
|
||||
</style>
|
||||
105
vue/src/views/bigScreen/setting.vue
Normal file
105
vue/src/views/bigScreen/setting.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<transition name="yh-setting-fade">
|
||||
<div class="setting" :class="{ settingShow: settingShow }" v-show="settingShow">
|
||||
<div class="setting_dislog" @click="settingShow = false">
|
||||
|
||||
</div>
|
||||
<div class="setting_inner">
|
||||
<div class="setting_header">
|
||||
设置
|
||||
</div>
|
||||
<div class="setting_body">
|
||||
<!-- <div class="left_shu"> 实时监测</div> -->
|
||||
<div class="left_shu"> 全局设置</div>
|
||||
<div class="setting_item">
|
||||
<span class="setting_label">
|
||||
是否进行自动适配<span class="setting_label_tip">(默认分辨率1920*1080)</span>:
|
||||
</span>
|
||||
<div class="setting_content">
|
||||
<el-radio-group v-model="isScaleradio" @change="(val) => radiochange(val, 'isScale')">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_shu"> 实时监测</div>
|
||||
<div class="setting_item">
|
||||
<span class="setting_label">
|
||||
设备提醒自动轮询: <span class="setting_label_tip"></span>
|
||||
</span>
|
||||
<div class="setting_content">
|
||||
<el-radio-group v-model="sbtxradio" @change="(val) => radiochange(val, 'sbtxSwiper')">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting_item">
|
||||
<span class="setting_label">
|
||||
实时预警轮播:
|
||||
</span>
|
||||
<div class="setting_content">
|
||||
<el-radio-group v-model="ssyjradio" @change="(val) => radiochange(val, 'ssyjSwiper')">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<!-- <el-button type="primary" round size="mini">确定</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
settingShow: false,
|
||||
sbtxradio:true,
|
||||
ssyjradio: true,
|
||||
isScaleradio:true,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
init() {
|
||||
this.settingShow = true
|
||||
},
|
||||
radiochange(val, type) {
|
||||
this.$store.commit('setting/updateSwiper', { val, type })
|
||||
if(type==='isScale'){
|
||||
this.$router.go(0)
|
||||
// location.reload()
|
||||
// window.location.href=window.location.href+"?t="+Date.now()
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
//this.$store.commit('setting/initSwipers')
|
||||
// this.sbtxradio = this.$store.state.settings.sbtxSwiper,
|
||||
// this.ssyjradio = this.$store.state.settings.ssyjSwiper,
|
||||
// this.isScaleradio = this.$store.state.settings.isScale;
|
||||
},
|
||||
mounted() {
|
||||
document.body.appendChild(this.$el);
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
destroyed() {
|
||||
if (this.$el && this.$el.parentNode) {
|
||||
this.$el.parentNode.removeChild(this.$el);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
30
vue/src/views/bigScreen/tjfx/tjfx.vue
Normal file
30
vue/src/views/bigScreen/tjfx/tjfx.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user