检测设备,自定义页面颜色

master
fanluyan 2 years ago
parent f7c5550bb1
commit 915a926816

13
package-lock.json generated

@ -30,6 +30,7 @@
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.0.3",
"js-md5": "^0.7.3",
"less": "^4.1.3", "less": "^4.1.3",
"less-loader": "^11.1.0", "less-loader": "^11.1.0",
"style-resources-loader": "^1.5.0", "style-resources-loader": "^1.5.0",
@ -6767,6 +6768,12 @@
"@sideway/pinpoint": "^2.0.0" "@sideway/pinpoint": "^2.0.0"
} }
}, },
"node_modules/js-md5": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
"integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==",
"dev": true
},
"node_modules/js-message": { "node_modules/js-message": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz", "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@ -16610,6 +16617,12 @@
"@sideway/pinpoint": "^2.0.0" "@sideway/pinpoint": "^2.0.0"
} }
}, },
"js-md5": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
"integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==",
"dev": true
},
"js-message": { "js-message": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz", "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",

@ -30,6 +30,7 @@
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.0.3",
"js-md5": "^0.7.3",
"less": "^4.1.3", "less": "^4.1.3",
"less-loader": "^11.1.0", "less-loader": "^11.1.0",
"style-resources-loader": "^1.5.0", "style-resources-loader": "^1.5.0",

Binary file not shown.

After

Width:  |  Height:  |  Size: 553 KiB

@ -9,9 +9,9 @@
<v-sidebar></v-sidebar> <v-sidebar></v-sidebar>
<div class="header-right"> <div class="header-right">
<div class="header-user-con"> <div class="header-user-con">
<el-select v-model="theme" value-key="value" @change="changeTheme"> <el-select v-model="colorValue" value-key="value" @change="changeTheme">
<el-option <el-option
v-for="item in options" v-for="item in colorList"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
@ -62,7 +62,7 @@ export default {
}, },
data() { data() {
return { return {
options: [ colorList: [
{ {
value: "#20a0ff", value: "#20a0ff",
label: "蓝色", label: "蓝色",
@ -80,6 +80,7 @@ export default {
label: "橙色", label: "橙色",
}, },
], ],
colorValue: "",
theme: {}, theme: {},
//collapse: false, //collapse: false,
@ -97,23 +98,32 @@ export default {
// //
changeTheme(e) { changeTheme(e) {
console.log(e); console.log(e);
// const app = document.getElementById("app"); this.theme = this.colorList.find(function (i) {
// if (this.theme === "") { return i.value === e;
// this.color = "#20a0ff"; }); //change
// app.classList.remove("redStyle", "greenStyle", "orangeStyle"); console.log(this.theme);
// app.classList.add("blueStyle"); updateElementUiTheme({
// } else if (this.theme === "") { theme: this.theme.value,
// this.color = "#EE320C"; themeName: "--my-theme-name",
// app.classList.remove("blueStyle", "greenStyle", "orangeStyle"); });
// app.classList.add("redStyle"); const app = document.getElementById("app");
// } else if (this.theme === "绿") { console.log(app);
// this.color = "#25EE28"; if (this.theme.label === "蓝色") {
// app.classList.add("greenStyle"); this.theme.value = "#20a0ff";
// } else if (this.theme === "") { app.classList.add("blueStyle");
// this.color = "#f08200"; app.classList.remove("redStyle", "greenStyle", "orangeStyle");
// app.classList.remove("blueStyle", "greenStyle", "redStyle"); } else if (this.theme.label === "红色") {
// app.classList.add("orangeStyle"); this.theme.value = "#EE320C";
// } app.classList.remove("blueStyle", "greenStyle", "orangeStyle");
app.classList.add("redStyle");
} else if (this.theme.label === "绿色") {
this.theme.value = "#25EE28";
app.classList.add("greenStyle");
} else if (this.theme.label === "橙色") {
this.theme.value = "#f08200";
app.classList.remove("blueStyle", "greenStyle", "redStyle");
app.classList.add("orangeStyle");
}
}, },
// //
handleCommand(command) { handleCommand(command) {
@ -157,23 +167,9 @@ export default {
}, },
}, },
created() { created() {
this.theme = { this.colorValue = this.colorList[0].label;
value: "#20a0ff",
label: "蓝色",
};
},
mounted() {
this.$watch(
"color",
(value) => {
updateElementUiTheme({
theme: value,
themeName: "--my-theme-name",
});
},
{ immediate: true }
);
}, },
mounted() {},
}; };
</script> </script>
<style lang="less"> <style lang="less">

@ -21,7 +21,11 @@ Vue.use(VueAwesomeSwiper /* { 全局组件的默认选项 } */);
import "./assets/css/reset.css"; //默认样式 import "./assets/css/reset.css"; //默认样式
import "./assets/css/theme.less"; //修改主题颜色 import "./assets/css/theme.less"; //修改主题颜色
import "./assets/css/global.less"; import "./assets/css/global.less"; //全局定义颜色
//引入md5加密
import md5 from "js-md5";
Vue.prototype.$md5 = md5;
Vue.config.productionTip = false; Vue.config.productionTip = false;
@ -35,6 +39,10 @@ new Vue({
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | 可视化智能管控系统`; document.title = `${to.meta.title} | 可视化智能管控系统`;
const role = localStorage.getItem("ms_username"); const role = localStorage.getItem("ms_username");
//const token = localStorage.getItem("token");
// if (token === null || token === "") {
// next("/login");
// } else
if (!role && to.path !== "/login") { if (!role && to.path !== "/login") {
next("/login"); next("/login");
} else if (to.meta.permission) { } else if (to.meta.permission) {
@ -44,13 +52,5 @@ router.beforeEach((to, from, next) => {
role === "admin" ? next() : next("/403"); role === "admin" ? next() : next("/403");
} else { } else {
next(); next();
// 简单的判断IE10及以下不进入富文本编辑器该组件不兼容
// if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
// Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器请使用更高版本的浏览器查看', '浏览器不兼容通知', {
// confirmButtonText: '确定'
// });
// } else {
// next();
// }
} }
}); });

@ -1,132 +1,184 @@
import Vue from 'vue' import Vue from "vue";
import VueRouter from 'vue-router' import VueRouter from "vue-router";
Vue.use(VueRouter) Vue.use(VueRouter);
const routes = [ const routes = [
{ {
path: '/', path: "/",
redirect: '/stritl' redirect: "/stritl",
}, },
{ {
path: '/', path: "/",
component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'), component: () =>
meta: { title: '首页' }, import(/* webpackChunkName: "home" */ "../components/common/Home.vue"),
meta: { title: "首页" },
children: [ children: [
{ {
path: '/stritl', path: "/stritl",
component: () => import(/* webpackChunkName: "dashboard" */ '../views/stritl/index.vue'), component: () =>
meta: { import(
title: '系统首页', /* webpackChunkName: "dashboard" */ "../views/stritl/index.vue"
icon: 'el-icon-s-home', ),
} meta: {
}, title: "系统首页",
{ icon: "el-icon-s-home",
path: '/realTimeMonitor', },
component: () => import(/* webpackChunkName: "icon" */ '../views/realTimeMonitor/index.vue'), },
meta: { {
title: '实时监控', path: "/realTimeMonitor",
permission: true, component: () =>
icon: 'el-icon-camera', import(
}, /* webpackChunkName: "icon" */ "../views/realTimeMonitor/index.vue"
}, ),
{ meta: {
path: '/pictureRotation', title: "实时监控",
component: () => import(/* webpackChunkName: "table" */ '../views/pictureRotation/index.vue'), permission: true,
meta: { icon: "el-icon-camera",
title: '图片轮巡', },
permission: true, },
icon: 'el-icon-film', {
} path: "/pictureRotation",
}, component: () =>
{ import(
path: '/videoMonitor', /* webpackChunkName: "table" */ "../views/pictureRotation/index.vue"
component: () => import(/* webpackChunkName: "tabs" */ '../views/videoMonitor/index.vue'), ),
meta: { title: '监控视频', icon: 'el-icon-video-camera', } meta: {
}, title: "图片轮巡",
{ permission: true,
path: '/videoHistory', icon: "el-icon-film",
component: () => import(/* webpackChunkName: "tabs" */ '../views/videoMonitor/videoHistory.vue'), },
meta: { title: '视频回放', icon: 'el-icon-video-camera' } },
}, {
{ path: "/videoMonitor",
path: '/photoAlarm', component: () =>
component: () => import(/* webpackChunkName: "tabs" */ '../views/alarmHandling/index.vue'), import(
meta: { title: '告警处理', icon: 'el-icon-bell', } /* webpackChunkName: "tabs" */ "../views/videoMonitor/index.vue"
}, ),
meta: { title: "监控视频", icon: "el-icon-video-camera" },
{ },
path: '/lineInformation', {
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/lineInformation/index.vue'), path: "/videoHistory",
meta: { title: '线路信息管理', icon: '', } component: () =>
}, import(
{ /* webpackChunkName: "tabs" */ "../views/videoMonitor/videoHistory.vue"
path: '/groupInformation', ),
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/groupInformation/index.vue'), meta: { title: "视频回放", icon: "el-icon-video-camera" },
meta: { title: '分组信息管理', icon: '', } },
}, {
{ path: "/photoAlarm",
path: '/towerInformation', component: () =>
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/towerInformation/index.vue'), import(
meta: { title: '杆塔信息管理', icon: '', } /* webpackChunkName: "tabs" */ "../views/alarmHandling/index.vue"
}, ),
{ meta: { title: "告警处理", icon: "el-icon-bell" },
path: '/towerTeam', },
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/towerTeam/index.vue'),
meta: { title: '杆塔班组用户', icon: '', }
},
{ {
path: '/deviceVisualization', path: "/lineInformation",
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/monitoringEquipment/deviceVisualization/index.vue'), component: () =>
meta: { title: '装置分布可视化', icon: '', } import(
}, /* webpackChunkName: "tabs" */ "../views/management/userEquipment/lineInformation/index.vue"
{ ),
path: '/photographicDevice', meta: { title: "线路信息管理", icon: "" },
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/monitoringEquipment/photographicDevice/index.vue'), },
meta: { title: '拍照装置管理', icon: '', } {
}, path: "/groupInformation",
{ component: () =>
path: '/SIMCard', import(
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/monitoringEquipment/SIMCard/index.vue'), /* webpackChunkName: "tabs" */ "../views/management/userEquipment/groupInformation/index.vue"
meta: { title: 'SIM卡管理', icon: '', } ),
}, meta: { title: "分组信息管理", icon: "" },
},
{ {
// 权限页面 path: "/towerInformation",
path: '/permission', component: () =>
component: () => import(/* webpackChunkName: "permission" */ '../views/Permission.vue'), import(
meta: { title: '权限测试', permission: true, icon: 'el-icon-setting', } /* webpackChunkName: "tabs" */ "../views/management/userEquipment/towerInformation/index.vue"
}, ),
{ meta: { title: "杆塔信息管理", icon: "" },
path: '/404', },
component: () => import(/* webpackChunkName: "404" */ '../views/404.vue'), {
meta: { title: '404' } path: "/towerTeam",
}, component: () =>
{ import(
path: '/403', /* webpackChunkName: "tabs" */ "../views/management/userEquipment/towerTeam/index.vue"
component: () => import(/* webpackChunkName: "403" */ '../views/403.vue'), ),
meta: { title: '403' } meta: { title: "杆塔班组用户", icon: "" },
}, },
{
path: "/deviceVisualization",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/management/monitoringEquipment/deviceVisualization/index.vue"
),
meta: { title: "装置分布可视化", icon: "" },
},
{
path: "/photographicDevice",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/management/monitoringEquipment/photographicDevice/index.vue"
),
meta: { title: "拍照装置管理", icon: "" },
},
{
path: "/SIMCard",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/management/monitoringEquipment/SIMCard/index.vue"
),
meta: { title: "SIM卡管理", icon: "" },
},
] {
}, // 权限页面
{ path: "/permission",
path: '/login', component: () =>
component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'), import(
meta: { title: '登录' } /* webpackChunkName: "permission" */ "../views/Permission.vue"
}, ),
{ meta: { title: "权限测试", permission: true, icon: "el-icon-setting" },
path: '*', },
redirect: '/404' {
} path: "/404",
] component: () =>
import(/* webpackChunkName: "404" */ "../views/404.vue"),
meta: { title: "404" },
},
{
path: "/403",
component: () =>
import(/* webpackChunkName: "403" */ "../views/403.vue"),
meta: { title: "403" },
},
],
},
{
path: "/login",
component: () =>
import(/* webpackChunkName: "login" */ "../views/Login.vue"),
meta: { title: "登录" },
},
{
path: "*",
redirect: "/404",
},
];
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: "history",
base: process.env.BASE_URL, base: process.env.BASE_URL,
routes routes,
}) });
/**
export default router * 重写 router.prototype.push 避免同时跳转相同路径报错
*/
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject)
return originalPush.call(this, location, onResolve, onReject);
return originalPush.call(this, location).catch((err) => err);
};
export default router;

@ -1,17 +1,21 @@
import Vue from 'vue' import Vue from "vue";
import Vuex from 'vuex' import Vuex from "vuex";
Vue.use(Vuex) Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
//用户登录token 存储
token: localStorage.getItem("token") ? localStorage.getItem("token") : "",
}, },
getters: { getters: {},
},
mutations: { mutations: {
//修改token 并将token存入localstorage
setToken(state, user) {
state.token = user.token;
localStorage.setItem("token", user.token);
},
}, },
actions: { actions: {},
}, modules: {},
modules: { });
}
})

@ -1,149 +1,120 @@
import request from '../request'; import request from "../request";
//登陆接口 //登陆接口
export function login(data) { export function login(data) {
return request({ return request({
url: '/login', url: "/stritl/login",
method: 'post', method: "post",
data data,
}) });
} }
//首页数据接口 //首页数据接口
export function getLineDataByVoltage(data) { export function getLineDataByVoltage(data) {
return request({ return request({
url: '/stritl/main/getLineDataByVoltage', url: "/stritl/main/getLineDataByVoltage",
method: 'post', method: "post",
data data,
}) });
} }
export function getCapturePointDataByDanger(params) { export function getCapturePointDataByDanger(params) {
return request({ return request({
url: '/stritl/main/getCapturePointDataByDanger', url: "/stritl/main/getCapturePointDataByDanger",
method: 'post', method: "post",
params params,
}) });
} }
export function getHostDeviceDataByVoltage(data) { export function getHostDeviceDataByVoltage(data) {
return request({ return request({
url: '/stritl/main/getHostDeviceDataByVoltage', url: "/stritl/main/getHostDeviceDataByVoltage",
method: 'post', method: "post",
data data,
}) });
} }
export function getCompanyDeviceInfo(params) { export function getCompanyDeviceInfo(params) {
return request({ return request({
url: '/stritl/main/getCompanyDeviceInfo', url: "/stritl/main/getCompanyDeviceInfo",
method: 'get', method: "get",
params params,
}) });
} }
export function getPhotoAlarmDataByAlarmType(params) { export function getPhotoAlarmDataByAlarmType(params) {
return request({ return request({
url: '/stritl/main/getPhotoAlarmDataByAlarmType', url: "/stritl/main/getPhotoAlarmDataByAlarmType",
method: 'post', method: "post",
params params,
}) });
} }
export function getByName(data) { export function getByName(data) {
return request({ return request({
url: '/stritl/inspectionOpinions/getByName', url: "/stritl/inspectionOpinions/getByName",
method: 'post', method: "post",
data data,
}) });
} }
//雷达图数据 //雷达图数据
export function getLastYearAlarmReasons(params) { export function getLastYearAlarmReasons(params) {
return request({ return request({
url: '/stritl/main/getLastYearAlarmReasons', url: "/stritl/main/getLastYearAlarmReasons",
method: 'get', method: "get",
params params,
}) });
} }
export function get1(params) { export function get1(params) {
return request({ return request({
url: '/get1', url: "/get1",
method: 'get', method: "get",
params params,
}); });
}; }
export function get2(params) { export function get2(params) {
return request({ return request({
url: '/get2', url: "/get2",
method: 'get', method: "get",
params params,
}); });
}; }
//图片轮巡 Post请求 //图片轮巡 Post请求
export function picLoop(data) { export function picLoop(data) {
return request({ return request({
url: '/stritl/realData/listCompanyScan', url: "/stritl/realData/listCompanyScan",
method: 'post', method: "post",
data data,
}); });
}; }
//预警 //预警
export function list(params) { export function list(params) {
return request({ return request({
url: '/stritl/photoAlarm/list', url: "/stritl/photoAlarm/list",
method: 'get', method: "get",
params params,
}); });
}; }
//获取左侧树状图 http://180.166.218.222:7200/stritl/line/getTreeLineCompany //获取左侧树状图 http://180.166.218.222:7200/stritl/line/getTreeLineCompany
export function getListCompany(params) { export function getListCompany(params) {
return request({ return request({
url: '/stritl/line/getTreeLine', url: "/stritl/line/getTreeLine",
method: 'post', method: "post",
params params,
}); });
}; }
//获取右侧表格 //获取右侧表格
export function getTowerList(params) { export function getTowerList(params) {
return request({ return request({
url: '/stritl/towerLogic/getTowerLogicList', url: "/stritl/towerLogic/getTowerLogicList",
method: 'get', method: "get",
params params,
}); });
}; }
//公司服务器地址接口 //公司服务器地址接口
// export function get1() { // export function get1() {
// return request({ // return request({
// url: '/test/getBannerList', // url: '/test/getBannerList',

@ -1,4 +1,4 @@
import axios from 'axios'; import axios from "axios";
// import { Loading } from 'element-ui'; //项目已经全局引入element的话可以不单独引入 // import { Loading } from 'element-ui'; //项目已经全局引入element的话可以不单独引入
// let loading //定义loading变量 // let loading //定义loading变量
// function startLoading() { //使用Element loading-start 方法 // function startLoading() { //使用Element loading-start 方法
@ -30,41 +30,39 @@ import axios from 'axios';
// } // }
// } // }
const service = axios.create({ const service = axios.create({
// process.env.NODE_ENV === 'development' 来判断是否开发环境 // process.env.NODE_ENV === 'development' 来判断是否开发环境
// easy-mock服务挂了暂时不使用了 // easy-mock服务挂了暂时不使用了
// baseURL: '', // baseURL: '',
// timeout: 5000 // timeout: 5000
baseURL: 'api',//把原来的项目地址改成api解决跨域问题 baseURL: "api", //把原来的项目地址改成api解决跨域问题
timeout: 3000, timeout: 3000,
}); });
service.interceptors.request.use( service.interceptors.request.use(
config => { (config) => {
// showFullScreenLoading() // showFullScreenLoading()
return config; return config;
}, },
error => { (error) => {
console.log(error); console.log(error);
return Promise.reject(); return Promise.reject();
} }
); );
service.interceptors.response.use( service.interceptors.response.use(
response => { (response) => {
if (response.status === 200) { if (response.status === 200) {
// tryHideFullScreenLoading() // tryHideFullScreenLoading()
return response.data; return response.data;
} else { } else {
Promise.reject(); Promise.reject();
}
},
error => {
console.log(error);
return Promise.reject();
} }
},
(error) => {
console.log(error);
return Promise.reject();
}
); );
export default service; export default service;

@ -34,7 +34,8 @@
</template> </template>
<script> <script>
import { get1, get2 } from "@/utils/api/index"; import { mapMutations } from "vuex";
import { login, get1, get2 } from "@/utils/api/index";
export default { export default {
data: function () { data: function () {
return { return {
@ -50,12 +51,37 @@ export default {
}, },
}; };
}, },
computed: {
...mapMutations(["setToken"]),
},
methods: { methods: {
submitForm() { submitForm() {
this.$refs.login.validate((valid) => { this.$refs.login.validate((valid) => {
if (valid) { if (valid) {
// login({
// account: "xytest",
// pwd: "2b4c6570bb613fb6b81589fbfa635edf",
// captcha: "bgsq",
// requestIp: "180.166.218.222",
// requestPort: "7200",
// })
// .then((res) => {
// console.log(res);
// this.$message.success("");
// this.token = "asdadadadadasdasd" + res.statusCode;
// this.setToken({ token: this.token });
// this.$router.push("/");
// })
// .catch((error) => {
// alert("");
// console.log(error);
// });
this.$message.success("登录成功"); this.$message.success("登录成功");
localStorage.setItem("ms_username", this.param.username); localStorage.setItem("ms_username", this.param.username);
console.log("加密密码:" + this.$md5(this.param.username));
this.$router.push("/"); this.$router.push("/");
} else { } else {
this.$message.error("请输入账号和密码"); this.$message.error("请输入账号和密码");
@ -64,6 +90,7 @@ export default {
} }
}); });
}, },
getLogin() {},
}, },
created() { created() {
get1().then((res) => { get1().then((res) => {

@ -1,147 +1,171 @@
<template> <template>
<div class="thumb-example"> <div class="thumb-example">
<!-- swiper1 --> <!-- swiper1 -->
<swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop"> <swiper
<swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id"> class="swiper gallery-top"
<img :src="item.url" style="width: 100%; height: 100%" alt="" /> :options="swiperOptionTop"
</swiper-slide> ref="swiperTop"
<div class="swiper-button-next swiper-button-white" slot="button-next"></div> >
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div> <swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id">
</swiper> <img :src="item.url" style="width: 100%; height: 100%" alt="" />
<!-- swiper2 Thumbs --> </swiper-slide>
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs"> <div
<swiper-slide class="slide" style="width: 30%; height: 100%" v-for="(item, index) in bigImg" :key="item.id"> class="swiper-button-next swiper-button-white"
<img style="width: 100%; height: 100%" :src="item.url" alt="" /> slot="button-next"
<p class="timeInfo">{{ 7 + index }}:00:12</p> ></div>
</swiper-slide> <div
<div class="swiper-button-next swiper-button-white" slot="button-next"></div> class="swiper-button-prev swiper-button-white"
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div> slot="button-prev"
</swiper> ></div>
</div> </swiper>
<!-- swiper2 Thumbs -->
<swiper
class="swiper gallery-thumbs"
:options="swiperOptionThumbs"
ref="swiperThumbs"
>
<swiper-slide
class="slide"
style="width: 30%; height: 100%"
v-for="(item, index) in bigImg"
:key="item.id"
>
<img style="width: 100%; height: 100%" :src="item.url" alt="" />
<p class="timeInfo">{{ 7 + index }}:00:12</p>
</swiper-slide>
<div
class="swiper-button-next swiper-button-white"
slot="button-next"
></div>
<div
class="swiper-button-prev swiper-button-white"
slot="button-prev"
></div>
</swiper>
</div>
</template> </template>
<script> <script>
export default { export default {
mounted() { mounted() {
// swiper // swiper
this.$nextTick(() => { this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.swiper; const swiperTop = this.$refs.swiperTop.swiper;
const swiperThumbs = this.$refs.swiperThumbs.swiper; const swiperThumbs = this.$refs.swiperThumbs.swiper;
swiperTop.controller.control = swiperThumbs; swiperTop.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperTop; swiperThumbs.controller.control = swiperTop;
}); });
}, },
data() { data() {
return { return {
// //
bigImg: [ bigImg: [
{ {
url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/210509/XYIGQ10C221000080_21050918190300_1_255.jpg', url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/210509/XYIGQ10C221000080_21050918190300_1_255.jpg",
id: 0 id: 0,
}, },
{ {
url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323100012_1_255_res.jpg', url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323100012_1_255_res.jpg",
id: 1 id: 1,
}, },
{ {
url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323090012_1_255_res.jpg', url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323090012_1_255_res.jpg",
id: 2 id: 2,
}, },
{ {
url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323080011_1_255_res.jpg', url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323080011_1_255_res.jpg",
id: 3 id: 3,
}, },
{ {
url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323070012_1_255_res.jpg', url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323070012_1_255_res.jpg",
id: 4 id: 4,
}, },
{ {
url: 'http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323060012_1_255_res.jpg', url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323060012_1_255_res.jpg",
id: 5 id: 5,
} },
], ],
swiperOptionTop: { swiperOptionTop: {
zoom: true, zoom: true,
loop: true, loop: true,
loopedSlides: 5, // looped slides should be the same loopedSlides: 5, // looped slides should be the same
spaceBetween: 10, spaceBetween: 10,
observer: true, //swiperswiper observer: true, //swiperswiper
observeParents: true, //swiperswiper observeParents: true, //swiperswiper
// autoplay: { // // autoplay: { //
// delay: 2000, // delay: 2000,
// disableOnInteraction: false // disableOnInteraction: false
// }, // },
navigation: { navigation: {
nextEl: '.swiper-button-next', nextEl: ".swiper-button-next",
prevEl: '.swiper-button-prev' prevEl: ".swiper-button-prev",
} },
}, },
swiperOptionThumbs: { swiperOptionThumbs: {
loop: true, loop: true,
loopedSlides: 5, // looped slides should be the same loopedSlides: 5, // looped slides should be the same
spaceBetween: 10, spaceBetween: 10,
centeredSlides: true, centeredSlides: true,
slidesPerView: 'auto', slidesPerView: "auto",
touchRatio: 0.2, touchRatio: 0.2,
slideToClickedSlide: true, slideToClickedSlide: true,
navigation: { navigation: {
nextEl: '.swiper-button-next', nextEl: ".swiper-button-next",
prevEl: '.swiper-button-prev' prevEl: ".swiper-button-prev",
} },
} },
}; };
}, },
methods: {} methods: {},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.thumb-example { .thumb-example {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
.gallery-top {
// height: 80% !important;
height: 80% !important;
width: 100%; width: 100%;
display: flex; }
flex-direction: column; .gallery-thumbs {
height: 100%; height: 20% !important;
.gallery-top { box-sizing: border-box;
// height: 80% !important; padding: 10px 0px;
height: 80% !important; width: auto;
width: 100%; margin-left: 2px;
.swiper-button-next {
right: 0px;
} }
.gallery-thumbs { .swiper-button-prev {
height: 20% !important; left: 0px;
box-sizing: border-box;
padding: 10px 0px;
width: auto;
margin-left: 2px;
.swiper-button-next {
right: 0px;
}
.swiper-button-prev {
left: 0px;
}
.timeInfo {
position: absolute;
bottom: 0;
width: 100%;
background: #f0f0f0;
padding: 4px 0px;
font-size: 14px;
text-align: center;
}
} }
.timeInfo {
position: absolute;
bottom: 0;
width: 100%;
background: #f0f0f0;
padding: 4px 0px;
font-size: 14px;
text-align: center;
}
}
} }
.swiper-slide { .swiper-slide {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.gallery-thumbs .swiper-slide { .gallery-thumbs .swiper-slide {
// width: 20%; // width: 20%;
// height: 80px; // height: 80px;
// opacity: 0.4; // opacity: 0.4;
} }
.gallery-thumbs .swiper-slide-active { .gallery-thumbs .swiper-slide-active {
border: 3px solid @color-primary; border: 3px solid @color-primary;
} }
</style> </style>

@ -1,12 +1,153 @@
<template> <template>
<div>SIM卡管理</div> <div class="simCardcontain">
<div class="simBtnGroup">
<el-button type="primary">新增</el-button>
<el-button type="primary">修改</el-button>
<el-button type="primary">删除</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">质保延期</el-button>
<el-button type="primary">导入</el-button>
<el-button type="primary">导入模板下载</el-button>
<el-button type="primary">导出</el-button>
</div>
<div class="searchForm">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="单位:">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="网络类型:">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态:">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="是否已使用">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电话号码:">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
</el-form>
</div>
<div class="simTable">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="55"> </el-table-column>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="单位">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="电话号码"> </el-table-column>
<el-table-column prop="address" label="网络类型" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="name" label="质保到期日"> </el-table-column>
<el-table-column prop="name" label="流量包(M)"> </el-table-column>
<el-table-column prop="name" label="告警阀值(%)"> </el-table-column>
<el-table-column prop="name" label="状态"> </el-table-column>
<el-table-column prop="name" label="是否已使用"> </el-table-column>
</el-table>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return {}; return {
} formInline: {
user: "",
region: "",
},
tableData: [
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-06",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-07",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
multipleSelection: [],
};
},
methods: {
onSubmit() {
console.log("submit!");
},
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
},
}; };
</script> </script>
<style lang="less"> <style lang="less">
.simCardcontain {
width: 100%;
height: 100%;
background: @color-white;
.simBtnGroup {
padding: 16px 8px;
}
.searchForm {
padding: 0px 8px;
.el-form {
.el-form-item {
margin-bottom: 0px;
}
}
}
.simTable {
padding: 16px 8px 0 8px;
}
}
</style> </style>

@ -1,12 +1,153 @@
<template> <template>
<div>拍照装置管理</div> <div class="photoGraphicDevice">
<div class="photoGraphicBtnGroup">
<el-button type="primary">新增</el-button>
<el-button type="primary">修改</el-button>
<el-button type="primary">删除</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">质保延期</el-button>
<el-button type="primary">导入</el-button>
<el-button type="primary">导入模板下载</el-button>
<el-button type="primary">导出</el-button>
</div>
<div class="searchForm">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="单位:">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="网络类型:">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态:">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="是否已使用">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电话号码:">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
</el-form>
</div>
<div class="photoGraphicTable">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="55"> </el-table-column>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="单位">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="电话号码"> </el-table-column>
<el-table-column prop="address" label="网络类型" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="name" label="质保到期日"> </el-table-column>
<el-table-column prop="name" label="流量包(M)"> </el-table-column>
<el-table-column prop="name" label="告警阀值(%)"> </el-table-column>
<el-table-column prop="name" label="状态"> </el-table-column>
<el-table-column prop="name" label="是否已使用"> </el-table-column>
</el-table>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return {}; return {
} formInline: {
user: "",
region: "",
},
tableData: [
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-06",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-07",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
multipleSelection: [],
};
},
methods: {
onSubmit() {
console.log("submit!");
},
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
},
}; };
</script> </script>
<style lang="less"> <style lang="less">
.photoGraphicDevice {
width: 100%;
height: 100%;
background: @color-white;
.photoGraphicBtnGroup {
padding: 16px 8px;
}
.searchForm {
padding: 0px 8px;
.el-form {
.el-form-item {
margin-bottom: 0px;
}
}
}
.photoGraphicTable {
padding: 16px 8px 0 8px;
}
}
</style> </style>

@ -1,465 +1,499 @@
<template> <template>
<div class="stritlBox"> <div class="stritlBox">
<div class="stritl_left"> <div class="stritl_left">
<div class="strLeftTop"> <div class="strLeftTop">
<h3>{{ numberUnits.name }}</h3> <h3>{{ numberUnits.name }}</h3>
<bar v-if="flag.baizhang" :legendData="unitXData" :seriesData="unitYData" :boxStyle="numberUnits.boxStyle"></bar> <bar
</div> v-if="flag.baizhang"
<div class="strLeftMid"> :legendData="unitXData"
<h3>{{ hazardClass.name }}</h3> :seriesData="unitYData"
<pie v-if="flag.baizhang" :pieData="hazardPieData" :boxStyle="hazardClass.boxStyle"></pie> :boxStyle="numberUnits.boxStyle"
</div> ></bar>
<div class="strLeftBottom"> </div>
<h3>{{ monitLine.name }}</h3> <div class="strLeftMid">
<bar v-if="flag.baizhang" :legendData="lineXData" :seriesData="lineYData" :boxStyle="monitLine.boxStyle"></bar> <h3>{{ hazardClass.name }}</h3>
</div> <pie
v-if="flag.baizhang"
:pieData="hazardPieData"
:boxStyle="hazardClass.boxStyle"
></pie>
</div>
<div class="strLeftBottom">
<h3>{{ monitLine.name }}</h3>
<bar
v-if="flag.baizhang"
:legendData="lineXData"
:seriesData="lineYData"
:boxStyle="monitLine.boxStyle"
></bar>
</div>
</div>
<div class="stritl_center">
<div class="strCenterTop">
<mapChart></mapChart>
</div>
<div class="strCenterbottom">
<div class="bottomL">
<h3>{{ hazardType.name }}</h3>
<horizontalBar
:legendData="hazardTypeXData"
:seriesData="hazardTypeYData"
:boxStyle="hazardType.boxStyle"
></horizontalBar>
</div> </div>
<div class="stritl_center"> <div class="bottomM">
<div class="strCenterTop"> <h3>{{ deviceInfo.name }}</h3>
<mapChart></mapChart> <div class="infoBox">
</div> <p>
<div class="strCenterbottom"> <span>在运数</span>
<div class="bottomL"> <span>{{ infoData.deviceCount }}</span>
<h3>{{ hazardType.name }}</h3> </p>
<horizontalBar <p>
:legendData="hazardTypeXData" <span>在线数</span>
:seriesData="hazardTypeYData" <span>{{ infoData.hasPhotoCount }}</span>
:boxStyle="hazardType.boxStyle" </p>
></horizontalBar> <p>
</div> <span>杆塔覆盖率</span>
<div class="bottomM"> <span>{{ infoData.deviceCoverage }}%</span>
<h3>{{ deviceInfo.name }}</h3> </p>
<div class="infoBox"> <p>
<p> <span>在线率</span>
<span>在运数</span> <span>{{ infoData.hasPhotoRate }}%</span>
<span>{{ infoData.deviceCount }}</span> </p>
</p> </div>
<p>
<span>在线数</span>
<span>{{ infoData.hasPhotoCount }}</span>
</p>
<p>
<span>杆塔覆盖率</span>
<span>{{ infoData.deviceCoverage }}%</span>
</p>
<p>
<span>在线率</span>
<span>{{ infoData.hasPhotoRate }}%</span>
</p>
</div>
</div>
<div class="bottomR">
<h3>{{ deviceOnline.name }}</h3>
<pie :pieData="deviceOnline.onlineData" :boxStyle="deviceOnline.boxStyle"></pie>
</div>
</div>
</div> </div>
<div class="stritl_right"> <div class="bottomR">
<div class="strRightTop"> <h3>{{ deviceOnline.name }}</h3>
<h3>线路分布(总计5)</h3> <pie
<div class="tableBox"> :pieData="deviceOnline.onlineData"
<el-table :data="lineAllData" style="width: 100%"> :boxStyle="deviceOnline.boxStyle"
<el-table-column prop="voltageLevelStr" label="电压等级" align="center"> </el-table-column> ></pie>
<el-table-column prop="lineCount" label="线路数" align="center"> </el-table-column>
<el-table-column prop="towerCount" label="安装数" align="center"> </el-table-column>
<el-table-column prop="deviceCoverage" label="安装覆盖率" align="center"> </el-table-column>
</el-table>
</div>
</div>
<!-- <div class="strRightMid">5</div> -->
<div class="strRightBottom">
<h3>{{ patrolOpinions.name }}</h3>
<div class="suggest">
<p class="attention"><span>注意</span>{{ patrolOpinions.month }}</p>
<p class="info">
<span>{{ patrolOpinions.info1 }}</span>
<span>{{ patrolOpinions.info2 }}</span>
</p>
</div>
<h4>往年同期隐患比例分布图</h4>
<radar :radarName="radarName" :radarValue="radarValue" :boxStyle="patrolOpinions.boxStyle" :radarTitle="radarTitle"></radar>
</div>
</div> </div>
</div>
</div> </div>
<div class="stritl_right">
<div class="strRightTop">
<h3>线路分布(总计5)</h3>
<div class="tableBox">
<el-table :data="lineAllData" style="width: 100%">
<el-table-column
prop="voltageLevelStr"
label="电压等级"
align="center"
>
</el-table-column>
<el-table-column prop="lineCount" label="线路数" align="center">
</el-table-column>
<el-table-column prop="towerCount" label="安装数" align="center">
</el-table-column>
<el-table-column
prop="deviceCoverage"
label="安装覆盖率"
align="center"
>
</el-table-column>
</el-table>
</div>
</div>
<!-- <div class="strRightMid">5</div> -->
<div class="strRightBottom">
<h3>{{ patrolOpinions.name }}</h3>
<div class="suggest">
<p class="attention"><span>注意</span>{{ patrolOpinions.month }}</p>
<p class="info">
<span>{{ patrolOpinions.info1 }}</span>
<span>{{ patrolOpinions.info2 }}</span>
</p>
</div>
<h4>往年同期隐患比例分布图</h4>
<radar
:radarName="radarName"
:radarValue="radarValue"
:boxStyle="patrolOpinions.boxStyle"
:radarTitle="radarTitle"
></radar>
</div>
</div>
</div>
</template> </template>
<script> <script>
import bar from './chartFiles/bar'; import bar from "./chartFiles/bar";
import horizontalBar from './chartFiles/horizontalBar'; import horizontalBar from "./chartFiles/horizontalBar";
import pie from './chartFiles/pie'; import pie from "./chartFiles/pie";
import radar from './chartFiles/radar'; import radar from "./chartFiles/radar";
import mapChart from './chartFiles/mapChart'; import mapChart from "./chartFiles/mapChart";
import { import {
getLineDataByVoltage, getLineDataByVoltage,
getCapturePointDataByDanger, getCapturePointDataByDanger,
getHostDeviceDataByVoltage, getHostDeviceDataByVoltage,
getPhotoAlarmDataByAlarmType, getPhotoAlarmDataByAlarmType,
getCompanyDeviceInfo, getCompanyDeviceInfo,
getByName, getByName,
getLastYearAlarmReasons getLastYearAlarmReasons,
} from '@/utils/api/index'; } from "@/utils/api/index";
export default { export default {
data() { data() {
return { return {
name: localStorage.getItem('ms_username'), name: localStorage.getItem("ms_username"),
flag: { flag: {
baizhang: false // baizhang: false, //
}, },
// //
unitAllData: [], unitAllData: [],
unitXData: [], unitXData: [],
unitYData: [], unitYData: [],
numberUnits: { numberUnits: {
name: '装置数量统计', name: "装置数量统计",
boxStyle: { boxStyle: {
width: '100%', width: "100%",
height: '200px' height: "200px",
} },
}, },
//线 //线
lineAllData: [], lineAllData: [],
lineXData: [], lineXData: [],
lineYData: [], lineYData: [],
monitLine: { monitLine: {
name: '监控路线统计', name: "监控路线统计",
boxStyle: { boxStyle: {
width: '100%', width: "100%",
height: '200px' height: "200px",
} },
}, },
// //
hazardData: [], hazardData: [],
hazardPieData: [], hazardPieData: [],
hazardClass: { hazardClass: {
name: '隐患分类统计', name: "隐患分类统计",
boxStyle: { boxStyle: {
width: '100%', width: "100%",
height: '200px' height: "200px",
} },
}, },
// //
hazardTypeData: [], hazardTypeData: [],
hazardTypeXData: [], hazardTypeXData: [],
hazardTypeYData: [], hazardTypeYData: [],
hazardType: { hazardType: {
name: '隐患类型统计', name: "隐患类型统计",
boxStyle: { boxStyle: {
width: '100%', width: "100%",
height: '160px' height: "160px",
} },
}, },
// //
infoData: [], infoData: [],
deviceInfo: { deviceInfo: {
name: '装置信息统计', name: "装置信息统计",
infoData: [ infoData: [
{ value: 24, name: '在运数' }, { value: 24, name: "在运数" },
{ value: 10, name: '在线数' }, { value: 10, name: "在线数" },
{ value: '92.31%', name: '杆塔覆盖率' }, { value: "92.31%", name: "杆塔覆盖率" },
{ value: '41.67%', name: '在线率' } { value: "41.67%", name: "在线率" },
] ],
}, },
deviceOnline: { deviceOnline: {
name: '装置在线统计', name: "装置在线统计",
onlineData: [ onlineData: [
{ value: 55, name: '离线' }, { value: 55, name: "离线" },
{ value: 45, name: '在线' } { value: 45, name: "在线" },
], ],
boxStyle: { boxStyle: {
width: '100%', width: "100%",
height: '160px' height: "160px",
} },
}, },
// //
patrolData: [], patrolData: [],
radarName: [], radarName: [],
radarValue: [], radarValue: [],
radarTitle: '隐患比例分布图', radarTitle: "隐患比例分布图",
patrolOpinions: { patrolOpinions: {
name: '巡查意见', name: "巡查意见",
month: '三月份', month: "三月份",
info1: '1.鸟类活动开展频繁,需注意鸟类筑巢,大型鸟类驻留。', info1: "1.鸟类活动开展频繁,需注意鸟类筑巢,大型鸟类驻留。",
info2: '2.大风天气较多的季节,要注意对放风筝行为的监控,同时加强巡视对导线悬挂异物的观察。', info2:
boxStyle: { "2.大风天气较多的季节,要注意对放风筝行为的监控,同时加强巡视对导线悬挂异物的观察。",
width: '100%', boxStyle: {
height: '160px' width: "100%",
} height: "160px",
} },
}; },
};
},
components: {
bar,
horizontalBar,
pie,
radar,
mapChart,
},
computed: {
role() {
return this.name === "admin" ? "超级管理员" : "普通用户";
}, },
components: { },
bar, methods: {},
horizontalBar, created() {
pie, //
radar, getHostDeviceDataByVoltage({
mapChart companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
}, }).then((res) => {
computed: { this.unitAllData = res.data.data;
role() { for (var i = 0; i < this.unitAllData.length; i++) {
return this.name === 'admin' ? '超级管理员' : '普通用户'; this.unitXData.push(this.unitAllData[i].name);
} this.unitYData.push(this.unitAllData[i].value);
}, }
methods: {}, this.flag.baizhang = true;
created() { });
//
getHostDeviceDataByVoltage({
companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b'
}).then((res) => {
this.unitAllData = res.data.data;
for (var i = 0; i < this.unitAllData.length; i++) {
this.unitXData.push(this.unitAllData[i].name);
this.unitYData.push(this.unitAllData[i].value);
}
this.flag.baizhang = true;
});
// //
getCompanyDeviceInfo({ getCompanyDeviceInfo({
companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b' companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
}).then((res) => { }).then((res) => {
this.infoData = res.data; this.infoData = res.data;
}); });
//线 //线
getLineDataByVoltage({ getLineDataByVoltage({
companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b' companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
}).then((res) => { }).then((res) => {
this.lineAllData = res.data; this.lineAllData = res.data;
console.log(this.lineAllData); console.log(this.lineAllData);
for (var i = 0; i < this.lineAllData.length; i++) { for (var i = 0; i < this.lineAllData.length; i++) {
this.lineXData.push(this.lineAllData[i].voltageLevelStr); this.lineXData.push(this.lineAllData[i].voltageLevelStr);
this.lineYData.push(this.lineAllData[i].lineCount); this.lineYData.push(this.lineAllData[i].lineCount);
} }
this.flag.baizhang = true; this.flag.baizhang = true;
}); });
// //
getCapturePointDataByDanger({ getCapturePointDataByDanger({
companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b' companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
}).then((res) => { }).then((res) => {
this.hazardData = res.data; this.hazardData = res.data;
// let name1 = this.hazardData.nameList; // let name1 = this.hazardData.nameList;
// let value1 = this.hazardData.valueList; // let value1 = this.hazardData.valueList;
this.hazardPieData = res.data.list; this.hazardPieData = res.data.list;
console.log(this.hazardPieData); console.log(this.hazardPieData);
this.flag.baizhang = true; this.flag.baizhang = true;
}); });
// //
getPhotoAlarmDataByAlarmType({ getPhotoAlarmDataByAlarmType({
companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b' companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
}).then((res) => { }).then((res) => {
this.hazardTypeData = res.data.dataList; this.hazardTypeData = res.data.dataList;
for (var i = 0; i < this.hazardTypeData.length; i++) { for (var i = 0; i < this.hazardTypeData.length; i++) {
this.hazardTypeXData.push(this.hazardTypeData[i].name); this.hazardTypeXData.push(this.hazardTypeData[i].name);
this.hazardTypeYData.push(this.hazardTypeData[i].acount); this.hazardTypeYData.push(this.hazardTypeData[i].acount);
} }
this.flag.baizhang = true; this.flag.baizhang = true;
}); });
// //
getByName({ getByName({
name: '三月' name: "三月",
}).then((res) => { }).then((res) => {
console.log(res); console.log(res);
}); });
// //
getLastYearAlarmReasons({ getLastYearAlarmReasons({
companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b', companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
month: '03' month: "04",
}).then((res) => { }).then((res) => {
console.log(res); console.log(res);
this.patrolData = res.data; this.patrolData = res.data;
console.log(this.patrolData); console.log(this.patrolData);
let obj = {}; let obj = {};
this.patrolData.forEach((item) => { this.patrolData.forEach((item) => {
if (obj.hasOwnProperty(item.alarmInfo)) { if (obj.hasOwnProperty(item.alarmInfo)) {
obj[item.alarmInfo] += item.num; obj[item.alarmInfo] += item.num;
} else { } else {
obj[item.alarmInfo] = item.num; obj[item.alarmInfo] = item.num;
} }
}); });
console.log(obj); console.log(obj);
// //
for (let i in obj) { for (let i in obj) {
console.log(i); console.log(i);
this.radarName.push({ this.radarName.push({
name: i name: i,
});
}
console.log(this.radarName);
this.radarValue = Object.values(obj);
console.log(this.radarValue);
}); });
} }
console.log(this.radarName);
this.radarValue = Object.values(obj);
console.log(this.radarValue);
});
},
}; };
</script> </script>
<style lang="less">
<style lang="less">
.stritlBox { .stritlBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
.stritl_left,
.stritl_right {
width: 20%;
margin: 8px;
}
.stritl_left,
.stritl_right {
display: flex; display: flex;
.stritl_left, flex-direction: column;
.stritl_right { justify-content: space-between;
width: 20%; .strLeftTop,
margin: 8px; .strLeftMid,
.strLeftBottom {
height: 30%;
box-sizing: content-box;
box-shadow: @box-shadow-basic;
border: 1px solid @border-color-base;
background-color: @color-white;
border-radius: 4px;
padding: 8px;
h3 {
margin-bottom: 8px;
font-size: 15px;
}
} }
.stritl_left, .strRightTop,
.stritl_right { .strRightBottom {
display: flex; height: 46%;
flex-direction: column; box-sizing: content-box;
justify-content: space-between; box-shadow: @box-shadow-basic;
.strLeftTop, border: 1px solid @border-color-base;
.strLeftMid, background-color: @color-white;
.strLeftBottom { border-radius: 4px;
height: 30%; padding: 8px;
box-sizing: content-box; h3 {
box-shadow:@box-shadow-basic; margin-bottom: 8px;
border: 1px solid @border-color-base; font-size: 15px;
background-color: @color-white; }
border-radius: 4px; }
padding: 8px; .strRightTop {
h3 { position: relative;
margin-bottom: 8px; .tableBox {
font-size: 15px; position: absolute;
} width: calc(100% - 16px);
.el-table .cell {
white-space: normal;
word-break: break-all;
} }
.strRightTop, .el-table th.el-table__cell > .cell {
.strRightBottom { min-width: 58px;
height: 46%; padding-left: 0px;
box-sizing: content-box; padding-right: 0px;
box-shadow:@box-shadow-basic;
border: 1px solid @border-color-base;
background-color: @color-white;
border-radius: 4px;
padding: 8px;
h3 {
margin-bottom: 8px;
font-size: 15px;
}
} }
.strRightTop { }
position: relative; }
.tableBox { .strRightBottom {
position: absolute; h3 {
width: calc(100% - 16px); margin-bottom: 8px;
.el-table .cell { font-size: 15px;
white-space: normal; }
word-break: break-all; .suggest {
} .attention {
.el-table th.el-table__cell > .cell { font-size: 14px;
min-width: 58px; margin-bottom: 8px;
padding-left: 0px; span {
padding-right: 0px; font-size: 16px;
} color: @color-red;
} }
} }
.strRightBottom { .info {
h3 { display: flex;
margin-bottom: 8px; flex-direction: column;
font-size: 15px; font-size: 14px;
} line-height: 22px;
.suggest {
.attention {
font-size: 14px;
margin-bottom: 8px;
span {
font-size: 16px;
color: @color-red;
}
}
.info {
display: flex;
flex-direction: column;
font-size: 14px;
line-height: 22px;
}
}
h4 {
margin-top: 8px;
margin-bottom: 8px;
}
} }
}
h4 {
margin-top: 8px;
margin-bottom: 8px;
}
}
}
.stritl_center {
flex: 1;
margin: 10px;
display: flex;
flex-direction: column;
.strCenterTop {
flex: 1;
box-sizing: content-box;
box-shadow: @box-shadow-basic;
border: 1px solid @border-color-base;
background-color: @color-white;
border-radius: 4px;
//padding: 8px;
} }
.stritl_center { .strCenterbottom {
flex: 1; margin-top: 24px;
margin: 10px; height: 210px;
display: flex; //border: 1px solid #000;
flex-direction: column; box-sizing: content-box;
.strCenterTop { display: flex;
flex: 1; justify-content: space-between;
box-sizing: content-box; .bottomL,
box-shadow:@box-shadow-basic; .bottomM,
border: 1px solid @border-color-base; .bottomR {
background-color: @color-white; border: 1px solid #000;
border-radius: 4px; box-sizing: content-box;
//padding: 8px; width: 30%;
box-shadow: @box-shadow-basic;
border: 1px solid @border-color-base;
background-color: @color-white;
border-radius: 4px;
padding: 8px;
h3 {
margin-bottom: 8px;
font-size: 15px;
} }
.strCenterbottom { }
margin-top: 24px; .bottomM {
height: 210px; .infoBox {
//border: 1px solid #000; display: flex;
box-sizing: content-box; flex-wrap: wrap;
justify-content: space-around;
p {
width: 40%;
height: 68px;
background: #fcc;
text-align: center;
margin: 6px;
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
.bottomL, justify-content: space-around;
.bottomM, span {
.bottomR { color: #333;
border: 1px solid #000; font-size: 14px;
box-sizing: content-box; &:last-child {
width: 30%; font-size: 20px;
box-shadow:@box-shadow-basic; margin-top: 5px;
border: 1px solid @border-color-base; font-weight: bold;
background-color: @color-white; }
border-radius: 4px; }
padding: 8px; &:first-child {
h3 { background: url("../../assets/img/border-blue.png");
margin-bottom: 8px; }
font-size: 15px; &:nth-child(2) {
} background: url("../../assets/img/border-green.png");
}
&:nth-child(3) {
background: url("../../assets/img/border-yellow.png");
} }
.bottomM { &:nth-child(4) {
.infoBox { background: url("../../assets/img/border-gray.png");
display: flex;
flex-wrap: wrap;
justify-content: space-around;
p {
width: 40%;
height: 68px;
background: #fcc;
text-align: center;
margin: 6px;
display: flex;
flex-direction: column;
justify-content: space-around;
span {
color: #333;
font-size: 14px;
&:last-child {
font-size: 20px;
margin-top: 5px;
font-weight: bold;
}
}
&:first-child {
background: url('../../assets/img/border-blue.png');
}
&:nth-child(2) {
background: url('../../assets/img/border-green.png');
}
&:nth-child(3) {
background: url('../../assets/img/border-yellow.png');
}
&:nth-child(4) {
background: url('../../assets/img/border-gray.png');
}
}
}
} }
}
} }
}
} }
}
} }
</style> </style>

Loading…
Cancel
Save