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

master
fanluyan 2 years ago
parent f7c5550bb1
commit 915a926816

13
package-lock.json generated

@ -30,6 +30,7 @@
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"js-md5": "^0.7.3",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"style-resources-loader": "^1.5.0",
@ -6767,6 +6768,12 @@
"@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": {
"version": "1.0.7",
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@ -16610,6 +16617,12 @@
"@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": {
"version": "1.0.7",
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",

@ -30,6 +30,7 @@
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"js-md5": "^0.7.3",
"less": "^4.1.3",
"less-loader": "^11.1.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>
<div class="header-right">
<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
v-for="item in options"
v-for="item in colorList"
:key="item.value"
:label="item.label"
:value="item.value"
@ -62,7 +62,7 @@ export default {
},
data() {
return {
options: [
colorList: [
{
value: "#20a0ff",
label: "蓝色",
@ -80,6 +80,7 @@ export default {
label: "橙色",
},
],
colorValue: "",
theme: {},
//collapse: false,
@ -97,23 +98,32 @@ export default {
//
changeTheme(e) {
console.log(e);
// const app = document.getElementById("app");
// if (this.theme === "") {
// this.color = "#20a0ff";
// app.classList.remove("redStyle", "greenStyle", "orangeStyle");
// app.classList.add("blueStyle");
// } else if (this.theme === "") {
// this.color = "#EE320C";
// app.classList.remove("blueStyle", "greenStyle", "orangeStyle");
// app.classList.add("redStyle");
// } else if (this.theme === "绿") {
// this.color = "#25EE28";
// app.classList.add("greenStyle");
// } else if (this.theme === "") {
// this.color = "#f08200";
// app.classList.remove("blueStyle", "greenStyle", "redStyle");
// app.classList.add("orangeStyle");
// }
this.theme = this.colorList.find(function (i) {
return i.value === e;
}); //change
console.log(this.theme);
updateElementUiTheme({
theme: this.theme.value,
themeName: "--my-theme-name",
});
const app = document.getElementById("app");
console.log(app);
if (this.theme.label === "蓝色") {
this.theme.value = "#20a0ff";
app.classList.add("blueStyle");
app.classList.remove("redStyle", "greenStyle", "orangeStyle");
} else if (this.theme.label === "红色") {
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) {
@ -157,23 +167,9 @@ export default {
},
},
created() {
this.theme = {
value: "#20a0ff",
label: "蓝色",
};
},
mounted() {
this.$watch(
"color",
(value) => {
updateElementUiTheme({
theme: value,
themeName: "--my-theme-name",
});
},
{ immediate: true }
);
this.colorValue = this.colorList[0].label;
},
mounted() {},
};
</script>
<style lang="less">

@ -21,7 +21,11 @@ Vue.use(VueAwesomeSwiper /* { 全局组件的默认选项 } */);
import "./assets/css/reset.css"; //默认样式
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;
@ -35,6 +39,10 @@ new Vue({
router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | 可视化智能管控系统`;
const role = localStorage.getItem("ms_username");
//const token = localStorage.getItem("token");
// if (token === null || token === "") {
// next("/login");
// } else
if (!role && to.path !== "/login") {
next("/login");
} else if (to.meta.permission) {
@ -44,13 +52,5 @@ router.beforeEach((to, from, next) => {
role === "admin" ? next() : next("/403");
} else {
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 VueRouter from 'vue-router'
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)
Vue.use(VueRouter);
const routes = [
{
path: '/',
redirect: '/stritl'
},
{
path: '/',
component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'),
meta: { title: '首页' },
path: "/",
redirect: "/stritl",
},
{
path: "/",
component: () =>
import(/* webpackChunkName: "home" */ "../components/common/Home.vue"),
meta: { title: "首页" },
children: [
{
path: '/stritl',
component: () => import(/* webpackChunkName: "dashboard" */ '../views/stritl/index.vue'),
meta: {
title: '系统首页',
icon: 'el-icon-s-home',
}
},
{
path: '/realTimeMonitor',
component: () => import(/* webpackChunkName: "icon" */ '../views/realTimeMonitor/index.vue'),
meta: {
title: '实时监控',
permission: true,
icon: 'el-icon-camera',
},
},
{
path: '/pictureRotation',
component: () => import(/* webpackChunkName: "table" */ '../views/pictureRotation/index.vue'),
meta: {
title: '图片轮巡',
permission: true,
icon: 'el-icon-film',
}
},
{
path: '/videoMonitor',
component: () => import(/* webpackChunkName: "tabs" */ '../views/videoMonitor/index.vue'),
meta: { title: '监控视频', icon: 'el-icon-video-camera', }
},
{
path: '/videoHistory',
component: () => import(/* webpackChunkName: "tabs" */ '../views/videoMonitor/videoHistory.vue'),
meta: { title: '视频回放', icon: 'el-icon-video-camera' }
},
{
path: '/photoAlarm',
component: () => import(/* webpackChunkName: "tabs" */ '../views/alarmHandling/index.vue'),
meta: { title: '告警处理', icon: 'el-icon-bell', }
},
{
path: '/lineInformation',
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/lineInformation/index.vue'),
meta: { title: '线路信息管理', icon: '', }
},
{
path: '/groupInformation',
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/groupInformation/index.vue'),
meta: { title: '分组信息管理', icon: '', }
},
{
path: '/towerInformation',
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/towerInformation/index.vue'),
meta: { title: '杆塔信息管理', icon: '', }
},
{
path: '/towerTeam',
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/towerTeam/index.vue'),
meta: { title: '杆塔班组用户', icon: '', }
},
{
path: "/stritl",
component: () =>
import(
/* webpackChunkName: "dashboard" */ "../views/stritl/index.vue"
),
meta: {
title: "系统首页",
icon: "el-icon-s-home",
},
},
{
path: "/realTimeMonitor",
component: () =>
import(
/* webpackChunkName: "icon" */ "../views/realTimeMonitor/index.vue"
),
meta: {
title: "实时监控",
permission: true,
icon: "el-icon-camera",
},
},
{
path: "/pictureRotation",
component: () =>
import(
/* webpackChunkName: "table" */ "../views/pictureRotation/index.vue"
),
meta: {
title: "图片轮巡",
permission: true,
icon: "el-icon-film",
},
},
{
path: "/videoMonitor",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/videoMonitor/index.vue"
),
meta: { title: "监控视频", icon: "el-icon-video-camera" },
},
{
path: "/videoHistory",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/videoMonitor/videoHistory.vue"
),
meta: { title: "视频回放", icon: "el-icon-video-camera" },
},
{
path: "/photoAlarm",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/alarmHandling/index.vue"
),
meta: { title: "告警处理", icon: "el-icon-bell" },
},
{
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',
component: () => import(/* webpackChunkName: "permission" */ '../views/Permission.vue'),
meta: { title: '权限测试', permission: true, icon: 'el-icon-setting', }
},
{
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: "/lineInformation",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/management/userEquipment/lineInformation/index.vue"
),
meta: { title: "线路信息管理", icon: "" },
},
{
path: "/groupInformation",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/management/userEquipment/groupInformation/index.vue"
),
meta: { title: "分组信息管理", icon: "" },
},
{
path: "/towerInformation",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/management/userEquipment/towerInformation/index.vue"
),
meta: { title: "杆塔信息管理", icon: "" },
},
{
path: "/towerTeam",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/management/userEquipment/towerTeam/index.vue"
),
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: '/login',
component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'),
meta: { title: '登录' }
},
{
path: '*',
redirect: '/404'
}
]
{
// 权限页面
path: "/permission",
component: () =>
import(
/* webpackChunkName: "permission" */ "../views/Permission.vue"
),
meta: { title: "权限测试", permission: true, icon: "el-icon-setting" },
},
{
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({
mode: 'history',
mode: "history",
base: process.env.BASE_URL,
routes
})
export default router
routes,
});
/**
* 重写 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 Vuex from 'vuex'
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)
Vue.use(Vuex);
export default new Vuex.Store({
state: {
//用户登录token 存储
token: localStorage.getItem("token") ? localStorage.getItem("token") : "",
},
getters: {
},
getters: {},
mutations: {
//修改token 并将token存入localstorage
setToken(state, user) {
state.token = user.token;
localStorage.setItem("token", user.token);
},
},
actions: {
},
modules: {
}
})
actions: {},
modules: {},
});

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

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

@ -34,7 +34,8 @@
</template>
<script>
import { get1, get2 } from "@/utils/api/index";
import { mapMutations } from "vuex";
import { login, get1, get2 } from "@/utils/api/index";
export default {
data: function () {
return {
@ -50,12 +51,37 @@ export default {
},
};
},
computed: {
...mapMutations(["setToken"]),
},
methods: {
submitForm() {
this.$refs.login.validate((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("登录成功");
localStorage.setItem("ms_username", this.param.username);
console.log("加密密码:" + this.$md5(this.param.username));
this.$router.push("/");
} else {
this.$message.error("请输入账号和密码");
@ -64,6 +90,7 @@ export default {
}
});
},
getLogin() {},
},
created() {
get1().then((res) => {

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

@ -1,12 +1,153 @@
<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>
<script>
export default {
data() {
return {};
}
data() {
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>
<style lang="less">
</style>
.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>

@ -1,12 +1,153 @@
<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>
<script>
export default {
data() {
return {};
}
data() {
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>
<style lang="less">
</style>
.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>

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

Loading…
Cancel
Save