code-image-backup-public/fastbee
1
0
Fork 0
mirror of https://gitee.com/beecue/fastbee.git synced 2025-12-18 00:45:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

大屏展示

Browse Source
This commit is contained in:
孙阿龙
2022-08-11 14:10:35 +08:00
parent 42fd321016
commit 909b874a2c
105 changed files with 5969 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
vue/src/App.vue
View File

@@ -1,5 +1,8 @@
<template>
<div id="app">
<div id="app" style="background-color:#03050C" v-if="$route.meta.bigScreen">
<router-view />
</div>
<div id="app" v-else>
<router-view />
</div>
</template>

168
vue/src/api/bigScreen/api.js Normal file
View File

@@ -0,0 +1,168 @@
/*
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-28 10:25:38
*/
import axios from 'axios';
import UtilVar from "@/config/UtilVar";
import router from '@/router'
let baseUrl = UtilVar.baseUrl
const CancelToken = axios.CancelToken;
export { baseUrl };
// axios.defaults.withCredentials = true;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么 传token
let token = localStorage.getItem("token");
config.headers.common['Content-Type'] = "application/json;charset=utf-8";
config.headers.common['token'] = token; //Authorization
return config;
}, function (error) {
// 对请求错误做些什么
console.log(error)
return Promise.reject(error);
});
/**
* @响应拦截
*/
axios.interceptors.response.use(response => {
if (response.status !== 200) {
return Promise.reject(response)
}
/**
* @code 登录过期 token验证失败 根据后端调
*/
if (response.data.code == UtilVar.code) {
// router.push("/login")
}
return response.data
}, error => {
// console.log('axiosError',error);
let err = {
success: false,
msg: "未知异常，请联系管理员！"
}
return Promise.reject(err)
})
let configs_ENC = {
headers: { 'enc': UtilVar.ENC }
}
//处理是否加密数据
let isEncryptionParam = (params) => {
return params
}
export const GET = async (url, params) => {
try {
params = isEncryptionParam(params)
const data = await axios.get(`${baseUrl}${url}`, {
params: params,
headers: configs_ENC.headers
}, configs_ENC);
return data;
} catch (error) {
return error;
}
}
//没有基地址 访问根目录下文件
export const GETNOBASE = async (url, params) => {
try {
const data = await axios.get(url, {
params: params,
});
return data;
} catch (error) {
return error;
}
}
export const POST = async (url, params) => {
try {
params = isEncryptionParam(params)
const data = await axios.post(`${baseUrl}${url}`, params, configs_ENC);
return data;
} catch (error) {
return error;
}
}
export const PUT = async (url, params) => {
try {
params = isEncryptionParam(params)
const data = await axios.put(`${baseUrl}${url}`, params, configs_ENC);
return data;
} catch (error) {
return error;
}
}
export const DELETE = async (url, params) => {
// console.log(params)
try {
params = isEncryptionParam(params)
const data = await axios.delete(`${baseUrl}${url}`, { data: params, headers: configs_ENC.headers }, configs_ENC);
return data;
} catch (error) {
return error;
}
}
/**
* @文件类型提交方法
*/
let configs = {
headers: { 'Content-Type': 'multipart/form-data' },
}
export const FILESubmit = async (url, params, config) => {
try {
const data = await axios.post(`${baseUrl}${url}`, params, {
...configs,
cancelToken: new CancelToken(function executor(c) {
config.setCancel && config.setCancel(c)
}),
onUploadProgress: (e) => {
if (e.total > 0) {
e.percent = e.loaded / e.total * 100;
}
// console.log(config)
config.onProgress && config.onProgress(e)
},
});
return data;
} catch (err) {
return err;
}
}
/**
* 下载文档流
* @param {config.responseType} 下载文件流根据后端 配置 arraybuffer || blod
*/
export const FILE = async (config = {}, body, params) => {
try {
const data = await axios({
method: config.method || 'get',
url: `${baseUrl}${config.url}`,
data: body,
params: params,
responseType: config.responseType || 'blob',
onDownloadProgress: (e) => {
// console.log(e,e.currentTarget)
// if (e.currentTarget.response.size > 0) {
// e.percent = e.loaded / e.currentTarget.response.size * 100;
// }
// event.srcElement.getResponseHeader('content-length')
config.onProgress && config.onProgress(e)
},
});
return data;
} catch (err) {
return err;
}
}

46
vue/src/api/bigScreen/index.js Normal file
View File

@@ -0,0 +1,46 @@
/*
* @Author: daidai
* @Date: 2021-12-09 10:47:56
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-27 16:32:31
* @FilePath: \web-pc\src\api\index.js
*/
import { currentList,
currentPage,
currentSave,
currentUpdate,
currentDelete,
currentSelect,
currentSelectList,
currentPOST,
currentGET,
currentApi
} from './modules'
import {
GETNOBASE,
GET
} from './api'
export {
GETNOBASE,
GET
}
export {
currentApi,
currentList,
currentPage,
currentSave,
currentUpdate,
currentDelete,
currentSelect,
currentSelectList,
currentPOST,
currentGET
}

97
vue/src/api/bigScreen/modules/index.js Normal file
View File

@@ -0,0 +1,97 @@
/*
* @Author: daidai
* @Date: 2021-12-23 11:18:37
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-28 15:10:45
* @FilePath: \web-pc\src\api\modules\index.js
*/
import * as API from "../api";
export const paramType ={
'big1':"/bigscreen/countUserNum", //用户总览
'big2':"/bigscreen/countDeviceNum", //设备总览
'big3':"/bigscreen/sbtx", //设备提醒
'big4':"/bigscreen/alarmNum", //报警次数
'big5':'/bigscreen/ssyj',//实时预警
'big6':'/bigscreen/installationPlan',// 安装计划
'big7':'/bigscreen/ranking',// 报警排名
'big8':'/bigscreen/centermap',// //中间地图
}
/****************** 通用增删改查 ********************* */
/**
* 通用列表
* @param {*} param
*/
export const currentList = (key,param)=> {
return API.GET(paramType[key]+"/list", param)
}
export const currentPage = (key,param)=> {
return API.GET(paramType[key]+"/page", param)
}
/**
* 查询可选择的列表
* @param {*} param
*/
export const currentSelectList= (key,param)=> {
return API.GET(paramType[key]+"/selectList", param)
}
/**
* 通用新增
* @param {*} param
*/
export const currentSave= (key,param)=> {
return API.POST(paramType[key]+"/save", param)
}
/**
* 通用修改
* @param {*} param
*/
export const currentUpdate= (key,param) => {
return API.POST(paramType[key]+"/update", param)
}
/**
* 通用删除
* @param {*} param
*/
export const currentDelete= (key,param) => {
return API.POST(paramType[key]+"/delete", param)
}
/**
* 通用获取所有不分页
* @param {*} param
*/
export const currentSelect= (key,param)=> {
return API.GET(paramType[key]+"/select", param)
}
/**
* 通用GET
* @param {*} param
*/
export const currentGET= (key,param)=> {
return API.GET(paramType[key], param)
}
/**
* 通用POST
* @param {*} param
*/
export const currentPOST= (key,param)=> {
return API.POST(paramType[key], param)
}
// 通用接口集合
export const currentApi={
currentList,
currentPage,
currentSave,
currentUpdate,
currentDelete,
currentSelect,
currentSelectList,
currentPOST,
currentGET
}

361
vue/src/assets/bigScreen/css/index.scss Normal file
View File

@@ -0,0 +1,361 @@
@import "./modules/reset.scss";
@import "./modules/variables.scss";
@import './theme/index.css';
@import '../iconfont//iconfont.css';
[class*=" blq-icon-"],
[class^=blq-icon-] {
font-family: iconfont !important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: middle;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
*,
:after,
:before {
box-sizing: content-box;
}
.clearfix {
&::after {
content: "";
display: table;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
}
.contents {
width: 100%;
display: flex;
min-height: calc(100% - 60px);
justify-content: space-between;
}
.beautify-scroll-def {
overflow-y: auto;
&::-webkit-scrollbar-thumb {
//滚动条的设置
background-color: rgba(14, 59, 150, 0);
background-clip: padding-box;
border-radius: 4px;
}
&:hover {
&::-webkit-scrollbar-thumb {
//滚动条的设置
background-color: rgba(14, 59, 150, 0.5);
background-clip: padding-box;
border-radius: 4px;
}
}
&::-webkit-scrollbar-track-piece {
//滚动条凹槽的颜色，还可以设置边框属性
background-color: transparent;
}
&::-webkit-scrollbar {
//滚动条的宽度
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(14, 59, 150, .8);
}
}
.orderNum {
// min-width: 22px;
// height: 22px;
// background: #00b8ff;
// border-radius: 50%;
// text-align: center;
// line-height: 22px;
// font-size: 13px;
// font-weight: 900;
// color: #0f2854;
color: #00b8ff;
}
.yh-big-input {
width: 253px;
height: 14px;
background: transparent;
border: 1px solid rgba(255, 255, 255, .53);
border-radius: 4px;
color: #fff;
padding: 6px 10px;
font-size: 14px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
&:focus {
outline: none;
border-color: #31abe3;
}
}
.yh-big-el-input {
width: 253px;
font-size: 14px;
.el-input__inner {
padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, .53);
background-color: transparent;
font-size: 14px;
line-height: 1;
color: #fff;
&:hover{
border-color: rgba(255, 255, 255, .8);
}
&:focus {
outline: none;
border-color: #31abe3;
}
}
}
.yh-big-button {
width: 53px;
height: 26px;
background: #00b1d6;
border-radius: 4px;
// border-color: #00b1d6;
border-width: 1px;
border: none;
cursor: pointer;
color: #fff;
font-size: 15px;
&:hover,
&:focus {
// border-color: #0597b4;
background: #0597b4;
}
}
//浮动
.float-r {
float: right;
}
//浮动
.float-l {
float: left;
}
// 字体加粗
.fw-b {
font-weight: bold;
}
//文章一行显示，多余省略号显示
.title-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
//表格样式重置
.ve-table {
$border-color: #525371;
// $border-color: rgba(255, 255, 255, .43);
box-sizing: border-box;
.ve-table-container {
&::-webkit-scrollbar-track-piece {
//滚动条凹槽的颜色，还可以设置边框属性
background-color: transparent;
}
&::-webkit-scrollbar {
//滚动条的宽度
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
//滚动条的设置
background-color: rgba(14, 59, 150, 0.5);
background-clip: padding-box;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(14, 59, 150, .8);
}
.ve-table-content {
&::after {
content: "";
position: absolute;
top: 0;
right: 0px;
width: 1px;
height: 100%;
background-color: $border-color;
z-index: 20;
}
}
}
&.ve-table-border-around {
border-color: $border-color;
}
.ve-table-container table.ve-table-content thead.ve-table-header tr.ve-table-header-tr {
height: 34px;
box-sizing: border-box;
th.ve-table-header-th {
background: #04004E;
color: #FFF;
border-color: $border-color;
box-sizing: border-box;
line-height: 1;
}
}
.ve-table-container table.ve-table-content tbody.ve-table-body {
tr.ve-table-body-tr td.ve-table-body-td,
tr.ve-table-expand-tr td.ve-table-body-td,
tr.ve-table-body-tr td.ve-table-expand-td,
tr.ve-table-expand-tr td.ve-table-expand-td {
background: transparent;
color: #FFF;
border-color: $border-color;
box-sizing: border-box;
}
tr.ve-table-body-tr,
tr.ve-table-expand-tr {
height: 34px;
box-sizing: border-box;
}
&.ve-table-row-hover tr.ve-table-body-tr:hover td {
background-color: rgba(0, 0, 0, .22);
box-sizing: border-box;
}
}
.ve-table-container .ve-table-border-x th,
.ve-table-container .ve-table-border-x td {
border-color: $border-color;
box-sizing: border-box;
}
}
//颜色
@each $colorkey,
$color in $colors {
.text-#{$colorkey} {
color: $color;
}
.bg-#{$colorkey} {
background-color: $color;
}
}
//对齐
@each $var in (left, center, right) {
.text-#{$var} {
text-align: $var !important;
}
}
//flex
@each $key,
$value in $flex-jc {
.jc-#{$key} {
justify-content: $value;
}
}
@each $key,
$value in $flex-ai {
.ai-#{$key} {
align-items: $value;
}
}
//字体
@each $fontkey,
$fontvalue in $font-sizes {
.fs-#{$fontkey} {
font-size: $fontvalue * $base-font-size;
}
}
//.mt-1 => margin top
//spacing
@each $typekey,
$type in $spacing-types {
//.m-1
@each $sizekey,
$size in $spacing-sizes {
.#{$typekey}-#{$sizekey} {
#{$type}: $size * $spacing-base-size;
}
}
//.mx-1
@each $sizekey,
$size in $spacing-sizes {
.#{$typekey}x-#{$sizekey} {
#{$type}-left: $size * $spacing-base-size;
#{$type}-right: $size * $spacing-base-size;
}
.#{$typekey}y-#{$sizekey} {
#{$type}-top: $size * $spacing-base-size;
#{$type}-bottom: $size * $spacing-base-size;
}
}
//.mt-1
@each $directionkey,
$direction in $spacing-directions {
@each $sizekey,
$size in $spacing-sizes {
.#{$typekey}#{$directionkey}-#{$sizekey} {
#{$type}-#{$direction}: $size * $spacing-base-size;
}
}
}
.#{$typekey} {
#{$type}: 0;
}
}

200
vue/src/assets/bigScreen/css/modules/reset.scss Normal file
View File

@@ -0,0 +1,200 @@
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* custom */
a {
color: #7e8c8d;
-webkit-backface-visibility: hidden;
text-decoration: none;
}
li {
list-style: none;
}
body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.olControlScaleLineBottom {
display: none;
}
.olControlScaleLineTop {
color: #000 !important;
border-bottom: solid 3px #000 !important;
border-left: solid 2px #000 !important;
border-right: solid 2px #000 !important;
background-color: rgba(255, 255, 255, .4);
font-size: 10px;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.olControlScaleLine {
z-index: 900 !important;
}
/*清除浮动*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* 点击搜索框获取焦点 placeholder消失-开始 */
/* WebKit browsers */
// input:focus::-webkit-input-placeholder {
// color: transparent;
// }
// /* Mozilla Firefox 4 to 18 */
// input:focus:-moz-placeholder {
// color: transparent;
// }
// /* Mozilla Firefox 19+ */
// input:focus::-moz-placeholder {
// color: transparent;
// }
// /* Internet Explorer 10+ */
// input:focus:-ms-input-placeholder {
// color: transparent;
// }
/* 点击搜索框获取焦点 placeholder消失-结束 */

98
vue/src/assets/bigScreen/css/modules/variables.scss Normal file
View File

@@ -0,0 +1,98 @@
// 颜色
$colors: (
"primary": #1A5CD7,
"info-1": #4394e4,
"info": #4b67af,
"white": #ffffff,
"light": #f9f9f9,
"grey-1": #999999,
"grey": #666666,
"dark-1": #5f5f5f,
"dark": #222222,
"black-1": #171823,
"black": #000000,
"icon": #5cd9e8
);
// 字体大小
$base-font-size: 0.2rem;
$font-sizes: (
xxs: 0.1,
//8px
xs: 0.125,
//10px
sm: 0.2875,
//12px
md: 0.1625,
//13px
lg: 0.175,
//14px
xl: 0.2,
//16px
xxl: 0.225,
//18px
xxxl: 0.25 //20px,,,,
);
// 宽高
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
//flex
.flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
$flex-jc: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
);
$flex-ai: (
start: flex-start,
end: flex-end,
center: center,
stretch: stretch,
);
.flex-1 {
flex: 1;
}
//.mt-1 => margin top
//spacing
$spacing-types: (
m: margin,
p: padding,
);
$spacing-directions: (
t: top,
r: right,
b: bottom,
l: left,
);
$spacing-base-size: 0.5rem;
$spacing-sizes: (
0: 0,
1: 0.5,
2: 1,
3: 1.5,
4: 2,
5: 2.5,
);

156
vue/src/assets/bigScreen/css/public.scss Normal file
View File

@@ -0,0 +1,156 @@
.flex {
display: flex;
}
.flex-direction {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.align-start {
align-items: flex-start;
}
.align-end {
align-items: flex-end;
}
.align-center {
align-items: center;
}
.align-stretch {
align-items: stretch;
}
.self-start {
align-self: flex-start;
}
.self-center {
align-self: flex-center;
}
.self-end {
align-self: flex-end;
}
.self-stretch {
align-self: stretch;
}
.align-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
@for $i from 0 through 12 {
.rdx-flex-#{$i} {
flex: $i;
}
}
@for $i from 9 to 50 {
.rdx-font-#{$i} {
font-size: $i + px;
}
}
@for $i from 2 to 50 {
.rdx-radius-#{$i} {
border-radius: $i + px;
}
}
@for $i from 10 to 50 {
.rdx-line-height-#{$i} {
line-height: $i + px;
}
}
// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
// 只要双数和能被5除尽的数
@if $i % 2 == 0 or $i % 5 == 0 {
// 得出：u-margin-30或者u-m-30
.rdx-m-#{$i} {
margin: $i + px !important;
}
// 得出：u-padding-30或者u-p-30
.rdx-p-#{$i} {
padding: $i + px !important;
}
@each $short, $long in l left, t top, r right, b bottom {
// 缩写版，结果如： u-m-l-30
// 定义外边距
.rdx-m-#{$short}-#{$i} {
margin-#{$long}: $i + px !important;
}
// 定义内边距
.rdx-p-#{$short}-#{$i} {
padding-#{$long}: $i + px !important;
}
//自定义左右内边距
.rdx-p-lr-#{$i} {
padding-left:$i + px !important;
padding-right:$i + px !important;
}
//自定义上下内边距
.rdx-p-tb-#{$i} {
padding-top:$i + px !important;
padding-bottom:$i + px !important;
}
}
}
}
i{font-style: normal;}
.position-re{position: relative;}
.position-ab{position: absolute; z-index: 9;}
.position-fixed{position: fixed; background: rgba(92, 116, 143, 0.45); width: 100%; height: 100%; left: 0px; top: 0px; z-index: 10;}
.round{border-radius: 50%;}
.font-strong{font-weight: bold;}
// .color-del{color:$del-color}
// .color-primary{color: $primary-color;}
.color-remark{color: #666666;}
.color-9{color: #999999;}
.color-green{color: #38a800;}
.bg-white{background-color: white;}
.line-bottom{border-bottom: 1px solid #eeeeee;}
.button-pointer{cursor: pointer;}
.box-shadow-item{box-shadow: 0px 0px 4px 0px rgba(45, 45, 46, 0.1);}
.search-form .search-form-item label {text-align: right; padding-right: 6px;}
.break-all{
word-break: break-all;
}
.blocks{
width: 100%;
height: 100%;
}
.cursor-pointer{
cursor: pointer;
}

BIN
vue/src/assets/bigScreen/css/theme/fonts/element-icons.ttf Normal file
View File

Binary file not shown.

BIN
vue/src/assets/bigScreen/css/theme/fonts/element-icons.woff Normal file
View File

Binary file not shown.

1
vue/src/assets/bigScreen/css/theme/index.css Normal file
View File

File diff suppressed because one or more lines are too long

50
vue/src/assets/bigScreen/css/variable.scss Normal file
View File

@@ -0,0 +1,50 @@
// 颜色
$primary-color: #1890ff;
$primary-color-hl: rgb(41, 52, 67);
$default-color: #006569;
$link: #1890ff;
$active-color: rgb(0, 101, 105);
$del-color: #ff1839;
$content-background: #f3f5fa;
$table-header-background: #d8eaff;
$primary-color-rgba: rgba($color: $primary-color,
$alpha: 0.1,
);
//表格上面button按钮颜色
$table-header-button: #18d1ff;
// 阴影
$primary-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
0 0 6px rgba(0, 0, 0, 0.04);
$primary-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$baidu-shadow: 1px 2px 1px rgba(0, 0, 0, 0.15);
$gaode-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
0 2px 6px 0 rgba(0, 0, 0, 0.19);
// box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
$primary-border: $primary-color solid 1px;
$tool-top: 20px;
//header 的高度
$index-height: 60px;
$index-content-height: calc(100% - 60px);
$index-tags-height: 36px;
// 宽度侧边栏
$aside-width: 200px;
$content-padding: 16px;
$default-zindex: 99;
/*文本格式化，超出范围，显示省略号*/
@mixin text-overflow($num: 1) {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: $num;
-webkit-box-orient: vertical;
}

18
vue/src/assets/bigScreen/css/webfont/index.css Normal file
View File

@@ -0,0 +1,18 @@
/* @font-face {
font-family: 'webfont';
font-display: swap;
src: url('//at.alicdn.com/t/webfont_c14qx7m7htb.eot');
src:
url('//at.alicdn.com/t/webfont_c14qx7m7htb.woff2') format('woff2'),
url('//at.alicdn.com/t/webfont_c14qx7m7htb.woff') format('woff'),
}
.number-font{
font-family:"webfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
} */

23
vue/src/assets/bigScreen/iconfont/iconfont.css Normal file
View File

@@ -0,0 +1,23 @@
@font-face {
font-family: "iconfont"; /* Project id 2995337 */
src: url('iconfont.woff2?t=1638871675242') format('woff2'),
url('iconfont.woff?t=1638871675242') format('woff'),
url('iconfont.ttf?t=1638871675242') format('truetype');
}
/* .iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} */
.blq-icon-shezhi01:before {
content: "\e610";
}
.blq-icon-shezhi02:before {
content: "\e611";
}

BIN
vue/src/assets/bigScreen/iconfont/iconfont.ttf Normal file
View File

Binary file not shown.

BIN
vue/src/assets/bigScreen/iconfont/iconfont.woff Normal file
View File

Binary file not shown.

BIN
vue/src/assets/bigScreen/iconfont/iconfont.woff2 Normal file
View File

Binary file not shown.

BIN
vue/src/assets/bigScreen/img/center_map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
vue/src/assets/bigScreen/img/frame.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
vue/src/assets/bigScreen/img/guang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
vue/src/assets/bigScreen/img/headers/juxing1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
vue/src/assets/bigScreen/img/headers/juxing2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
vue/src/assets/bigScreen/img/left_top_hong.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
vue/src/assets/bigScreen/img/left_top_huang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
vue/src/assets/bigScreen/img/left_top_lan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
vue/src/assets/bigScreen/img/left_top_lv.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
vue/src/assets/bigScreen/img/pageBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 289 KiB

BIN
vue/src/assets/bigScreen/img/titles/you.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
vue/src/assets/bigScreen/img/titles/zuo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
vue/src/assets/bigScreen/img/top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
vue/src/assets/bigScreen/img/xieyou.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
vue/src/assets/bigScreen/img/xiezuo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
vue/src/assets/bigScreen/img/zuo_xuxian.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

15
vue/src/config/UtilVar.js Normal file
View File

@@ -0,0 +1,15 @@
/*
* @Author: daidai
* @Date: 2021-12-06 10:58:24
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-27 16:54:32
* @FilePath: \web-pc\src\config\UtilVar.js
*/
var UtilVar = {
ENC: false, //返回结果是否加密
baseUrl: `http://locolhost:8888`,
code: 401,
}
export default UtilVar

11
vue/src/directive/filters.js Normal file
View File

@@ -0,0 +1,11 @@
/*
* @Author: daidai
* @Date: 2022-01-11 15:27:31
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-21 14:32:03
* @FilePath: \web-pc\src\directives\filters.js
*/
export function montionFilter (val) {
// console.log(val);
return val ? Number(val).toFixed(2) : '--'
}

432
vue/src/lib/currency.js Normal file
View File

@@ -0,0 +1,432 @@
/*
* @Author: daidai
* @Date: 2021-12-06 15:53:24
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-22 09:31:24
* @FilePath: \web-pc\src\lib\currency.js
*/
import router from '@/router'
import { isString, isHtmlElement } from './types'
import UtilVar from "@/config/UtilVar";
export const returnWeek = () => {
var week = new Date().getDay();
switch (week) {
case 1:
return '周一'
case 2:
return '周二'
case 3:
return '周三'
case 4:
return '周四'
case 5:
return '周五'
case 6:
return '周六'
case 0:
return '周日'
}
}
/**
* 获取uuid
*/
export function getUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
}
/**
* 是否有权限
* @param {*} key
*/
export function isAuth(key) {
// console.log("key",key,sessionStorage.getItem('permissions'))
// if(process.env.VUE_APP_CONFIG=="dev"){
// return true
// }
return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
}
export const rowClassName = ({ row, rowIndex }) => {
if (rowIndex % 2 == 0) {
return 'lightColour';
} else {
return 'DarkColor';
}
}
export const getToken = () => {
return localStorage.getItem("token");
}
//跳转当前页面并传参
export const currentQuery = (param) => {
let newParam = { ...param }
for (let i in newParam) {
if (newParam[i] === "") {
delete newParam[i]
}
}
// console.log(newParam)
router.push({
path: router.currentRoute.path,
query: newParam
})
}
/**
* 树形数据转换
* @param {*} data
* @param {*} id
* @param {*} pid
* @param {*} order
*/
export function treeDataTranslate(data, id, pid, order) {
// console.log(Array.isArray(data))
if (data == null || !Array.isArray(data)) {
return [];
}
if (order) {
data.sort(function (a, b) {
return a[order] - b[order];
})
}
// console.log(data)
var res = []
var temp = {}
for (var i = 0; i < data.length; i++) {
temp[data[i][id]] = data[i]
}
for (var k = 0; k < data.length; k++) {
if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
if (!temp[data[k][pid]]['subs']) {
temp[data[k][pid]]['subs'] = []
}
if (!temp[data[k][pid]]['_level']) {
temp[data[k][pid]]['_level'] = 1
}
data[k]['_level'] = temp[data[k][pid]]._level + 1
temp[data[k][pid]]['subs'].push(data[k])
} else {
res.push(data[k])
}
}
// console.log(outurls)
// console.log(res)
return res
}
//带了一个 margin-left
export const dragss = (e, marginleft) => {
let odiv = e.currentTarget.parentElement;
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e) => {
odiv.style.left = e.clientX - disX + marginleft + 'px';
odiv.style.top = e.clientY - disY + 'px';
return false;
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
}
//转base64
export const turnStr = (data) => {
return window.btoa(window.encodeURI(JSON.stringify(data)));
}
// 验证只能输入数字和小数，小数且只能输入2位，第一位不能输入小数点
// .replace(/[^\d.]/g, '')
// .replace(/\.{2,}/g, '.')
// .replace('.', '$#$')
// .replace(/\./g, '')
// .replace('$#$', '.')
// .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
// .replace(/^\./g, '')
/**
* 清除登录信息
*/
export function clearLoginInfo() {
router.options.isAddDynamicMenuRoutes = false;
localStorage.removeItem('token')
sessionStorage.removeItem("menuList")
sessionStorage.removeItem("permissions")
}
//对象拼成路径传参
export const convertObj = (data) => {
var _result = [];
for (var key in data) {
var value = data[key];
if (value.constructor == Array) {
value.forEach(function (_value) {
_result.push(key + "=" + _value);
});
} else {
_result.push(key + '=' + value);
}
}
return _result.join('&');
}
//判断浏览器
function getExplorer() {
var explorer = window.navigator.userAgent;
if (explorer.indexOf('MSIE') >= 0) {
return 'ie'; // ie
} else if (explorer.indexOf('Firefox') >= 0) {
return 'Firefox'; // firefox
} else if (explorer.indexOf('Chrome') >= 0) {
return 'Chrome'; // Chrome
} else if (explorer.indexOf('Opera') >= 0) {
return 'Opera'; // Opera
} else if (explorer.indexOf('Safari') >= 0) {
return 'Safari'; // Safari
} else if (!!explorer.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
return 'IOS';
} else if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
return 'Android';
} else {
return explorer
}
};
//导出文档流
export const exportFile = (data, name) => {
return new Promise((resolve, reject) => {
let types = getExplorer()
if (types == 'IOS') {
resolve({
success: false,
msg: "请使用设备自带浏览器导出！"
})
return
}
if (data.type && data.type.indexOf('application/vnd.ms-excel') >= 0) {
// console.log(data)
try {
let blob = new Blob([data], {
type:data.type|| 'application/vnd.ms-excel;charset=UTF-8'
})
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, name);
} else {
const link = document.createElement('a')
link.style.display = 'none';
link.href = URL.createObjectURL(blob);
if (types == 'Safari') {
link.download = `${name || "未命名"}`;
} else {
link.download = `${name || "未命名"}.xlsx`;
}
// Safari thinks _blank anchor are pop ups. We only want to set _blank
// target if the browser does not support the HTML5 download attribute.
// This allows you to download files in desktop safari if pop up blocking
// is enabled.
if (typeof link.download === 'unde fined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(link)
link.click()
// Fixes "webkit blob resource error 1"
let timer = setTimeout(function () {
document.body.removeChild(link)
window.URL.revokeObjectURL(link.href);
clearTimeout(timer)
}, 200)
}
resolve({
success: true,
msg: "导出成功"
})
} catch (error) {
resolve({
success: false,
msg: "未知异常，请联系管理员！"
})
}
} else {
// console.log(data)
readFile(data).then(res => {
resolve(res)
}).catch(err => {
resolve({
success: false,
msg: "未知异常，请联系管理员！"
})
})
}
})
}
//阅读 blod
export const readFile = (data) => {
return new Promise((resole, reject) => {
if (Object.prototype.toString.call(data)==='[object Blob]') {
let reader = new FileReader()
reader.readAsText(data, 'utf-8')
reader.onload = (e) => {
console.log('--导出--', JSON.parse(reader.result))
let result = JSON.parse(reader.result)
if (result.code == UtilVar.code) {
router.push("/login")
}
resole(result)
}
} else {
resole(data)
}
// reader.readAsText(data)
})
}
//element 时间选择
export const shortcuts = [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 89);
picker.$emit('pick', [start, end]);
}
}]
export const pickerOptions = {
shortcuts: shortcuts
}
/**
* 清除相同
* @param {*} origin
* @param {*} target
*/
export const ArrayCleanRepeat = (origin, target) => {
if (target) origin = origin.concat(target);
const result = []
const tagObj = {}
for (const i of origin) {
if (!tagObj[i]) {
result.push(i)
tagObj[i] = 1
}
}
return result
}
/**
* @description:
* @param {file:Object} 文件
* @return {*}
*/
export const beforeUpoads = (file) => {
// console.log(file)
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
if (
testmsg != 'png' &&
testmsg != 'jpg' &&
testmsg != 'jpeg' &&
testmsg != 'webp'
) {
// testmsg != 'gif' &&
return {
success: false,
msg: "上传图片格式不正确！"
}
}
const if10M = file.size / 1024 / 1024 < 20
if (!if10M) {
return {
success: false,
msg: "上传图片大小不能超过20M!"
}
}
// console.log("上传前",file, this.filelist)
return {
success: true
}
}
//复制文字
export const copy = (value) => {
let transfer = document.createElement('input')
document.body.appendChild(transfer)
transfer.value = value // 这里表示想要复制的内容
transfer.focus()
transfer.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
}
transfer.blur()
document.body.removeChild(transfer)
//选中文字
// let range = document.createRange()
// let referenceNode = this.$refs.xy
// range.selectNodeContents(referenceNode)
// var selection = window.getSelection()
// selection.removeAllRanges()
// selection.addRange(range)
}
// 取出两个数组的不同元素
export const getArrDifference = (arr1, arr2) => {
return arr1.concat(arr2).filter(function (v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v);
});
}
/**
* 表格最大高度
* @param {ElementDom} dom
* @param {Boolean} isPaging 是否拥有分页 false 没有 || true 有 默认有
* @returns
*/
export const tableHeight = (dom,isPaging=true) => {
//定位父级到文档高度
if (isString(dom)) {
dom = document.querySelector(dom)
// if (dom) {
// return window.innerHeight - top
// }
}
if (isHtmlElement(dom)) {
var parent = dom.offsetParent;
var top = dom.offsetTop
if(isPaging){
top= top+ 63 + 4
}else{
top= top+ 16
}
while (parent != null) {
top += parent.offsetTop;
parent = parent.offsetParent;
};
return window.innerHeight - top
}
return null
}
//

93
vue/src/lib/dd-moment.js Normal file
View File

@@ -0,0 +1,93 @@
/*
* @Author: daidai
* @Date: 2021-12-16 14:40:18
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-19 14:44:14
* @FilePath: \web-pc\src\lib\dd-moment.js
*/
const DDmoment = function (date) {
let time;
if (!date) {
time = new Date()
}else if(date){
time=new Date(date);
}
return {
time,
format,
subtract,
getTime,
}
}
/**
* @content 前多少天
* @param days 天 || years 年 || months 月 || weeks 周
* @returns
*/
function subtract(num, type) {
let time = this.time
time.setTime(time.getTime()-getNeedTime(num, type))
time=new Date(time)
return {
time,
format,
getTime
}
}
/**
* @param Yy年 || M 月 || Dd 日 || Hh 时 || m 分 || Ss 秒
* @returns
*/
function format(fmt) {
let date = this.time
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"y+": date.getFullYear().toString(), // 年
"M+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"D+": date.getDate().toString(), // 日
"h+": date.getHours().toString(), // 时
"H+": date.getHours().toString(), // 时
"m+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString(), // 秒
"s+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
};
return fmt;
}
//时间戳转时间
function getTime() {
return new Date(this.time)
}
//获取需要的时间
function getNeedTime(num, type) {
let time=0
switch (type) {
case "days":
time= 3600 * 1000 * 24 * num;
break;
case "years":
time=3600 * 1000 * 24 *365 *num;
break;
case "months":
time = 3600 * 1000 * 24 *30* num;
break;
case "weeks":
time= 3600 * 1000 * 24 *7* num;
break;
default:
break;
}
return time;
}
export default DDmoment

9
vue/src/lib/index.js Normal file
View File

@@ -0,0 +1,9 @@
import DDmoment from "./dd-moment"
import { colors,colors2 } from "./modules/echarts-options"
import { shortcuts } from "./currency";
export {DDmoment,colors,colors2}
export {
shortcuts
}

46
vue/src/lib/types.js Normal file
View File

@@ -0,0 +1,46 @@
/*
* @Author: daidai
* @Date: 2021-12-14 09:15:11
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-25 10:11:04
* @FilePath: \web-pc\src\lib\types.js
*/
export function hasOwn(obj, key) {
return hasOwnProperty.call(obj, key);
};
export function isVNode(node) {
return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions');
};
// 是否字符串
export function isString2(str) {
return (typeof str == 'string') && str.constructor == String;
}
export function isString(obj) {
return Object.prototype.toString.call(obj) === '[object String]';
}
export function isObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]';
}
export function isNumber(obj) {
return Object.prototype.toString.call(obj) === '[object Number]';
}
// 是否完整的
export function isDef(val) {
return val !== undefined && val !== null;
}
//
export function isKorean(text) {
const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
return reg.test(text);
}
export function isHtmlElement(node) {
return node && node.nodeType === Node.ELEMENT_NODE;
}
export const isUndefined = (val) => {
return val === void 0;
};

26
vue/src/main.js
View File

@@ -42,7 +42,30 @@ import VueClipboard from 'vue-clipboard2'
// Mqtt工具
import mqttTool from '@/utils/mqttTool'
import ItemWrap from './views/bigScreen/components/item-wrap/item-wrap.vue'
import Message from './views/bigScreen/components/message/message.vue'
import Reacquire from './views/bigScreen/components/reacquire/reacquire.vue'
import Echart from './views/bigScreen/components/echart/index.vue'
import '@/assets/bigScreen/css/public.scss'
import "@/assets/bigScreen/css/index.scss"
import {loading,borderBox13,digitalFlop,capsuleChart,borderBox8} from '@jiaminghi/data-view'
import * as filters from '@/directive/filters'
require('./mock/mock')//是否使用mock
// datav组件
Vue.use(loading)
Vue.use(borderBox13)
Vue.use(borderBox8)
Vue.use(digitalFlop)
Vue.use(capsuleChart)
// 自定义组件
Vue.component("Echart",Echart)
Vue.component("ItemWrap",ItemWrap)
Vue.component("Message",Message)
Vue.component("Reacquire",Reacquire)
@@ -73,7 +96,8 @@ Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()
// 全局数据过滤器
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api

233
vue/src/mock/mock.js Normal file
View File

@@ -0,0 +1,233 @@
import Mock from 'mockjs'
//延时200-600毫秒请求到数据
Mock.setup({
timeout: '200-600'
})
const Random = Mock.Random;
// 用户总览
function countUserNum() {
const a = Mock.mock({
success: true,
data: {
offlineNum:'@integer(1, 100)',
lockNum: '@integer(1, 10)',
totalNum:218
}
})
a.data.onlineNum=a.data.totalNum-a.data.offlineNum-a.data.lockNum
return a
}
// 接口，第一个参数url，第二个参数请求类型，第三个参数响应回调
Mock.mock(new RegExp('countUserNum'), 'get', countUserNum)
// /设备总览
function countDeviceNum() {
const a = Mock.mock({
success: true,
data: {
alarmNum: '@integer(100, 1000)',
offlineNum: '@integer(0, 50)',
totalNum:698
}
})
a.data.onlineNum=a.data.totalNum-a.data.offlineNum
return a
}
Mock.mock(new RegExp('countDeviceNum'), 'get', countDeviceNum)
// /设备总览
function sbtx() {
const a = Mock.mock({
success: true,
data: {
"list|20": [
{
provinceName: "@province()",
cityName: '@city()',
countyName: "@county()",
createTime: "@datetime('yyyy-MM-dd HH:mm:ss')",
deviceId: "6c512d754bbcd6d7cd86abce0e0cac58",
"gatewayno|+1": 10000,
"onlineState|1": [0, 1],
}
]
}
})
return a
}
Mock.mock(new RegExp('sbtx'), 'get', sbtx)
//中间地图
function centermap(options) {
let params = parameteUrl(options.url)
if (params.regionCode && params.regionCode != -1) {
const a = Mock.mock({
success: true,
data: {
"dataList|30": [
{
name: "@city()",
value: '@integer(1, 1000)'
}
],
regionCode: params.regionCode,//-代表中国
}
})
return a
} else {
const a = Mock.mock({
success: true,
data: {
"dataList|8": [
{
name: "@province()",
value: '@integer(1, 1000)'
}
],
regionCode: -1,//-代表中国
}
})
return a
}
}
Mock.mock(new RegExp('centermap'), 'get', centermap)
// 报警次数
function alarmNum() {
const a = Mock.mock({
success: true,
data: {
dateList:['2021-11', '2021-12', '2022-01', '2022-02', '2022-03',"2022-04"],
"numList|6":[
'@integer(0, 1000)'
],
"numList2|6":[
'@integer(0, 1000)'
]
}
})
return a
}
Mock.mock(new RegExp('alarmNum'), 'get', alarmNum)
// 实时预警
function ssyj() {
const a = Mock.mock({
success: true,
data: {
"list|40":[{
alertdetail: "@csentence(5,10)",
"alertname|1": ["水浸告警","各种报警"],
alertvalue: "@float(60, 200)",
createtime: "2022-04-19 08:38:33",
deviceid: null,
"gatewayno|+1": 10000,
phase: "A1",
sbInfo: "@csentence(10,18)",
"terminalno|+1": 100,
provinceName: "@province()",
cityName: '@city()',
countyName: "@county()",
}],
}
})
return a
}
Mock.mock(new RegExp('ssyj'), 'get', ssyj)
//安装计划
function installationPlan() {
let num= RandomNumBoth(26,32);
const a = Mock.mock({
["category|"+num]:["@city()"],
["barData|"+num]:["@integer(10, 100)"],
})
let lineData=[],rateData=[];
for (let index = 0; index < num; index++) {
let lineNum = Mock.mock('@integer(0, 100)')+a.barData[index]
lineData.push(lineNum)
let rate = a.barData[index] / lineNum;
rateData.push((rate*100).toFixed(0))
}
a.lineData=lineData
a.rateData=rateData
return {
success: true,
data:a
}
}
Mock.mock(new RegExp('installationPlan'), 'get', installationPlan)
//报警排名
function ranking() {
//多生成几个避免重复 重复会报错
let num =Mock.mock({"list|48":[{ value:"@integer(50,1000)",name:"@city()"}]}).list
// console.log(num);
let newNum =[],numObj={}
num.map(item=>{
if(!numObj[item.name] && newNum.length<8){
numObj[item.name] =true
newNum.push(item)
}
})
let arr = newNum.sort((a,b)=>{
return b.value-a.value
})
let a ={
success:true,
data:arr
}
return a
}
Mock.mock(new RegExp('ranking'), 'get', ranking)
/**
* @description: min ≤ r ≤ max 随机数
* @param {*} Min
* @param {*} Max
* @return {*}
*/
function RandomNumBoth(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
var num = Min + Math.round(Rand * Range); //四舍五入
return num;
}
/**
* @description: 获取路径参数
* @param {*} url
* @return {*}
*/
function parameteUrl(url) {
var json = {}
if (/\?/.test(url)) {
var urlString = url.substring(url.indexOf("?") + 1);
var urlArray = urlString.split("&");
for (var i = 0; i < urlArray.length; i++) {
var urlItem = urlArray[i];
var item = urlItem.split("=");
console.log(item);
json[item[0]] = item[1];
}
return json;
}
return {};
}

6
vue/src/router/index.js
View File

@@ -39,6 +39,12 @@ export const constantRoutes = [
}
]
},
{
path: '/bigScreen',
component: (resolve) => require(['@/views/bigScreen/home'], resolve),
hidden: true,
meta: { bigScreen: true }
},
{
path: '/login',
component: (resolve) => require(['@/views/login'], resolve),

17
vue/src/store/modules/settings.js
View File

@@ -12,7 +12,22 @@ const state = {
tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
sbtxSwiper: true, //设备提醒轮播
ssyjSwiper: true, //实时预警轮播
isScale: true, //是否进行全局适配
defaultOption: {
step: 4.4, // 数值越大速度滚动越快
hoverStop: true, // 是否开启鼠标悬停stop
openWatch: true, // 开启数据实时监控刷新dom
direction: 1, // 0向下 1向上 2向左 3向右
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 3000 // 单步运动停止的时间(默认值1000ms)
},
echartsAutoTime: 3000, //echarts 图自动请求接口时间
}
const mutations = {
CHANGE_SETTING: (state, { key, value }) => {

75
vue/src/utils/bigScreen/drawMixin.js Normal file
View File

@@ -0,0 +1,75 @@
/*
* @Author: daidai
* @Date: 2022-02-28 10:48:02
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-26 14:55:41
* @FilePath: \web-pc\src\pages\big-screen\utils\drawMixin.js
*/
// 屏幕适配 mixin 函数
// * 默认缩放值
const scale = {
width: '1',
height: '1',
}
// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080
// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
export default {
data() {
return {
// * 定时函数
drawTiming: null,
}
},
computed: {
isScale(){
return this.$store.state.settings.isScale
}
},
mounted () {
if(!this.isScale){
return
}
this.calcRate()
window.addEventListener('resize', this.resize)
},
beforeDestroy () {
window.removeEventListener('resize', this.resize)
},
methods: {
calcRate () {
const appRef = this.$refs["appRef"]
if (!appRef) return
// 当前宽高比
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
if (appRef) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
scale.height = (window.innerHeight / baseHeight).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
} else {
// 表示更高
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
scale.width = (window.innerWidth / baseWidth).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
}
}
},
resize () {
if(!this.isScale){
return
}
clearTimeout(this.drawTiming)
this.drawTiming = setTimeout(() => {
this.calcRate()
}, 200)
}
},
}

58
vue/src/utils/bigScreen/index.js Normal file
View File

@@ -0,0 +1,58 @@
/*
* @Author: daidai
* @Date: 2022-02-23 08:59:26
* @LastEditors: daidai
* @LastEditTime: 2022-02-24 17:11:58
* @FilePath: \big-screen-vue-datav\src\utils\index.js
*/
/**
* @param {Function} fn 防抖函数
* @param {Number} delay 延迟时间
*/
export function debounce(fn, delay) {
var timer;
return function () {
var context = this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
/**
* @param {date} time 需要转换的时间
* @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
*/
export function formatTime(time, fmt) {
if (!time) return '';
else {
const date = new Date(time);
const o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() + 3) / 3),
S: date.getMilliseconds(),
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + '').substr(4 - RegExp.$1.length)
);
for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1
? o[k]
: ('00' + o[k]).substr(('' + o[k]).length)
);
}
}
return fmt;
}
}

1
vue/src/utils/bigScreen/map/china.json Normal file
View File

File diff suppressed because one or more lines are too long

217
vue/src/utils/bigScreen/map/xzqCode.js Normal file
View File

@@ -0,0 +1,217 @@
/*
* @Author: daidai
* @Date: 2022-03-02 09:51:44
* @LastEditors: daidai
* @LastEditTime: 2022-03-02 09:51:45
* @FilePath: \web-pc\src\pages\big-screen\utils\map\xzqCode.js
*/
//获取中国行政区 code
// AMap.plugin("AMap.DistrictSearch", function () {
// var districtSearch = new AMap.DistrictSearch({
// // 关键字对应的行政区级别，country表示国家
// level: "country",
// // 显示下级行政区级数，1表示返回下一级行政区
// subdistrict: 1,
// });
// let xzqCode = {};
// // 搜索所有省/直辖市信息
// districtSearch.search("中国", function (status, result) {
// // console.log(result);
// result.districtList[0].districtList.forEach((item) => {
// // console.log(item);
// xzqCode[item.name] = {
// adcode: item.adcode,
// level: item.level,
// name: item.name,
// };
// });
// });
// xzqCode["中国"] = {
// adcode: "100000",
// level: "country",
// name: "中华人民共和国",
// };
// setTimeout(() => {
// console.log(JSON.stringify(xzqCode),);
// }, 1000);
// });
export default {
"中国": {
"adcode": "100000",
"level": "country",
"name": "中华人民共和国"
},
"新疆维吾尔自治区": {
"adcode": "650000",
"level": "province",
"name": "新疆维吾尔自治区"
},
"湖北省": {
"adcode": "420000",
"level": "province",
"name": "湖北省"
},
"辽宁省": {
"adcode": "210000",
"level": "province",
"name": "辽宁省"
},
"广东省": {
"adcode": "440000",
"level": "province",
"name": "广东省"
},
"内蒙古自治区": {
"adcode": "150000",
"level": "province",
"name": "内蒙古自治区"
},
"黑龙江省": {
"adcode": "230000",
"level": "province",
"name": "黑龙江省"
},
"河南省": {
"adcode": "410000",
"level": "province",
"name": "河南省"
},
"山东省": {
"adcode": "370000",
"level": "province",
"name": "山东省"
},
"陕西省": {
"adcode": "610000",
"level": "province",
"name": "陕西省"
},
"贵州省": {
"adcode": "520000",
"level": "province",
"name": "贵州省"
},
"上海市": {
"adcode": "310000",
"level": "province",
"name": "上海市"
},
"重庆市": {
"adcode": "500000",
"level": "province",
"name": "重庆市"
},
"西藏自治区": {
"adcode": "540000",
"level": "province",
"name": "西藏自治区"
},
"安徽省": {
"adcode": "340000",
"level": "province",
"name": "安徽省"
},
"福建省": {
"adcode": "350000",
"level": "province",
"name": "福建省"
},
"湖南省": {
"adcode": "430000",
"level": "province",
"name": "湖南省"
},
"海南省": {
"adcode": "460000",
"level": "province",
"name": "海南省"
},
"江苏省": {
"adcode": "320000",
"level": "province",
"name": "江苏省"
},
"青海省": {
"adcode": "630000",
"level": "province",
"name": "青海省"
},
"广西壮族自治区": {
"adcode": "450000",
"level": "province",
"name": "广西壮族自治区"
},
"宁夏回族自治区": {
"adcode": "640000",
"level": "province",
"name": "宁夏回族自治区"
},
"浙江省": {
"adcode": "330000",
"level": "province",
"name": "浙江省"
},
"河北省": {
"adcode": "130000",
"level": "province",
"name": "河北省"
},
"香港特别行政区": {
"adcode": "810000",
"level": "province",
"name": "香港特别行政区"
},
"台湾省": {
"adcode": "710000",
"level": "province",
"name": "台湾省"
},
"澳门特别行政区": {
"adcode": "820000",
"level": "province",
"name": "澳门特别行政区"
},
"甘肃省": {
"adcode": "620000",
"level": "province",
"name": "甘肃省"
},
"四川省": {
"adcode": "510000",
"level": "province",
"name": "四川省"
},
"天津市": {
"adcode": "120000",
"level": "province",
"name": "天津市"
},
"江西省": {
"adcode": "360000",
"level": "province",
"name": "江西省"
},
"云南省": {
"adcode": "530000",
"level": "province",
"name": "云南省"
},
"山西省": {
"adcode": "140000",
"level": "province",
"name": "山西省"
},
"北京市": {
"adcode": "110000",
"level": "province",
"name": "北京市"
},
"吉林省": {
"adcode": "220000",
"level": "province",
"name": "吉林省"
}
}

65
vue/src/views/bigScreen/components/echart/index.vue Normal file
View 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
View 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
View 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"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View File

@@ -0,0 +1,30 @@
<template>
<div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
created(){
},
mounted() {
},
methods: {
},
}
</script>
<style lang='scss' scoped>
</style>