Commit 5223d64b authored by 张浩然's avatar 张浩然

zhr

parents
NODE_ENV = 'env'
VUE_APP_BASE_API = 'http://192.168.100.226:8080/env'
outputDir = 'env'
NODE_ENV = 'production'
VUE_APP_BASE_API = 'http://192.168.100.226:8080/production'
outputDir = 'production'
.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?
<?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>
# vis
* 说明文档
base -- 综合数据
comm
- CommHeader 头部
-
wkk_environment -- 尾矿库环境监测
wkk_item -- 尾矿库六大项
item_charts -- 六大项可视化
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
\ No newline at end of file
ENV = 'production'
VUE_APP_BASE_API = 'www.baidu.com'
\ No newline at end of file
This diff is collapsed.
{
"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"
]
}
module.exports = {
printWidth: 500, // 行长规则通常设置为100或120
singleQuote: true, // 使用单引号, 默认false
semi: false, // 使用分号, 默认true
arrowParens: "avoid", // 箭头函数参数添加括号
trailingComma: "es5", // 在ES5中有效的结尾逗号(对象,数组等)
useTabs: true, // 在ES5中有效的结尾逗号(对象,数组等)
}
<!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>
<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>
This source diff could not be displayed because it is too large. You can view the blob instead.
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
This diff is collapsed.
This diff is collapsed.
.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;
}
$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
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"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
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
.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
<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
<!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
<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
<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
<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
<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
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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