Skip to content

N
Nei_Meng_An_Jian_4
Commit 5223d64b authored by 张浩然's avatar 张浩然
Browse files
Options

zhr

parents
Show whitespace changes
Inline Side-by-side
Showing with 9412 additions and 0 deletions
.env 0 → 100644
View file @ 5223d64b
NODE_ENV = 'env'
VUE_APP_BASE_API = 'http://192.168.100.226:8080/env'
outputDir = 'env'
.env.production 0 → 100644
View file @ 5223d64b
NODE_ENV = 'production'
VUE_APP_BASE_API = 'http://192.168.100.226:8080/production'
outputDir = 'production'
.gitignore 0 → 100644
View file @ 5223d64b
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.project 0 → 100644
View file @ 5223d64b
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>an-jian-ping-tai</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
</natures>
<filteredResources>
<filter>
<id>1575858304831</id>
<name></name>
<type>26</type>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-name-matches-false-false-node_modules</arguments>
</matcher>
</filter>
</filteredResources>
</projectDescription>
README.md 0 → 100644
View file @ 5223d64b
# vis
* 说明文档
base -- 综合数据
comm
- CommHeader 头部
-
wkk_environment -- 尾矿库环境监测
wkk_item -- 尾矿库六大项
item_charts -- 六大项可视化
babel.config.js 0 → 100644
View file @ 5223d64b
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
\ No newline at end of file
env.production 0 → 100644
View file @ 5223d64b
ENV = 'production'
VUE_APP_BASE_API = 'www.baidu.com'
\ No newline at end of file
package-lock.json 0 → 100644
View file @ 5223d64b
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 5223d64b
{
"name": "vis",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@liveqing/liveplayer": "^2.1.8",
"animate.css": "^3.7.2",
"axios": "^0.19.0",
"coordtransform": "^2.1.2",
"copy-webpack-plugin": "^4.6.0",
"core-js": "^3.3.2",
"element-ui": "^2.13.0",
"normalize.css": "^8.0.1",
"pikaz-excel-js": "^0.2.15",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-router": "^4.0.0",
"@vue/cli-plugin-vuex": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"babel-polyfill": "^6.26.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"script-loader": "^0.7.2",
"speed-measure-webpack-plugin": "^1.3.3",
"vue-template-compiler": "^2.6.10",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-dashboard": "^3.2.0"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
prettier.config.js 0 → 100644
View file @ 5223d64b
module.exports = {
printWidth: 500, // 行长规则通常设置为100或120
singleQuote: true, // 使用单引号, 默认false
semi: false, // 使用分号, 默认true
arrowParens: "avoid", // 箭头函数参数添加括号
trailingComma: "es5", // 在ES5中有效的结尾逗号（对象，数组等）
useTabs: true, // 在ES5中有效的结尾逗号（对象，数组等）
}
public/index.html 0 → 100644
View file @ 5223d64b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>安全生产风险智能监测系统</title>
<script type="text/javascript" src="./js/liveplayer-lib.min.js"></script>
<!-- 直接复制 放在<head>标签里面 没写会报错 videojs is not defined -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=bfa930cbec820fc1c16f8f54348f98e3&plugin=Map3D,AMap.DistrictSearch,AMap.Geocoder,AMap.MouseTool,AMap.Autocomplete,AMap.PlaceSearch"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
<script src="https://www.thingjs.com/static/historyVersion/thing.min.js"></script>
<script src="https://www.thingjs.com/static/release/thing.widget.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
src/App.vue 0 → 100644
View file @ 5223d64b
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
this.$store.dispatch('typeOptions')
}
}
</script>
<style lang="scss">
* {
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100vh;
overflow: hidden;
}
@font-face {
font-family: "SourceHanSansCN-Medium";
src: url("./assets/iconfont/SourceHanSansCN-Medium.otf");
}
#app {
font-family: "SourceHanSansCN-Medium";
width: 100vw;
height: 100%;
}
</style>
src/a.js 0 → 100644
View file @ 5223d64b
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api/index.js 0 → 100644
View file @ 5223d64b
import request from "@/utils/request";
import request2 from "@/utils/request2";
import request3 from "@/utils/request3";
export const httpImg = 'http://jingkongyun.com:8090/';
export const baseURL = 'http://39.98.150.124:8888/'
// 登录
export function login(data) {
return request({
url: "auth/user/login",
method: "post",
data: data
});
}
// 企业类型
export function dictDetail(data) {
return request2({
url: "api/dictDetail",
method: "get",
params: data
});
}
// 发送短信
export function sendAlarmSms(data) {
return request2({
url: "api/alarmSms/sendAlarmSms",
method: "get",
params: data
});
}
// 企业管理
export function dept(data) {
return request2({
url: "api/dept/allDepts",
method: "get",
params: data
});
}
/* 人员定位 */
export function getRYDWData(data) {
return request2({
url: "api/unityData/getRYDWData",
method: "get",
params: data
});
}
/* */
export function baseDataBigScreenWxy(data) {
return request2({
url: "api/baseDataBigScreen/wxy",
method: "get",
params: data
});
}
/* 应急处置 */
// 应急专家
export function expert(data) {
return request2({
url: "api/baseDataBigScreen/expert",
method: "get",
params: data
});
}
// 应急车辆
export function rescueCar(data) {
return request2({
url: "api/baseDataBigScreen/rescueCar",
method: "get",
params: data
});
}
// 应急避难所
export function refuge(data) {
return request2({
url: "api/baseDataBigScreen/refuge",
method: "get",
params: data
});
}
// 应急救援队伍
export function rescueTeam(data) {
return request2({
url: "api/baseDataBigScreen/rescueTeam",
method: "get",
params: data
});
}
// 应急物资站点
export function suppliesReserveStation(data) {
return request2({
url: "api/baseDataBigScreen/suppliesReserveStation",
method: "get",
params: data
});
}
// 应急物资装备
export function suppliesReserve(data) {
return request2({
url: "api/baseDataBigScreen/suppliesReserve",
method: "get",
params: data
});
}
// 应急预警
export function emergencyWarning(data) {
return request2({
url: "api/baseDataBigScreen/emergencyWarning",
method: "get",
params: data
});
}
// 应急事件专项预案
export function emergencyPlan(data) {
return request2({
url: "api/baseDataBigScreen/emergencyPlan",
method: "get",
params: data
});
}
// 值班人员
export function roster(data) {
return request2({
url: "api/baseDataBigScreen/roster",
method: "get",
params: data
});
}
// 环境监测
export function environment(data) {
return request2({
url: "api/baseDataBigScreen/env",
method: "get",
params: data
});
}
// 尾矿库报警
export function wkkAlarmMsg(data) {
return request2({
url: "api/baseDataBigScreen/wkkAlarmMsg",
method: "get",
params: data
});
}
// 天气
export function weather(data) {
return request({
url: "weather",
method: "get",
params: data
});
}
// 基础数据
export function company_num_with_area(data) {
return request({
url: "company_num_with_area",
method: "get",
params: data
});
}
// 地区信息-风险监测-告警数据查询
export function all_alarm_info(data) {
return request({
url: "all_alarm_info",
method: "get",
params: data
});
}
// 企业今年事故统计
export function company_alarm_year(data) {
return request({
url: "company_alarm_year",
method: "get",
params: data
});
}
// 尾矿库基础数据
export function base_info(data) {
return request({
url: "base_info",
method: "get",
params: data
});
}
// 降雨量汇总值查询(天粒度)
export function rainfall_sum(data) {
return request({
url: "rainfall_sum",
method: "post",
data: data
});
}
// 尾矿库六项指标数据查询
export function wkk(data) {
return request({
url: "wkk",
method: "post",
data: data
});
}
// 尾矿库六项指标警戒值查询
export function alarm_line(data) {
return request({
url: "alarm_line",
method: "post",
data: data
});
}
// 视频监控地址查询
export function video_surveillance(data) {
return request({
url: "video_surveillance",
method: "get",
params: data
});
}
// 企业/矿山告警解除查询
export function cancel_alarm(data) {
return request({
url: "cancel_alarm",
method: "get",
params: data
});
}
//
export function gantan_info(data) {
return request({
url: "gantan_info",
method: "post",
data: data
});
}
/* 视频 */
export function grouptree(data) {
return request3({
url: "api/v1/device/grouptree",
method: "get",
params: data
});
}
// api/v1/stream/start
export function start(data) {
return request3({
url: "api/v1/stream/start",
method: "get",
params: data
});
}
\ No newline at end of file
src/assets/scss/el_table.scss 0 → 100644
View file @ 5223d64b
.el-table {
background: transparent;
padding: 0 .8vw;
}
.el-table .cell {
background-color: #003046;
}
.el-table th>.cell {
background-color: transparent;
}
.el-table td,
.el-table th,
.el-table th,
.el-table tr {
background: transparent !important;
color: #02D9FD;
font-size: .7vw;
}
.el-table td{
border: none !important;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: transparent;
}
src/assets/scss/var.scss 0 → 100644
View file @ 5223d64b
$theme_font_size: .8vw; // 主题字体
$color: #02DEFA !important;
// 循环遍历
$arrColor: #00d3d3,
#ab4fd3,
#e5b007,
#7692ef,
#00b06d,
#0d6fe9,
#FFC0CB,
#DB7093;
@mixin list {
@each $index in $arrColor {
$i: index($arrColor, $index);
&:nth-child(#{$i}) {
color: nth($arrColor, $i)
}
}
}
// 滚动条
@mixin scrollbar {
cursor: pointer;
&::-webkit-scrollbar {
width: .3vw;
height: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #02DEFA;
margin-right: 10px;
&:hover {
background-color: #02DEFA;
}
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
margin-right: 10px;
}
}
// 标题
@mixin title {
display: flex;
align-items: center;
color: #fff;
padding-top: 15px;
height: 2.5vw;
font-size: 1vw;
font-weight: 700;
color: $color;
}
// 块
@mixin _black {
height: 32.5%;
padding-left: 15px;
padding-right: 15px;
background-size: 100% 100%;
background-image: url('~@/assets/images/bg.png');
.charts-div {
position: relative;
width: 100%;
height: calc(100% - 2.5vw);
}
}
// 布局
@mixin layout_flex {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
\ No newline at end of file
src/assets/three/Build/UnityLoader.js 0 → 100644
View file @ 5223d64b
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/three/Build/lvsekuangshan.json 0 → 100644
View file @ 5223d64b
{
"companyName": "DefaultCompany",
"productName": "曲寨",
"dataUrl": "lvsekuangshan.data.unityweb",
"asmCodeUrl": "lvsekuangshan.asm.code.unityweb",
"asmMemoryUrl": "lvsekuangshan.asm.memory.unityweb",
"asmFrameworkUrl": "lvsekuangshan.asm.framework.unityweb",
"TOTAL_MEMORY": 268435456,
"graphicsAPI": ["WebGL 2.0", "WebGL 1.0"],
"webglContextAttributes": {"preserveDrawingBuffer": false},
"splashScreenStyle": "Dark",
"backgroundColor": "#231F20"
}
\ No newline at end of file
src/assets/three/TemplateData/UnityProgress.js 0 → 100644
View file @ 5223d64b
function UnityProgress(gameInstance, progress) {
if (!gameInstance.Module)
return;
if (!gameInstance.logo) {
gameInstance.logo = document.createElement("div");
gameInstance.logo.className = "logo " + gameInstance.Module.splashScreenStyle;
gameInstance.container.appendChild(gameInstance.logo);
}
if (!gameInstance.progress) {
gameInstance.progress = document.createElement("div");
gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;
gameInstance.progress.empty = document.createElement("div");
gameInstance.progress.empty.className = "empty";
gameInstance.progress.appendChild(gameInstance.progress.empty);
gameInstance.progress.full = document.createElement("div");
gameInstance.progress.full.className = "full";
gameInstance.progress.appendChild(gameInstance.progress.full);
gameInstance.container.appendChild(gameInstance.progress);
}
gameInstance.progress.full.style.width = (100 * progress) + "%";
gameInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
if (progress == 1)
gameInstance.logo.style.display = gameInstance.progress.style.display = "none";
}
\ No newline at end of file
src/assets/three/TemplateData/style.css 0 → 100644
View file @ 5223d64b
.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
\ No newline at end of file
src/assets/three/config.xml 0 → 100644
View file @ 5223d64b
<xml>
<InterLink ip="39.100.244.8:8022" port="5432" data="td" username="td" pwd="123" type="web">
</InterLink>
<GNSS>
<machine id="1" name="DB-01" position="759,34.7,390.2" rotation="-90,0,0"/>
<machine id="2" name="DB-02" position="951.2,-3.99,1073" rotation="-90,0,0"/>
<machine id="3" name="DB-03" position="1256.2,-1.9,1203.6" rotation="-90,0,0"/>
</GNSS>
<environment>
<machine id="1" name="YSY6105717" position="1237.2,-1.71,1185" rotation="-90,0,0"/>
<machine id="2" name="YSY6105794" position="927.16,-4.3,1101.2" rotation="-90,0,0"/>
<machine id="3" name="YSY6105795" position="766.37,33.44,342.26" rotation="-90,0,0"/>
</environment>
</xml>
\ No newline at end of file
src/assets/three/index.html 0 → 100644
View file @ 5223d64b
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | 曲寨</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/lvsekuangshan.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">曲寨</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
src/components/Echarts/LineChart.vue 0 → 100644
View file @ 5223d64b
<template>
<div :class="className" :dataChart="dataChart"></div>
</template>
<script>
import { timeParse, randNum } from "@/utils"
export default {
props: {
className: {
type: String,
default: 'charts_div'
},
dataChart: {
type: Object,
default() {
return {
color: '#27b4c2',
unit: 'mm(毫米)'
}
}
}
},
data() {
return {
char: null
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
const myChart = echarts.init(this.$el)
const count = 20
const sum = 24 * 60 * 60 * 1000
const current = Date.parse(new Date())
const axisLine = {
lineStyle: {
color: this.dataChart.color
}
}
let dataX = []
for (let i = 0; i < count; i++) {
dataX.push(timeParse(current - (sum * i)))
}
myChart.setOption({
tooltip: {
trigger: 'axis',
},
grid: {
left: '5%',
right: '5%',
top: '10%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine,
axisLabel: {
formatter: function (params) {
let e = params.split(" ")
return `${e[0]} \n ${e[1]}`
}
},
data: dataX,
},
yAxis: {
name: this.dataChart.unit,
type: 'value',
axisLine,
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: this.dataChart.color
}
}
},
series: [
{
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: this.dataChart.color,
lineStyle: {
color: this.dataChart.color,
width: 1
},
}
},
data: randNum(10, 15, count),
}
]
})
}
}
}
</script>
\ No newline at end of file
src/components/base/BaseHint.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="base_hint animated">
<div class="base_top">
<span>实时报警</span>
<div class="select_btn">
<span @click="selectBtn(index)" v-for="(item, index) in dataSelect" :key="index" :class="{'active' : item.is}">{{ item.name }}</span>
</div>
</div>
<div class="base_bottom">
<el-table :data="dataList" height="29vh" style="width: 100%">
<el-table-column prop="company" label="企业名称" width="120"></el-table-column>
<el-table-column prop="level" label="预警级别" width="100"> </el-table-column>
<el-table-column prop="msg" label="预警信息"> </el-table-column>
<el-table-column prop="alarmTime" label="预警时间"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<span class="one" @click="onAlert(scope.row.company)">查看</span>
<span class="two" @click="onClickBtn(scope.row.alarmTime, scope.row.company, scope.row.msg, scope.row.level + '级')">发送预警</span>
</template>
</el-table-column>
</el-table>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<!-- <div class="bottom_line" v-for="(item, index) in dataList" :key="index">
<div class="bottom_line_top">
<span class="stylediv"></span>
<span class="style_text">{{ item.alarmTime }}</span>
</div>
<div class="bottom_line_bottom">
<span class="stylediv" style="visibility: hidden"></span>
<span>{{ item.company }}发生 <span>{{ item.level }}级报警</span>,请及时
<a href="javascript:void(0)" @click="onClickLook(6, 'yj', item.company)">查看</a>
&nbsp; &nbsp;
<a href="javascript:void(0)" style="color: #e6a23c" @click="onClickBtn(item.alarmTime, item.company, item.msg, item.level + '级')">发送预警</a>
</span>
</div>
</div> -->
</div>
</div>
</template>
<script>
import eventBus from "@/utils/eventbus";
import { randNum, timeParse } from "@/utils";
import { sendAlarmSms, wkkAlarmMsg, roster } from "@/api";
export default {
data() {
return {
dataList: [],
dataSelect: [
{
name: '24小时',
is: false,
},
{
name: '7日内',
is: false,
},
{
name: '一月内',
is: true,
},
],
dialogVisible: false,
};
},
mounted() {
let dateCur = Date.parse(new Date()) //当前时间
let start = timeParse(dateCur - (30 * 24 * 60 * 60 * 1000)) // 24小时
this.onwkkAlarmMsg(start)
},
methods: {
onAlert(name) {
roster({
name,
}).then(res => {
this.$confirm(res[0].tel, '值班人员联系方式', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info ',
center: true
}).then(() => {
}).catch(() => {
});
})
},
onwkkAlarmMsg(start) {
wkkAlarmMsg({
page: 0,
size: 1000,
sort: 'id,desc',
start,
end: timeParse(),
}).then(res => {
this.dataList = res.content.map(item => {
// 操作时间
let index1 = item.alarmTime.indexOf("T");
let str1 = item.alarmTime.substr(0, index1);
let str2 = " " + item.alarmTime.slice(index1 + 1, -3);
item.alarmTime = str1.concat(str2);
return item
})
})
},
onClickLook(index, params, name) {
const para = {
index,
activeName: params,
dataObj: {
name,
},
};
eventBus.$emit("dialog_show", para);
},
onClickBtn(time, name, text, level) {
const obj = {
time,
wkkName: name,
msg: text,
l: level,
};
sendAlarmSms(obj).then((res) => {
this.$message({
message: `成功向${name}负责人发送短信`,
type: "success",
});
});
},
// 切换选择项
selectBtn(index) {
for (let i of this.dataSelect) {
i.is = false
}
this.dataSelect[index].is = true
let dateCur = Date.parse(new Date()) //当前时间
if (this.dataSelect[index].name == '24小时') {
let start = timeParse(dateCur - (24 * 60 * 60 * 1000)) // 24小时
this.onwkkAlarmMsg(start)
}
if (this.dataSelect[index].name == '7日内') {
let start = timeParse(dateCur - (7 * 24 * 60 * 60 * 1000)) // 7日内
this.onwkkAlarmMsg(start)
}
if (this.dataSelect[index].name == '一月内') {
let start = timeParse(dateCur - (30 * 24 * 60 * 60 * 1000)) // 一月内
this.onwkkAlarmMsg(start)
}
},
},
};
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
$color: #00e0ff;
.base_hint {
padding-top: 1vh;
position: fixed;
top: 4vw;
z-index: 99;
right: 12.5%;
width: 40vw;
color: $color;
height: 37vh;
background-image: url('~@/assets/images/hint.png');
background-size: 100% 100%;
background-repeat: no-repeat;
.one {
color: #1b77b5;
}
.two {
margin-left: 10px;
color: RGBA(184, 67, 123, 1);
}
.base_top {
position: relative;
padding: 0 0.5vw;
display: flex;
align-items: center;
font-size: 2vh;
justify-content: space-between;
height: 10%;
padding-left: 1vw;
padding-bottom: 1vh;
.select_btn {
display: flex;
position: absolute;
top: 1.6vh;
right: 2vw;
font-size: 1vh;
span {
margin: 0 5px;
padding: 3px 15px;
border: 1px solid #02d9fd;
border-radius: 2px;
cursor: pointer;
}
.active {
background-color: #02d9fd4d;
}
}
}
.base_bottom {
font-size: 0.7vw;
overflow-y: auto;
@include scrollbar;
.bottom_line {
padding-bottom: 0.8vh;
.bottom_line_top {
padding-bottom: 0.5vh;
}
.stylediv {
display: inline-block;
width: 0.4vw;
height: 0.4vw;
margin-right: 0.5vw;
border-radius: 50%;
background: $color;
}
a {
color: $color;
}
}
}
.btn {
margin-top: 1vh;
}
.el-table--scrollable-y,
.el-table--scrollable-x,
.el-table__body-wrapper {
@include scrollbar;
}
.el-table {
background: transparent;
padding: 0 0.8vw;
}
.el-table .cell {
background-color: #003046;
}
.el-table th > .cell {
background-color: transparent;
}
.el-table td,
.el-table th,
.el-table th,
.el-table tr {
background: transparent !important;
color: #02d9fd;
font-size: 0.7vw;
}
.el-table td {
border: none !important;
background: #003046 !important;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: transparent;
}
.el-table__body-wrapper {
overflow-y: auto;
}
}
</style>
\ No newline at end of file
src/components/base/BaseLeft.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="base-left">
<div class="base_left_box">
<img src="@/assets/images/error.png" @click="onClickDel">
<div class="base_left_box_line">
<div class="title">基础信息</div>
<el-row class="text">
<el-col :span="8">名称</el-col>
<el-col class="text_right" :span="16">{{dataObj.name}}</el-col>
</el-row>
<el-row class="text">
<el-col :span="8">地理位置</el-col>
<el-col class="text_right" :span="16">{{ dataObj.address}}</el-col>
</el-row>
</div>
<div class="base_left_box_line">
<div class="title">监测类型</div>
<el-row class="text">
<el-col :span="12">环境监测</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLookEnv">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">人员定位</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(0, 'rydw')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">降雨量</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(1, 'jyl')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">浸润线</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(2, 'jrx')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">库水位</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(3, 'ksw')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">干滩</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(4, 'gt')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">表面位移</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(5, 'bmwy')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">预警值</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(7, 'yjz')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">报警记录</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(6, 'yj')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">三维</el-col>
<el-col class="text_look" :span="12"><span @click="onClickthree">查看</span></el-col>
</el-row>
</div>
<div class="base_left_box_line">
<div class="title">视频监控 <span class="position_look" @click="onClickVideo">更多</span> </div>
<div class="palyer2" v-loading="loading">
<LivePlayer v-if="isVideoUrl" ref="player2" :videoUrl="videoUrl" live />
<LivePlayer v-else ref="player2" live />
</div>
</div>
</div>
</div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
import eventBus from "@/utils/eventbus"
import { randNum } from "@/utils"
import { grouptree, start } from '@/api'
import mixin_index from '@/mixins'
export default {
mixins: [mixin_index],
data() {
return {
dataObj: '',
videoUrl: '',
isVideoUrl: false,
parentSerial: '',
list: [],
loading: true,
}
},
components: {
LivePlayer,
},
mounted() {
this.$once('hook:beforeDestroy', () => {
eventBus.$off("dialog_show", null)
eventBus.$off("dialog_show_video", null)
})
},
methods: {
onGrouptree(name) {
grouptree().then(res => {
const serial = res[0].serial
this.loading = true
grouptree({
serial,
}).then(res => {
for (let item of res) {
if (item.name == name) {
var code = item.code
}
}
this.isVideoUrl = false
this.list = []
if (!code) {
this.loading = false
return
}
grouptree(
{
serial,
pcode: code
}
).then(res => {
this.parentSerial = res[0].serial
this.list = res
start(
{
serial: this.parentSerial,
code: res[0].code,
}
).then(res => {
setTimeout(() => {
this.loading = false
}, 1000)
this.videoUrl = res.WS_FLV
this.isVideoUrl = true
})
})
})
})
},
// 查看
onTextLook(index, params) {
const para = {
index,
activeName: params,
dataObj: this.dataObj
}
eventBus.$emit("dialog_show", para);
},
// 查看环境监测
onTextLookEnv() {
this.$store.commit('set_is_show_huan_jing_jian_ce_table', randNum(12, 100, 1))
},
// 查看视频
onClickVideo() {
const e = {
parentSerial: this.parentSerial,
list: this.list,
}
eventBus.$emit("dialog_show_video", e);
}
},
computed: {
compony_info() {
return this.$store.state.compony_info;
},
},
watch: {
compony_info(e) {
this.onGrouptree(e.name)
this.dataObj = e;
}
}
}
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
.base-left {
color: #fff;
.base_left_box {
padding: 2vh;
padding-top: 4vh;
height: 80vh;
background-image: url('~@/assets/images/kuang.png');
background-size: 100% 100%;
img {
width: 0.8vw;
position: absolute;
right: 1vw;
top: 1.2vw;
cursor: pointer;
}
.base_left_box_line {
line-height: 1.5;
margin-top: 1vh;
.title {
position: relative;
color: #02fcfe;
font-size: 1vw;
.position_look {
position: absolute;
right: 0;
color: #10a1f2;
font-size: 0.8vw;
cursor: pointer;
}
}
.text {
margin: 0.5vh 0;
}
.text_right {
text-align: right;
}
.text_look {
text-align: right;
color: #10a1f2;
cursor: pointer;
}
.palyer2 {
height: auto;
margin-top: 0.5vh
}
}
}
}
</style>
\ No newline at end of file
src/components/base/BaseRight.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="base-right">
<img @click="onRightImg" class="img_position" src="@/assets/images/right.png" alt="">
<div class="base_border_box">
<div class="title">{{title}}</div>
<div class="page_btn">
<div @click="onClickBtn(index, item.obj)" :class="{ 'activeClass' : item.is }" class="btn" v-for="(item, index) in listText" :key="index">{{ item.name }}</div>
</div>
</div>
<div class="tian_qi">
<div class="tian_qi_title">实时气象数据</div>
<div class="tian_qi_body">
<span style="font-size: 2vw"> <img src="@/assets/images/tian_qi2.png" alt=""> {{ tian_qi_data.tem }}°C</span>
<span>{{ tian_qi_data.tem1 }}°C / {{ tian_qi_data.tem2 }}°C</span>
<span>空气{{ tian_qi_data.air_level }}</span>
<span>{{ tian_qi_data.wea }}</span>
<span>{{ tian_qi_data.win + tian_qi_data.win_speed }}</span>
</div>
</div>
</div>
</template>
<script>
import { randNum } from "@/utils";
import { dept } from '@/api'
export default {
data() {
return {
listText: [],
listAll: [],
isRightFalse: true,
tian_qi_data: {},
}
},
mounted() {
this.axios.get('https://tianqiapi.com/api', {
params: {
version: 'v6',
appsecret: 'Ml0dXby6',
appid: '31268663',
}
})
.then(res => {
this.tian_qi_data = res.data
})
this.dept();
this.$store.commit("SET_IS_Right", true);
},
methods: {
dept() {
dept().then(res => {
this.listText = []
this.listAll = res;
res.map(item => {
if (item.name == '东乌珠穆沁旗应急管理局') {
return;
}
if (item.type == 9) {
this.listText.push({
name: item.name,
is: false,
type: item.type,
obj: item
})
}
})
})
},
onRightImg() {
this.isRightFalse = !this.isRightFalse
this.$store.commit("SET_IS_Right", this.isRightFalse);
},
// 传递数据
onClickBtn(index, obj) {
for (let i of this.listText) {
i.is = false
}
obj.typeName = this.title
this.listText[index].is = true
const objItem = {
itemIndex: this.$store.state.BaseLeftIndex,
randNum: randNum(1, 10000, 1)
}
this.$store.commit("SET_IS_LEFT", objItem);
this.$store.commit("set_compony_info", obj);
}
},
computed: {
title() {
return this.$store.state.title
}
},
watch: {
title(e) {
let select_item = this.$store.state.select_item;
this.listText = []
for (let name of select_item) {
if (name.value == e) {
this.listAll.map(item => {
if (item.name == '东乌珠穆沁旗应急管理局') {
return;
}
if (item.type == name.id) {
this.listText.push({
name: item.name,
is: false,
type: item.type,
obj: item
})
}
})
return
}
}
for (let i of this.listText) {
i.is = false
}
}
}
}
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
.base-right {
.base_border_box {
background-image: url('~@/assets/images/bg.png');
background-size: 100% 100%;
padding-bottom: 2vh;
.title,
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 5vh;
margin-top: 2vh;
background: #021240;
cursor: pointer;
}
.title {
background: transparent;
color: #02fcfe;
padding-top: 1vw;
font-size: 1vw;
margin-top: 0;
}
.page_btn {
padding: 0 1vw;
color: #efb312;
font-size: 0.8vw;
height: 57vh;
overflow-y: auto;
@include scrollbar;
}
.activeClass {
border: 1px solid #efb312;
}
}
.img_position {
position: absolute;
top: 50%;
left: -2vw;
cursor: pointer;
transform: translateY(-50%);
z-index: 999;
}
.tian_qi {
width: 100%;
height: 25vh;
position: fixed;
bottom: 0;
z-index: 99;
color: #02defa;
background-image: url('~@/assets/images/tian_qi.png');
background-size: 100% 100%;
.tian_qi_title {
height: 5vh;
padding: 0.3vw;
font-size: 1vw;
display: flex;
align-items: center;
}
.tian_qi_body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
span {
line-height: 1.7;
}
}
}
}
</style>
\ No newline at end of file
src/components/comm/CommHeader.vue 0 → 100644
View file @ 5223d64b
<template>
<header>
<div class="flex-btn">
<div class="base-btn">
<div class="base-btn-part">
<span :class="{'span_active' : lineActive == 1}" @click="onActive(1)">综合数据</span>
<span :class="{'span_active' : lineActive == 2}" @click="onActive(2)">风险监测</span>
<span :class="{'span_active' : lineActive == 3}" @click="onActive(3)">隐患排查</span>
<!-- <span :class="{'span_active' : lineActive == 4}" @click="onActive(4)">应急处置</span> -->
</div>
<div class="base-btn-part">
<el-select v-model="value" placeholder="请选择" @change="ChangeSelect">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<span @click="onClickActive(4)">管理系统</span>
</div>
</div>
</div>
</header>
</template>
<script>
import eventBus from "@/utils/eventbus"
import { randNum } from "@/utils"
export default {
data() {
return {
lineActive: 1,
options: [
{
value: '1',
label: '非煤矿山'
},
{
value: '2',
label: '煤矿'
},
{
value: '3',
label: '危险化学品企业'
},
{
value: '4',
label: '冶金工贸'
},
],
value: '1'
};
},
mounted() {
this.onClickActive(1, '非煤矿山')
},
methods: {
onClickActive(index, title) {
if (index === 4) {
window.open('http://dwq.jingkongyun.com/')
return;
}
this.$store.commit("SET_IS_LEFT", false);
this.$store.commit("SET_TITLE", title);
},
onActive(index) {
this.lineActive = index
this.$store.commit("set_BaseLeftIndex", index);
const objItem = {
itemIndex: index,
randNum: randNum(1, 10000, 1)
}
this.$store.commit("SET_IS_LEFT", objItem);
},
// 选择类型
ChangeSelect(e) {
for (let i of this.options) {
if (i.value == e) {
this.onClickActive(i.value, i.label)
return
}
}
},
},
};
</script>
\ No newline at end of file
src/components/comm/CommVideo.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="base_dialog_video">
<el-dialog :visible.sync="dialogTableVisible" width="70%" top="5vh">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="单屏" name="1"></el-tab-pane>
<el-tab-pane label="四分屏" name="2"> </el-tab-pane>
<el-tab-pane label="九分屏" name="3"></el-tab-pane>
<el-tab-pane label="十六分屏" name="4"></el-tab-pane>
</el-tabs>
<div v-loading="loading">
<div v-if="isVideo">
<div class="player_div" v-if="isIndex == 1">
<LivePlayer class="player" v-for="(item, index) in dataListOne" :key="index" :videoUrl="item" ref="player2" live />
</div>
<div class="player_div" v-if="isIndex == 2">
<LivePlayer class="player2" v-for="(item, index) in dataListTwo" :key="index" :videoUrl="item" ref="player2" live />
</div>
<div class="player_div" v-if="isIndex == 3">
<LivePlayer class="player3" v-for="(item, index) in dataListThree" :key="index" :videoUrl="item" ref="player2" live />
</div>
<div class="player_div" v-if="isIndex == 4">
<LivePlayer class="player4" v-for="(item, index) in dataListFour" :key="index" :videoUrl="item" ref="player2" live />
</div>
</div>
<div v-if="!isVideo" style="height: 80vh">
<div class="player_div" v-if="isIndex == 1">
<LivePlayer class="player" v-for="(item, index) in dataListOne" :key="index" ref="player2" live />
</div>
<div class="player_div" v-if="isIndex == 2">
<LivePlayer class="player2" v-for="(item, index) in dataListTwo" :key="index" ref="player2" live />
</div>
<div class="player_div" v-if="isIndex == 3">
<LivePlayer class="player3" v-for="(item, index) in dataListThree" :key="index" ref="player2" live />
</div>
<div class="player_div" v-if="isIndex == 4">
<LivePlayer class="player4" v-for="(item, index) in dataListFour" :key="index" ref="player2" live />
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import eventBus from "@/utils/eventbus"
import LivePlayer from '@liveqing/liveplayer'
import { grouptree, start } from '@/api'
export default {
components: {
LivePlayer,
},
data() {
return {
dialogTableVisible: false,
activeName: '1',
isVideo: false,
dataList: [],
dataListOne: [],
dataListTwo: [],
dataListThree: [],
dataListFour: [],
isIndex: 1,
loading: true,
}
},
mounted() {
eventBus.$on("dialog_show_video", data => {
this.dialogTableVisible = true
this.dataList = []
this.isIndex = 1
this.loading = true
this.activeName = '1'
this.isVideo = false
if (data.list.length == 0) {
for (let i = 0; i < 16; i++) {
this.dataList.push(i)
}
this.loading = false
this.dataListOne = this.dataList.slice(0, 1)
return
}
let indexVideo = 0
for (let item of data.list) {
start(
{
serial: data.parentSerial,
code: item.code,
}
).then(res => {
if (res.WS_FLV) {
this.dataList.push(res.WS_FLV)
}
indexVideo++
let dataLen = data.list.length
if (dataLen == indexVideo) {
setTimeout(() => {
let len = this.dataList.length
if (len < 16) {
for (let i = 0; i < 16 - len; i++) {
this.dataList.push('')
}
}
this.loading = false
this.isVideo = true
this.dataListOne = this.dataList.slice(0, 1)
}, 100)
}
})
}
});
},
methods: {
handleClick(e) {
this.isIndex = e.name
if (e.name == 1) {
this.dataListOne = this.dataList.slice(0, 1)
}
if (e.name == 2) {
this.dataListTwo = this.dataList.slice(0, 4)
}
if (e.name == 3) {
this.dataListThree = this.dataList.slice(0, 9)
}
if (e.name == 4) {
this.dataListFour = this.dataList.slice(0, 16)
}
}
}
}
</script>
<style lang="scss">
.base_dialog_video {
.player_div {
height: 76vh;
.player-wrapper {
display: inline-block;
margin-right: 1%;
margin-bottom: 1%;
}
.player {
width: 100%;
}
.player2 {
width: 49%;
}
.player3 {
width: 32%;
}
.player4 {
width: 24%;
}
}
.el-tabs__nav-scroll {
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/components/dxkq/dxkqDialog.vue 0 → 100644
View file @ 5223d64b
<template>
<el-dialog class="dxkq_dialog" :visible.sync="dialogVisible" top="10vh" width="70%" :before-close="handleClose">
<div ref="myCharts" class="charts_div"></div>
</el-dialog>
</template>
<script>
import { timeParse, randNum } from '@/utils'
export default {
data() {
return {
dialogVisible: false,
activeName: 'first',
}
},
mounted() {
},
methods: {
core() {
let dataX = []
let series = []
var legendData = []
var legendSelected = {}
const count = 50
const arr = [
{ name: "PM25", data: randNum(22, 23, count), nickname: "PM2.5", color: "#3A84FF", },
{ name: "PM10", data: randNum(20, 21, count), nickname: "PM10", color: "rgba(255,80,124,1)", },
{ name: "ZS", data: randNum(23, 24, count), nickname: "噪音", color: "rgba(12, 108, 227, 1)", },
{ name: "TMP", data: randNum(1, 1.4, count), nickname: "温度", color: "rgba(234, 242, 16, 1)", },
{ name: "RH", data: randNum(1, 1.2, count), nickname: "湿度", color: "rgba(8, 116, 227, 1)", },
{ name: "PA", data: randNum(97, 98, count), nickname: "气压", color: "rgba(2, 241, 137, 1)", },
{ name: "CY", data: randNum(0, 0.08, count), nickname: "臭氧", color: "rgba(22, 199, 243, 1)", },
{ name: "EYHD", data: randNum(0, 0.03, count), nickname: "二氧化氮", color: "rgba(69, 63, 197, 1)", },
{ name: "EYHL", data: randNum(0, 0.08, count), nickname: "二氧化硫", color: "rgba(220, 19, 56, 1)", },
{ name: "YYHT", data: randNum(0, 0.8, count), nickname: "一氧化碳", color: "rgba(220, 19, 56, 1)", },
{ name: "VOC", data: randNum(0, 1, count), nickname: "挥发性有机化合物(VOC)", color: "rgba(120, 255, 0, 1)", },
]
const sum = 5 * 60 * 1000
const current = Date.parse(new Date())
for (let i = 0; i < count; i++) {
dataX.push(timeParse(current - (sum * i)))
}
for (let i in arr) {
var index = 0;
if (Math.max(...arr[i].data) < 3) {
index = 1;
}
series.push({
name: arr[i].nickname,
type: "line",
smooth: true,
itemStyle: {
normal: {
color: arr[i].color,
},
},
yAxisIndex: index,
data: arr[i].data,
});
legendData.push(arr[i].nickname)
let nickname = arr[i].nickname
if (i < 4) {
legendSelected[nickname] = true
} else {
legendSelected[nickname] = false
}
}
setTimeout(() => {
this.myCharts(dataX, series, legendData, legendSelected)
}, 2000);
this.dialogVisible = true
},
myCharts(dataX, series, legendData, legendSelected) {
let myChart = echarts.init(this.$refs.myCharts)
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
legend: {
data: legendData,
selected: legendSelected,
bottom: "4%",
left: "center",
textStyle: {
color: "#1DD8EF",
},
},
grid: {
top: "6%",
right: "5%",
left: "5%",
bottom: "15%",
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#1DD8EF",
},
},
axisTick: {
alignWithLabel: true,
},
data: dataX,
},
],
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#1DD8EF",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#11366e",
},
},
position: "left",
},
{
type: "value",
axisLine: {
lineStyle: {
color: "#1DD8EF",
},
},
splitLine: {
show: false,
},
position: "right",
},
],
series,
};
myChart.setOption(option, true);
},
handleClose() {
this.dialogVisible = false
}
},
computed: {
isDxkqDialog() {
return this.$store.state.isDxkqDialog
}
},
watch: {
isDxkqDialog(e) {
this.activeName = e.params
this.core()
}
}
}
</script>
<style lang="scss">
.dxkq_dialog {
.charts_div {
margin-top: 2vh;
height: 68vh;
}
.el-dialog, .el-pager li {
background-color: #040624;
}
}
</style>
\ No newline at end of file
src/components/dxkq/dxkqZongHe.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="dxkq-left">
<div class="base_left_box">
<img src="@/assets/images/error.png" @click="onClickDel">
<div class="base_left_box_line">
<div class="title">基础信息</div>
<el-row class="text">
<el-col :span="8">名称</el-col>
<el-col class="text_right" :span="16">{{dataObj.name}}</el-col>
</el-row>
<el-row class="text">
<el-col :span="8">地理位置</el-col>
<el-col class="text_right" :span="16">{{ dataObj.address}}</el-col>
</el-row>
</div>
<div class="base_left_box_line" style="height: 25vh">
<div class="title">监测类型</div>
<el-row class="text">
<el-col :span="12">PM2.5</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(1, 'first')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">PM10</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(2, 'second')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">噪音</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(3, 'third')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">温度</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(4, 'fourth')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">湿度</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(5, 'fifth')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">气压</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(6, 'sixth')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">臭氧</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(7, 'seventh')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">一氧化碳</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(8, 'eighth')">查看</span></el-col>
</el-row>
</div>
<br>
<div class="base_left_box_line">
<div class="title">视频监控 <span class="position_look" @click="onClickVideo">更多</span> </div>
<div class="palyer2">
<!-- <LivePlayer v-if="isVideoUrl" ref="player2" :videoUrl="videoUrl" live /> -->
<LivePlayer ref="player2" live />
</div>
</div>
</div>
</div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
import eventBus from "@/utils/eventbus"
import { grouptree, start } from '@/api'
export default {
data() {
return {
dataObj: '',
videoUrl: '',
isVideoUrl: false,
parentSerial: '',
list: [],
loading: true,
}
},
components: {
LivePlayer,
},
mounted() {
this.dataObj = this.$store.state.compony_info
},
methods: {
// 关闭页面
onClickDel() {
this.$store.commit("SET_IS_LEFT", false);
},
// 查看
onTextLook(index, params) {
this.$store.commit('set_isDxkqDialog', {
index,
params,
})
},
// 查看视频
onClickVideo() {
const e = {
parentSerial: this.parentSerial,
list: this.list,
}
eventBus.$emit("dialog_show_video", e);
}
},
}
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
.dxkq-left {
color: #fff;
.base_left_box {
padding: 2vh;
padding-top: 4vh;
height: 80vh;
background-image: url('~@/assets/images/kuang.png');
background-size: 100% 100%;
img {
width: 0.8vw;
position: absolute;
right: 1vw;
top: 1.2vw;
cursor: pointer;
}
.base_left_box_line {
line-height: 1.5;
margin-top: 1vw;
.title {
position: relative;
color: #02fcfe;
font-size: 1vw;
.position_look {
position: absolute;
right: 0;
color: #10a1f2;
font-size: 0.8vw;
cursor: pointer;
}
}
.text {
margin: 0.3vw 0;
}
.text_right {
text-align: right;
}
.text_look {
text-align: right;
color: #10a1f2;
cursor: pointer;
}
.palyer2 {
height: auto;
margin-top: 0.5vw;
}
}
}
}
</style>
\ No newline at end of file
src/components/home/HomeMap - 副本.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="home_map">
<div id="div3d"></div>
</div>
</template>
<script>
import { httpImg, dept } from "@/api";
import { randNum } from "@/utils";
import dataJsonA from "@/a.js";
export default {
name: "home-map",
data() {
return {
zoomNumber: 1,
isRouter: "", //判断路由
lonlat: "", // 经纬度
isZoom: 0, // 层级分为4级 1级最小, 4级最大
};
},
mounted() {
this.isRouter = this.$route.name; // 获取url name
const THAT = this;
var app = new THING.App();
app.background = [0, 0, 0];
app.camera.xAngleLimitRange = [45, 90]; // 鼠标可旋转的角度
// 摄像机位置结束变动
app.on(THING.EventType.CameraChangeEnd, function (ev) { })
// THAT.onEarthFlyTo(app, THAT.lonlat, 2, 30);
THING.Utils.dynamicLoad(
// ["https://www.thingjs.com/uearth/history/uearth.min.v1.7.7.1.js"],
["https://www.thingjs.com/uearth/history/uearth.min.v1.7.6.13.js"],
function () {
// 新建一个地图
var map = app.create({
type: "Map",
restrictedLevel: [1, 19],
style: {
night: false //不开启白天黑夜 默认开启
},
attribution: "Google"
});
// 新建一个瓦片图层
var tileLayer = app.create({
type: "TileLayer",
name: "tileLayer1",
// url: "https://mt{0,1,2,3}.google.cn/vt/lyrs=y&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}",
url: 'http://webst0{1,2,3,4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
});
// 将瓦片图层添加到map中
map.addLayer(tileLayer);
addLayer();
function addLayer() {
// 创建一个图层 用来存放多边形（GeoPolygon）
var polygonLayer = app.create({
type: "ThingLayer",
name: "polygonLayer"
});
map.addLayer(polygonLayer); // 将创建的图层添加到 map 中
var geoPolygonBC = app.create({
type: "GeoPolygon",
name: "锡林郭勒盟东乌珠穆沁旗",
coordinates: dataJsonA.features[2].geometry.coordinates,
height: 0,
renderer: {
type: "vector", // 纯色填充
// color: "rgba(8, 116, 227, 1)", // 填充色
opacity: 0.3, // 不透明度
outlineColor: "rgba(7, 247, 247, 1)", // 边框色
outlineWidth: 5 // 边框宽度
}
});
}
setTimeout(() => {
THAT.onEarthFlyTo(app, [117.99451399757393, 45.968614045670165], 1, 200);
}, 1000)
app.camera.position = [2188341.0028113117, 4784723.336439927, 4145181.81429105]
app.camera.target = [2082203.876048005, 4558128.204403516, 3945471.1246912233]
tileLayer.style.template = CMAP.TileLayerStyle.CUSTOMCOLOR;
tileLayer.style.customColor = [144, 162, 235];
// 摄像机位置结束变动
app.on(THING.EventType.CameraChangeEnd, function (ev) {
var distance = Math.ceil(app.camera.distance);
// 选择省
if (distance > 3000 * 1000) {
THAT.zoomNumber = 1;
}
// 选择市
if (distance < 3000 * 1000 && distance > 800 * 1000) {
THAT.zoomNumber = 2;
}
// 选择区
if (distance < 800 * 1000 && distance > 100 * 1000) {
THAT.zoomNumber = 3;
}
// 选择县/镇
if (distance < 100 * 1000 && distance > 0) {
THAT.zoomNumber = 4;
}
});
THAT.$store.commit("SET_APP_MAP", app);
THAT.$store.commit("set_appTileLayer", tileLayer);
// 标记点
THAT.joinSign(app);
// 地图点击
THAT.onMap(app, map);
}
);
},
methods: {
// 标记点
joinSign(app, e) {
const THAT = this;
// 企业管理
dept().then(res => {
let select_item = this.$store.state.select_item;
let arr = [];
res.map(item => {
for (let i of select_item) {
if (item.type == i.id) {
item.typeName = i.label;
}
}
if (item.typeName) {
var url;
if (item.typeName == '非煤矿山') {
url = "/image/fei.png"
}
if (item.typeName == '煤矿') {
url = "/image/mei.png"
}
if (item.typeName == '危险化学品企业') {
url = "/image/hua.png"
}
arr.push({
title: item.name,
position: [item.jd, item.wd],
address: item.address,
url,
label: {
tip: [item.typeName]
},
item,
})
}
})
var arrTest = []
for (let i in arr) {
let geoPoint = app.create({
type: "GeoPoint",
coordinates: arr[i].position,
userData: {
position: arr[i].position,
title: arr[i].title,
label: arr[i].label,
tip: arr[i].label.tip,
address: arr[i].address
},
infoWindow: {
title: arr[i].title,
displayMode: CMAP.DisplayMode.MouseEnter, //点击显示
type: CMAP.InfoWindowType.Standard, //标准indoWindow
style: CMAP.InfoWindowStyle.Default, //默认样式 黑色
pivot: [0.5, 1.3], //界面的轴心，以百分比表示界面轴心位置。[0,0] 代表界面左上；[1,1] 代表界面右下 pivot可大于1用于像素级的偏移
fieldData: [
{
field: "tip",
alias: "类型"
}
]
},
renderer: {
type: "image", // image代表创建图片类型的点
url: arr[i].url, // 图片的url
size: 4 // 尺寸
}
});
arrTest.push({
obj: geoPoint
})
geoPoint.on("click", function (event) {
let ev = event.object.userData;
THAT.lonlat = ev.position;
let title = ev.title;
let tip = ev.label.tip;
if (event.button == 2) {
if (title == '锡林矿业') {
window.open('http://dwqdp.jingkongyun.com/three/?id=5', '_blank');
}
if (title == '融冠矿业') {
window.open('http://dwqdp.jingkongyun.com/three/?id=4', '_blank');
}
if (title == '钨矿') {
window.open('http://dwqdp.jingkongyun.com/three/?id=3', '_blank');
}
if (title == '山金阿尔哈达') {
window.open('http://dwqdp.jingkongyun.com/three/?id=2', '_blank');
}
if (title == '山金白音呼布') {
window.open('http://dwqdp.jingkongyun.com/three/?id=1', '_blank');
}
} else {
for (let i of arr) {
if (i.title == ev.title) {
const objItem = {
itemIndex: THAT.$store.state.BaseLeftIndex,
randNum: randNum(1, 10000, 1)
}
THAT.$store.commit("SET_IS_LEFT", objItem);
THAT.$store.commit("set_compony_info", i.item);
}
}
THAT.isZoom = 1;
THAT.onEarthFlyTo(app, THAT.lonlat, 2, 30);
}
});
}
})
},
// 地图点击
onMap(app, map) {
map.on("click", ev => {
const lonlat = ev.coordinates;
let height;
if (this.zoomNumber == 1) {
height = 1100;
}
if (this.zoomNumber == 2) {
height = 110;
}
if (this.zoomNumber == 3) {
height = 11;
}
if (this.zoomNumber == 4) {
height = 1.1;
}
this.onEarthFlyTo(app, lonlat, 1, height);
});
},
// 自定义层级方法 (定位, 时间, 距离地面高度)
onEarthFlyTo(app, lonlat, time, height) {
app.camera.earthFlyTo({
disablePick: false,
lonlat,
time: time * 1000,
height: height * 1000,
heading: 0,
pitch: 88,
});
},
},
watch: {
$route(to, from) {
this.isRouter = to.name;
},
compony_info(e) {
const app = this.$store.state.appMap;
this.onEarthFlyTo(app, [e.jd, e.wd], 2, 30);
}
},
computed: {
compony_info() {
return this.$store.state.compony_info;
},
},
};
</script>
<style lang="scss">
.home_map {
width: 100%;
height: 100%;
#div3d {
width: 100%;
height: 100%;
}
.slot-radio {
position: absolute;
width: 20vw;
height: 2vw;
border: 1px solid red;
top: 0vw;
right: 25vw;
z-index: 999;
}
}
</style>
\ No newline at end of file
src/components/home/HomeMap.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="home_map">
<div id="container"></div>
<div v-show="isRight" class="lng_lat">{{ mapLngLat }}</div>
<div class="base_func" v-show="isRight">
<div class="base_func--input">
<input id="tipinput" placeholder="请搜索查询" type="text" />
<img src="@/assets/images/func_search.png" alt="" />
</div>
<div class="btn" :class="{ isActiveBtn: isActive == 1 }" @click="onMouseTool('rule', 1)">距离测量</div>
<div class="btn" :class="{ isActiveBtn: isActive == 2 }" @click="onMouseTool('measureArea', 2)">面积测量</div>
<div class="btn" @click="onClose">关闭</div>
</div>
</div>
</template>
<script>
import { dept } from '@/api'
export default {
name: 'home-map',
data() {
return {
mapLngLat: [], // 鼠标滑动出现坐标
markerArr: [], // 点坐标数组
isActive: 1, // 功能键选中
zoom: 0,
polygons: [],
map: '',
}
},
mounted() {
var map = new AMap.Map('container', {
zoom: 12,
layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
})
//输入提示
var autoOptions = {
input: 'tipinput',
}
var auto = new AMap.Autocomplete(autoOptions)
var placeSearch = new AMap.PlaceSearch({
map: map,
}) //构造地点查询类
AMap.event.addListener(auto, 'select', select) //注册监听，当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode)
placeSearch.search(e.poi.name) //关键字查询查询
}
AMap.plugin(['AMap.Scale', 'AMap.OverView'], function() {
map.addControl(new AMap.Scale())
map.addControl(new AMap.OverView({ isOpen: true }))
})
map.on('mousemove', e => {
let lnglat = e.lnglat
this.mapLngLat = [lnglat.lng, lnglat.lat]
})
// 企业管理
dept().then(res => {
let select_item = this.$store.state.select_item
let arr = []
res.map(item => {
for (let i of select_item) {
if (item.type == i.id) {
item.typeName = i.label
}
}
if (item.typeName) {
var url
if (item.typeName == '非煤矿山') {
url = '/image/fei.png'
}
if (item.typeName == '煤矿') {
url = '/image/mei.png'
}
if (item.typeName == '危险化学品企业') {
url = '/image/hua.png'
}
arr.push({
title: item.name,
typeName: item.typeName,
position: [item.jd, item.wd],
address: item.address,
url,
label: {
tip: [item.typeName],
},
item,
})
}
})
this.markerArr = arr
this.onMarker(map)
})
this.$store.commit('SET_APP_MAP', map)
this.init(map)
},
methods: {
init(map) {
const opts = {
subdistrict: 1, // 返回下一级行政区
extensions: 'all', // 返回完整行政区边界坐标点
// level: "province", // 行政区级别 省
showbiz: false, // 是否显示商圈，默认值true
}
// 地图初始化
var district = new AMap.DistrictSearch(opts)
this.onDistrict(map, district, '152525')
},
// 选择区域
onDistrict(map, district, adcode) {
for (var i = 0, l = this.polygons.length; i < l; i++) {
this.polygons[i].setMap(null)
}
const THAT = this
district.search(adcode, function(status, result) {
if (status == 'complete') {
THAT.getData(result.districtList[0], map)
}
})
},
getData(data, map) {
var THAT = this
var bounds = data.boundaries
var arrList = []
for (let i of bounds) {
for (let j of i) {
arrList.push([j.lng, j.lat])
}
}
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
map: map,
bubble: true,
strokeWeight: 5,
strokeDasharray: [10, 20],
strokeColor: 'rgba(7, 247, 247, 1)',
fillColor: 'rgba(7, 247, 247, 1)',
fillOpacity: 0.2,
path: bounds[i],
})
THAT.polygons.push(polygon)
}
map.setFitView() //地图自适应
map.zoomIn()
}
},
onMarker(map) {
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -20),
})
// 信息窗口
function openInfo(e) {
var info = []
info.push("<p class='input-item'>名称 : " + e.target.title + '</p>')
info.push("<p class='input-item'>地址 :" + e.target.address + '</p></div></div>')
infoWindow.setContent(info.join(''))
infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat])
}
// 关闭信息窗口
function openClose() {
infoWindow.close()
}
this.markerArr.map(item => {
if (item.typeName) {
var url
if (item.typeName == '非煤矿山') {
url = '/image/fei.png'
}
if (item.typeName == '煤矿') {
url = '/image/mei.png'
}
if (item.typeName == '危险化学品企业') {
url = '/image/hua.png'
}
var icon = new AMap.Icon({
image: url,
size: new AMap.Size(36, 36),
})
let marker = new AMap.Marker({
icon: icon,
position: item.position,
offset: new AMap.Pixel(-12, -12),
map: map,
title: item.title,
address: item.address,
})
marker.title = item.title
marker.address = item.address
marker.on('click', e => {
const position = [marker.getPosition().lng, marker.getPosition().lat]
openInfo(e)
// map.setCenter(position)
// map.setZoom(14)
})
// marker.on('mouseover', openInfo)
marker.on('mouseout', openClose)
}
})
},
onMouseTool(type, index) {
const map = this.$store.state.appMap
var mouseTool = new AMap.MouseTool(map)
this.isActive = index
switch (type) {
case 'rule': {
mouseTool.rule({
startMarkerOptions: {
//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31), //图标大小
imageSize: new AMap.Size(19, 31),
image: 'https://webapi.amap.com/theme/v1.3/markers/b/start.png',
}),
},
endMarkerOptions: {
//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31), //图标大小
imageSize: new AMap.Size(19, 31),
image: 'https://webapi.amap.com/theme/v1.3/markers/b/end.png',
}),
offset: new AMap.Pixel(-9, -31),
},
midMarkerOptions: {
//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31), //图标大小
imageSize: new AMap.Size(19, 31),
image: 'https://webapi.amap.com/theme/v1.3/markers/b/mid.png',
}),
offset: new AMap.Pixel(-9, -31),
},
lineOptions: {
//可缺省
strokeStyle: 'solid',
strokeColor: '#FF33FF',
strokeOpacity: 1,
strokeWeight: 2,
},
//同 RangingTool 的 自定义 设置，缺省为默认样式
})
break
}
case 'measureArea': {
mouseTool.measureArea({
strokeColor: '#80d8ff',
fillColor: '#80d8ff',
fillOpacity: 0.3,
//同 Polygon 的 Option 设置
})
break
}
}
this.$store.commit('SET_MOUSETOOL', mouseTool)
},
// 关闭距离
onClose() {
const mouseTool = this.$store.state.mouseTool
mouseTool.close(true) //关闭，并清除覆盖物
this.isActive = 0
},
},
watch: {
compony_info(e) {
const map = this.$store.state.appMap
map.setZoom(11)
setTimeout(() => {
map.setCenter([e.jd, e.wd])
map.setZoom(14)
}, 300)
},
},
computed: {
compony_info() {
return this.$store.state.compony_info
},
isRight() {
return this.$store.state.isRight
},
},
}
</script>
<style lang="scss">
.home_map {
width: 100%;
height: 100%;
#container {
width: 100%;
height: 100%;
}
.base_func {
color: #01bffd;
display: flex;
align-items: center;
position: fixed;
top: 8vh;
right: 13vw;
width: 35vw;
height: 4vh;
z-index: 999;
&--input {
position: relative;
width: 30vw;
height: 100%;
background-image: url('~@/assets/images/func_input.png');
background-size: 100% 100%;
border-radius: 5px;
img {
position: absolute;
width: 1vw;
right: 1vw;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
input {
height: 100%;
width: 82%;
padding-left: 1vw;
border: none;
outline: none;
color: #01a7fd;
background-color: transparent;
}
input::-webkit-input-placeholder {
color: #01a7fd;
}
input::-moz-placeholder {
color: #01a7fd;
}
input:-moz-placeholder {
color: #01a7fd;
}
input:-ms-input-placeholder {
color: #01a7fd;
}
}
.btn {
margin-left: 1vw;
display: flex;
align-items: center;
justify-content: center;
width: 27%;
height: 100%;
background-image: url('~@/assets/images/func_btn.png');
background-size: 100% 100%;
cursor: pointer;
}
.isActiveBtn {
background-image: url('~@/assets/images/func_btn_active.png');
background-size: 100% 100%;
color: #fff;
}
}
.content-window-card {
position: relative;
width: 23rem;
padding: 0.75rem 0 0 1.25rem;
box-shadow: none;
bottom: 0;
left: 0;
}
.input-item {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
}
.lng_lat {
position: absolute;
color: #fff;
font-size: 2vh;
z-index: 999;
bottom: 1vh;
right: 13%;
}
.amap-overviewcontrol {
top: 0vh;
left: 20vw;
.amap-overview-main {
left: 0;
top: 0;
}
}
}
</style>
src/components/ltk/ltkDialog.vue 0 → 100644
View file @ 5223d64b
<template>
<el-dialog class="ltk_dialog" :visible.sync="dialogVisible" top="10vh" width="70%" :before-close="handleClose">
<el-tabs v-model="activeName" @tab-click="handleClick">
<!-- <el-tab-pane label="边坡测量" name="first">
<div class="first">
<div class="charts" v-for="(item, index) in firstList" :key="index">
<div ref="myCharts" class="charts-div charts_bg"></div>
<div ref="myCharts2" class="charts-div charts_bg2"></div>
</div>
</div>
</el-tab-pane> -->
<el-tab-pane label="车辆轨迹" name="second" class="second_page">
<div id="container" class="second"></div>
<el-radio-group class="right" v-model="secondRadio" @change="secondChangeGroup">
<el-radio v-for="(item, index) in secondLineObj" :key="index" :label="item.name" border size="medium"></el-radio>
</el-radio-group>
</el-tab-pane>
<el-tab-pane label="人员定位" name="third" class="third_page">
<div id="container_2" class="third"></div>
<div class="right">
<div class="title">人员当前位置</div>
<div class="right_div">
<div class="right_div_line">
<span>徐建成</span>
<span>6风门</span>
</div>
<div class="right_div_line">
<span>李振玉</span>
<span>6风门</span>
</div>
<div class="right_div_line">
<span>张键康</span>
<span>办公室</span>
</div>
<div class="right_div_line">
<span>王勇财</span>
<span>926分层</span>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="车辆信息" name="fourth">
<div class="fourth">
<el-table :data="fourthTable" tooltip-effect="dark" height="90%" style="width: 100%">
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<span class="zai_xian" v-if="scope.row.status">在线</span>
<span class="li_xian" v-if="!scope.row.status">离线</span>
</template>
</el-table-column>
<el-table-column prop="car_number" label="车牌号" align="center"></el-table-column>
<el-table-column prop="car_type" label="车辆类型" align="center"></el-table-column>
<el-table-column prop="terminal_type" label="终端类型" align="center"></el-table-column>
<el-table-column prop="terminal_id" label="终端标识" align="center"></el-table-column>
<!-- <el-table-column prop="type_name" label="品牌" align="center"></el-table-column> -->
<el-table-column prop="gvwr" label="载重" align="center"></el-table-column>
<el-table-column prop="last_online_time" label="最后登录时间" align="center"></el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
activeName: 'first',
dataX: [45, 45],
dataZ: [40, 35],
firstList: [],
secondRadio: '蒙AF6332',
secondLineObj: [], // 车辆轨迹对象
fourthTable: [
{
car_number: "蒙AF6332",
car_type: "运输车",
terminal_type: "BSJM11-2",
terminal_id: "014146496720",
gvwr: 1,
last_online_time: "2020-10-02 20:29:57"
},
{
car_number: "蒙AF6332",
car_type: "运输车",
terminal_type: "BSJM11-4",
terminal_id: "014146434560",
gvwr: 3,
last_online_time: "2020-11-12 20:29:57"
}
],
}
},
methods: {
core() {
this.dialogVisible = true
if (this.activeName == 'first') {
this.firstList = [
{
sensorName: "DB-01",
disX: 0.00061,
disY: 0.00061,
disZ: 0.00122,
},
{
sensorName: "DB-02",
disX: 0.00061,
disY: 0.00061,
disZ: 0.00122,
},
{
sensorName: "DB-03",
disX: 0.00061,
disY: 0.00061,
disZ: 0.00122,
}
]
setTimeout(() => {
for (let i in this.firstList) {
let item = document.getElementsByClassName("charts")[i];
let echartsItem = item.getElementsByClassName("charts-div");
let myChart = echarts.init(echartsItem[0]);
let myChart_2 = echarts.init(echartsItem[1]);
let params = this.firstList[i];
this.myCharts(myChart, params);
this.myCharts2(myChart_2, params);
}
}, 1000);
}
if (this.activeName == 'second') {
this.secondLineObj = [
{
name: '蒙AF6332',
path: [[116.968382, 45.490625], [116.986055, 45.499431], [117.000647, 45.509176], [117.003565, 45.512905], [116.99893, 45.526135]]
},
{
name: '蒙ABB159',
path: [[116.700986, 45.988673], [116.701307, 45.98874], [116.702219, 45.988784], [116.702734, 45.988482], [116.702413, 45.988207], [116.701431, 45.988285]]
},
{
name: '蒙AX9061',
path: [[116.968382, 45.490625], [116.986055, 45.499431], [117.000647, 45.509176], [117.003565, 45.512905], [116.99893, 45.526135]]
},
]
let params = this.secondLineObj[0]
setTimeout(() => {
this.secondMap(params.path)
}, 1000);
}
if (this.activeName == 'third') {
setTimeout(() => {
this.thirdMap()
}, 1000);
}
},
handleClose() {
this.dialogVisible = false
},
handleClick(e) {
this.activeName = e.name
this.core()
},
myCharts(myChart, event) {
const THAT = this;
let option = {
title: {
text: "传感器边坡水平位移" + event.sensorName + "号",
textStyle: {
align: "center",
fontSize: 16
},
top: "3%",
left: "1%"
},
legend: {
data: [
`传感器边坡水平位移${event.sensorName}号(左右${event.disX}) (前后${event.disY})`
],
top: "3%",
right: "2%",
},
tooltip: {
formatter: function (params) {
if (params.data[0] == THAT.dataX[0]) {
return `传感器边坡水平位移${event.sensorName}号(左右${event.disX}) (前后${event.disY}) 毫米`;
}
}
},
grid: {
bottom: "5%",
top: "8%"
},
xAxis: {
min: 0,
max: 100,
type: "value",
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
min: 0,
max: 100,
type: "value",
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
series: [
{
name: `传感器边坡水平位移${event.sensorName}号(左右${event.disX}) (前后${event.disY})`,
data: [this.dataX],
type: "line",
symbol: "triangle",
symbolSize: 30,
symbol() {
return `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAGd0lEQVR4Xu2baWwUZRjH/+8cC3RnG8ASRBFEYGdDAUkwKiAKISGCaIIooiFRwdKd5YgaMHxCPBISD7BCghAwJEQN7eygQTkixgRQITHBIyhoglxNCtuWlrb02p3HzJaWlm533tmd3abH+7H9P9dvnmee2Z2WoY8f1sfrRz+A/g7o4wS6dQRG74suu1jVdBSFOZe66zp0K4DxOh3+N3LzF2jed/ocgPxiGhcVcPxcpK4JmjK6zwFQDXofJpafi9TdDdAL0HzF3QGh20ZADVMpCEIcAOEwQsq8PgMgoNOLxPAlCGUtHQAgislYrfyZbQjd0gGqQUdAmNsBALAFmvJmrwcQ+JomUQx/xAtt3wGEKuR587CYxbIJIesdENBpMzG80QlAHAgrQMi7q/cC2EiCOgnlAIYkBAD2MzTvjF4LQDVoGQi72wpsPwJtPzQfg5b7U7YgZHUEVIOOgTAzKQALUEh5rdcBGK/TIwLDyQ6FJewAmCBvHkLsejYgZK0DVJ22gyHIAcCSrIWmfNxrAEw+Qt7G2vjNbyAXAMIZhJSJvQaA36CVjLCtU0GJR6BFRmw+Qt5DmYaQlRFQw/QrgKmOADBWgqB3cY8HECihWSTgx4SFJOuAuEHzGGhDLmQSQsY7IGDQHiK8nBIAoncR8r3dYwH4D1Aea0KkywJsOwCXoSmjeiwAVad1YPggDQAAE5YgmLMvUxAyOgIBg84QYUJaAIAj0JQnexwA/36ax0wcTJq4/QjcWol4ECGl5SO0yydjHaCGyfqO73lXADB8gqDS8hHa5ZMRABOKaVRMxEXbXHk7AKhGwJuH2Sxq69OhICMA/AZtYAT77/r5AQBEhQj5djqsz1aeEQBqmM4DGGMb3QkA0Elovmm2Ph0KXAcQ0GkRMehceTgCAEAQZqIw5wSXb06R6wD8Oh1gDAu44jsFAHwOTVnO5ZtT5CoAtZhUiDjLGbvjt8I8RgyEqDkMq3IreOQ8GlcBBAzaRIT1PIHjGucdADCsQ1D5iDuGjdBVAP4wlTFgOHdyqQAA/oKm5HPHyBYAVaelYNjrKLHUAACMPYWgN/lTJmcirnWAatBREOZwxm2RpQoAFIbme85RrC7ErgAYv5+mCCZOO04oZQDWy9ToA1g9+D/HMe8wcAWAqlMRGNY4TiYdAKD3oPk2OI7pNoCpO0iuvQvlYMh1nEw6ABiuIKjc5zim2wD8BhUwQmrP6OkAsAox8RJWKl+lAyHtEVDDZL3Hm+40iYamZpRerTCjBAGeHEAQnbqw9N9DU+amYthqkxaAQAlNJwGOX2RWVNegvKqmY97yQEAa4LwWhikIKr87N2yxSA+ATjuJoYA3eDRmovRaBayrn/BYXeDxWnue16WlK4KmvO7EoL3WUaT2huMOUq5YH3/dJfMEr669ibKKKh4pIA8CJA+fFriBqxeHYWN+E6+BKwBUg9aAUMQTtDRSidqbDTzS2xpRRvzewHUoCM23g0t6hyjlDlB1Og1r/pKcuvoGXLlWmUpet22skRCl5D4IpxBSHk0lUEoA/CU0hwk4mizg1cpqVNXUpZJTZxtrHKyxSHZIfByhQcedBkwJgGrQXhCWJgrW2NQcv+rRmMt/7MWElpHoel3ugaa8mnEAE7+h4c1RlCUKlHC9Oc3ITp9sXQrmMBTmWjdm7uO4A/w6rWcMm9pHiMVMXIlUoqGR70YsCmLUI4vnRUn8obYhKgM0G6Z5P8jkexrqal0S3kJI+ZC7+lSeA1SDzoKgtgbhWW+CwMgjS2WSKJ4QRLbnRsHQxJ/lt0aeAbGloNgMmLERIEp+gTyDALHDuvwbmtL1q7gEZBx1QMCgBUQ40Oqnq/VmPccMkOXroiT9Jgkorl4x9DMnV6VNuzUShEkLQeZDMGNDE/rotC7Np6HlfssbzxEAv05hxvBsXX0jrOKJqC2OR5brZJH9I0rSd0T1RTWF9ziaRduEt1wYAcm3AmZ0PkzKB8W8HWxa1yWRgZBvka2/WwJuAGoxjYGI863rzSNLTbIoXhBE8RhDbNeNwrxTvEFd0X1a/jCIXgEwC2Z0LMj0xJ8erXVJ0liEBlovZ2wPN4B7v2jYXlVVu0CSxZMAK6leMbhb/sGhy4q2lS+EaS6BiWmQPIewanChbfXcN8HNl5/AyJEnsv2X3DwFJNQUk4hLl2dg7ahjdj64O8DOUU/9fT+Annrl3Mq7vwPcItlT/fwPbcWWXx/jXpEAAAAASUVORK5CYII=`;
},
lineStyle: {
color: "green",
width: 4,
type: "dashed"
},
itemStyle: {
borderWidth: 3,
borderColor: "yellow",
color: "blue"
}
}
]
};
myChart.setOption(option);
},
myCharts2(myChart, event) {
const THAT = this;
let option = {
title: {
text: "传感器边坡竖向位移" + event.sensorName + "号",
textStyle: {
align: "center",
fontSize: 16
},
top: "3%",
left: "2%"
},
legend: {
data: [
`传感器边坡竖向位移${event.sensorName}号(沉降大小${event.disZ})`
],
top: "3%",
right: "2%",
},
tooltip: {
formatter: function (params) {
if (params.data[0] == THAT.dataZ[0]) {
return `传感器边坡竖向位移${event.sensorName}号(沉降大小${event.disZ}) 毫米`;
}
}
},
grid: {
bottom: "5%",
top: "8%"
},
xAxis: {
min: 0,
max: 100,
type: "value",
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
min: 0,
max: 100,
type: "value",
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
series: [
{
name: `传感器边坡竖向位移${event.sensorName}号(沉降大小${event.disZ})`,
data: [this.dataZ],
type: "line",
symbol: "triangle",
symbolSize: 30,
symbol() {
return `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAGd0lEQVR4Xu2baWwUZRjH/+8cC3RnG8ASRBFEYGdDAUkwKiAKISGCaIIooiFRwdKd5YgaMHxCPBISD7BCghAwJEQN7eygQTkixgRQITHBIyhoglxNCtuWlrb02p3HzJaWlm533tmd3abH+7H9P9dvnmee2Z2WoY8f1sfrRz+A/g7o4wS6dQRG74suu1jVdBSFOZe66zp0K4DxOh3+N3LzF2jed/ocgPxiGhcVcPxcpK4JmjK6zwFQDXofJpafi9TdDdAL0HzF3QGh20ZADVMpCEIcAOEwQsq8PgMgoNOLxPAlCGUtHQAgislYrfyZbQjd0gGqQUdAmNsBALAFmvJmrwcQ+JomUQx/xAtt3wGEKuR587CYxbIJIesdENBpMzG80QlAHAgrQMi7q/cC2EiCOgnlAIYkBAD2MzTvjF4LQDVoGQi72wpsPwJtPzQfg5b7U7YgZHUEVIOOgTAzKQALUEh5rdcBGK/TIwLDyQ6FJewAmCBvHkLsejYgZK0DVJ22gyHIAcCSrIWmfNxrAEw+Qt7G2vjNbyAXAMIZhJSJvQaA36CVjLCtU0GJR6BFRmw+Qt5DmYaQlRFQw/QrgKmOADBWgqB3cY8HECihWSTgx4SFJOuAuEHzGGhDLmQSQsY7IGDQHiK8nBIAoncR8r3dYwH4D1Aea0KkywJsOwCXoSmjeiwAVad1YPggDQAAE5YgmLMvUxAyOgIBg84QYUJaAIAj0JQnexwA/36ax0wcTJq4/QjcWol4ECGl5SO0yydjHaCGyfqO73lXADB8gqDS8hHa5ZMRABOKaVRMxEXbXHk7AKhGwJuH2Sxq69OhICMA/AZtYAT77/r5AQBEhQj5djqsz1aeEQBqmM4DGGMb3QkA0Elovmm2Ph0KXAcQ0GkRMehceTgCAEAQZqIw5wSXb06R6wD8Oh1gDAu44jsFAHwOTVnO5ZtT5CoAtZhUiDjLGbvjt8I8RgyEqDkMq3IreOQ8GlcBBAzaRIT1PIHjGucdADCsQ1D5iDuGjdBVAP4wlTFgOHdyqQAA/oKm5HPHyBYAVaelYNjrKLHUAACMPYWgN/lTJmcirnWAatBREOZwxm2RpQoAFIbme85RrC7ErgAYv5+mCCZOO04oZQDWy9ToA1g9+D/HMe8wcAWAqlMRGNY4TiYdAKD3oPk2OI7pNoCpO0iuvQvlYMh1nEw6ABiuIKjc5zim2wD8BhUwQmrP6OkAsAox8RJWKl+lAyHtEVDDZL3Hm+40iYamZpRerTCjBAGeHEAQnbqw9N9DU+amYthqkxaAQAlNJwGOX2RWVNegvKqmY97yQEAa4LwWhikIKr87N2yxSA+ATjuJoYA3eDRmovRaBayrn/BYXeDxWnue16WlK4KmvO7EoL3WUaT2huMOUq5YH3/dJfMEr669ibKKKh4pIA8CJA+fFriBqxeHYWN+E6+BKwBUg9aAUMQTtDRSidqbDTzS2xpRRvzewHUoCM23g0t6hyjlDlB1Og1r/pKcuvoGXLlWmUpet22skRCl5D4IpxBSHk0lUEoA/CU0hwk4mizg1cpqVNXUpZJTZxtrHKyxSHZIfByhQcedBkwJgGrQXhCWJgrW2NQcv+rRmMt/7MWElpHoel3ugaa8mnEAE7+h4c1RlCUKlHC9Oc3ITp9sXQrmMBTmWjdm7uO4A/w6rWcMm9pHiMVMXIlUoqGR70YsCmLUI4vnRUn8obYhKgM0G6Z5P8jkexrqal0S3kJI+ZC7+lSeA1SDzoKgtgbhWW+CwMgjS2WSKJ4QRLbnRsHQxJ/lt0aeAbGloNgMmLERIEp+gTyDALHDuvwbmtL1q7gEZBx1QMCgBUQ40Oqnq/VmPccMkOXroiT9Jgkorl4x9DMnV6VNuzUShEkLQeZDMGNDE/rotC7Np6HlfssbzxEAv05hxvBsXX0jrOKJqC2OR5brZJH9I0rSd0T1RTWF9ziaRduEt1wYAcm3AmZ0PkzKB8W8HWxa1yWRgZBvka2/WwJuAGoxjYGI863rzSNLTbIoXhBE8RhDbNeNwrxTvEFd0X1a/jCIXgEwC2Z0LMj0xJ8erXVJ0liEBlovZ2wPN4B7v2jYXlVVu0CSxZMAK6leMbhb/sGhy4q2lS+EaS6BiWmQPIewanChbfXcN8HNl5/AyJEnsv2X3DwFJNQUk4hLl2dg7ahjdj64O8DOUU/9fT+Annrl3Mq7vwPcItlT/fwPbcWWXx/jXpEAAAAASUVORK5CYII=`;
},
lineStyle: {
color: "green",
width: 4,
type: "dashed"
},
itemStyle: {
borderWidth: 3,
borderColor: "yellow",
color: "blue"
}
}
]
};
myChart.setOption(option);
},
// 车辆轨迹
secondMap(lineArr) {
// 地图
var map = new AMap.Map("container", {
center: lineArr[0],//中心点坐标
})
map.clearMap()
setTimeout(() => {
var marker = new AMap.Marker({
map: map,
icon: 'http://jingkongyun.com:8090/a.png',
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle: -90,
})
// 绘制轨迹
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
showDir: true,
strokeColor: "#28F", //线颜色
strokeWeight: 6, //线宽
})
var passedPolyline = new AMap.Polyline({
map: map,
strokeColor: "#AF5", //线颜色
strokeWeight: 6, //线宽
})
marker.moveAlong(lineArr, 1000);
map.setFitView()
}, 1000);
},
// 点击查看各个车辆轨迹
secondChangeGroup(e) {
for (let i of this.secondLineObj) {
if (i.name == e) {
this.secondMap(i.path)
break
}
}
},
thirdMap() {
// 地图
var map = new AMap.Map("container_2", {
});
const arrPosition = [
{
name: '',
position: [115.85402, 44.261389],
},
{
name: '',
position: [115.854052, 44.261515],
},
{
name: '',
position: [115.854776, 44.261043],
},
{
name: '',
position: [115.854342, 44.260129],
},
]
var polygonArr = [
[115.854569, 44.262449],
[115.8537, 44.261523],
[115.852842, 44.260751],
[115.853158, 44.260098],
[115.853169, 44.259495],
[115.854075, 44.258704],
[115.855003, 44.258999],
[115.855712, 44.259795],
[115.855476, 44.260936],
[115.854998, 44.261762],
[115.85458, 44.262426],
];
var polygon = new AMap.Polygon({
map: map,
path: polygonArr,//设置多边形边界路径
strokeColor: "#FF33FF", //线颜色
strokeOpacity: 0.2, //线透明度
strokeWeight: 3, //线宽
fillColor: "#1791fc", //填充色
fillOpacity: 0.35,//填充透明度
// draggable: true
});
setTimeout(() => {
// 遍历数组
arrPosition.forEach(item => {
var Marker = new AMap.Marker({
map: map,
icon: "/image/ding_wei.png",
position: item.position,
offset: new AMap.Pixel(-13, -30),
title: item.name,
label: item.name,
size: 5
});
});
}, 1000);
map.setFitView();
},
},
computed: {
isLtkDialog() {
return this.$store.state.isLtkDialog;
}
},
watch: {
isLtkDialog(e) {
var a = this.$store.state.compony_info
this.activeName = e.params
this.core()
}
}
}
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
.ltk_dialog {
.el-dialog .el-dialog__body {
height: 70vh;
}
.first {
overflow-y: auto;
@include scrollbar;
.charts {
display: flex;
justify-content: space-between;
margin-right: 0.3vw;
.charts-div {
width: 49%;
height: 30vh;
background-size: 100% 100%;
margin-bottom: 2%;
border: 1px solid #767676;
border-radius: 5px;
}
.charts_bg {
background-image: url('~@/assets/images/ltk_2.png');
}
.charts_bg2 {
background-image: url('~@/assets/images/ltk_1.png');
}
}
}
.first,
.second,
.third,
.fourth {
height: 60vh;
}
.second_page {
display: flex;
.second {
width: 90%;
}
.right {
width: 9%;
display: flex;
flex-direction: column;
margin-left: 1%;
.el-radio {
margin: 0;
margin-bottom: 1vh;
}
}
}
.third_page {
display: flex;
.third {
width: 85%;
margin-right: 1%;
}
.right {
width: 14%;
.title {
font-size: 20px;
color: #333;
}
.right_div_line {
line-height: 2.5;
display: flex;
justify-content: space-between;
}
}
}
.fourth {
.one {
color: #096bfc;
cursor: pointer;
}
.two {
color: #d61d50;
margin: 0 1vw;
cursor: pointer;
}
}
}
</style>
src/components/ltk/ltkZongHe.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="ltk_base_left">
<div class="base_left_box">
<img src="@/assets/images/error.png" @click="onClickDel">
<div class="base_left_box_line">
<div class="title">基础信息</div>
<el-row class="text">
<el-col :span="8">名称</el-col>
<el-col class="text_right" :span="16">{{dataObj.name}}</el-col>
</el-row>
<el-row class="text">
<el-col :span="8">地理位置</el-col>
<el-col class="text_right" :span="16">{{ dataObj.address}}</el-col>
</el-row>
</div>
<div class="base_left_box_line" style="height: 25vh">
<div class="title">监测类型</div>
<el-row class="text">
<el-col :span="12">边坡监测</el-col>
<el-col class="text_look" :span="12"><span @click="is_ltk_dialog = true">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">车辆轨迹</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(2, 'second')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">人员定位</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(3, 'third')">查看</span></el-col>
</el-row>
<el-row class="text">
<el-col :span="12">车辆信息</el-col>
<el-col class="text_look" :span="12"><span @click="onTextLook(4, 'fourth')">查看</span></el-col>
</el-row>
</div>
<div class="base_left_box_line">
<div class="title">视频监控 <span class="position_look" @click="onClickVideo">更多</span> </div>
<div class="palyer2">
<LivePlayer ref="player2" live />
</div>
</div>
</div>
<div class="ltk_dialog animated animate__flipInX" v-if="is_ltk_dialog">
<div class="ltk_dialog_left">
<el-radio-group v-model="radio" @change="changeRadio">
<el-radio label="降雨量">降雨量</el-radio>
<el-radio label="渗流压力">渗流压力</el-radio>
<el-radio label="地下水位">地下水位</el-radio>
<el-radio label="边坡表面位移">边坡表面位移</el-radio>
<el-radio label="边坡内部位移">边坡内部位移</el-radio>
<el-radio label="边坡裂缝">边坡裂缝</el-radio>
<el-radio label="边坡内部应力">边坡内部应力</el-radio>
<el-radio label="支护结构应力">支护结构应力</el-radio>
<el-radio label="边坡质点速度">边坡质点速度</el-radio>
</el-radio-group>
</div>
<div class="ltk_dialog_right">
<div class="position_title">
<div class="title">{{radio}}</div>
<img src="@/assets/images/error.png" @click="onltkDialog">
</div>
<LineChart v-if="isShowRadio"></LineChart>
</div>
</div>
</div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
import eventBus from "@/utils/eventbus"
import LineChart from '@/components/Echarts/LineChart'
export default {
data() {
return {
dataObj: '',
is_ltk_dialog: false, // 边坡测量
radio: '降雨量',
isShowRadio: true,
}
},
components: {
LivePlayer,
LineChart
},
mounted() {
this.dataObj = this.$store.state.compony_info
},
methods: {
onltkDialog() {
this.is_ltk_dialog = false
},
// 关闭页面
onClickDel() {
this.$store.commit("SET_IS_LEFT", false);
},
// 查看
onTextLook(index, params) {
this.$store.commit('set_isLtkDialog', {
index,
params,
})
},
// 查看视频
onClickVideo() {
eventBus.$emit("dialog_show_video", {
list: [],
parentSerial: ''
});
},
changeRadio() {
this.isShowRadio = false
setTimeout(() => {
this.isShowRadio = true
}, 300)
}
},
}
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
.ltk_base_left {
position: absolute;
color: #fff;
z-index: 9;
width: 20%;
bottom: 0;
left: 0;
top: 0;
.base_left_box {
padding: 2vh;
padding-top: 4vh;
height: 80vh;
background-image: url('~@/assets/images/kuang.png');
background-size: 100% 100%;
img {
width: 0.8vw;
position: absolute;
right: 1vw;
top: 1.2vw;
cursor: pointer;
}
.base_left_box_line {
line-height: 1.5;
margin-top: 1vw;
.title {
position: relative;
color: #02fcfe;
font-size: 1vw;
.position_look {
position: absolute;
right: 0;
color: #10a1f2;
font-size: 0.8vw;
cursor: pointer;
}
}
.text {
margin: 0.3vw 0;
}
.text_right {
text-align: right;
}
.text_look {
text-align: right;
color: #10a1f2;
cursor: pointer;
}
.palyer2 {
height: auto;
margin-top: 0.5vw;
}
}
}
.ltk_dialog {
display: flex;
justify-content: space-between;
padding-left: 0.3vw;
top: 1.7vh;
left: 100%;
width: 40vw;
height: 50vh;
border-radius: 5px;
position: absolute;
.ltk_dialog_left {
width: 8vw;
height: 100%;
border-radius: 5px;
background-color: #040624;
padding-top: 2vh;
padding-left: 1vw;
.el-radio {
margin-bottom: 2vh;
}
}
.ltk_dialog_right {
width: 31vw;
height: 100%;
border-radius: 5px;
background-color: #040624;
.position_title {
height: 8%;
font-size: 2vh;
display: flex;
padding: 0 1vw;
color: #02fcfe;
justify-content: space-between;
align-items: flex-end;
}
}
}
.charts_div {
width: 100%;
height: 92%;
}
}
</style>
\ No newline at end of file
src/components/wkk_environment/environment.vue 0 → 100644
View file @ 5223d64b
<template>
<el-dialog class="base_eev_dialog" :visible.sync="dialogVisible" top="10vh" width="70%" :before-close="handleClose">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="一氧化碳" name="一氧化碳"></el-tab-pane>
<el-tab-pane label="风速" name="风速"></el-tab-pane>
<el-tab-pane label="二氧化氮" name="二氧化氮"></el-tab-pane>
<el-tab-pane label="温度" name="温度"></el-tab-pane>
</el-tabs>
<div class="charts_div" v-show="!VisibleShow" style="display:flex;align-items: center; justify-content: center; font-size: 5vh;"> 暂无数据 </div>
<div ref="myCharts" v-show="VisibleShow" class="charts_div"></div>
</el-dialog>
</template>
<script>
import { timeParse, randNum, unique } from '@/utils'
import { environment } from '@/api'
export default {
data() {
return {
dialogVisible: false,
activeName: '一氧化碳',
VisibleShow: false,
}
},
methods: {
core() {
const compony_info = this.$store.state.compony_info
environment({
page: 0,
size: 4000,
sort: 'id,desc',
company: compony_info.name,
item: this.activeName
}).then(res => {
const content = res.content
let color = ['#3A84FF', 'rgba(255,80,124,1)', 'rgba(12, 108, 227, 1)', 'rgba(234, 242, 16, 1)']
let arr = []
let location = []
content.map(item => {
location.push(item.location)
})
location = unique(location)
for (let index in location) {
arr.push({
data: [],
time: [],
test: [],
nickname: location[index],
color: color[index],
})
}
this.dialogVisible = true
this.VisibleShow = true
if (content.length == 0) {
this.VisibleShow = false
return
}
for (let dataItem of content) {
for (let i of arr) {
if (dataItem.location == i.nickname) {
i.data.push(dataItem.value)
i.time.push(timeParse(dataItem.insertTime))
i.test.push([timeParse(dataItem.insertTime), dataItem.value])
}
}
}
let dataX = []
let series = []
var legendData = []
var legendSelected = {}
dataX = arr[0].time
for (let i in arr) {
series.push({
name: arr[i].nickname,
type: "line",
smooth: true,
itemStyle: {
normal: {
color: arr[i].color,
},
},
data: arr[i].test,
});
legendData.push(arr[i].nickname)
let nickname = arr[i].nickname
if (i < 4) {
legendSelected[nickname] = true
} else {
legendSelected[nickname] = false
}
}
setTimeout(() => {
this.myCharts(dataX, series, legendData, legendSelected)
}, 1000);
})
},
myCharts(dataX, series, legendData, legendSelected) {
let myChart = echarts.init(this.$refs.myCharts)
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
legend: {
data: legendData,
selected: legendSelected,
top: "2%",
left: "center",
textStyle: {
color: "#1DD8EF",
},
},
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [0],
bottom: 30,
start: 0,
end: 10,
handleSize: '110%',
handleStyle: {
color: "#5B3AAE",
},
textStyle: {
color: "rgba(204,187,225,0.5)",
},
fillerColor: "rgba(67,55,160,0.4)",
borderColor: "rgba(204,187,225,0.5)",
}],
grid: {
top: "6%",
right: "5%",
left: "5%",
bottom: "15%",
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#1DD8EF",
},
},
axisTick: {
alignWithLabel: true,
},
// data: dataX,
},
],
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#1DD8EF",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#11366e",
},
},
position: "left",
},
{
type: "value",
axisLine: {
lineStyle: {
color: "#1DD8EF",
},
},
splitLine: {
show: false,
},
position: "right",
},
],
series,
};
myChart.setOption(option, true);
},
handleClose() {
this.dialogVisible = false
},
handleClick(e) {
this.core()
}
},
computed: {
is_show_huan_jing_jian_ce() {
return this.$store.state.is_show_huan_jing_jian_ce
}
},
watch: {
is_show_huan_jing_jian_ce() {
this.activeName = '一氧化碳'
this.core()
}
}
}
</script>
<style lang="scss">
.base_eev_dialog {
.charts_div {
margin-top: 2vh;
height: 68vh;
}
.el-dialog,
.el-pager li {
background-color: #040624;
}
.el-tabs__nav-scroll {
display: flex;
justify-content: center;
}
.el-tabs--card > .el-tabs__header {
border-bottom-width: 1px;
}
.el-tabs__item {
color: #fff;
}
.el-tabs__item.is-active {
color: #409eff !important;
}
}
</style>
\ No newline at end of file
src/components/wkk_environment/table.vue 0 → 100644
View file @ 5223d64b
<template>
<el-dialog class="dialog_table" :visible.sync="dialogVisible" top="10vh" width="70%" :before-close="handleClose">
<br>
<div class="func_comm">
<!-- <strong>开始时间</strong>
<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>
<strong>结束时间</strong>
<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker> -->
<strong>检测项</strong>
<el-input v-model="inputItem" placeholder="请输入内容" style="width: 10vw"></el-input>
<el-button type="primary" @click="core">查询</el-button>
<el-button type="primary" @click="onVisual">可视化</el-button>
</div>
<el-table :data="tableData" style="width: 100%" height="55vh">
<el-table-column prop="company" label="企业站点"></el-table-column>
<el-table-column prop="location" label="采集站"></el-table-column>
<el-table-column prop="item" label="检测项"></el-table-column>
<el-table-column prop="value" label="数据值"></el-table-column>
<el-table-column prop="deviceid" label="设备标识"></el-table-column>
<el-table-column prop="insertTime" label="采集时间"></el-table-column>
</el-table>
<el-pagination layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
</el-dialog>
</template>
<script>
import { timeParse, randNum } from '@/utils'
import { environment } from '@/api'
export default {
data() {
return {
dialogVisible: false,
inputItem: '',
start_time: '',
stop_time: '',
tableData: [],
total: 0,
page: 0,
}
},
methods: {
core() {
const compony_info = this.$store.state.compony_info
environment({
page: this.page,
size: 10,
sort: 'id,desc',
company: compony_info.name,
item: this.inputItem,
// 'insertTime': this.start_time,
// 'insertTime': this.stop_time
}).then(res => {
console.log(res)
this.tableData = res.content.map(item => {
item.insertTime = timeParse(item.insertTime)
return item
})
this.total = res.totalElements
})
this.dialogVisible = true
},
onVisual() {
this.$store.commit('set_is_show_huan_jing_jian_ce', randNum(12, 100, 1))
},
// 开始时间
onChangeStart(e) {
this.start_time = timeParse(e); // 开始时间
},
// 结束时间
onChangeStop(e) {
this.stop_time = timeParse(e); // 开始时间
},
onClickSelect() {
},
handleClose() {
this.dialogVisible = false
},
handleCurrentChange(e) {
this.page = e - 1
this.core()
}
},
computed: {
is_show_huan_jing_jian_ce_table() {
return this.$store.state.is_show_huan_jing_jian_ce_table
}
},
watch: {
is_show_huan_jing_jian_ce_table() {
this.core()
}
}
}
</script>
<style lang="scss">
.dialog_table {
.el-table::before {
height: 0;
}
.el-dialog__body {
padding-top: 0;
.func_comm {
margin-bottom: 1vh;
strong {
margin-right: 0.5vw;
}
.el-button {
padding: 0;
width: 5vw;
height: 40px;
}
}
}
}
</style>
\ No newline at end of file
src/components/wkk_item/item.vue 0 → 100644
View file @ 5223d64b
<template>
<el-dialog :visible.sync="dialogTableVisible" width="70%" top="5vh">
<el-tabs v-model="activeName" @tab-click="tabClick">
<el-tab-pane label="人员定位" name="rydw">
<div class="func_comm">
<strong>开始时间</strong>
<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>
<strong>结束时间</strong>
<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>
<el-button type="primary" @click="onClickSelect">查询</el-button>
</div>
<el-table :data="rydw_tableList" height="58vh">
<el-table-column property="personnel_name" label="姓名"></el-table-column>
<el-table-column property="data_type" label="类型"></el-table-column>
<el-table-column property="base_station_location" label="位置"></el-table-column>
<el-table-column property="insert_time" label="更新时间"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="降雨量" name="jyl">
<div class="func_comm">
<strong>开始时间</strong>
<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>
<strong>结束时间</strong>
<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>
<!-- <strong>监测站</strong>
<el-select v-model="jyl_value" placeholder="请选择" @change="changeSelect">
<el-option v-for="item in jyl_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> -->
<el-button type="primary" @click="onClickSelect">查询</el-button>
<el-button type="primary" @click="onvisi('jyl')">可视化</el-button>
</div>
<el-table :data="jyl_tableList" height="58vh">
<el-table-column property="wkk_name" label="尾矿库名称"></el-table-column>
<el-table-column property="sensor_name" label="监测站"></el-table-column>
<el-table-column property="rainfall_value" label="监测值"></el-table-column>
<el-table-column property="insert_time" label="时间"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="浸润线" name="jrx">
<div class="func_comm">
<strong>开始时间</strong>
<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>
<strong>结束时间</strong>
<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>
<!-- <strong>监测站</strong>
<el-select v-model="jrx_value" placeholder="请选择" @change="changeSelect">
<el-option v-for="item in jrx_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> -->
<el-button type="primary" @click="onClickSelect">查询</el-button>
<el-button type="primary" @click="onvisi('jrx')">可视化</el-button>
</div>
<el-table :data="jrx_tableList" height="58vh">
<el-table-column property="wkk_name" label="尾矿库"></el-table-column>
<el-table-column property="sensor_name" label="监测站"></el-table-column>
<el-table-column property="groundwater_level_value" label="监测值"></el-table-column>
<el-table-column property="insert_time" label="时间"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="库水位" name="ksw">
<div class="func_comm">
<strong>开始时间</strong>
<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>
<strong>结束时间</strong>
<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>
<!-- <strong>监测站</strong>
<el-select v-model="ksw_value" placeholder="请选择" @change="changeSelect">
<el-option v-for="item in ksw_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> -->
<el-button type="primary" @click="onClickSelect">查询</el-button>
<el-button type="primary" @click="onvisi('ksw')">可视化</el-button>
</div>
<el-table :data="ksw_tableList" height="58vh">
<el-table-column property="wkk_name" label="尾矿库"></el-table-column>
<el-table-column property="sensor_name" label="监测站"></el-table-column>
<el-table-column property="water_level_value" label="监测值"></el-table-column>
<el-table-column property="insert_time" label="时间"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="干滩" name="gt">
<div class="func_comm">
<strong>开始时间</strong>
<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>
<strong>结束时间</strong>
<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>
<!-- <strong>监测站</strong>
<el-select v-model="gt_value" placeholder="请选择" @change="changeSelect">
<el-option v-for="item in gt_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> -->
<el-button type="primary" @click="onClickSelect">查询</el-button>
<el-button type="primary" @click="onvisi('gt')">可视化</el-button>
</div>
<el-table :data="gt_tableList" height="58vh">
<el-table-column property="wkk_name" label="尾矿库"></el-table-column>
<el-table-column property="sensor_name" label="监测站"></el-table-column>
<el-table-column property="beach_length_value" label="监测值"></el-table-column>
<el-table-column property="insert_time" label="时间"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="表面位移" name="bmwy">
<div class="func_comm">
<strong>开始时间</strong>
<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>
<strong>结束时间</strong>
<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>
<!-- <strong>监测站</strong>
<el-select v-model="bmwy_value" placeholder="请选择" @change="changeSelect">
<el-option v-for="item in bmwy_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> -->
<el-button type="primary" @click="onClickSelect">查询</el-button>
<el-button type="primary" @click="onvisi('bmwy')">可视化</el-button>
</div>
<el-table :data="bmwy_tableList" height="58vh">
<el-table-column property="wkk_name" label="尾矿库"></el-table-column>
<el-table-column property="sensor_name" label="监测站"></el-table-column>
<el-table-column property="value_x" label="水平位移"></el-table-column>
<el-table-column property="value_y" label="沉降位移"></el-table-column>
<el-table-column property="value_z" label="竖向位移"></el-table-column>
<el-table-column property="insert_time" label="时间"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="预警值" name="yjz">
<el-table :data="yjz_tableList" height="60vh">
<el-table-column label="企业名称">
<template>
{{wkk_name}}
</template>
</el-table-column>
<el-table-column property="yiz_type" label="监测类型"></el-table-column>
<el-table-column property="yiz_one" label="红色预警"></el-table-column>
<el-table-column property="yiz_two" label="橙色预警"></el-table-column>
<el-table-column property="yiz_three" label="黄色预警"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="报警记录" name="yj">
<el-table :data="yj_tableList" height="60vh">
<el-table-column label="企业名称">
<template>
{{wkk_name}}
</template>
</el-table-column>
<el-table-column property="deviceName" label="设备名"></el-table-column>
<el-table-column property="msg" label="报警信息"></el-table-column>
<el-table-column property="level" label="报警等级"> </el-table-column>
<el-table-column property="alarmTime" label="预警时间"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<el-pagination layout="prev, pager, next" background :total="comm_total || 0" @current-change="currentChange" v-if="VisiblePagination"></el-pagination>
</el-dialog>
</template>
<script>
import { wkk, wkkAlarmMsg, getRYDWData } from '@/api'
import { mapState } from 'vuex'
import eventBus from "@/utils/eventbus"
import { timeParse, randNum } from "@/utils";
import { ExcelExport } from 'pikaz-excel-js'
export default {
components: {
ExcelExport,
},
data() {
return {
dialogTableVisible: false,
wkk_name: '山金阿尔哈达', // 名称
start_time: '',
stop_time: '',
activeName: 'jyl',
params_data: '',
VisiblePagination: true,
ksw_value: '',
ksw_sheet: '',
ksw_options: '',
ksw_cur_page: 1,
ksw_tableList: [],
gt_value: '',
gt_sheet: '',
gt_options: '',
gt_cur_page: 1,
gt_tableList: [],
jrx_value: '',
jrx_sheet: '',
jrx_options: '',
jrx_cur_page: 1,
jrx_tableList: [],
jyl_value: '',
jyl_sheet: '',
jyl_options: '',
jyl_cur_page: 1,
jyl_tableList: [],
bmwy_value: '',
bmwy_sheet: '',
bmwy_options: '',
bmwy_cur_page: 1,
bmwy_tableList: [],
yjz_tableList: [],
yj_tableList: '',
// 人员定位
rydw_tableList: [],
comm_total: 0,
}
},
mounted() {
eventBus.$on("dialog_show", data => {
this.yjz_tableList = []
let arrName = ['降雨量', '浸润线', '库水位', '干滩', '表面位移']
for (let i of arrName) {
this.yjz_tableList.push({
yiz_type: i,
yiz_one: randNum(50, 70, 1),
yiz_two: randNum(40, 50, 1),
yiz_three: randNum(30, 20, 1),
})
}
this.activeName = data.activeName
this.dialogTableVisible = true;
this.wkk_name = data.dataObj.name
wkkAlarmMsg({
page: 0,
size: 1000,
sort: 'id,desc',
company: this.wkk_name
}).then(res => {
this.yj_tableList = res.content.map(item => {
item.level = item.level + '级'
// 操作时间
let index1 = item.alarmTime.indexOf("T")
let str1 = item.alarmTime.substr(0, index1)
let str2 = " " + item.alarmTime.slice(index1 + 1, -1)
item.alarmTime = str1.concat(str2)
return item
})
})
let day = 1 * 86400 * 1000;
let dateCur = Date.parse(new Date());
this.start_time = timeParse(dateCur - day); // 开始时间
this.stop_time = timeParse(); // 结束时间
this.params_data = {
indic_name: '',
wkk_name: this.wkk_name, // 尾矿库名称
start_time: this.start_time, // 开始时间
end_time: this.stop_time, // 结束时间
sensor_name: '',
page: {
page_size: 10,
cur_page: 1
}
}
this.jrx_value = ''
this.jyl_value = ''
this.gt_value = ''
this.ksw_value = ''
this.bmwy_value = ''
this.onClickSelect()
});
},
methods: {
// 测试
onvisi(name) {
const obj = {
number: randNum(12, 100, 1),
name,
}
this.$store.commit('setShowItemCharts', obj)
},
// 初始化
reset() {
this.ksw_cur_page = 1
this.jrx_cur_page = 1
this.gt_cur_page = 1
this.jyl_cur_page = 1
this.bmwy_cur_page = 1
this.params_data.page.page_size = 10
this.VisiblePagination = false
this.comm_total = 0
setTimeout(() => {
this.VisiblePagination = true
}, 300)
},
// 选择站点
changeSelect(e) {
this.reset();
if (this.activeName == 'jyl') {
this.jyl_value = e
this.jylData()
}
if (this.activeName == 'jrx') {
this.jrx_value = e
this.jrxData()
}
if (this.activeName == 'gt') {
this.gt_value = e
this.gtData()
}
if (this.activeName == 'ksw') {
this.ksw_value = e
this.kswData()
}
if (this.activeName == 'bmwy') {
this.bmwy_value = e
this.bmwyData()
}
},
// 点击查询
onClickSelect() {
this.reset();
if (this.activeName == 'rydw') {
this.onGetRYDWData()
}
if (this.activeName == 'jyl') {
this.jylData()
}
if (this.activeName == 'jrx') {
this.jrxData()
}
if (this.activeName == 'gt') {
this.gtData()
}
if (this.activeName == 'ksw') {
this.kswData()
}
if (this.activeName == 'bmwy') {
this.bmwyData()
}
},
// 开始时间
onChangeStart(e) {
this.start_time = timeParse(e, "yyyy-MM-dd HH:mm:ss"); // 开始时间
},
// 结束时间
onChangeStop(e) {
this.stop_time = timeParse(e, "yyyy-MM-dd HH:mm:ss"); // 开始时间
},
tabClick(e) {
this.reset();
if (e.name == 'rydw') {
this.onGetRYDWData()
}
if (e.name == 'jyl') {
this.jylData()
}
if (e.name == 'jrx') {
this.jrxData()
}
if (e.name == 'gt') {
this.gtData()
}
if (e.name == 'ksw') {
this.kswData()
}
if (e.name == 'bmwy') {
this.bmwyData()
}
},
// 人员定位
onGetRYDWData() {
var MiningAreaId = ''
if (this.wkk_name == '锡林矿业') {
MiningAreaId = 152525002
}
if (this.wkk_name == '山金阿尔哈达') {
MiningAreaId = 152525003
}
if (this.wkk_name == '融冠矿业') {
MiningAreaId = 152525001
}
if (this.wkk_name == '钨矿') {
MiningAreaId = 152525004
}
if (this.wkk_name == '山金白音呼布') {
MiningAreaId = 152525005
}
getRYDWData({
MiningAreaId,
page: 0,
size: 10,
sort: 'miningAreaId,desc'
}).then(res => {
this.rydw_tableList = res
})
},
// 降雨量
jylData() {
this.params_data.indic_name = 'jyl'
this.params_data.start_time = this.start_time
this.params_data.end_time = this.stop_time
this.params_data.page.cur_page = this.jyl_cur_page
this.params_data.sensor_name = this.jyl_value
wkk(this.params_data).then(res => {
if (res.code == 200) {
const resData = res.data
const sensor_list = resData.sensor_list
this.jyl_tableList = resData.data
this.comm_total = resData.total
this.jyl_sheet = [
{
tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
table: this.jyl_tableList,
keys: ['wkk_name', 'sensor_name', 'rainfall_value', 'insert_time']
}
]
}
})
},
// 浸润线
jrxData() {
this.params_data.indic_name = 'jrx'
this.params_data.start_time = this.start_time
this.params_data.end_time = this.stop_time
this.params_data.page.cur_page = this.jrx_cur_page
this.params_data.sensor_name = this.jrx_value
wkk(this.params_data).then(res => {
if (res.code == 200) {
const resData = res.data;
const sensor_list = resData.sensor_list;
this.jrx_tableList = resData.data
this.comm_total = resData.total
this.jrx_sheet = [
{
tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
table: this.jrx_tableList,
keys: ['wkk_name', 'sensor_name', 'groundwater_level_value', 'insert_time']
}
]
}
})
},
// 干滩
gtData() {
this.params_data.indic_name = 'gt'
this.params_data.start_time = this.start_time
this.params_data.end_time = this.stop_time
this.params_data.page.cur_page = this.gt_cur_page
this.params_data.sensor_name = this.gt_value
wkk(this.params_data).then(res => {
if (res.code == 200) {
const resData = res.data;
const sensor_list = resData.sensor_list;
this.gt_tableList = resData.data
this.comm_total = resData.total
this.gt_sheet = [
{
tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
table: this.gt_tableList,
keys: ['wkk_name', 'sensor_name', 'beach_length_value', 'insert_time']
}
]
}
})
},
// 库水位
kswData() {
this.params_data.indic_name = 'ksw';
this.params_data.start_time = this.start_time
this.params_data.end_time = this.stop_time
this.params_data.page.cur_page = this.ksw_cur_page
this.params_data.sensor_name = this.ksw_value
wkk(this.params_data).then(res => {
if (res.code == 200) {
const resData = res.data;
const sensor_list = resData.sensor_list;
this.ksw_tableList = resData.data;
this.comm_total = resData.total
this.ksw_sheet = [
{
tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
table: this.ksw_tableList,
keys: ['wkk_name', 'sensor_name', 'water_level_value', 'insert_time']
}
]
}
})
},
// 表面位移
bmwyData() {
this.params_data.indic_name = 'bmwy'
this.params_data.start_time = this.start_time
this.params_data.end_time = this.stop_time
this.params_data.page.cur_page = this.bmwy_cur_page
this.params_data.sensor_name = this.bmwy_value
wkk(this.params_data).then(res => {
if (res.code == 200) {
const resData = res.data
const sensor_list = resData.sensor_list
this.bmwy_tableList = resData.data
this.comm_total = resData.total
this.bmwy_sheet = [
{
tHeader: ['尾矿库名称', '监测站', '水平位移', '沉降位移', '竖向位移', '时间'],
table: this.ksw_tableList,
keys: ['wkk_name', 'sensor_name', 'value_x', 'value_y', 'value_z', 'insert_time']
}
]
}
})
},
// 换页
currentChange(e) {
if (this.activeName == 'rydw') {
this.jyl_cur_page = e
this.onGetRYDWData()
}
if (this.activeName == 'jyl') {
this.jyl_cur_page = e
this.jylData()
}
if (this.activeName == 'jrx') {
this.jrx_cur_page = e
this.jrxData()
}
if (this.activeName == 'gt') {
this.gt_cur_page = e
this.gtData()
}
if (this.activeName == 'ksw') {
this.ksw_cur_page = e
this.kswData()
}
if (this.activeName == 'bmwy') {
this.bmwy_cur_page = e
this.bmwyData()
}
}
},
watch: {
dialogTableVisible(e) {
this.reset()
this.VisiblePagination = e;
},
}
}
</script>
<style lang="scss">
.el-dialog {
border-radius: 0.3vw;
// 弹框体
.el-dialog__body {
padding-top: 0;
.func_comm {
margin-bottom: 1vh;
strong {
margin-right: 0.5vw;
}
.el-button {
padding: 0;
width: 5vw;
height: 40px;
}
}
.el-select {
margin-right: 1vw;
}
.el-pagination {
text-align: right;
margin-top: 2vh;
}
.el-input {
margin-right: 15px;
}
.el-table thead th {
background-color: #f4f4f4;
color: #333;
}
.el-table::before {
height: 0;
}
}
}
</style>
\ No newline at end of file
src/components/wkk_item/item_charts.vue 0 → 100644
View file @ 5223d64b
<template>
<el-dialog class="item_charts" :visible.sync="dialogVisible" top="5vh" width="70%" :before-close="handleClose">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="降雨量" name="jyl"></el-tab-pane>
<el-tab-pane label="浸润线" name="jrx"></el-tab-pane>
<el-tab-pane label="库水位" name="ksw"></el-tab-pane>
<el-tab-pane label="干滩" name="gt"></el-tab-pane>
<el-tab-pane label="表面位移" name="bmwy"></el-tab-pane>
</el-tabs>
<div ref="myCharts" v-show="isMyCharts" class="charts_div"></div>
<div class="charts_div" v-show="!isMyCharts" >暂无数据</div>
</el-dialog>
</template>
<script>
import { timeParse, randNum, unique } from '@/utils'
import { wkk } from '@/api'
export default {
data() {
return {
dialogVisible: false,
activeName: 'jyl',
start_time: '',
stop_time: '',
isMyCharts: true,
}
},
methods: {
core() {
const compony_info = this.$store.state.compony_info
let day = 3 * 86400 * 1000;
let dateCur = Date.parse(new Date());
this.start_time = timeParse(dateCur - day); // 开始时间
this.stop_time = timeParse(); // 结束时间
this.isMyCharts = true
wkk({
indic_name: this.activeName,
wkk_name: compony_info.name, // 尾矿库名称
start_time: this.start_time, // 开始时间
end_time: this.stop_time, // 结束时间
sensor_name: '',
page: {
page_size: 9999,
cur_page: 1
}
}).then(res => {
const content = res.data.data
let sensor_list = res.data.sensor_list
if (content == null) {
this.isMyCharts = false
return
}
let color = ['#3A84FF', 'rgba(255,80,124,1)', 'rgba(234, 242, 16, 1)']
let arr = []
for (let index in sensor_list) {
arr.push({
test: [],
bmwyX: [],
bmwyZ: [],
nickname: sensor_list[index].trim(),
color: color[index],
})
}
this.dialogVisible = true
for (let dataItem of content) {
for (let i of arr) {
if (dataItem.sensor_name.trim() == i.nickname) {
if (this.activeName == 'jyl') {
i.test.push([dataItem.insert_time, dataItem.rainfall_value])
}
if (this.activeName == 'jrx') {
i.test.push([dataItem.insert_time, dataItem.groundwater_level_value])
}
if (this.activeName == 'ksw') {
i.test.push([dataItem.insert_time, dataItem.water_level_value])
}
if (this.activeName == 'gt') {
i.test.push([dataItem.insert_time, dataItem.beach_length_value])
}
if (this.activeName == 'bmwy') {
i.test.push([dataItem.insert_time, dataItem.value_y])
i.bmwyX.push([dataItem.insert_time, dataItem.value_x])
i.bmwyZ.push([dataItem.insert_time, dataItem.value_z])
}
}
}
}
let series = []
var legendData = []
var legendSelected = {}
for (let i in arr) {
if (this.activeName == 'bmwy') {
series.push({
name: arr[i].nickname + '沉降位移',
type: "line",
smooth: true,
itemStyle: {
normal: {
color: arr[i].color,
},
},
data: arr[i].test,
});
series.push({
name: arr[i].nickname + '竖向位移',
type: "line",
itemStyle: {
normal: {
color: arr[i].color,
},
},
yAxisIndex: 1,
data: arr[i].bmwyZ,
});
series.push({
name: arr[i].nickname + '水平位移',
type: 'bar',
barMaxWidth: 30,
smooth: true,
itemStyle: {
normal: {
color: arr[i].color,
},
},
data: arr[i].bmwyX,
});
} else {
series.push({
name: arr[i].nickname,
type: "line",
smooth: true,
itemStyle: {
normal: {
color: arr[i].color,
},
},
data: arr[i].test,
});
}
}
setTimeout(() => {
for (let item of series) {
let name = item.name
legendSelected[name] = true
legendData.push(name)
}
this.myCharts(series, legendData, legendSelected)
}, 1000);
})
},
myCharts(series, legendData, legendSelected) {
let myChart = echarts.init(this.$refs.myCharts)
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
legend: {
data: legendData,
selected: legendSelected,
top: "0",
left: "center",
textStyle: {
color: "#1DD8EF",
},
},
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [0],
bottom: 30,
start: 0,
end: 10,
handleSize: '110%',
handleStyle: {
color: "#5B3AAE",
},
textStyle: {
color: "rgba(204,187,225,0.5)",
},
fillerColor: "rgba(67,55,160,0.4)",
borderColor: "rgba(204,187,225,0.5)",
}],
grid: {
top: "8%",
right: "5%",
left: "5%",
bottom: "15%",
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#1DD8EF",
},
},
axisTick: {
alignWithLabel: true,
},
axisLabel: {
formatter: function (params) {
return params.split(" ")[0] + "\n" + params.split(" ")[1];
}
}
},
],
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#1DD8EF",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#11366e",
},
},
position: "left",
},
{
type: "value",
axisLine: {
lineStyle: {
color: "#1DD8EF",
},
},
splitLine: {
show: false,
},
position: "right",
},
],
series,
};
myChart.setOption(option, true);
},
handleClose() {
this.dialogVisible = false
},
handleClick(e) {
this.activeName = e.name
this.core()
}
},
computed: {
showItemCharts() {
return this.$store.state.showItemCharts
}
},
watch: {
showItemCharts(e) {
this.activeName = e.name
setTimeout(() => {
this.core()
}, 500);
}
}
}
</script>
<style lang="scss">
.item_charts {
.charts_div {
margin-top: 2vh;
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 6vh;
}
.el-dialog,
.el-pager li {
background-color: #040624;
}
.el-tabs__nav-scroll {
display: flex;
justify-content: center;
}
.el-tabs--card > .el-tabs__header {
border-bottom-width: 1px;
}
.el-tabs__item {
color: #fff;
}
.el-tabs__item.is-active {
color: #409eff !important;
}
}
</style>
\ No newline at end of file
src/components/yingji/yingjiLeft.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="yingji_left">
<div class="top">
<div class="title">应急资源分类</div>
<div class="page">
<div v-for="(item, index) in arrList_type" :key="index" class="page_div animated">
<div class="page_div_2">
<span>{{item.text}}</span>
<span class="color" @click.stop="onClickItem(item)">
<img v-if="item.is" src="@/assets/images/yingji_eye.png" alt="">
<img v-if="!item.is" src="@/assets/images/yingji_eye_off.png" alt="">
{{item.count}}处</span>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="title">预警信息</div>
<div class="page">
<div class="page_div" v-for="(item, index) in dataList" :key="index">
<!-- <span class="page_circle" :style="{backgroundImage: 'url(' + item.url +')'}">{{ index + 1 }}</span> -->
<div class="page_div_son" :style="{backgroundImage: 'url(' + item.url_1 +')'}">
<span class="text" :title="item.message">{{item.message}}</span>
<span class="time"> {{ item.warningTime.substr(0, 11) }}</span>
</div>
</div>
</div>
</div>
<div class="dialog" v-show="is_dialog">
<img src="@/assets/images/error.png" class="error" @click="is_dialog = false">
<div class="page">
<div class="title">基础信息</div>
<div v-if="leftGetData.text == '应急物资'">
<el-row class="page_text">
<el-col :span="8">储备站</el-col>
<el-col class="text_right" :span="16">{{leftGetData.affiliation}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">仓库类型</el-col>
<el-col class="text_right" :span="16">{{leftGetData.stationType}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">管理员</el-col>
<el-col class="text_right" :span="16">{{leftGetData.guard}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">联系电话</el-col>
<el-col class="text_right" :span="16">{{leftGetData.tel}}</el-col>
</el-row>
<br>
<el-table :data="leftGetData.table" height="45vh" style="width: 100%">
<el-table-column prop="name" label="物资名称" align="center">
</el-table-column>
<el-table-column prop="sku" label="库存" align="center">
</el-table-column>
</el-table>
</div>
<div v-if="leftGetData.text == '应急救援队伍'">
<el-row class="page_text">
<el-col :span="8">救援类型</el-col>
<el-col class="text_right" :span="16">{{leftGetData.rescueType}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">所属单位</el-col>
<el-col class="text_right" :span="16">{{leftGetData.affiliation}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">队长</el-col>
<el-col class="text_right" :span="16">{{leftGetData.teamLeader}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">人数</el-col>
<el-col class="text_right" :span="16">{{leftGetData.number}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">联系电话</el-col>
<el-col class="text_right" :span="16">{{leftGetData.tel}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">地址</el-col>
<el-col class="text_right" :span="16">{{leftGetData.address}}</el-col>
</el-row>
</div>
<div v-if="leftGetData.text == '应急车辆'">
<el-row class="page_text">
<el-col :span="8">车主</el-col>
<el-col class="text_right" :span="16">{{leftGetData.carOwner}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">联系电话</el-col>
<el-col class="text_right" :span="16">{{leftGetData.tel}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">载重量</el-col>
<el-col class="text_right" :span="16">{{leftGetData.load}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">车型</el-col>
<el-col class="text_right" :span="16">{{leftGetData.model}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">车牌号</el-col>
<el-col class="text_right" :span="16">{{leftGetData.number}}</el-col>
</el-row>
</div>
<div v-if="leftGetData.text == '应急专家'">
<el-row class="page_text">
<el-col :span="8">专家姓名</el-col>
<el-col class="text_right" :span="16">{{leftGetData.name}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">专家类型</el-col>
<el-col class="text_right" :span="16">{{leftGetData.trade}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">联系电话</el-col>
<el-col class="text_right" :span="16">{{leftGetData.tel}}</el-col>
</el-row>
</div>
<div v-if="leftGetData.text == '避难场所'">
<el-row class="page_text">
<el-col :span="8">场所名称</el-col>
<el-col class="text_right" :span="16">{{leftGetData.name}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">场所类型</el-col>
<el-col class="text_right" :span="16">{{leftGetData.type}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">联系电话</el-col>
<el-col class="text_right" :span="16">{{leftGetData.tel}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">负责人</el-col>
<el-col class="text_right" :span="16">{{leftGetData.principal}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">面积</el-col>
<el-col class="text_right" :span="16">{{leftGetData.area}}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">容纳人数</el-col>
<el-col class="text_right" :span="16">{{leftGetData.capacity}}</el-col>
</el-row>
</div>
<br>
</div>
</div>
</div>
</template>
<script>
import { randNum } from '@/utils'
import { expert, rescueTeam, refuge, rescueCar, suppliesReserveStation, emergencyWarning, suppliesReserve } from '@/api'
import { createNamespacedHelpers } from 'vuex'
export default {
data() {
return {
dataList: '',
one: require('@/assets/images/yingji_1.png'),
one_1: require('@/assets/images/yingji_1_1.png'),
two: require('@/assets/images/yingji_2.png'),
two_1: require('@/assets/images/yingji_2_2.png'),
three: require('@/assets/images/yingji_3.png'),
three_1: require('@/assets/images/yingji_3_3.png'),
four: require('@/assets/images/yingji_4.png'),
four_1: require('@/assets/images/yingji_4_4.png'),
is_dialog: false,
arrList_type: [],
leftGetData: '',
}
},
mounted() {
this.$once('hook:beforeDestroy', () => {
for (let i of this.arrList_type) {
if (i.is == true) {
this.onClickItem(i)
}
}
})
this.init()
this.emergencyWarning()
},
methods: {
onClickItem(params) {
const app = this.$store.state.appMap
const position = params.position
const url = params.url
if (params.is) {
for (let isII of params.arrObj) {
isII.obj.destroy()
}
} else {
params.arrObj = []
for (let item of position) {
const path = [item.jd, item.wd]
let geoPoint = app.create({
type: "GeoPoint",
coordinates: path,
userData: {
title: params.text,
tip: item.name || item.affiliation,
data: item
},
infoWindow: {
title: params.text,
displayMode: CMAP.DisplayMode.MouseEnter, //点击显示
type: CMAP.InfoWindowType.Standard, //标准indoWindow
style: CMAP.InfoWindowStyle.Default, //默认样式 黑色
pivot: [0.5, 1.3], //界面的轴心，以百分比表示界面轴心位置。[0,0] 代表界面左上；[1,1]
fieldData: [
{
field: "tip",
alias: "站点名称"
}
]
},
renderer: {
type: "image", // image代表创建图片类型的点
url, // 图片的url
size: 4 // 尺寸
}
})
params.arrObj.push({
obj: geoPoint
})
geoPoint.on("click", event => {
this.is_dialog = false
let ev = event.object.userData
this.leftGetData = ev.data
this.leftGetData.text = ev.title
if (ev.title == '应急物资') {
suppliesReserve({
pid: ev.data.id
}).then(res => {
this.leftGetData.table = res
this.is_dialog = true
})
}else {
this.is_dialog = true
}
});
}
}
params.is = !params.is
},
init() {
var suppliesReserveStations = {}
var experts = {}
var rescueTeams = {}
var refuges = {}
var rescueCars = {}
suppliesReserveStation().then(res => {
suppliesReserveStations = {
text: '应急物资',
url: "/image/wu_zi.png",
is: false,
count: res.length,
position: res,
arrObj: [],
}
})
// 应急专家
expert().then(res => {
experts = {
text: '应急专家',
url: "/image/zhuan_jia.png",
is: false,
count: res.length,
position: res,
arrObj: [],
}
})
// 应急队伍
rescueTeam().then(res => {
rescueTeams = {
text: '应急救援队伍',
url: "/image/dui_wu.png",
count: res.length,
is: false,
position: res,
arrObj: [],
}
})
// 应急场所
refuge().then(res => {
refuges = {
text: '避难场所',
url: "/image/chang_suo.png",
is: false,
count: res.length,
position: res,
arrObj: [],
}
})
// 应急车辆
rescueCar().then(res => {
rescueCars = {
text: '应急车辆',
url: "/image/che_liang.png",
is: false,
count: res.length,
position: res,
arrObj: [],
}
})
setTimeout(() => {
this.arrList_type = [
suppliesReserveStations,
experts,
rescueTeams,
refuges,
rescueCars
]
}, 1000);
},
emergencyWarning() {
emergencyWarning().then(res => {
this.dataList = res.map(item => {
// 操作时间
let index1 = item.warningTime.indexOf("T")
let str1 = item.warningTime.substr(0, index1)
let str2 = " " + item.warningTime.slice(index1 + 1, -1)
item.warningTime = str1.concat(str2).substr(0, 16)
if (item.level == '一级预警') {
item.url = this.one,
item.url_1 = this.one_1
}
if (item.level == '二级预警') {
item.url = this.two,
item.url_1 = this.two_1
}
if (item.level == '三级预警') {
item.url = this.three,
item.url_1 = this.three_1
}
if (item.level == '四级预警') {
item.url = this.four,
item.url_1 = this.four_1
}
return item
})
})
}
}
}
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
.yingji_left {
position: absolute;
background: #040624;
width: 18%;
left: 0;
top: 0;
bottom: 10vh;
z-index: 99;
color: #7afffd;
padding: 0 0.5vw;
.title {
height: 10%;
display: flex;
font-size: 2vh;
align-items: center;
margin-bottom: 3%;
}
.top {
height: 45vh;
.page {
height: 85%;
.page_div {
display: inline-block;
text-align: center;
border-radius: 5px;
overflow: hidden;
width: 46%;
margin: 0.5vh 2%;
height: 18%;
cursor: pointer;
background-image: url('~@/assets/images/yingji.png');
background-size: 100% 100%;
.page_div_2 {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
&:hover {
box-shadow: 2px 3px 3px 2px rgba(0, 0, 0, 0.1);
animation-name: pulse;
}
.color {
color: #efb311;
margin-top: 4%;
font-size: 2vh;
}
img {
width: 2vh;
}
}
}
}
.bottom {
height: 35vh;
font-size: 1.5vh;
.page {
height: 89%;
overflow-y: auto;
@include scrollbar;
color: #fff;
.page_div {
margin-bottom: 1.5vh;
margin-right: 0.3vw;
display: flex;
align-items: center;
cursor: pointer;
.page_circle {
display: flex;
align-items: center;
justify-content: center;
width: 1.6vw;
height: 1.6vw;
border-radius: 50%;
background-size: 100% 100%;
margin-right: 0.5vw;
}
.page_div_son {
padding: 0.85vh 0.5vw;
flex: 1;
display: flex;
justify-content: space-between;
background-size: 100% 100%;
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 11vw;
}
}
}
}
}
.dialog {
position: absolute;
left: 100%;
top: 0;
padding: 2vw 1vw;
width: 20vw;
height: 70vh;
background-image: url('~@/assets/images/kuang.png');
background-size: 100% 100%;
color: #fff;
.page_text {
line-height: 2.2;
.text_right {
text-align: right;
}
}
.title {
color: #07c1f7;
}
.error {
position: absolute;
width: 1vw;
top: 1.4vw;
right: 1.4vw;
cursor: pointer;
}
}
.el-table--scrollable-y,
.el-table--scrollable-x,
.el-table__body-wrapper {
@include scrollbar;
}
.el-table {
background: transparent;
}
.el-table th > .cell {
background-color: transparent;
}
.el-table td,
.el-table th,
.el-table th,
.el-table tr {
background: transparent !important;
color: #02d9fd;
font-size: 0.7vw;
}
.el-table td {
border: none !important;
background: #003046 !important;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: transparent;
}
.el-table__body-wrapper {
overflow-y: auto;
}
}
</style>
\ No newline at end of file
src/components/yingji/yingjiRight.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="yingji_right">
<div class="top">
<div class="title">突发事件信息</div>
<div class="page">
<div class="page_input">
<el-input size="mini" placeholder="查看当前企业预案" suffix-icon="el-icon-search"></el-input>
<span class="page_look">查看</span>
</div>
<div class="page_div" v-for="(item, index) in rightList" :key="index">
<span class="icon"></span>
<div class="page_div_right">
<div class="text">{{item.title}}</div>
<div class="func" @click="onClickFunc(item)">应急预案</div>
</div>
</div>
</div>
</div>
<div class="center">
<div class="title">
<span>当前值班人员</span>
<span class="btn" @click="is_info_dialog = true">值班详情</span>
</div>
<div class="page">
<div class="page_div" v-for="(item, index) in rightData.slice(0,2)" :key="index">
<div class="left">{{item.company}}</div>
<div class="right">
<div class="right_block">
{{ item.name }}
值班人员
</div>
<div class="right_block">
{{ item.tel }}
<i class="el-icon-phone"></i>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="title">数据汇总</div>
<div class="page">
<div class="page_div">
<span class="color_white"> <strong>1</strong>处</span>
<img src="@/assets/images/qu_xian.png" alt="">
<span>区县</span>
</div>
<div class="page_div">
<span class="color_white"><strong>6</strong>万</span>
<img src="@/assets/images/ren_kou.png" alt="">
<span>人口</span>
</div>
<div class="page_div">
<span class="color_white"><strong>10</strong>处</span>
<img src="@/assets/images/xiang_zhen.png" alt="">
<span>乡镇</span>
</div>
<div class="page_div">
<span class="color_white"><strong>4.73</strong>万km²</span>
<img src="@/assets/images/mian_ji.png" alt="">
<span>面积</span>
</div>
<div class="page_div">
<span class="color_white"><strong>1.2</strong>/km²</span>
<img src="@/assets/images/mi_du.png" alt="">
<span>人口密度</span>
</div>
<div class="page_div">
<span class="color_white"><strong>60</strong>个</span>
<img src="@/assets/images/qi_ye.png" alt="">
<span>企业</span>
</div>
</div>
</div>
<div class="dialog" v-if="is_dialog">
<img src="@/assets/images/error.png" class="error" @click="onClickError">
<div class="page">
<div class="text">{{ rightListDialog.title }}</div>
<div class="page_div">
<br>
<div class="title">响应级别</div>
<div class="page_line">{{ rightListDialog.level}}</div>
</div>
<div class="page_div">
<div class="title">突发原因</div>
<div class="page_div_text">{{ rightListDialog.reply }}</div>
</div>
<div class="page_div">
<div class="title">响应措施</div>
<div class="page_div_text page_div_text2">{{ rightListDialog.content }}</div>
</div>
<!-- <el-button class="btn" type="warning" @click="onBtn">确认启动</el-button> -->
</div>
</div>
<div class="info_dialog animated animate__backInUp" v-if="is_info_dialog">
<img src="@/assets/images/error.png" class="error" @click="is_info_dialog = false">
<el-table :data="rightData" height="55vh" style="width: 100%">
<el-table-column prop="company" label="企业名称">
</el-table-column>
<el-table-column prop="name" label="值班人员">
</el-table-column>
<el-table-column prop="tel" label="联系电话">
</el-table-column>
<el-table-column prop="time" label="值班时长">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { roster, emergencyPlan } from '@/api'
export default {
data() {
return {
is_dialog: false,
is_info_dialog: false,
one_1: require('@/assets/images/yingji_1_1.png'),
two_1: require('@/assets/images/yingji_2_2.png'),
three_1: require('@/assets/images/yingji_3_3.png'),
four_1: require('@/assets/images/yingji_4_4.png'),
arrList: [],
rightData: [],
rightList: [],
rightListDialog: '',
}
},
mounted() {
var arr = [
{
text: '一级风险',
url: this.one_1,
color: '#FB0B21',
},
{
text: '二级风险',
url: this.two_1,
color: '#FC5004'
},
{
text: '三级风险',
url: this.three_1,
color: '#D9DB12'
},
{
text: '四级风险',
url: this.four_1,
color: '#0533FC'
},
]
this.arrList = arr
emergencyPlan().then(res => {
this.rightList = res
})
roster({name: ''}).then(res => {
this.rightData = res
})
},
methods: {
onClickFunc(e) {
this.rightListDialog = e;
this.is_dialog = true
},
onClickError() {
this.is_dialog = false
},
onBtn() {
this.is_dialog = false
}
}
}
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
.yingji_right {
position: absolute;
background: #040624;
width: 18%;
right: 0;
top: 0;
bottom: 10px;
z-index: 99;
color: #7afffd;
padding: 0 1vw;
.title {
height: 4vh;
display: flex;
font-size: 2vh;
align-items: center;
}
.top {
height: 35vh;
.page {
height: 85%;
.page_input {
display: flex;
align-items: center;
width: 100%;
.page_look {
width: 3vw;
display: flex;
justify-content: center;
cursor: pointer;
}
.el-input__inner {
background-image: url('~@/assets/images/yingji_input.png');
background-color: transparent;
background-size: 100% 100%;
border: none;
}
.el-input__prefix,
.el-input__suffix {
color: #7afffd;
}
}
.page_div {
display: flex;
align-items: center;
width: 100%;
height: 15%;
.icon {
width: 1.4vw;
height: 1.4vw;
margin-right: 0.5vw;
background-image: url('~@/assets/images/yingji_icon.png');
background-size: 100% 100%;
}
.page_div_right {
flex: 1;
display: flex;
justify-content: space-between;
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 9vw;
}
.func {
color: #efb311;
cursor: pointer;
&:hover {
color: #fff;
}
}
}
}
}
}
.center {
height: 23vh;
font-size: 1.5vh;
.title {
display: flex;
justify-content: space-between;
}
.btn {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1vh;
padding: 0.5vh 0;
border-radius: 4px;
background-image: url('~@/assets/images/yingji_input.png');
background-size: 100% 100%;
width: 3vw;
}
.page {
height: 19vh;
.page_div {
display: flex;
height: 8vh;
margin-bottom: 2%;
background-image: url('~@/assets/images/yingji_block.png');
background-size: 100% 100%;
.left {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
color: #fff;
}
.right {
padding-top: 5%;
color: #d5dafa;
.right_block {
display: flex;
align-items: center;
height: 40%;
}
}
}
}
}
.bottom {
height: 32vh;
overflow: hidden;
.page {
margin-top: 1vh;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page_div {
margin-bottom: 3vh;
text-align: center;
display: flex;
flex-direction: column;
width: 30%;
justify-content: center;
cursor: pointer;
.color_white {
color: #fff;
}
img {
width: 100%;
margin: 1vh 0;
}
strong {
font-size: 2.2vh;
color: #efb311;
}
}
}
.dialog {
position: absolute;
right: 100%;
top: 0;
padding: 2vw 1vw;
width: 20vw;
height: 82vh;
background-image: url('~@/assets/images/kuang.png');
background-size: 100% 100%;
color: #fff;
.error {
position: absolute;
width: 1vw;
top: 1.4vw;
right: 1.4vw;
cursor: pointer;
}
.page_line {
color: #fff;
}
.page_div {
color: #07c1f7;
font-size: 1.5vh;
margin-bottom: 1vh;
.page_div_text {
line-height: 1.7;
color: #fff;
}
.page_div_text2 {
height: 37vh;
overflow-y: auto;
@include scrollbar;
}
}
.text {
margin-top: 2vh;
text-align: center;
}
.btn {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
margin: auto;
background-image: linear-gradient(#f97f21, #ffa921);
}
}
.info_dialog {
position: absolute;
border-radius: 5px;
top: 4vh;
right: 110%;
width: 40vw;
height: 65vh;
padding: 4vh 1vw 2vh;
background-color: #040624;
.error {
cursor: pointer;
position: absolute;
right: 1vw;
top: 1vw;
}
.el-pagination {
text-align: right;
}
.el-table--scrollable-y,
.el-table--scrollable-x,
.el-table__body-wrapper {
@include scrollbar;
}
.el-table {
background: transparent;
}
.el-table th > .cell {
background-color: transparent;
}
.el-table td,
.el-table th,
.el-table th,
.el-table tr {
background: transparent !important;
color: #02d9fd;
font-size: 0.7vw;
}
.el-table td {
border: none !important;
background: #003046 !important;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: transparent;
}
.el-table__body-wrapper {
overflow-y: auto;
}
}
}
</style>
\ No newline at end of file
src/components/yinhuan/yinhuan_left.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="yingji_left">
<div class="top">
<div class="title">应急资源分类</div>
<div class="page">
<div v-for="(item, index) in arrList_type" :key="index" class="page_div animated">
<div class="page_div_2">
<span>{{ item.text }}</span>
<span class="color" @click.stop="onClickItem(item)">
<img v-if="item.is" src="@/assets/images/yingji_eye.png" alt="" />
<img v-if="!item.is" src="@/assets/images/yingji_eye_off.png" alt="" />
{{ item.count }}处
</span>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="title">隐患信息</div>
<div class="page">
<div class="page_div" v-for="(item, index) in dataList" :key="index">
<!-- <span class="page_circle" :style="{backgroundImage: 'url(' + item.url +')'}">{{ index + 1 }}</span> -->
<div class="page_div_son" :style="{ backgroundImage: 'url(' + item.url_1 + ')' }">
<span class="text" :title="item.message">{{ item.message }}</span>
<span class="time"> {{ item.warningTime.substr(0, 11) }}</span>
</div>
</div>
</div>
</div>
<div class="dialog" v-show="is_dialog">
<img src="@/assets/images/error.png" class="error" @click="is_dialog = false" />
<div class="page">
<div class="title">基础信息</div>
<div v-if="leftGetData.text == '应急物资'">
<el-row class="page_text">
<el-col :span="8">储备站</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.affiliation }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">仓库类型</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.stationType }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">管理员</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.guard }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">联系电话</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
</el-row>
<br />
<el-table :data="leftGetData.table" height="45vh" style="width: 100%">
<el-table-column prop="name" label="物资名称" align="center"> </el-table-column>
<el-table-column prop="sku" label="库存" align="center"> </el-table-column>
</el-table>
</div>
<div v-if="leftGetData.text == '应急救援队伍'">
<el-row class="page_text">
<el-col :span="8">救援类型</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.rescueType }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">所属单位</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.affiliation }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">队长</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.teamLeader }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">人数</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.number }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">联系电话</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">地址</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.address }}</el-col>
</el-row>
</div>
<div v-if="leftGetData.text == '应急车辆'">
<el-row class="page_text">
<el-col :span="8">车主</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.carOwner }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">联系电话</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">载重量</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.load }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">车型</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.model }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">车牌号</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.number }}</el-col>
</el-row>
</div>
<div v-if="leftGetData.text == '应急专家'">
<el-row class="page_text">
<el-col :span="8">专家姓名</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.name }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">专家类型</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.trade }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">联系电话</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
</el-row>
</div>
<div v-if="leftGetData.text == '避难场所'">
<el-row class="page_text">
<el-col :span="8">场所名称</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.name }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">场所类型</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.type }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">联系电话</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">负责人</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.principal }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">面积</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.area }}</el-col>
</el-row>
<el-row class="page_text">
<el-col :span="8">容纳人数</el-col>
<el-col class="text_right" :span="16">{{ leftGetData.capacity }}</el-col>
</el-row>
</div>
<br />
</div>
</div>
</div>
</template>
<script>
import { randNum } from '@/utils'
import { expert, rescueTeam, refuge, rescueCar, suppliesReserveStation, emergencyWarning, suppliesReserve } from '@/api'
import { createNamespacedHelpers } from 'vuex'
export default {
data() {
return {
dataList: '',
one: require('@/assets/images/yingji_1.png'),
one_1: require('@/assets/images/yingji_1_1.png'),
two: require('@/assets/images/yingji_2.png'),
two_1: require('@/assets/images/yingji_2_2.png'),
three: require('@/assets/images/yingji_3.png'),
three_1: require('@/assets/images/yingji_3_3.png'),
four: require('@/assets/images/yingji_4.png'),
four_1: require('@/assets/images/yingji_4_4.png'),
is_dialog: false,
arrList_type: [],
leftGetData: '',
}
},
mounted() {
this.$once('hook:beforeDestroy', () => {
for (let i of this.arrList_type) {
if (i.is == true) {
this.onClickItem(i)
}
}
})
this.init()
this.emergencyWarning()
},
methods: {
onClickItem(params) {
const app = this.$store.state.appMap
const position = params.position
const url = params.url
if (params.is) {
for (let isII of params.arrObj) {
isII.obj.destroy()
}
} else {
params.arrObj = []
for (let item of position) {
const path = [item.jd, item.wd]
let geoPoint = app.create({
type: 'GeoPoint',
coordinates: path,
userData: {
title: params.text,
tip: item.name || item.affiliation,
data: item,
},
infoWindow: {
title: params.text,
displayMode: CMAP.DisplayMode.MouseEnter, //点击显示
type: CMAP.InfoWindowType.Standard, //标准indoWindow
style: CMAP.InfoWindowStyle.Default, //默认样式 黑色
pivot: [0.5, 1.3], //界面的轴心，以百分比表示界面轴心位置。[0,0] 代表界面左上；[1,1]
fieldData: [
{
field: 'tip',
alias: '站点名称',
},
],
},
renderer: {
type: 'image', // image代表创建图片类型的点
url, // 图片的url
size: 4, // 尺寸
},
})
params.arrObj.push({
obj: geoPoint,
})
geoPoint.on('click', event => {
this.is_dialog = false
let ev = event.object.userData
this.leftGetData = ev.data
this.leftGetData.text = ev.title
if (ev.title == '应急物资') {
suppliesReserve({
pid: ev.data.id,
}).then(res => {
this.leftGetData.table = res
this.is_dialog = true
})
} else {
this.is_dialog = true
}
})
}
}
params.is = !params.is
},
init() {
var suppliesReserveStations = {}
var experts = {}
var rescueTeams = {}
var refuges = {}
var rescueCars = {}
suppliesReserveStation().then(res => {
suppliesReserveStations = {
text: '应急物资',
url: '/image/wu_zi.png',
is: false,
count: res.length,
position: res,
arrObj: [],
}
})
// 应急专家
expert().then(res => {
experts = {
text: '应急专家',
url: '/image/zhuan_jia.png',
is: false,
count: res.length,
position: res,
arrObj: [],
}
})
// 应急队伍
rescueTeam().then(res => {
rescueTeams = {
text: '应急救援队伍',
url: '/image/dui_wu.png',
count: res.length,
is: false,
position: res,
arrObj: [],
}
})
// 应急场所
refuge().then(res => {
refuges = {
text: '避难场所',
url: '/image/chang_suo.png',
is: false,
count: res.length,
position: res,
arrObj: [],
}
})
// 应急车辆
rescueCar().then(res => {
rescueCars = {
text: '应急车辆',
url: '/image/che_liang.png',
is: false,
count: res.length,
position: res,
arrObj: [],
}
})
setTimeout(() => {
this.arrList_type = [suppliesReserveStations, experts, rescueTeams, refuges, rescueCars]
}, 1000)
},
emergencyWarning() {
emergencyWarning().then(res => {
this.dataList = res.map(item => {
// 操作时间
let index1 = item.warningTime.indexOf('T')
let str1 = item.warningTime.substr(0, index1)
let str2 = ' ' + item.warningTime.slice(index1 + 1, -1)
item.warningTime = str1.concat(str2).substr(0, 16)
if (item.level == '一级预警') {
;(item.url = this.one), (item.url_1 = this.one_1)
}
if (item.level == '二级预警') {
;(item.url = this.two), (item.url_1 = this.two_1)
}
if (item.level == '三级预警') {
;(item.url = this.three), (item.url_1 = this.three_1)
}
if (item.level == '四级预警') {
;(item.url = this.four), (item.url_1 = this.four_1)
}
return item
})
})
},
},
}
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
.yingji_left {
position: absolute;
background: #040624;
width: 18%;
left: 0;
top: 0;
bottom: 10vh;
z-index: 99;
color: #7afffd;
padding: 0 0.5vw;
.title {
height: 10%;
display: flex;
font-size: 2vh;
align-items: center;
margin-bottom: 3%;
}
.top {
height: 45vh;
.page {
height: 85%;
.page_div {
display: inline-block;
text-align: center;
border-radius: 5px;
overflow: hidden;
width: 46%;
margin: 0.5vh 2%;
height: 18%;
cursor: pointer;
background-image: url('~@/assets/images/yingji.png');
background-size: 100% 100%;
.page_div_2 {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
&:hover {
box-shadow: 2px 3px 3px 2px rgba(0, 0, 0, 0.1);
animation-name: pulse;
}
.color {
color: #efb311;
margin-top: 4%;
font-size: 2vh;
}
img {
width: 2vh;
}
}
}
}
.bottom {
height: 35vh;
font-size: 1.5vh;
.page {
height: 89%;
overflow-y: auto;
@include scrollbar;
color: #fff;
.page_div {
margin-bottom: 1.5vh;
margin-right: 0.3vw;
display: flex;
align-items: center;
cursor: pointer;
.page_circle {
display: flex;
align-items: center;
justify-content: center;
width: 1.6vw;
height: 1.6vw;
border-radius: 50%;
background-size: 100% 100%;
margin-right: 0.5vw;
}
.page_div_son {
padding: 0.85vh 0.5vw;
flex: 1;
display: flex;
justify-content: space-between;
background-size: 100% 100%;
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 11vw;
}
}
}
}
}
.dialog {
position: absolute;
left: 100%;
top: 0;
padding: 2vw 1vw;
width: 20vw;
height: 70vh;
background-image: url('~@/assets/images/kuang.png');
background-size: 100% 100%;
color: #fff;
.page_text {
line-height: 2.2;
.text_right {
text-align: right;
}
}
.title {
color: #07c1f7;
}
.error {
position: absolute;
width: 1vw;
top: 1.4vw;
right: 1.4vw;
cursor: pointer;
}
}
.el-table--scrollable-y,
.el-table--scrollable-x,
.el-table__body-wrapper {
@include scrollbar;
}
.el-table {
background: transparent;
}
.el-table th > .cell {
background-color: transparent;
}
.el-table td,
.el-table th,
.el-table th,
.el-table tr {
background: transparent !important;
color: #02d9fd;
font-size: 0.7vw;
}
.el-table td {
border: none !important;
background: #003046 !important;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: transparent;
}
.el-table__body-wrapper {
overflow-y: auto;
}
}
</style>
src/components/yinhuan/yinhuan_right.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="yingji_right">
<div class="top">
<div class="title">突发事件信息</div>
<div class="page">
<div class="page_input">
<el-input size="mini" placeholder="查看当前企业预案" suffix-icon="el-icon-search"></el-input>
<span class="page_look">查看</span>
</div>
<div class="page_div" v-for="(item, index) in rightList" :key="index">
<span class="icon"></span>
<div class="page_div_right">
<div class="text">{{ item.title }}</div>
<div class="func" @click="onClickFunc(item)">应急预案</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="title">重大隐患说明</div>
<div class="page">
<div class="page--line" v-for="(item, index) in contextList" :key="index">
<span>{{ item.title }}</span>
<span @click="onContextLook(item)" style="cursor: pointer;">查看</span>
</div>
</div>
</div>
<div class="center">
<div class="title">
<span>重大安全生产事故隐患分析</span>
</div>
</div>
<div class="dialog" v-if="is_dialog">
<img src="@/assets/images/error.png" class="error" @click="onClickError" />
<div class="page">
<div class="text">{{ rightListDialog.title }}</div>
<div class="page_div">
<br />
<div class="title">响应级别</div>
<div class="page_line">{{ rightListDialog.level }}</div>
</div>
<div class="page_div">
<div class="title">突发原因</div>
<div class="page_div_text">{{ rightListDialog.reply }}</div>
</div>
<div class="page_div">
<div class="title">响应措施</div>
<div class="page_div_text page_div_text2">{{ rightListDialog.content }}</div>
</div>
<!-- <el-button class="btn" type="warning" @click="onBtn">确认启动</el-button> -->
</div>
</div>
<div class="info_dialog animated animate__backInUp" style="height: auto;" v-if="is_info_dialog_context">
<img src="@/assets/images/error.png" class="error" @click="is_info_dialog_context = false" />
<div class="context_wrap">
<div class="context_wrap--title">{{ contextListParams.title }}</div>
<br />
<div class="context_wrap--line" v-for="(item, index) in contextListParams.context" :key="index">{{ item.msg }}</div>
</div>
</div>
</div>
</template>
<script>
import { emergencyPlan } from '@/api'
import { contextList } from '@/json/yinhuan.js'
export default {
data() {
return {
is_dialog: false,
is_info_dialog_context: false,
one_1: require('@/assets/images/yingji_1_1.png'),
two_1: require('@/assets/images/yingji_2_2.png'),
three_1: require('@/assets/images/yingji_3_3.png'),
four_1: require('@/assets/images/yingji_4_4.png'),
arrList: [],
rightList: [],
rightListDialog: '',
contextList: [],
contextListParams: [],
}
},
mounted() {
var arr = [
{
text: '一级风险',
url: this.one_1,
color: '#FB0B21',
},
{
text: '二级风险',
url: this.two_1,
color: '#FC5004',
},
{
text: '三级风险',
url: this.three_1,
color: '#D9DB12',
},
{
text: '四级风险',
url: this.four_1,
color: '#0533FC',
},
]
this.contextList = contextList
console.log(contextList)
this.arrList = arr
emergencyPlan().then(res => {
this.rightList = res
})
},
methods: {
onClickFunc(e) {
this.rightListDialog = e
this.is_dialog = true
},
onClickError() {
this.is_dialog = false
},
onBtn() {
this.is_dialog = false
},
onContextLook(e) {
this.is_info_dialog_context = true
this.contextListParams = e
},
},
}
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
.yingji_right {
position: absolute;
background: #040624;
width: 18%;
right: 0;
top: 0;
bottom: 10px;
z-index: 99;
color: #7afffd;
padding: 0 1vw;
.title {
height: 4vh;
display: flex;
font-size: 2vh;
align-items: center;
}
.top {
height: 35vh;
.page {
height: 85%;
.page_input {
display: flex;
align-items: center;
width: 100%;
.page_look {
width: 3vw;
display: flex;
justify-content: center;
cursor: pointer;
}
.el-input__inner {
background-image: url('~@/assets/images/yingji_input.png');
background-color: transparent;
background-size: 100% 100%;
border: none;
}
.el-input__prefix,
.el-input__suffix {
color: #7afffd;
}
}
.page_div {
display: flex;
align-items: center;
width: 100%;
height: 15%;
.icon {
width: 1.4vw;
height: 1.4vw;
margin-right: 0.5vw;
background-image: url('~@/assets/images/yingji_icon.png');
background-size: 100% 100%;
}
.page_div_right {
flex: 1;
display: flex;
justify-content: space-between;
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 9vw;
}
.func {
color: #efb311;
cursor: pointer;
&:hover {
color: #fff;
}
}
}
}
}
}
.center {
height: 23vh;
font-size: 1.5vh;
.title {
display: flex;
justify-content: space-between;
}
.btn {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1vh;
padding: 0.5vh 0;
border-radius: 4px;
background-image: url('~@/assets/images/yingji_input.png');
background-size: 100% 100%;
width: 3vw;
}
.page {
height: 19vh;
.page_div {
display: flex;
height: 8vh;
margin-bottom: 2%;
background-image: url('~@/assets/images/yingji_block.png');
background-size: 100% 100%;
.left {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
color: #fff;
}
.right {
padding-top: 5%;
color: #d5dafa;
.right_block {
display: flex;
align-items: center;
height: 40%;
}
}
}
}
}
.bottom {
height: 32vh;
overflow: hidden;
.page {
&--line {
display: flex;
width: 100%;
justify-content: space-between;
line-height: 2;
}
}
}
.dialog {
position: absolute;
right: 100%;
top: 0;
padding: 2vw 1vw;
width: 20vw;
height: 82vh;
background-image: url('~@/assets/images/kuang.png');
background-size: 100% 100%;
color: #fff;
.error {
position: absolute;
width: 1vw;
top: 1.4vw;
right: 1.4vw;
cursor: pointer;
}
.page_line {
color: #fff;
}
.page_div {
color: #07c1f7;
font-size: 1.5vh;
margin-bottom: 1vh;
.page_div_text {
line-height: 1.7;
color: #fff;
}
.page_div_text2 {
height: 37vh;
overflow-y: auto;
@include scrollbar;
}
}
.text {
margin-top: 2vh;
text-align: center;
}
.btn {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
margin: auto;
background-image: linear-gradient(#f97f21, #ffa921);
}
}
.info_dialog {
position: absolute;
border-radius: 5px;
top: 4vh;
right: 110%;
width: 40vw;
height: 65vh;
padding: 4vh 1vw 2vh;
background-color: #040624;
.error {
cursor: pointer;
position: absolute;
right: 1vw;
top: 1vw;
}
.el-pagination {
text-align: right;
}
.el-table--scrollable-y,
.el-table--scrollable-x,
.el-table__body-wrapper {
@include scrollbar;
}
.el-table {
background: transparent;
}
.el-table th > .cell {
background-color: transparent;
}
.el-table td,
.el-table th,
.el-table th,
.el-table tr {
background: transparent !important;
color: #02d9fd;
font-size: 0.7vw;
}
.el-table td {
border: none !important;
background: #003046 !important;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: transparent;
}
.el-table__body-wrapper {
overflow-y: auto;
}
}
.context_wrap {
color: #fff;
height: auto;
overflow-y: auto;
&--title {
text-align: center;
font-size: 2vh;
}
&--line {
line-height: 1.8;
}
}
}
</style>
src/json/yinhuan.js 0 → 100644
View file @ 5223d64b
export const contextList = [
{
title: '地下矿山重大生产安全事故隐患',
context: [
{
msg: '（一）安全出口不符合国家标准、行业标准或设计要求。',
},
{
msg: '（二）使用国家明令禁止使用的设备、材料和工艺。',
},
{
msg: '（三）相邻矿山的井巷相互贯通。',
},
{
msg: '（四）没有及时填绘图，现状图与实际严重不符。',
},
{
msg: '（五）露天转地下开采，地表与井下形成贯通，未按照设计要求采取相应措施。',
},
{
msg: '（六）地表水系穿过矿区，未按照设计要求采取防治水措施。',
},
{
msg: '（七）排水系统与设计要求不符，导致排水能力降低。',
},
{
msg: '（八）井口标高在当地历史最高洪水位1米以下，未采取相应防护措施。',
},
{
msg: '（九）水文地质类型为中等及复杂的矿井没有设立专门防治水机构、配备探放水作业队伍或配齐专用探放水设备。',
},
{
msg: '（十）水文地质类型复杂的矿山关键巷道防水门设置与设计要求不符。',
},
{
msg: '（十一）有自燃发火危险的矿山，未按照国家标准、行业标准或设计采取防火措施。',
},
{
msg: '（十二）在突水威胁区域或可疑区域进行采掘作业，未进行探放水。',
},
{
msg: '（十三）受地表水倒灌威胁的矿井在强降雨天气或其来水上游发生洪水期间，不实施停产撤人。',
},
{
msg: '（十四）相邻矿山开采错动线重叠，未按照设计要求采取相应措施。',
},
{
msg: '（十五）开采错动线以内存在居民村庄，或存在重要设备设施时未按照设计要求采取相应措施。',
},
{
msg: '（十六）擅自开采各种保安矿柱或其形式及参数劣于设计值。',
},
{
msg: '（十七）未按照设计要求对生产形成的采空区进行处理。',
},
{
msg: '（十八）具有严重地压条件，未采取预防地压灾害措施。',
},
{
msg: '（十九）巷道或者采场顶板未按照设计要求采取支护措施。',
},
{
msg: '（二十）矿井未按照设计要求建立机械通风系统，或风速、风量、风质不符合国家标准或行业标准的要求。',
},
{
msg: '（二十一）未配齐具有矿用产品安全标志的便携式气体检测报警仪和自救器。',
},
{
msg: '（二十二）提升系统的防坠器、阻车器等安全保护装置或信号闭锁措施失效；未定期试验或检测检验。',
},
{
msg: '（二十三）一级负荷没有采用双回路或双电源供电，或单一电源不能满足全部一级负荷需要。',
},
{
msg: '（二十四）地面向井下供电的变压器或井下使用的普通变压器采用中性接地。',
},
],
},
{
title: '露天矿山重大生产安全事故隐患',
context: [
{
msg: '（一）地下转露天开采，未探明采空区或未对采空区实施专项安全技术措施。',
},
{
msg: '（二）使用国家明令禁止使用的设备、材料和工艺。',
},
{
msg: '（三）未采用自上而下、分台阶或分层的方式进行开采。',
},
{
msg: '（四）工作帮坡角大于设计工作帮坡角，或台阶（分层）高度超过设计高度。',
},
{
msg: '（五）擅自开采或破坏设计规定保留的矿柱、岩柱和挂帮矿体',
},
{
msg: '（六）未按国家标准或行业标准对采场边坡、排土场稳定性进行评估。',
},
{
msg: '（七）高度200米及以上的边坡或排土场未进行在线监测。',
},
{
msg: '（八）边坡存在滑移现象。',
},
{
msg: '（九）上山道路坡度大于设计坡度10%以上。',
},
{
msg: '（十）封闭圈深度30米及以上的凹陷露天矿山，未按照设计要求建设防洪、排洪设施。',
},
{
msg: '（十一）雷雨天气实施爆破作业。',
},
{
msg: '（十二）危险级排土场。',
},
],
},
{
title: '尾矿库重大生产安全事故隐患',
context: [
{
msg: '（一）库区和尾矿坝上存在未按批准的设计方案进行开采、挖掘、爆破等活动。'
},
{
msg: '（二）坝体出现贯穿性横向裂缝，且出现较大范围管涌、流土变形，坝体出现深层滑动迹象。',
},
{
msg: '（三）坝外坡坡比陡于设计坡比。',
},
{
msg: '（四）坝体超过设计坝高，或超设计库容储存尾矿。',
},
{
msg: '（五）尾矿堆积坝上升速率大于设计堆积上升速率。',
},
{
msg: '（六）未按法规、国家标准或行业标准对坝体稳定性进行评估。',
},
{
msg: '（七）浸润线埋深小于控制浸润线埋深。',
},
{
msg: '（八）安全超高和干滩长度小于设计规定。',
},
{
msg: '（九）排洪系统构筑物严重堵塞或坍塌，导致排水能力急剧下降。',
},
{
msg: '（十）设计以外的尾矿、废料或者废水进库。',
},
{
msg: '（十一）多种矿石性质不同的尾砂混合排放时，未按设计要求进行排放。',
},
{
msg: '（十二）冬季未按照设计要求采用冰下放矿作业。',
},
]
},
{
title: '金属冶炼',
context: [
{
msg: '1.会议室、活动室、休息室、更衣室等场所设置在铁水、钢水与液渣吊运影响的范围内。',
},
{
msg: '2.吊运铁水、钢水与液渣起重机不符合冶金起重机的相关要求；炼钢厂在吊运重罐铁水、钢水或液渣时，未使用固定式龙门钩的铸造起重机，龙门钩横梁、耳轴销和吊钩、钢丝绳及其端头固定零件，未进行定期检查，发现问题未及时整改。',
},
{
msg: '3.盛装铁水、钢水与液渣的罐（包、盆）等容器耳轴未按国家标准规定要求定期进行探伤检测。',
},
{
msg: '4.冶炼、熔炼、精炼生产区域的安全坑内及熔体泄漏、喷溅影响范围内存在积水，放置有易燃易爆物品。金属铸造、连铸、浇铸流程未设置铁水罐、钢水罐、溢流槽、中间溢流罐等高温熔融金属紧急排放和应急储存设施。',
},
{
msg: '5.炉、窑、槽、罐类设备本体及附属设施未定期检查，出现严重焊缝开裂、腐蚀、破损、衬砖损坏、壳体发红及明显弯曲变形等未报修或报废，仍继续使用。',
},
{
msg: '6.氧枪等水冷元件未配置出水温度与进出水流量差检测、报警装置及温度监测，未与炉体倾动、氧气开闭等联锁。',
},
{
msg: '7.煤气柜建设在居民稠密区，未远离大型建筑、仓库、通信和交通枢纽等重要设施；附属设备设施未按防火防爆要求配置防爆型设备；柜顶未设置防雷装置。',
},
{
msg: '8.煤气区域的值班室、操作室等人员较集中的地方，未设置固定式一氧化碳监测报警装置。',
},
{
msg: '9.高炉、转炉、加热炉、煤气柜、除尘器等设施的煤气管道未设置可靠隔离装置和吹扫设施。',
},
{
msg: '10.煤气分配主管上支管引接处，未设置可靠的切断装置；车间内各类燃气管线，在车间入口未设置总管切断阀。',
},
{
msg: '11.金属冶炼企业主要负责人和安全生产管理人员未依法经考核合格。',
},
]
},
{
title: '有色行业',
context: [
{
msg: '1.吊运铜水等熔融有色金属及渣的起重机不符合冶金起重机的相关要求；横梁、耳轴销和吊钩、钢丝绳及其端头固定零件，未进行定期检查，发现问题未及时处理。',
},
{
msg: '2.会议室、活动室、休息室、更衣室等场所设置在铜水等熔融有色金属及渣的吊运影响范围内。',
},
{
msg: '3.盛装铜水等熔融有色金属及渣的罐（包、盆）等容器耳轴未定期进行检测。',
},
{
msg: '4.铜水等高温熔融有色金属冶炼、精炼、铸造生产区域的安全坑内及熔体泄漏、喷溅影响范围内存在非生产性积水；熔体容易喷溅到的区域，放置有易燃易爆物品。',
},
{
msg:'5.铜水等熔融有色金属铸造、浇铸流程未设置紧急排放和应急储存设施。' ,
},
{
msg: '6.高温工作的熔融有色金属冶炼炉窑、铸造机、加热炉及水冷元件未设置应急冷却水源等冷却应急处置措施。',
},
{
msg: '7.冶炼炉窑的水冷元件未配置温度、进出水流量差检测及报警装置；未设置防止冷却水大量进入炉内的安全设施（如：快速切断阀等）。',
},
{
msg: '8.炉、窑、槽、罐类设备本体及附属设施未定期检查，出现严重焊缝开裂、腐蚀、破损、衬砖损坏、壳体发红及明显弯曲变形等未报修或报废，仍继续使用。',
},
{
msg: '9.使用煤气（天然气）的烧嘴等燃烧装置，未设置防突然熄火或点火失败的快速切断阀，以切断煤气（天然气）。',
},
{
msg: '10.金属冶炼企业主要负责人和安全生产管理人员未依法经考核合格。',
},
]
},
{
title: '涉爆粉尘',
context: [
{
msg: '1.粉尘爆炸危险场所设置在非框架结构的多层建构筑物内，或与居民区、员工宿舍、会议室等人员密集场所安全距离不足。',
},
{
msg: '2.可燃性粉尘与可燃气体等易加剧爆炸危险的介质共用一套除尘系统，不同防火分区的除尘系统互联互通。',
},
{
msg:'3.干式除尘系统未规范采用泄爆、隔爆、惰化、抑爆等任一种控爆措施。' ,
},
{
msg: '4.除尘系统采用正压吹送粉尘，且未采取可靠的防范点燃源的措施。',
},
{
msg: '5.除尘系统采用粉尘沉降室除尘，或者采用干式巷道式构筑物作为除尘风道。',
},
{
msg: '6.铝镁等金属粉尘及木质粉尘的干式除尘系统未规范设置锁气卸灰装置。',
},
{
msg: '7.粉尘爆炸危险场所的20区未使用防爆电气设备设施。',
},
{
msg: '8.在粉碎、研磨、造粒等易于产生机械点火源的工艺设备前，未按规范设置去除铁、石等异物的装置。',
},
{
msg: '9.木制品加工企业，与砂光机连接的风管未规范设置火花探测报警装置。',
},
{
msg: '10.未制定粉尘清扫制度，作业现场积尘未及时规范清理。',
},
]
},
{
title: '涉氨制冷',
context: [
{
msg: '1.包装间、分割间、产品整理间等人员较多生产场所的空调系统采用氨直接蒸发制冷系统。',
},
{
msg: '2.快速冻结装置未设置在单独的作业间内，且作业间内作业人员数量超过9人。',
},
]
},
{
title: '有限空间',
context: [
{
msg: '1.未对有限空间作业场所进行辨识，并设置明显安全警示标志。',
},
{
msg: '2.未落实作业审批制度，擅自进入有限空间作业。',
},
]
}
]
src/main.js 0 → 100644
View file @ 5223d64b
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 样式初始化
import 'normalize.css'
// 引入element ui 框架
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 引入动画
import animate from 'animate.css'
Vue.use(animate);
import axios from 'axios'
Vue.prototype.axios = axios
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
\ No newline at end of file
src/mixins/index.js 0 → 100644
View file @ 5223d64b
export default {
methods: {
// 关闭左侧信息弹框
onClickDel() {
this.$store.commit("SET_IS_LEFT", false);
},
// 展示三维
onClickthree() {
let title = this.$store.state.compony_info.name;
if (title == '锡林矿业') {
window.open('http://dwqdp.jingkongyun.com/three/?id=5', '_blank');
} else if (title == '融冠矿业') {
window.open('http://dwqdp.jingkongyun.com/three/?id=4', '_blank');
} else if (title == '钨矿') {
window.open('http://dwqdp.jingkongyun.com/three/?id=3', '_blank');
} else if (title == '山金阿尔哈达') {
window.open('http://dwqdp.jingkongyun.com/three/?id=2', '_blank');
} else if (title == '山金白音呼布') {
window.open('http://dwqdp.jingkongyun.com/three/?id=1', '_blank');
} else {
this.$notify.error({
title: '错误',
message: '开发中...',
type: 'warning'
});
}
},
}
}
\ No newline at end of file
src/router/index.js 0 → 100644
View file @ 5223d64b
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/home',
name: 'home',
components: {
default: () => import("../views/Home.vue"),
},
children: [
{
path: '/',
name: 'base',
components: {
homeHeader: () => import("@/components/comm/CommHeader.vue"),
homeLeft: () => import("@/components/base/BaseLeft.vue"),
homeRight: () => import("@/components/base/BaseRight.vue"),
},
},
]
},
// {
// path: '/',
// name: 'home',
// components: {
// default: () => import('../views/Home.vue')
// }
// }
{
path: '/',
name: 'login',
components: {
default: () => import('../views/Login.vue')
}
}
]
const router = new VueRouter({
routes
})
export default router
\ No newline at end of file
src/store/index.js 0 → 100644
View file @ 5223d64b
import Vue from 'vue'
import Vuex from 'vuex'
import {
dictDetail
} from '@/api'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
title: '',
appMap: '', // 地图
mouseTool: '', // 面积测量
appTileLayer: '', //
select_item: [], // 选项卡
isLeft: false, // 显示 左边栏
isRight: false, // 显示 右边栏
isLtkDialog: false, // 露天矿 弹框
isDxkqDialog: false, // 地下矿区 弹框
compony_info: '', // 企业信息
BaseLeftIndex: 1, // 判断模块
is_show_huan_jing_jian_ce: false, // 尾矿库环境监测
is_show_huan_jing_jian_ce_table: false, // 尾矿库环境监测表格
showItemCharts: false, // 尾矿库六大项可视化
},
mutations: {
// 企业类型
SET_TYPE(state, value) {
state.select_item = value
},
SET_TITLE(state, value) {
state.title = value;
},
SET_IS_LEFT(state, value) {
state.isLeft = value
},
SET_IS_Right(state, value) {
state.isRight = value
},
SET_APP_MAP(state, value) {
state.appMap = value
},
SET_MOUSETOOL(state, value) {
state.mouseTool = value
},
set_appTileLayer(state, value) {
state.appTileLayer = value
},
set_compony_info(state, value) {
state.compony_info = value
},
set_BaseLeftIndex(state, value) {
state.BaseLeftIndex = value
},
set_isLtkDialog(state, value) {
state.isLtkDialog = value
},
set_isDxkqDialog(state, value) {
state.isDxkqDialog = value
},
// 尾矿库环境监测
set_is_show_huan_jing_jian_ce(state, value) {
state.is_show_huan_jing_jian_ce = value
},
// 尾矿库环境监测表格
set_is_show_huan_jing_jian_ce_table(state, value) {
state.is_show_huan_jing_jian_ce_table = value
},
setShowItemCharts(state, value) {
state.showItemCharts = value
}
},
actions: {
// 企业类型
typeOptions({
commit
}, userinfo) {
const params = {
page: 0,
size: 999,
sort: 'dictSort,asc',
sort: 'id,desc',
dictName: '所属行业',
}
dictDetail(params).then(res => {
let select_item = res.content.map(item => {
return {
value: item.label,
label: item.label,
id: item.id
}
})
commit('SET_TYPE', select_item)
})
}
}
})
\ No newline at end of file
src/utils/eventbus.js 0 → 100644
View file @ 5223d64b
import Vue from 'vue'
export default new Vue({
name: 'eventbus'
})
\ No newline at end of file
src/utils/index.js 0 → 100644
View file @ 5223d64b
// 日期格式化
// time: 时间戳
// format: yyyy-MM-dd HH:mm:ss 时间格式 或者传入 new Date()
// 默认 当前时间
export function timeParse(time = new Date(), format = 'yyyy-MM-dd HH:mm:ss') {
if (time === "" || time === undefined || time === null) {
return "";
}
var t = new Date(time);
t =
t.getFullYear() > 0 ?
t :
new Date(Date.parse(time.replace(/-/g, "/"))); // Safari 出现日期转换的问题
var tf = function (i) {
return (i < 10 ? "0" : "") + i;
};
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case "yyyy":
return tf(t.getFullYear());
case "MM":
return tf(t.getMonth() + 1);
case "mm":
return tf(t.getMinutes());
case "dd":
return tf(t.getDate());
case "HH":
return tf(t.getHours());
case "ss":
return tf(t.getSeconds());
}
});
}
// 数组去重
export function unique(value) {
const newArray = [];
let isRepeat;
for (let i = 0; i < value.length; i++) {
isRepeat = false;
for (let j = 0; j < newArray.length; j++) {
if (value[i] === newArray[j]) {
isRepeat = true;
break;
}
}
if (!isRepeat) {
newArray.push(value[i]);
}
}
return newArray;
}
// 产生随机数
// min 最小值
// max 最大值
// len 生成随机数量
// isRound 是否取整 true 取整
export function randNum(min, max, len, isRound) {
var arr = [];
for (let i = 0; i < len; i++) {
var num;
num = Math.random() * (max - min) + min;
if (isRound) {
num = Math.round(num)
arr.push(num);
} else {
arr.push(num.toFixed(2))
}
}
return arr;
}
export const imgBase64 = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAAACXBIWXMAAAsSAAALEgHS3X78AAAGZklEQVR42u2cTYgkSRXHfy8iP6q7qr92e+wunIPIIGyN60XRk+xFT7IHD3vypiDexJuHhZ5G2IOgZw96Fd3Z06J48SJ4VWGh66CLIDvSPXa7PVVdn5kR8TxUdpnVM8Muylb1FPEgqazKiMjKH/8XH+8FKapKtP/NTEQQ4UV4EV6EFy3Ci/AivAgvWoQX4UV4EV6EFy3Ci/AivAgvWoQX4UV4EV60CO//t+Q2/ikR5OZvqmiE93Fg6UeXuQ0wZZU7BuZArv/C8dOKe8qOqtKyeogrgyeCoDeAdarz7jMgdipI3RqsIxRZHUCzCmgL4E6QCprhsjqojk7tvH6tU9U7nrUzb3PdlSeC8KB60A5CF6GNsIdwhrCFcPlI4G6t1iPYu6tcoRyiXKKconTQuRIfoMtWoFmJq9bBgWGKMT2f29Rt2+Cb5HetafmWbfpd0/It8rvWBt+0qds2PZ8zrRTYnauWawWuJbwFV62DA0OOpSDHT2woRZBeGgZD762dhsHQI700lCL4yaxcjp3XvQZYc+G1c9u5u94AZw/8pu/bkl0MFovHEDAkCMVQyJqKQzEELAGP5wnBbvvUP7YjIABh7sJLdF+zdHcFaCO8hNgDv6kWS4alJGEwTIGUcpxRjDOcnX2W4wxIGQxTShIyrFqsPfCbvFT1mbU54rLUt9xJ8gkClfoeYby1BZMnCd4mZCYhb1rKSUJibG4RFXkVQb1w6cvJP8ibjjAUfJAw9CXZrsNhOETpIpw8b4r9ArvtgstezgYIpo8T8gPLJgkDUsw4NUl2J8HvA18FvoPh63hURAOKn5rcUY4dYaOkRckIx/SxJz9w5AT2CMt03eUMGNeP0UU47QpbiG2+3MRjGGGxWMyGTUs3QHkE8kXgPfVlplYyxfxURb6V+eK+sdk+Fsto1j/a5stNtqp2uzdWLC86vKf6n04HLhFNjUP7s8HBjG3DYNWIJZCo8KYib/7gC/IVAgnoe8A3gX8nom3M2BIwaN9oahyXCJ3ORwYXXvzAwNn7QvOehLFxZJIiCMmGBO9ewfIlVf746k4RfvTl8MvMcPha25/9vGu++5sPsl9LooX45IIkmfWdKhLGpqSJcPa+wL01XZ6dPKyUUH/ALUhGQokg5l/A9zAy+vYrvJ4ZDgEyw+E3PqOvYxBMJlhm5ZORwFatrXs37rNO8O6/Me+JbHDNxYsTRMonBL5GYDz19OtXiyBXBHJc8XvV6S5MFmovtFe7z9oFBjhEVXoFfAgNFKdKiuJRhCCi4Yd/yt49Hcmvho4/X0zkt7/4W/KuiG4AP0PlU6RVvQYKH6LSKzhcfmTlE5+q3Ag9zZZU21jKi4St/QSZTYqT1HzeSDIl+J8Av1ORd/AItoLq1EmWlVOZlIy1JN0oUEquLhzpvqOPn682lhSq+sSVt/AAHZQ2yh5Ke3+23DIEcvUBTnE+AG8D9wUtRbUU1bck6I8xfFaLok3Ak6ufL9fa+2HWXhVlWWKkeTmjrQAPat+vUJu6TbVCcNbR2JQwHJ0XmblsePlAs/wdwtSgCAnf12DbhLDprD6hCI7mpmOCN4nPZKiZL5M++Y376Rq47fNc13za52LIfG5LJiSUgwTTshisKaZ7ibCDsmOMnkw8St7wBDxh4ElbjgbOTn2qgSL8006X7bLLHTBk0XXDjp36nh3ROw80cGirBEoYliHxF4X3fy8a+V8mLhSkoYDh7Lq2Sho4eufB9+wo7NjpgsvKGg0Yz43nXa9xHcbs+A2CEAb9wJYxTLaFtIahRGn0lasQTGvbiKj1fTsgISysaZec01juVOUax0PgFCUnkBCCsSNxClnpkO2SXSoVVscuJbJdkpVOnKLKZA7uFOXhjfbXbZ43V8MRyn2UE5S9CkCT4Es7ZPOOM1kQe+VyO/YJfRx9nL1yucmCsHnH+dIOw46dzhV3UrVXpSSXmcdYTQKonnKsJ4FOETrA2TM0NIvZQfsZyZ8VpSBXkrddSHZfpx/f4L/52teAv9YAfg7lD7UB5yHM1bbC5PdKtluooiJINR9TQCslzgCcI+zVYJzXonRd4O3bsWtAVv2Chqe2XFzb8bHAEXAMR0f6rIFn1ftV5Da93eLjBDBv024pia8GeZFCUhFetAgvwovwIrwIL1qEF+FFeBFetAgvwovwIrwIL1qEF+FFeBFetAgvwovw1tD+A2QKHlM6/+MtAAAAAElFTkSuQmCC'
\ No newline at end of file
src/utils/json.js 0 → 100644
View file @ 5223d64b
export const option = {
backgroundColor: "#142145",
color: ["#ffd285", "#ff733f", "#ec4863"],
tooltip: {
trigger: "axis"
},
legend: {
x: 300,
top: "7%",
textStyle: {
color: "#ffd285"
},
data: ["在大理", "标准版", "潍V"]
},
grid: {
left: "1%",
right: "35%",
top: "16%",
bottom: "6%",
containLabel: true
},
toolbox: {
show: false,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#FF4500"
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#fff"
}
},
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {
axisLine: {
lineStyle: {
color: "#fff"
}
},
splitLine: {
show: true,
lineStyle: {
color: "#fff"
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#fff"
}
},
type: "value"
},
series: [{
name: "在大理",
smooth: true,
type: "line",
symbolSize: 8,
symbol: "circle",
data: [90, 50, 39, 50, 120, 82, 80]
},
{
name: "标准版",
smooth: true,
type: "line",
symbolSize: 8,
symbol: "circle",
data: [70, 50, 50, 87, 90, 80, 70]
},
{
name: "潍V",
smooth: true,
type: "line",
symbolSize: 8,
symbol: "circle",
data: [290, 200, 20, 132, 15, 200, 90]
},
{
type: "line",
// 标线
markLine: {
data: [{
yAxis: 250
}]
}
},
{
type: "pie",
center: ["83%", "33%"],
radius: ["25%", "30%"],
label: {
normal: {
position: "center"
}
},
data: [{
value: 335,
name: "用户来源分析",
itemStyle: {
normal: {
color: "#ffd285"
}
},
label: {
normal: {
formatter: "{d} %",
textStyle: {
color: "#ffd285",
fontSize: 20
}
}
}
}]
},
{
type: "pie",
center: ["83%", "72%"],
radius: ["25%", "30%"],
label: {
normal: {
position: "center"
}
},
data: [{
value: 435,
name: "用户来源分析",
itemStyle: {
normal: {
color: "#ff733f"
}
},
label: {
normal: {
formatter: "{d} %",
textStyle: {
color: "#ff733f",
fontSize: 20
}
}
}
}]
}
]
};
src/utils/request.js 0 → 100644
View file @ 5223d64b
import axios from 'axios'
import {
Message,
Notification
} from 'element-ui';
const service = axios.create({
baseURL: 'http://39.98.150.124:9875/',
// baseURL: 'http://192.168.1.132:9875/',
// baseURL: process.env.NODE_ENV === "production" ?
// "http://192.168.100.224:9875/" : "/index", // api 的 base_url
timeout: 30000
})
// 请求前拦截
service.interceptors.request.use(config => {
if (!config.headers['token']) {
config.headers['token'] = window.localStorage.getItem('token')
}
return config;
}, )
service.interceptors.response.use(
response => {
return response.data;
},
error => {
if (error.response.status) {
const responseCode = error.response.status
switch (responseCode) {
case 400:
// Message.error('操作失败');
break;
// token 过期
case 401:
Notification({
title: '登录过期，请重新登录',
duration: 2000,
type: 'warning'
});
setTimeout(() => {
window.localStorage.removeItem('token');
window.location = '#/'
}, 1000)
break;
default:
break
}
return error.response.data;
}
}
)
export default service;
\ No newline at end of file
src/utils/request2.js 0 → 100644
View file @ 5223d64b
import axios from 'axios'
import {
Message,
Notification
} from 'element-ui';
const service = axios.create({
baseURL: 'http://39.98.150.124:8888/',
// baseURL: 'http://192.168.3.66:8888/',
timeout: 30000
})
service.interceptors.response.use(
response => {
return response.data;
},
error => {
if (error.response.status) {
const responseCode = error.response.status
switch (responseCode) {
case 400:
// Message.error('操作失败');
break;
// token 过期
case 401:
Notification({
title: '登录过期，请重新登录',
duration: 2000,
type: 'warning'
});
setTimeout(() => {
window.localStorage.removeItem('token');
window.location = '#/'
}, 1000)
break;
default:
break
}
return error.response.data;
}
}
)
export default service;
\ No newline at end of file
src/utils/request3.js 0 → 100644
View file @ 5223d64b
import axios from 'axios'
import {
Message,
Notification
} from 'element-ui';
const service = axios.create({
baseURL: 'http://47.92.82.212:10000/',
timeout: 30000
})
service.interceptors.response.use(
response => {
return response.data;
},
error => {
if (error.response.status) {
const responseCode = error.response.status
switch (responseCode) {
case 400:
// Message.error('操作失败');
break;
// token 过期
case 401:
Notification({
title: '登录过期，请重新登录',
duration: 2000,
type: 'warning'
});
setTimeout(() => {
window.localStorage.removeItem('token');
window.location = '#/'
}, 1000)
break;
default:
break
}
return error.response.data;
}
}
)
export default service;
\ No newline at end of file
src/views/Home.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="home">
<!-- <base-hint :class="[isRight ? 'fadeInRight' : 'fadeOutRight']"></base-hint> -->
<router-view name="homeHeader" />
<div class="wrap">
<router-view v-show="isLeftFalse == 1" name="homeLeft" class="home-left animated fadeInLeft"></router-view>
<ltkZongHe v-if="isLtk == 1" class="animated fadeInLeft"></ltkZongHe>
<ltkDialog></ltkDialog>
<dxkqZongHe v-if="isDxkq == 1" class="home-left animated fadeInLeft"></dxkqZongHe>
<dxkqDialog></dxkqDialog>
<yingjiRight v-if="is_yingji" class="fadeInRight animated"></yingjiRight>
<yingjiLeft v-if="is_yingji" class="animated fadeInLeft"></yingjiLeft>
<yinhuanLeft v-if="is_yinhuan" class="animated fadeInLeft"></yinhuanLeft>
<yinhuanRight v-if="is_yinhuan" class="fadeInRight animated"></yinhuanRight>
<home-map class="home--map" />
<router-view name="homeRight" :class="[isRight ? 'fadeInRight' : 'fadeOutRight']" class="home-right animated" />
<img class="img_position" @click="onRightImg" src="@/assets/images/left.png" alt="" />
</div>
<wkkItem></wkkItem>
<ItemCharts></ItemCharts>
<environment></environment>
<wkkEnvironmentTable></wkkEnvironmentTable>
<CommVideo></CommVideo>
</div>
</template>
<script>
import HomeMap from '@/components/home/HomeMap.vue'
import wkkItem from '@/components/wkk_item/item' // 尾矿库六大项
import ItemCharts from '@/components/wkk_item/item_charts' // 尾矿库六大项可视化
import wkkEnvironmentTable from '@/components/wkk_environment/table' // 尾矿库环境监测
import environment from '@/components/wkk_environment/environment' // 尾矿库环境监测可视化
import BaseHint from '@/components/base/BaseHint'
import ltkZongHe from '@/components/ltk/ltkZongHe'
import ltkDialog from '@/components/ltk/ltkDialog'
import dxkqZongHe from '@/components/dxkq/dxkqZongHe'
import dxkqDialog from '@/components/dxkq/dxkqDialog'
import yingjiRight from '@/components/yingji/yingjiRight'
import yingjiLeft from '@/components/yingji/yingjiLeft'
import yinhuanLeft from '@/components/yinhuan/yinhuan_left'
import yinhuanRight from '@/components/yinhuan/yinhuan_right'
import CommVideo from '@/components/comm/CommVideo'
export default {
name: 'home',
data() {
return {
isLeftFalse: false,
isLtk: false,
isDxkq: false,
is_yingji: false, // 应急处置
is_yinhuan: false, // 隐患排查
}
},
created() {
this.$store.dispatch('typeOptions')
},
methods: {
onRightImg() {
this.$store.commit('SET_IS_Right', true)
},
},
computed: {
isLeft() {
return this.$store.state.isLeft
},
isRight() {
return this.$store.state.isRight
},
},
watch: {
isLeft(e) {
this.isLeftFalse = false
this.isLtk = false
this.isDxkq = false
this.fengx_xian_ping_gu = false
this.is_yingji = false
this.is_yinhuan = false
if (e === false) return
const compony_info = this.$store.state.compony_info
const title_type = compony_info.typeName
if (e.itemIndex == 3) {
this.$store.commit('SET_IS_Right', false)
this.is_yinhuan = true
return
}
if (e.itemIndex == 4) {
this.$store.commit('SET_IS_Right', false)
this.is_yingji = true
} else {
this.is_yingji = false
this.onRightImg()
}
if (!compony_info) return
if (title_type == '非煤矿山') {
setTimeout(() => {
this.isLeftFalse = e.itemIndex
}, 200)
}
if (title_type == '煤矿') {
setTimeout(() => {
this.isLtk = e.itemIndex
}, 200)
}
if (title_type == '危险化学品企业') {
setTimeout(() => {
this.isDxkq = e.itemIndex
}, 200)
}
},
},
components: {
HomeMap,
// 尾矿库六大项
wkkItem,
ItemCharts,
// 尾矿库环境监测
wkkEnvironmentTable,
environment,
BaseHint,
ltkZongHe,
ltkDialog,
dxkqZongHe,
dxkqDialog,
yingjiRight,
yingjiLeft,
yinhuanLeft,
yinhuanRight,
CommVideo,
},
}
</script>
<style lang="scss">
@import '@/assets/scss/var.scss';
.home {
position: relative;
width: 100%;
height: 100%;
background: #000;
font-size: $theme_font_size;
header {
position: relative;
background: url('~@/assets/images/bg_top.png') center no-repeat;
background-size: 100% 100%;
width: 100%;
height: 3.5vw;
.flex-btn {
position: absolute;
left: 0;
right: 0;
top: 65%;
transform: translateY(-50%);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
.base-btn {
height: 2vw;
padding: 0 15px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.el-cascader {
width: 15vw;
height: 2.5vw;
line-height: 2.5vw;
background: url('~@/assets/images/inp.png');
background-size: 100% 100%;
.el-input__inner {
background-color: transparent;
border: none;
color: #fff;
height: 2vw;
text-align: center;
line-height: 2vw;
}
.el-input__icon {
display: none;
line-height: 2vw;
}
}
}
.base-btn-part > span {
display: inline-block;
height: 2.2vw;
line-height: 2.2vw;
text-align: center;
color: #fff;
width: 5.3vw;
font-size: 0.8vw;
cursor: pointer;
background-image: url('~@/assets/images/header.png');
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 0.2vw;
:hover {
display: none;
}
}
}
.flex-btn {
.base-btn-part {
.span_active {
background-image: url('~@/assets/images/header_active.png');
color: $color;
font-weight: 600;
}
}
}
.el-select {
margin-right: 1.5vw;
}
.el-input__inner {
background: transparent;
border: 1px solid #02defa;
color: #02defa;
height: 1.6vw;
width: 10vw;
line-height: 1.6vw;
}
.el-input__suffix {
top: 0.6vh;
}
}
.wrap {
position: relative;
height: calc(100% - 3.5vw);
overflow: hidden;
.home-left {
z-index: 9;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 20%;
}
.home--map {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.home-right {
z-index: 9;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 12%;
background-color: #030c2a;
}
.img_position {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
}
.el-carousel__indicators--horizontal {
width: 100%;
display: flex;
justify-content: center;
}
}
</style>
src/views/Login.vue 0 → 100644
View file @ 5223d64b
<template>
<div class="login">
<div class="login_wrap">
<div class="login_wrap_top">安全生产风险智能监测系统</div>
<div class="login_wrap_bottom">
<div class="title">用户登录</div>
<el-input placeholder="用户名" v-model="username" prefix-icon="el-icon-user"></el-input>
<br />
<br />
<el-input placeholder="密码" v-model="password" show-password prefix-icon="el-icon-lock"></el-input>
<div class="bottom_line">
<el-checkbox v-model="checkbox">记住密码</el-checkbox>
<!-- <span>忘记密码？</span> -->
</div>
<el-button type="primary" @click="onLogin">登录</el-button>
</div>
</div>
</div>
</template>
<script>
import { login } from "@/api";
export default {
data() {
return {
username: "root",
password: "123",
checkbox: true
};
},
mounted() {},
methods: {
onLogin() {
if (this.username == "") {
this.$message.error("用户名不为空");
return;
}
if (this.password == "") {
this.$message.error("密码不为空");
return;
}
const params = {
account: this.username,
pwd: this.password
};
login(params).then(res => {
if (res.code == 200) {
window.localStorage.setItem("token", res.data);
this.$router.push("/home");
} else {
this.$message.error(res.message);
}
});
}
}
};
</script>
<style lang="scss">
.login {
position: relative;
width: 100%;
height: 100%;
background-image: url("~@/assets/images/login_bg.png");
background-repeat: no-repeat;
// background-size: 100% 100%;
.login_wrap {
position: absolute;
top: 43%;
right: 10%;
transform: translateY(-50%);
width: 27%;
height: 400px;
.login_wrap_top {
height: 20%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2vw;
margin-bottom: 1vw;
font-weight: 600;
background-image: linear-gradient(left, #009ff1 10%, #00e8cf);
-webkit-background-clip: text;
color: transparent;
}
.login_wrap_bottom {
border: 1px solid #20a3f5;
height: 80%;
padding: 0 8%;
.title {
font-size: 1.2vw;
height: 24%;
letter-spacing: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #00bff4;
}
.el-input__inner {
border: 2px solid #20a3f5;
background: transparent;
color: #fff;
}
.el-input__icon {
color: #20a3f5;
}
.bottom_line {
color: #fff;
height: 18%;
align-items: center;
justify-content: space-between;
display: flex;
font-size: 14px;
.el-checkbox__label {
color: #fff;
}
}
.el-button--primary {
width: 100%;
}
}
}
}
</style>
\ No newline at end of file
src/威海市.json 0 → 100644
View file @ 5223d64b
[122.131360,36.867320],
[122.149850,36.868680],
[122.198410,36.744370],
[122.280390,36.737750],
[122.395200,36.781890],
[122.536730,36.869690],
[122.580800,36.914100],
[122.607360,37.057900],
[122.629290,37.134770],
[122.693850,37.202690],
[122.732670,37.405630],
[122.699140,37.463220],
[122.638580,37.477690],
[122.511250,37.484520],
[122.379150,37.486990],
[122.290910,37.481370],
[122.266630,37.490440],
[122.248210,37.509780],
[122.227460,37.547790],
[122.153390,37.615720],
[122.062550,37.615660],
[122.016160,37.558560],
[121.929040,37.497380],
[121.924230,37.496620],
[121.933360,37.470050],
[121.925410,37.460950],
[121.929980,37.434590],
[121.918880,37.413320],
[121.900640,37.403050],
[121.896790,37.394800],
[121.888300,37.388980],
[121.892710,37.379550],
[121.869810,37.370610],
[121.876090,37.363640],
[121.875940,37.355340],
[121.868720,37.350900],
[121.871350,37.340070],
[121.865760,37.333940],
[121.842200,37.326350],
[121.828720,37.309770],
[121.821680,37.306410],
[121.799490,37.308760],
[121.795130,37.279870],
[121.791000,37.269910],
[121.783320,37.263880],
[121.781910,37.254410],
[121.764390,37.252890],
[121.751690,37.243870],
[121.754700,37.240280],
[121.753410,37.230880],
[121.755120,37.228550],
[121.761480,37.230790],
[121.768530,37.226270],
[121.770370,37.213870],
[121.775420,37.209260],
[121.768720,37.201870],
[121.773060,37.197070],
[121.770560,37.189740],
[121.775470,37.179010],
[121.756690,37.149100],
[121.761980,37.139940],
[121.758990,37.135150],
[121.746490,37.136670],
[121.739760,37.131130],
[121.724020,37.132570],
[121.712790,37.128560],
[121.702030,37.136030],
[121.691860,37.133400],
[121.687820,37.127260],
[121.673980,37.120470],
[121.657560,37.126410],
[121.650050,37.138270],
[121.640920,37.143430],
[121.628110,37.133500],
[121.609570,37.132850],
[121.606160,37.147190],
[121.598840,37.148760],
[121.593050,37.135120],
[121.595900,37.117720],
[121.592970,37.114100],
[121.582180,37.120300],
[121.574030,37.117170],
[121.568950,37.120460],
[121.559130,37.111890],
[121.508460,37.109730],
[121.491770,37.121790],
[121.478250,37.126680],
[121.460790,37.127950],
[121.452000,37.135510],
[121.434030,37.106940],
[121.424760,37.107570],
[121.421090,37.104930],
[121.417340,37.110900],
[121.410040,37.104530],
[121.402390,37.102430],
[121.398010,37.103860],
[121.385450,37.121560],
[121.376580,37.116380],
[121.373620,37.117410],
[121.361670,37.131370],
[121.331560,37.134490],
[121.323660,37.140290],
[121.321690,37.148200],
[121.307500,37.150820],
[121.295940,37.136440],
[121.281550,37.132160],
[121.260370,37.116580],
[121.248580,37.096880],
[121.233860,37.093510],
[121.226050,37.095000],
[121.222340,37.087110],
[121.210460,37.085340],
[121.208610,37.079680],
[121.198000,37.078240],
[121.194610,37.073070],
[121.199270,37.060560],
[121.194500,37.047290],
[121.194880,37.036010],
[121.201530,37.033470],
[121.202160,37.030230],
[121.201060,37.025600],
[121.187590,37.022090],
[121.183400,37.007040],
[121.186590,37.001480],
[121.197360,37.002730],
[121.219400,36.989680],
[121.230190,36.992550],
[121.240200,36.962650],
[121.259780,36.959510],
[121.263180,36.956580],
[121.251950,36.946330],
[121.259370,36.943490],
[121.270810,36.930110],
[121.278530,36.933300],
[121.287220,36.922030],
[121.310070,36.924220],
[121.313420,36.912640],
[121.319640,36.910190],
[121.354050,36.926550],
[121.367160,36.927520],
[121.373820,36.910690],
[121.371310,36.903190],
[121.379420,36.898500],
[121.392290,36.881120],
[121.383720,36.881450],
[121.366580,36.873560],
[121.363870,36.869740],
[121.367400,36.865610],
[121.363990,36.857970],
[121.366470,36.848740],
[121.380290,36.846010],
[121.384560,36.833760],
[121.397450,36.824990],
[121.396400,36.816430],
[121.403730,36.809830],
[121.404010,36.800560],
[121.415450,36.796100],
[121.424960,36.798910],
[121.457000,36.796210],
[121.463980,36.790270],
[121.472190,36.788420],
[121.484570,36.776600],
[121.483350,36.746640],
[121.496490,36.697260],
[121.569060,36.695310],
[121.660020,36.679980],
[121.680230,36.684350],
[121.696480,36.705190],
[121.719520,36.785370],
[121.746840,36.833160],
[121.765900,36.845500],
[121.793800,36.858130],
[122.131360,36.867320],
vue.config.js 0 → 100644
View file @ 5223d64b
const {
BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
publicPath: './',
outputDir: 'web',
assetsDir: 'static',
productionSourceMap: false, //，系统就不会自动生成 map文件了
devServer: {
disableHostCheck: true
},
// devServer: {
// proxy: {
// '/index': {
// target: 'http://39.98.150.124/', //后端接口地址
// changeOrigin: true, //是否允许跨越
// pathRewrite: {
// '^/index': '', //重写,
// }
// }
// },
// },
// 安装第三方插件,配置CDN
configureWebpack: {
externals: {
"echarts": "echarts"
},
plugins: [
new CopyWebpackPlugin(
[
{ from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},
{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}
]
)
]
},
// chainWebpack: config => {
// config
// .plugin('webpack-bundle-analyzer')
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
// }
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment