up
This commit is contained in:
@ -12,6 +12,9 @@ import useUserStore from '@/store/modules/user';
|
||||
import { useRoute } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { setToken, removeToken } from '@/utils/auth';
|
||||
|
||||
const Route = useRoute();
|
||||
|
||||
const userStore = useUserStore();
|
||||
@ -19,20 +22,14 @@ const router = useRouter();
|
||||
const { proxy } = getCurrentInstance();
|
||||
let message = ref('加载中，请稍侯.....');
|
||||
let loginForm = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false,
|
||||
code: '',
|
||||
uuid: '',
|
||||
ticket: '',
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loginForm.value.password = '';
|
||||
getName();
|
||||
});
|
||||
if (window.localStorage.getItem('userName')) {
|
||||
getUserInfo();
|
||||
}
|
||||
function getName(params) {
|
||||
removeToken();
|
||||
//获取当前URL
|
||||
var url = document.location.href;
|
||||
//声明一个对象
|
||||
@ -49,58 +46,60 @@ function getName(params) {
|
||||
getRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
|
||||
}
|
||||
}
|
||||
if (getRequest.ticket) {
|
||||
window.localStorage.setItem('ticket', getRequest.ticket);
|
||||
axios
|
||||
.get(
|
||||
`http://36.134.45.201:8000/prod-api/system/external/getInfo?ticket=${getRequest.ticket}`
|
||||
)
|
||||
.then(response => {
|
||||
window.localStorage.setItem('divisions', response.data.data.user.dept.deptCode);
|
||||
window.localStorage.setItem('deptName', response.data.data.user.dept.deptName);
|
||||
window.localStorage.setItem('userName', response.data.data.user.userName);
|
||||
})
|
||||
.catch(err => {
|
||||
// message.value='暂无权限'
|
||||
});
|
||||
}
|
||||
if (!window.localStorage.getItem('userName')) {
|
||||
setTimeout(() => {
|
||||
getName();
|
||||
}, 300);
|
||||
} else {
|
||||
loginForm.value.username = window.localStorage.getItem('userName');
|
||||
}
|
||||
}
|
||||
// if (getRequest.ticket) {
|
||||
// window.localStorage.setItem('ticket', getRequest.ticket);
|
||||
// axios
|
||||
// .get(
|
||||
// `${serverAPI.baseUrl}/equipment/getUser?ticket=${getRequest.ticket}&url=${serverAPI.api}`
|
||||
// )
|
||||
// .then(response => {
|
||||
// console.log(response);
|
||||
// if (response.data.data.deptCode == '-1') {
|
||||
// window.localStorage.setItem('divisions', '370211');
|
||||
// window.localStorage.setItem('deptName', '青岛西海岸新区');
|
||||
// window.localStorage.setItem('userName', response.data.data.userName);
|
||||
// loginForm.value.username = response.data.data.userName;
|
||||
// } else {
|
||||
// window.localStorage.setItem('divisions', response.data.data.deptCode);
|
||||
// window.localStorage.setItem(
|
||||
// 'deptName',
|
||||
// response.data.data.deptCode.length == 6
|
||||
// ? '青岛西海岸新区'
|
||||
// : response.data.data.deptName
|
||||
// );
|
||||
// window.localStorage.setItem('userName', response.data.data.userName);
|
||||
// loginForm.value.username = response.data.data.userName;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
watch(
|
||||
() => loginForm.value.username,
|
||||
() => {
|
||||
getUserInfo();
|
||||
}
|
||||
);
|
||||
|
||||
function getUserInfo() {
|
||||
if (window.localStorage.getItem('divisions').length > 9) {
|
||||
localStorage.clear();
|
||||
message.value = '暂无权限';
|
||||
return;
|
||||
}
|
||||
if (loginForm.value.username) {
|
||||
loginForm.value.password = '123456';
|
||||
userStore
|
||||
.login(loginForm.value)
|
||||
.then(() => {
|
||||
router.push({ path: redirect.value || '/' });
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
// 重新获取验证码
|
||||
if (captchaEnabled.value) {
|
||||
getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
loginForm.value.ticket = getRequest.ticket;
|
||||
userStore
|
||||
.login(loginForm.value)
|
||||
.then(response => {
|
||||
if (response.data.deptCode == '-1') {
|
||||
window.localStorage.setItem('divisions', '370211');
|
||||
window.localStorage.setItem('deptName', '青岛西海岸新区');
|
||||
window.localStorage.setItem('userName', response.data.userName);
|
||||
} else {
|
||||
window.localStorage.setItem('divisions', response.data.deptCode);
|
||||
window.localStorage.setItem(
|
||||
'deptName',
|
||||
response.data.deptCode.length == 6
|
||||
? '青岛西海岸新区'
|
||||
: response.data.deptName
|
||||
);
|
||||
window.localStorage.setItem('userName', response.data.userName);
|
||||
}
|
||||
router.push({ path: redirect.value || '/' });
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
// 重新获取验证码
|
||||
if (captchaEnabled.value) {
|
||||
getCode();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const loginRules = {
|
||||
|
||||
335
src/views/chzl/chzl.vue
Normal file
335
src/views/chzl/chzl.vue
Normal file
@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="病害名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入病害名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:chzl:add']"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="chzlList"
|
||||
max-height="75vh"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column label="病害名称" align="center" prop="name" />
|
||||
<el-table-column
|
||||
label="防治方法"
|
||||
align="center"
|
||||
prop="fzff"
|
||||
/>
|
||||
<el-table-column
|
||||
label="发病症状"
|
||||
align="center"
|
||||
prop="xttz"
|
||||
/>
|
||||
<el-table-column :key="index" align="center" label="详情">
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="Guidance"
|
||||
style="cursor: pointer; color: rgba(100, 195, 164, 1)"
|
||||
@click="GuidanceClick(scope.row)"
|
||||
>
|
||||
查看详情
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:chzl:remove']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改病害对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="chzlRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="病害名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入病害名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="防治方法" prop="fzff">
|
||||
<el-input v-model="form.fzff" placeholder="请输入防治方法" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发病症状" prop="xttz">
|
||||
<el-input v-model="form.xttz" placeholder="请输入发病症状" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="GuidanceFlag" title="指导意见" width="50%" center>
|
||||
<div class="titleDivs">
|
||||
<div style="height: 60px; width: 6px; background: rgba(100, 195, 164, 1)"></div>
|
||||
<div style="height: 60px; width: 6px; background: #fff"></div>
|
||||
<div style="height: 60px; width: 3px; background: rgba(100, 195, 164, 0.6)"></div>
|
||||
<h2
|
||||
style="
|
||||
background: #fff;
|
||||
height: 60px;
|
||||
padding: 20px;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
"
|
||||
>
|
||||
{{ GuidanceTxt.name }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="GuidanceDiv">
|
||||
<div class="GuidanceContent">
|
||||
<h3 style="color: rgba(100, 195, 164, 1); font-weight: 600; display: flex">
|
||||
<img v-if="label3 == '虫情监测仪'" src="@/assets/images/chong.png" />
|
||||
<img v-if="label3 == '大田视频病害监测'" src="@/assets/images/bing.png" />
|
||||
形态特征
|
||||
</h3>
|
||||
<p style="white-space: pre-line"> {{ GuidanceTxt.xttz }}</p>
|
||||
<h3 style="color: rgba(100, 195, 164, 1); font-weight: 600; display: flex">
|
||||
<img src="@/assets/images/fang.png" />
|
||||
防治方法
|
||||
</h3>
|
||||
<p style="white-space: pre-wrap">{{ GuidanceTxt.fzff }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Chzl">
|
||||
import { getChzl, listChzl, addChzl, delChzl } from '@/api/system/chzl.js';
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const chzlList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref('');
|
||||
let GuidanceFlag = ref(false);
|
||||
let GuidanceArr = ref([]);
|
||||
let GuidanceTxt = ref([]);
|
||||
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: null,
|
||||
name: null,
|
||||
bt: null,
|
||||
nr: null,
|
||||
},
|
||||
rules: {},
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询病害列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listChzl({...queryParams.value}).then(response => {
|
||||
chzlList.value = response.data;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
name: null,
|
||||
xttz: null,
|
||||
fzff: null,
|
||||
};
|
||||
proxy.resetForm('chzlRef');
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm('queryRef');
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map(item => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = '添加病害';
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const _id = row.id || ids.value;
|
||||
getChzl(_id).then(response => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = '修改病害';
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs['chzlRef'].validate(valid => {
|
||||
if (valid) {
|
||||
if (form.value.id != null) {
|
||||
updateChzl(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess('修改成功');
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addChzl(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess(response.msg);
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _ids = row.name;
|
||||
proxy.$modal
|
||||
.confirm('是否确认删除"' + _ids + '"的数据项？')
|
||||
.then(function () {
|
||||
return delChzl({ name: _ids });
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
'system/chzl/export',
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`chzl_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
const GuidanceClick = e => {
|
||||
GuidanceFlag.value = true;
|
||||
GuidanceTxt.value = e;
|
||||
};
|
||||
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() th {
|
||||
color: black !important;
|
||||
}
|
||||
:deep().el-table__expand-icon {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
/*2.展开按钮未点击的样式是加号带边框*/
|
||||
:deep().el-table__expand-icon {
|
||||
content: url('/Users/luce/Desktop/数字三农/Agriculture-front-end/src/assets/images/zhankais.png') !important;
|
||||
padding: 2px;
|
||||
}
|
||||
/*3.展开按钮点击后的样式是减号带边框*/
|
||||
:deep() .el-table__expand-icon--expanded {
|
||||
content: url('/Users/luce/Desktop/数字三农/Agriculture-front-end/src/assets/images/shouqi.png') !important;
|
||||
}
|
||||
.titleDivs {
|
||||
display: flex;
|
||||
height: 57px;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/bgx.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
:deep().el-table {
|
||||
.cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.GuidanceDiv {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.GuidanceContent {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -383,12 +383,6 @@ let dic = {
|
||||
白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
|
||||
其他: 'rgba(250, 129, 109, 0.8)',
|
||||
};
|
||||
watch(
|
||||
() => Township.arr,
|
||||
val => {
|
||||
console.log('val:', val);
|
||||
}
|
||||
);
|
||||
//行政区划数据
|
||||
var data = {
|
||||
title: [],
|
||||
@ -405,11 +399,6 @@ let dd = {
|
||||
白菜和萝卜: [],
|
||||
其他: [],
|
||||
};
|
||||
let areatext = '8383894';
|
||||
|
||||
const change = () => {
|
||||
console.log(checkedCities.value);
|
||||
};
|
||||
|
||||
//表格数据
|
||||
let tableData = [
|
||||
@ -447,7 +436,6 @@ let TypeTime = {
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
getArea(); //请求
|
||||
getTownships();
|
||||
getvillages(); //村
|
||||
|
||||
@ -463,7 +451,7 @@ onMounted(() => {
|
||||
let leftWra = document.querySelector('.leftWra');
|
||||
leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
});
|
||||
|
||||
/*-------------地图------------------------*/
|
||||
@ -747,7 +735,6 @@ function getFarmland() {
|
||||
method: 'get',
|
||||
})
|
||||
.then(res => {
|
||||
console.log('农田：', res);
|
||||
formLandRef.value = res.data.features;
|
||||
})
|
||||
.catch(err => {});
|
||||
@ -797,11 +784,6 @@ function layerClick() {
|
||||
if (data.length > 0) {
|
||||
let newData = data['0'];
|
||||
if (newData.properties && newData.properties.XZDM) {
|
||||
console.log('XZDM:', XZDM);
|
||||
console.log(
|
||||
'newData.properties.XZDM:',
|
||||
newData.properties.XZDM
|
||||
);
|
||||
if (XZDM !== newData.properties.XZDM) {
|
||||
flag.value = true;
|
||||
//防止重复加载
|
||||
@ -848,10 +830,6 @@ function layerClick() {
|
||||
let info = entitys[na]._info;
|
||||
// entitys[na].label.show = true
|
||||
townZuowu.value = info; //保存数据
|
||||
console.log(
|
||||
townZuowu.value,
|
||||
'------------------'
|
||||
);
|
||||
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(
|
||||
infoWindowPostRender
|
||||
@ -908,7 +886,6 @@ function villageClick(layers, xy, level, cartographic, movement) {
|
||||
promise.then(data => {
|
||||
if (data.length > 0) {
|
||||
let newData = data['0'];
|
||||
console.log(newData);
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
newData.data.bbox[0],
|
||||
@ -936,7 +913,6 @@ function villageClick(layers, xy, level, cartographic, movement) {
|
||||
|
||||
// 后插和村
|
||||
if (newData.properties.XZQDM === '370211104217') {
|
||||
// console.log('后河岔村委会')
|
||||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||||
item.bbox[0],
|
||||
item.bbox[1],
|
||||
@ -1047,16 +1023,11 @@ function rightFoldClick() {
|
||||
rightWra.style.transform = 'translate(0,0)';
|
||||
} else {
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------接口--------------------*/
|
||||
const getArea = () => {
|
||||
getarea({ time: '2023-04-25', subregion: '1', parent: '黄岛区' }).then(res => {
|
||||
console.log(res);
|
||||
});
|
||||
};
|
||||
//镇
|
||||
const getTownships = () => {
|
||||
getTownship().then(res => {
|
||||
@ -1167,7 +1138,6 @@ const selectTab = () => {
|
||||
},
|
||||
];
|
||||
if (value.value == '370211') {
|
||||
console.log('sssssssssssssssssssss');
|
||||
removeWms(['village_CQL']);
|
||||
XZDM=null
|
||||
removeWms(['aaa']);
|
||||
@ -1331,7 +1301,6 @@ const selectTab = () => {
|
||||
];
|
||||
|
||||
let arr = [...Township.arr];
|
||||
console.log('arr:', arr);
|
||||
arr.forEach(item => {
|
||||
if (item.properties.XZDM == value.value) {
|
||||
viewer.camera.flyTo({
|
||||
@ -1346,13 +1315,11 @@ const selectTab = () => {
|
||||
}
|
||||
let arr = [...Township.brr];
|
||||
let brr = [];
|
||||
// console.log(Township.brr);
|
||||
arr.forEach(item => {
|
||||
if (item.properties.XZDM == value.value) {
|
||||
brr.push(item.properties.XZQMC);
|
||||
}
|
||||
});
|
||||
// console.log(brr);
|
||||
data.title = [...Object.values(brr)];
|
||||
});
|
||||
ASdivision();
|
||||
@ -1383,8 +1350,6 @@ const selectTab = () => {
|
||||
townZuowu.value = {
|
||||
label: arr,
|
||||
};
|
||||
console.log();
|
||||
console.log(arr);
|
||||
showOverlayChart({ x: 642, y: 312 });
|
||||
});
|
||||
};
|
||||
@ -1768,7 +1733,6 @@ function areachar() {
|
||||
}
|
||||
|
||||
function typesof() {
|
||||
console.log(Pie3D.arr);
|
||||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||
let isSelected = '';
|
||||
let isHovered = '';
|
||||
@ -2273,10 +2237,6 @@ function farmland() {
|
||||
// },
|
||||
};
|
||||
|
||||
farmlandDivIntance.on('click', function (params) {
|
||||
console.log(params.name);
|
||||
});
|
||||
farmlandDivIntance.on('click', param => ChartClick(param));
|
||||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
}
|
||||
@ -2376,7 +2336,6 @@ function back() {
|
||||
value.value = '370211';
|
||||
selectTab();
|
||||
if (flag.value === '1') {
|
||||
console.log(flag.value);
|
||||
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||||
}
|
||||
viewer.camera.flyTo({
|
||||
@ -2417,10 +2376,7 @@ function ChartClick(item) {
|
||||
// 定位到地块
|
||||
let features = formLandRef.value;
|
||||
features.forEach(it => {
|
||||
console.log('it.properties.name:', it.properties.name);
|
||||
console.log('item.name:', item.name);
|
||||
if (it.properties.name === item.name) {
|
||||
console.log('dingwei');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
it.bbox[0],
|
||||
@ -2769,14 +2725,12 @@ function ASdivision() {
|
||||
/*--------------------------------------------------------------------------------------------*/
|
||||
function getAreaFenlei() {
|
||||
let fl = fenleiRef.value;
|
||||
console.log('fl:', fl);
|
||||
axios({
|
||||
url:
|
||||
serverAPI.geoserverUrl +
|
||||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||||
})
|
||||
.then(res => {
|
||||
console.log('res1111:', res);
|
||||
let data = res.data.features;
|
||||
data.forEach((item, index) => {
|
||||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||||
@ -2807,8 +2761,6 @@ function getAreaFenlei() {
|
||||
return it.properties;
|
||||
});
|
||||
}
|
||||
// label = label.join(' ')
|
||||
// console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
|
||||
// 添加点
|
||||
viewer.entities.add({
|
||||
name: 'point' + item.properties.XZDM,
|
||||
@ -3565,17 +3517,7 @@ $height: calc(100vh - 100px);
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.select_city {
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background: rgba(2, 31, 26, 0.95);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #fff;
|
||||
}
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.el-select__popper {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
489
src/views/imouplayer.css
Normal file
489
src/views/imouplayer.css
Normal file
File diff suppressed because one or more lines are too long
4176
src/views/index.vue
4176
src/views/index.vue
File diff suppressed because one or more lines are too long
@ -14,36 +14,63 @@
|
||||
value-format="YYYY-MM-DD"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
/>
|
||||
:disabledDate="disabledDateFun"
|
||||
>
|
||||
<template #default="cell">
|
||||
<div class="cell" :class="{ current: cell.isCurrent }">
|
||||
<span class="text">{{ cell.text }}</span>
|
||||
<span v-if="isHoliday(cell)" class="holiday" />
|
||||
</div>
|
||||
</template>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<div
|
||||
style="
|
||||
width: 3px;
|
||||
height: 19px;
|
||||
opacity: 1;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
margin-right: 12px;
|
||||
"
|
||||
></div>
|
||||
<span>预警信息发布</span>
|
||||
</div>
|
||||
<div class="farmlandDiv">
|
||||
<div class="radioDiv">
|
||||
预警范围：
|
||||
<el-radio-group @change="onclick()" v-model="radio1" class="ml-4">
|
||||
<el-radio :label="5000" size="large" style="color: white">5km</el-radio>
|
||||
<el-radio :label="10000" size="large" style="color: white">
|
||||
10km
|
||||
</el-radio>
|
||||
<el-radio :label="5000" size="large">5km</el-radio>
|
||||
<el-radio :label="10000" size="large">10km</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="selectDiv">
|
||||
站点名称:
|
||||
<el-select popper-class="select_city" v-model="zdmcValue" placeholder="请选择">
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
style="width: 76%"
|
||||
v-model="zdmcValue"
|
||||
placeholder="请选择"
|
||||
teleported="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in zdmcList"
|
||||
:key="item.msName"
|
||||
:label="item.msName"
|
||||
:value="item.msName"
|
||||
:title="item.msName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="selectDiv" style="margin-top: 10px">
|
||||
<div class="selectDiv" style="margin-top: 10px">
|
||||
预警情况:
|
||||
<el-select popper-class="select_city" v-model="warnValue" placeholder="请选择">
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
style="width: 76%"
|
||||
v-model="warnValue"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warnList"
|
||||
:key="item.flag"
|
||||
@ -59,10 +86,12 @@
|
||||
|
||||
<el-table
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center', color: 'white' }"
|
||||
:header-cell-style="{
|
||||
'text-align': 'center',
|
||||
color: 'rgba(102, 102, 102, 1)',
|
||||
}"
|
||||
:data="pageData"
|
||||
style="width: 100%"
|
||||
max-height="470px"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="20" />
|
||||
@ -94,32 +123,31 @@
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-tooltip
|
||||
:disabled="!rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
<el-icon v-if="rightWraFlag">
|
||||
<img src="@/assets/images/shouhuis.png" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="!rightWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
<el-icon v-if="!rightWraFlag">
|
||||
<img src="@/assets/images/zhankaiss.png" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -172,6 +200,8 @@ import {
|
||||
meteorologicalsPeople,
|
||||
meteorology,
|
||||
zdmc,
|
||||
getSeeWarning,
|
||||
getSeeWarningData,
|
||||
} from '@/api/meteorological/monitor/information.js';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import 'echarts-gl';
|
||||
@ -208,17 +238,22 @@ let dic = {
|
||||
重度干热风: { color: 'rgba(234, 165, 93, 1)', disabled: false },
|
||||
};
|
||||
const warnValue = ref();
|
||||
const holidays = ref([]);
|
||||
|
||||
const isHoliday = ({ dayjs }) => {
|
||||
return holidays.value.includes(dayjs.format('YYYY-MM-DD'));
|
||||
};
|
||||
function query() {
|
||||
getmeteorology();
|
||||
}
|
||||
let code=window.localStorage.getItem('deptName')
|
||||
let code = window.localStorage.getItem('deptName');
|
||||
function reset() {
|
||||
value.value = getYesterday().toJSON().substr(0, 10);
|
||||
// value.value = getYesterday().toJSON().substr(0, 10);
|
||||
radio1.value = 5000;
|
||||
zdmcValue.value = '';
|
||||
warnValue.value = '';
|
||||
getmeteorology();
|
||||
meteorologicals();
|
||||
}
|
||||
|
||||
const warnList = [
|
||||
@ -236,6 +271,23 @@ const warnList = [
|
||||
},
|
||||
];
|
||||
|
||||
const disabledDateFun = time => {
|
||||
const currentDate = new Date();
|
||||
currentDate.setHours(0, 0, 0, 0); // Set hours, minutes, seconds, and milliseconds to 0
|
||||
if (time.getTime() > currentDate.getTime()) {
|
||||
return {
|
||||
disabled: true,
|
||||
style: {
|
||||
// Define your disabled date style here
|
||||
color: 'red',
|
||||
textDecoration: 'line-through',
|
||||
// Add more CSS properties as needed
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return false; // Enable dates in the past or today
|
||||
}
|
||||
};
|
||||
const rules = reactive({
|
||||
power: [
|
||||
{
|
||||
@ -313,10 +365,10 @@ function updatePagedData() {
|
||||
// );
|
||||
|
||||
function getIcon(val) {
|
||||
if (val === '轻度干旱') return ganhan1;
|
||||
if (val === '中度干旱') return ganhan2;
|
||||
if (val === '严重干旱') return ganhan3;
|
||||
if (val === '特大干旱') return ganhan4;
|
||||
if (val === '轻度热干风') return ganhan1;
|
||||
if (val === '中度热干风') return ganhan2;
|
||||
if (val === '严重热干风') return ganhan3;
|
||||
if (val === '特大热干风') return ganhan4;
|
||||
if (val === '无灾害') return ganhan0;
|
||||
}
|
||||
|
||||
@ -335,25 +387,22 @@ let map = ref(null);
|
||||
const cun = () => {
|
||||
layers = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'huangdaoqu_village',
|
||||
name: 'CJQY3702112019WGS84',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
map.addLayer(layers);
|
||||
// var layersArray = map.getLayers();
|
||||
// layersArray.insertAt(999, layers);
|
||||
};
|
||||
const zhen = () => {
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'XJQY3702112019WGS84',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
@ -364,12 +413,14 @@ let layers = ref(null); //村
|
||||
onMounted(() => {
|
||||
value.value = getYesterday().toJSON().substr(0, 10);
|
||||
getmeteorology();
|
||||
getSeeWarningDatas();
|
||||
getSeeWarnings();
|
||||
//地图
|
||||
initMap();
|
||||
|
||||
meteorologicals();
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
});
|
||||
onUpdated(() => {
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
@ -387,6 +438,7 @@ function getmeteorology() {
|
||||
flag: 4,
|
||||
msName: zdmcValue.value,
|
||||
warning: warnValue.value,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -394,7 +446,7 @@ function getmeteorology() {
|
||||
}
|
||||
|
||||
function getZdmc() {
|
||||
zdmc().then(res => {
|
||||
zdmc({ divisions: code }).then(res => {
|
||||
zdmcList.value = res.data;
|
||||
});
|
||||
}
|
||||
@ -414,10 +466,11 @@ function initMap() {
|
||||
}),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Tianditu({
|
||||
layerType: 'img',
|
||||
key: '1d109683f4d84198e37a38c442d68311',
|
||||
source: new ol.source.XYZ({
|
||||
url: `${serverAPI.tiandituLayers}`,
|
||||
projection: serverAPI.tiandituLayers == 'http://59.206.203.34/tileservice/SdRasterPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdimg2017&STYLE=default&TILEMATRIXSET=img2017&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'?'EPSG:4326':'EPSG:3857',
|
||||
}),
|
||||
preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
|
||||
}),
|
||||
],
|
||||
});
|
||||
@ -498,9 +551,9 @@ function initMap() {
|
||||
<div class="info-window">
|
||||
<div class="close-btn" ><span>站点信息</span><img src="${guanbi}" alt=""/> </div>
|
||||
<div class="content" style="color:white;font-size: 16px">
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>名称:</span><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>经度:</span><span>${clickInformationData.lon}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>维度:</span><span>${clickInformationData.lat}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">名称:</div><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">经度:</div><span>${clickInformationData.lon}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">纬度:</div><span>${clickInformationData.lat}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -526,9 +579,9 @@ function initMap() {
|
||||
<div class="info-window" >
|
||||
<div class="close-btn" ><span>人员信息</span><img src="${guanbi}" alt=""/> </div>
|
||||
<div class="content" style="color:white;font-size: 16px">
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>姓名:</span><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>手机:</span><span>${clickInformationData.phone}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>位置:</span><span>${clickInformationData.region}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">姓名:</div><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">手机:</div><span>${clickInformationData.phone}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">位置:</div><span>${clickInformationData.region}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -632,7 +685,7 @@ function rightFoldClick() {
|
||||
rightWra.style.transform = 'translate(0,0)';
|
||||
} else {
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
}
|
||||
}
|
||||
|
||||
@ -644,6 +697,7 @@ const onclick = () => {
|
||||
data: value.value,
|
||||
alertRange: radio1.value,
|
||||
flag: 4,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -663,7 +717,7 @@ const meteorologicals = () => {
|
||||
map.removeLayer(personIconLayer.value[i]);
|
||||
}
|
||||
personIconLayer.value = [];
|
||||
getmeteorologyEquipment({ flag: 4, data: value.value }).then(res => {
|
||||
getmeteorologyEquipment({ flag: 4, data: value.value ,divisions:code }).then(res => {
|
||||
informationData.value = res.data;
|
||||
for (const i in informationData.value) {
|
||||
const centerLonLat = [
|
||||
@ -690,7 +744,7 @@ const meteorologicals = () => {
|
||||
// 为圆形创建一个样式
|
||||
const circleStyle = new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgb(255,255,0)',
|
||||
color: dic[informationData.value[i].warning] && dic[informationData.value[i].warning].color,
|
||||
width: 2,
|
||||
}),
|
||||
});
|
||||
@ -761,7 +815,12 @@ const meteorologicals = () => {
|
||||
}
|
||||
});
|
||||
|
||||
meteorologicalsPeople({ flag: 4, alertRange: radio1.value, data: value.value ,divisions:code}).then(res => {
|
||||
meteorologicalsPeople({
|
||||
flag: 4,
|
||||
alertRange: radio1.value,
|
||||
data: value.value,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
peopleData.value = res.data;
|
||||
|
||||
for (const i in peopleData.value) {
|
||||
@ -824,6 +883,7 @@ const selectTime = () => {
|
||||
data: value.value,
|
||||
alertRange: radio1.value,
|
||||
flag: 4,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -855,11 +915,35 @@ const getmeteorologicalFreezes = () => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
});
|
||||
};
|
||||
const getSeeWarnings = () => {
|
||||
getSeeWarning({ flag: 4, divisions: code }).then(res => {
|
||||
if (res.data.length < 1) {
|
||||
ElMessage({
|
||||
message: '近1周暂无预警',
|
||||
type: 'success',
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
message: `近1周${res.data.length}次预警`,
|
||||
type: 'warning',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
const getSeeWarningDatas = () => {
|
||||
let arr = [];
|
||||
getSeeWarningData({ flag: 4, divisions: code }).then(res => {
|
||||
arr = [];
|
||||
res.data.forEach(item => {
|
||||
arr.push(item.dataTime);
|
||||
});
|
||||
holidays.value = arr;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$height: calc(100vh - 100px);
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -869,55 +953,41 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: url('@/assets/images/title.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 110% 100%;
|
||||
color: #fff;
|
||||
width: 90%;
|
||||
margin: 15px;
|
||||
height: 37px;
|
||||
border-radius: 3px 3px, 0px, 0px;
|
||||
background: linear-gradient(90deg, rgba(208, 245, 233, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 45px;
|
||||
padding-left: 46px;
|
||||
line-height: 37px;
|
||||
padding-left: 16px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 100px;
|
||||
border-radius: 30px;
|
||||
border: 1px solid rgba(23, 194, 180, 1);
|
||||
background: rgba(41, 255, 255, 0.1);
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 80%;
|
||||
width: 95%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 1) 33.33%,
|
||||
rgba(41, 255, 219, 1) 100%
|
||||
);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 120px;
|
||||
width: 79px;
|
||||
height: 25px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
border-radius: 4px;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -928,33 +998,48 @@ $height: calc(100vh - 100px);
|
||||
.ol-overlaycontainer-stopevent {
|
||||
.overlay1 div:first-child {
|
||||
.info-window {
|
||||
padding: 10px;
|
||||
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
.close-btn {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22px;
|
||||
background: url('@/assets/images/top.png');
|
||||
padding: 3px 0 3px 40px;
|
||||
padding: 3px 0 3px 20px;
|
||||
img {
|
||||
margin-right: 15px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: auto 10px;
|
||||
}
|
||||
border-radius: 8px;
|
||||
color: rgba(100, 195, 164, 1);
|
||||
background: rgba(100, 195, 164, 0.05);
|
||||
}
|
||||
|
||||
.content {
|
||||
background: url('@/assets/images/bottom.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.line {
|
||||
background: url('@/assets/images/chande.png');
|
||||
padding-left: 20px;
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label {
|
||||
color: rgba(63, 161, 128, 1);
|
||||
}
|
||||
span {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
display: block;
|
||||
min-width: 160px;
|
||||
background: rgba(100, 195, 164, 0.1);
|
||||
box-shadow: inset 0px 1px 1px rgba(100, 195, 164, 0.5);
|
||||
text-align: center;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -966,16 +1051,17 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.rightWra {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 23%;
|
||||
height: $height;
|
||||
height: calc(100vh - 98px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0 0 15px 6px rgba(41, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.09),
|
||||
0px 0px 6px rgba(0, 0, 0, 0.06), 0px 0px 9px rgba(0, 0, 0, 0.03);
|
||||
transition: transform 1s;
|
||||
|
||||
.farmlandHeader {
|
||||
@ -984,7 +1070,6 @@ $height: calc(100vh - 100px);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin: 20px 0;
|
||||
padding: 0 10px;
|
||||
|
||||
@ -992,16 +1077,8 @@ $height: calc(100vh - 100px);
|
||||
.el-input__wrapper {
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
background: transparent
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(38, 212, 191, 0.5) 0%,
|
||||
rgba(43, 186, 186, 0.5) 25.69%,
|
||||
rgba(45, 165, 181, 0.5) 66.67%,
|
||||
rgba(54, 111, 168, 0.5) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgba(137, 211, 245, 1);
|
||||
background: rgba(100, 195, 164, 0.75);
|
||||
border: 1px solid rgba(100, 195, 164, 1);
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
@ -1011,19 +1088,20 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.rightFoldDiv {
|
||||
width: 30px;
|
||||
width: 28px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
left: -8%;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
transform: translate(-100%, -50%);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 88%;
|
||||
height: calc(100% - 72px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -1036,8 +1114,8 @@ $height: calc(100vh - 100px);
|
||||
width: 95%;
|
||||
flex-direction: column;
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
height: 100%;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
height: calc(100% - 67px);
|
||||
|
||||
:deep(.el-table--fit) {
|
||||
height: 90%;
|
||||
@ -1059,26 +1137,26 @@ $height: calc(100vh - 100px);
|
||||
::v-deep .el-input__wrapper {
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
background: transparent
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(38, 212, 191, 0.5) 0%,
|
||||
rgba(43, 186, 186, 0.5) 25.69%,
|
||||
rgba(45, 165, 181, 0.5) 66.67%,
|
||||
rgba(54, 111, 168, 0.5) 100%
|
||||
);
|
||||
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(219, 219, 219, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
width: 70%;
|
||||
.el-input__inner {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.btws {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
justify-content: center;
|
||||
|
||||
.el-button {
|
||||
color: white;
|
||||
@ -1086,17 +1164,15 @@ $height: calc(100vh - 100px);
|
||||
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
}
|
||||
|
||||
.bt1 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
background: rgba(100, 195, 164, 1);
|
||||
border: 1px solid rgba(100, 195, 164, 1);
|
||||
}
|
||||
|
||||
.bt2 {
|
||||
background: rgba(22, 94, 102, 1);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(219, 219, 219, 1);
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1129,7 +1205,7 @@ $height: calc(100vh - 100px);
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-border-color: none;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||||
@ -1183,7 +1259,6 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
@ -1198,25 +1273,29 @@ $height: calc(100vh - 100px);
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 25%;
|
||||
bottom: 7%;
|
||||
bottom: 60px;
|
||||
width: 129px;
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
|
||||
// height: 50px;
|
||||
:deep(.el-collapse-item__header) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
font-size: 14px;
|
||||
.el-icon {
|
||||
color: rgba(100, 195, 164, 1);
|
||||
}
|
||||
}
|
||||
|
||||
//--el-collapse-content-bg-color {
|
||||
// background: rgba(2, 31, 26, 0.6);
|
||||
//}
|
||||
--el-collapse-content-bg-color {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__content) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
padding: 0 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
@ -1224,12 +1303,20 @@ $height: calc(100vh - 100px);
|
||||
--el-collapse-border-color: none;
|
||||
--el-collapse-content-bg-color: none;
|
||||
|
||||
// opacity: 1;
|
||||
// border-radius: 4px;
|
||||
// background: rgba(2, 31, 26, 0.6);
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: flex-start;
|
||||
// align-items: center;
|
||||
// padding: 10px 10px 10px 10px;
|
||||
p {
|
||||
margin: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 0;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
}
|
||||
@ -1242,32 +1329,60 @@ $height: calc(100vh - 100px);
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 0;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
// color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// :deep(.el-checkbox__label) {
|
||||
// color: #fff;
|
||||
// }
|
||||
:deep(.el-checkbox__label) {
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.cell {
|
||||
height: 30px;
|
||||
padding: 3px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cell .text {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cell.current .text {
|
||||
background: #626aef;
|
||||
color: #fff;
|
||||
}
|
||||
.cell .holiday {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--el-color-danger);
|
||||
border-radius: 50%;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.disabled {
|
||||
color: var(--el-datepicker-off-text-color) !important;
|
||||
cursor:not-allowed !important;
|
||||
}
|
||||
.select_city {
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background: rgba(2, 31, 26, 0.95);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #fff;
|
||||
}
|
||||
background: #fff;
|
||||
}
|
||||
.el-select__popper {
|
||||
border: none !important;
|
||||
@ -1276,10 +1391,18 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.el-popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
background: #fff !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.el-popper__arrow::before {
|
||||
background: rgba(41, 255, 255, 0.7) !important;
|
||||
display: none;
|
||||
}
|
||||
.el-select-dropdown {
|
||||
position: absolute !important;
|
||||
left: 0;
|
||||
background: #fff !important;
|
||||
border: 1px solid #ccc;
|
||||
max-width: 230px;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -14,36 +14,63 @@
|
||||
value-format="YYYY-MM-DD"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
/>
|
||||
:disabledDate="disabledDateFun"
|
||||
>
|
||||
<template #default="cell">
|
||||
<div class="cell" :class="{ current: cell.isCurrent }">
|
||||
<span class="text">{{ cell.text }}</span>
|
||||
<span v-if="isHoliday(cell)" class="holiday" />
|
||||
</div>
|
||||
</template>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<div
|
||||
style="
|
||||
width: 3px;
|
||||
height: 19px;
|
||||
opacity: 1;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
margin-right: 12px;
|
||||
"
|
||||
></div>
|
||||
<span>预警信息发布</span>
|
||||
</div>
|
||||
<div class="farmlandDiv">
|
||||
<div class="radioDiv">
|
||||
预警范围：
|
||||
<el-radio-group @change="onclick()" v-model="radio1" class="ml-4">
|
||||
<el-radio :label="5000" size="large" style="color: white">5km</el-radio>
|
||||
<el-radio :label="10000" size="large" style="color: white">
|
||||
10km
|
||||
</el-radio>
|
||||
<el-radio :label="5000" size="large">5km</el-radio>
|
||||
<el-radio :label="10000" size="large">10km</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="selectDiv">
|
||||
站点名称:
|
||||
<el-select popper-class="select_city" v-model="zdmcValue" placeholder="请选择">
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
v-model="zdmcValue"
|
||||
placeholder="请选择"
|
||||
style="width: 76%"
|
||||
teleported="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in zdmcList"
|
||||
:key="item.msName"
|
||||
:label="item.msName"
|
||||
:value="item.msName"
|
||||
:title="item.msName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="selectDiv" style="margin-top: 10px">
|
||||
预警情况:
|
||||
<el-select popper-class="select_city" v-model="warnValue" placeholder="请选择">
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
v-model="warnValue"
|
||||
placeholder="请选择"
|
||||
style="width: 76%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warnList"
|
||||
:key="item.flag"
|
||||
@ -59,10 +86,12 @@
|
||||
|
||||
<el-table
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center', color: 'white' }"
|
||||
:header-cell-style="{
|
||||
'text-align': 'center',
|
||||
color: 'rgba(102, 102, 102, 1)',
|
||||
}"
|
||||
:data="pageData"
|
||||
style="width: 100%"
|
||||
max-height="470px"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="20" />
|
||||
@ -94,32 +123,31 @@
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-tooltip
|
||||
:disabled="!rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
<el-icon v-if="rightWraFlag">
|
||||
<img src="@/assets/images/shouhuis.png" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="!rightWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
<el-icon v-if="!rightWraFlag">
|
||||
<img src="@/assets/images/zhankaiss.png" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -172,6 +200,8 @@ import {
|
||||
meteorologicalsPeople,
|
||||
meteorology,
|
||||
zdmc,
|
||||
getSeeWarning,
|
||||
getSeeWarningData,
|
||||
} from '@/api/meteorological/monitor/information.js';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import 'echarts-gl';
|
||||
@ -208,18 +238,42 @@ let dic = {
|
||||
严重干旱: { color: 'rgba(234, 165, 93, 1)', disabled: false },
|
||||
特大干旱: { color: 'rgba(215, 25, 28, 1)', disabled: false },
|
||||
};
|
||||
|
||||
const warnValue = ref();
|
||||
|
||||
const holidays = ref([]);
|
||||
|
||||
const isHoliday = ({ dayjs }) => {
|
||||
return holidays.value.includes(dayjs.format('YYYY-MM-DD'));
|
||||
};
|
||||
const disabledDateFun = time => {
|
||||
const currentDate = new Date();
|
||||
currentDate.setHours(0, 0, 0, 0); // Set hours, minutes, seconds, and milliseconds to 0
|
||||
if (time.getTime() > currentDate.getTime()) {
|
||||
return {
|
||||
disabled: true,
|
||||
style: {
|
||||
// Define your disabled date style here
|
||||
color: 'red',
|
||||
textDecoration: 'line-through',
|
||||
// Add more CSS properties as needed
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return false; // Enable dates in the past or today
|
||||
}
|
||||
};
|
||||
function query() {
|
||||
getmeteorology();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
value.value = getYesterday().toJSON().substr(0, 10);
|
||||
// value.value = getYesterday().toJSON().substr(0, 10);
|
||||
radio1.value = 5000;
|
||||
zdmcValue.value = '';
|
||||
warnValue.value = '';
|
||||
getmeteorology();
|
||||
meteorologicals();
|
||||
}
|
||||
|
||||
const warnList = [
|
||||
@ -340,25 +394,26 @@ let map = ref(null);
|
||||
const cun = () => {
|
||||
layers = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
url:
|
||||
serverAPI.geoserverUrl +
|
||||
`/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'huangdaoqu_village',
|
||||
name: 'CJQY3702112019WGS84',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
map.addLayer(layers);
|
||||
// var layersArray = map.getLayers();
|
||||
// layersArray.insertAt(999, layers);
|
||||
};
|
||||
const zhen = () => {
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
url:
|
||||
serverAPI.geoserverUrl +
|
||||
`/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'XJQY3702112019WGS84',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
@ -369,12 +424,14 @@ let layers = ref(null); //村
|
||||
onMounted(() => {
|
||||
value.value = getYesterday().toJSON().substr(0, 10);
|
||||
getmeteorology();
|
||||
getSeeWarnings();
|
||||
getSeeWarningDatas();
|
||||
//地图
|
||||
initMap();
|
||||
|
||||
meteorologicals();
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
});
|
||||
onUpdated(() => {
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
@ -384,7 +441,7 @@ let alterData = ref([]);
|
||||
let newArr = ref([]);
|
||||
const zdmcList = ref([]);
|
||||
const zdmcValue = ref('');
|
||||
let code=window.localStorage.getItem('deptName')
|
||||
let code = window.localStorage.getItem('deptName');
|
||||
|
||||
function getmeteorology() {
|
||||
meteorology({
|
||||
@ -393,6 +450,7 @@ function getmeteorology() {
|
||||
flag: 1,
|
||||
msName: zdmcValue.value,
|
||||
warning: warnValue.value,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -400,7 +458,7 @@ function getmeteorology() {
|
||||
}
|
||||
|
||||
function getZdmc() {
|
||||
zdmc().then(res => {
|
||||
zdmc({ divisions: code }).then(res => {
|
||||
zdmcList.value = res.data;
|
||||
});
|
||||
}
|
||||
@ -420,10 +478,15 @@ function initMap() {
|
||||
}),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Tianditu({
|
||||
layerType: 'img',
|
||||
key: '1d109683f4d84198e37a38c442d68311',
|
||||
source: new ol.source.XYZ({
|
||||
url: `${serverAPI.tiandituLayers}`,
|
||||
projection:
|
||||
serverAPI.tiandituLayers ==
|
||||
'http://59.206.203.34/tileservice/SdRasterPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdimg2017&STYLE=default&TILEMATRIXSET=img2017&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'
|
||||
? 'EPSG:4326'
|
||||
: 'EPSG:3857',
|
||||
}),
|
||||
preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
|
||||
}),
|
||||
],
|
||||
});
|
||||
@ -504,9 +567,9 @@ function initMap() {
|
||||
<div class="info-window">
|
||||
<div class="close-btn" ><span>站点信息</span><img src="${guanbi}" alt=""/> </div>
|
||||
<div class="content" style="color:white;font-size: 16px">
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>名称:</span><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>经度:</span><span>${clickInformationData.lon}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/> <span>维度:</span><span>${clickInformationData.lat}</span></div>
|
||||
<div class="line" style="margin-top: 10px">" <div class="label">名称:</div><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px">" <div class="label">经度:</div><span>${clickInformationData.lon}</span></div>
|
||||
<div class="line" style="margin-top: 10px">" <div class="label">纬度:</div><span>${clickInformationData.lat}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -532,9 +595,9 @@ function initMap() {
|
||||
<div class="info-window" >
|
||||
<div class="close-btn" ><span>人员信息</span><img src="${guanbi}" alt=""/> </div>
|
||||
<div class="content" style="color:white;font-size: 16px">
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>姓名:</span><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>手机:</span><span>${clickInformationData.phone}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><img src="${icon}" alt=""/><span>位置:</span><span>${clickInformationData.region}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">姓名:</div><span>${clickInformationData.name}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">手机:</div><span>${clickInformationData.phone}</span></div>
|
||||
<div class="line" style="margin-top: 10px"><div class="label">位置:</div><span>${clickInformationData.region}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -638,7 +701,7 @@ function rightFoldClick() {
|
||||
rightWra.style.transform = 'translate(0,0)';
|
||||
} else {
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
}
|
||||
}
|
||||
|
||||
@ -650,6 +713,7 @@ const onclick = () => {
|
||||
data: value.value,
|
||||
alertRange: radio1.value,
|
||||
flag: 1,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -669,7 +733,7 @@ const meteorologicals = () => {
|
||||
map.removeLayer(personIconLayer.value[i]);
|
||||
}
|
||||
personIconLayer.value = [];
|
||||
getmeteorologyEquipment({ flag: 1, data: value.value }).then(res => {
|
||||
getmeteorologyEquipment({ flag: 1, data: value.value, divisions: code }).then(res => {
|
||||
informationData.value = res.data;
|
||||
for (const i in informationData.value) {
|
||||
const centerLonLat = [
|
||||
@ -696,7 +760,9 @@ const meteorologicals = () => {
|
||||
// 为圆形创建一个样式
|
||||
const circleStyle = new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'rgb(255,255,0)',
|
||||
color:
|
||||
dic[informationData.value[i].warning] &&
|
||||
dic[informationData.value[i].warning].color,
|
||||
width: 2,
|
||||
}),
|
||||
});
|
||||
@ -767,7 +833,12 @@ const meteorologicals = () => {
|
||||
}
|
||||
});
|
||||
|
||||
meteorologicalsPeople({ flag: 1, alertRange: radio1.value, data: value.value ,divisions:code}).then(res => {
|
||||
meteorologicalsPeople({
|
||||
flag: 1,
|
||||
alertRange: radio1.value,
|
||||
data: value.value,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
peopleData.value = res.data;
|
||||
|
||||
for (const i in peopleData.value) {
|
||||
@ -830,6 +901,7 @@ const selectTime = () => {
|
||||
data: value.value,
|
||||
alertRange: radio1.value,
|
||||
flag: 1,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
updatePagedData();
|
||||
@ -839,7 +911,6 @@ const selectTime = () => {
|
||||
const subText = () => {
|
||||
//发送短信
|
||||
getsendSms(multipleSelection.value).then(res => {
|
||||
console.log(res.data);
|
||||
if (res.data.code == 'OK') {
|
||||
ElMessage({
|
||||
message: '发送成功',
|
||||
@ -862,11 +933,36 @@ const getmeteorologicalFreezes = () => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
const getSeeWarnings = () => {
|
||||
getSeeWarning({ flag: 1, divisions: code }).then(res => {
|
||||
if (res.data.length < 1) {
|
||||
ElMessage({
|
||||
message: '近1周暂无预警',
|
||||
type: 'success',
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
message: `近1周${res.data.length}次预警`,
|
||||
type: 'warning',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
const getSeeWarningDatas = () => {
|
||||
let arr = [];
|
||||
getSeeWarningData({ flag: 1, divisions: code }).then(res => {
|
||||
arr = [];
|
||||
res.data.forEach(item => {
|
||||
arr.push(item.dataTime);
|
||||
});
|
||||
holidays.value = arr;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$height: calc(100vh - 100px);
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -876,55 +972,41 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: url('@/assets/images/title.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 110% 100%;
|
||||
color: #fff;
|
||||
width: 90%;
|
||||
margin: 15px;
|
||||
height: 37px;
|
||||
border-radius: 3px 3px, 0px, 0px;
|
||||
background: linear-gradient(90deg, rgba(208, 245, 233, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 45px;
|
||||
padding-left: 46px;
|
||||
line-height: 37px;
|
||||
padding-left: 16px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 100px;
|
||||
border-radius: 30px;
|
||||
border: 1px solid rgba(23, 194, 180, 1);
|
||||
background: rgba(41, 255, 255, 0.1);
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 80%;
|
||||
width: 95%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 1) 33.33%,
|
||||
rgba(41, 255, 219, 1) 100%
|
||||
);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 120px;
|
||||
width: 79px;
|
||||
height: 25px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
border-radius: 4px;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -935,33 +1017,48 @@ $height: calc(100vh - 100px);
|
||||
.ol-overlaycontainer-stopevent {
|
||||
.overlay1 div:first-child {
|
||||
.info-window {
|
||||
padding: 10px;
|
||||
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
.close-btn {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22px;
|
||||
background: url('@/assets/images/top.png');
|
||||
padding: 3px 0 3px 40px;
|
||||
padding: 3px 0 3px 20px;
|
||||
img {
|
||||
margin-right: 15px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: auto 10px;
|
||||
}
|
||||
border-radius: 8px;
|
||||
color: rgba(100, 195, 164, 1);
|
||||
background: rgba(100, 195, 164, 0.05);
|
||||
}
|
||||
|
||||
.content {
|
||||
background: url('@/assets/images/bottom.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.line {
|
||||
background: url('@/assets/images/chande.png');
|
||||
padding-left: 20px;
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label {
|
||||
color: rgba(63, 161, 128, 1);
|
||||
}
|
||||
span {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
display: block;
|
||||
min-width: 160px;
|
||||
background: rgba(100, 195, 164, 0.1);
|
||||
box-shadow: inset 0px 1px 1px rgba(100, 195, 164, 0.5);
|
||||
text-align: center;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -973,25 +1070,24 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.rightWra {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 23%;
|
||||
height: $height;
|
||||
height: calc(100vh - 98px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0 0 15px 6px rgba(41, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.09),
|
||||
0px 0px 6px rgba(0, 0, 0, 0.06), 0px 0px 9px rgba(0, 0, 0, 0.03);
|
||||
transition: transform 1s;
|
||||
|
||||
.farmlandHeader {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin: 20px 0;
|
||||
padding: 0 10px;
|
||||
|
||||
@ -999,16 +1095,8 @@ $height: calc(100vh - 100px);
|
||||
.el-input__wrapper {
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
background: transparent
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(38, 212, 191, 0.5) 0%,
|
||||
rgba(43, 186, 186, 0.5) 25.69%,
|
||||
rgba(45, 165, 181, 0.5) 66.67%,
|
||||
rgba(54, 111, 168, 0.5) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgba(137, 211, 245, 1);
|
||||
background: rgba(100, 195, 164, 0.75);
|
||||
border: 1px solid rgba(100, 195, 164, 1);
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
@ -1018,34 +1106,33 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.rightFoldDiv {
|
||||
width: 30px;
|
||||
width: 28px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
left: -8%;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
transform: translate(-100%, -50%);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 88%;
|
||||
height: calc(100% - 72px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.farmlandDiv {
|
||||
// background: rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
width: 95%;
|
||||
flex-direction: column;
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
height: 100%;
|
||||
|
||||
color: rgba(51, 51, 51, 1);
|
||||
height: calc(100% - 67px);
|
||||
:deep(.el-table--fit) {
|
||||
height: 90%;
|
||||
}
|
||||
@ -1066,26 +1153,26 @@ $height: calc(100vh - 100px);
|
||||
::v-deep .el-input__wrapper {
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
background: transparent
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(38, 212, 191, 0.5) 0%,
|
||||
rgba(43, 186, 186, 0.5) 25.69%,
|
||||
rgba(45, 165, 181, 0.5) 66.67%,
|
||||
rgba(54, 111, 168, 0.5) 100%
|
||||
);
|
||||
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(219, 219, 219, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
width: 70%;
|
||||
.el-input__inner {
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.btws {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
justify-content: center;
|
||||
|
||||
.el-button {
|
||||
color: white;
|
||||
@ -1093,17 +1180,15 @@ $height: calc(100vh - 100px);
|
||||
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
}
|
||||
|
||||
.bt1 {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
background: rgba(100, 195, 164, 1);
|
||||
border: 1px solid rgba(100, 195, 164, 1);
|
||||
}
|
||||
|
||||
.bt2 {
|
||||
background: rgba(22, 94, 102, 1);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(219, 219, 219, 1);
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1136,7 +1221,7 @@ $height: calc(100vh - 100px);
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-border-color: none;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||||
@ -1205,25 +1290,29 @@ $height: calc(100vh - 100px);
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 25%;
|
||||
bottom: 7%;
|
||||
bottom: 60px;
|
||||
width: 129px;
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
|
||||
// height: 50px;
|
||||
:deep(.el-collapse-item__header) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
font-size: 14px;
|
||||
.el-icon {
|
||||
color: rgba(100, 195, 164, 1);
|
||||
}
|
||||
}
|
||||
|
||||
//--el-collapse-content-bg-color {
|
||||
// background: rgba(2, 31, 26, 0.6);
|
||||
//}
|
||||
--el-collapse-content-bg-color {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__content) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
padding: 0 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
@ -1231,12 +1320,20 @@ $height: calc(100vh - 100px);
|
||||
--el-collapse-border-color: none;
|
||||
--el-collapse-content-bg-color: none;
|
||||
|
||||
// opacity: 1;
|
||||
// border-radius: 4px;
|
||||
// background: rgba(2, 31, 26, 0.6);
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: flex-start;
|
||||
// align-items: center;
|
||||
// padding: 10px 10px 10px 10px;
|
||||
p {
|
||||
margin: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 0;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
}
|
||||
@ -1249,32 +1346,56 @@ $height: calc(100vh - 100px);
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 0;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
// color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// :deep(.el-checkbox__label) {
|
||||
// color: #fff;
|
||||
// }
|
||||
:deep(.el-checkbox__label) {
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.cell {
|
||||
height: 30px;
|
||||
padding: 3px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cell .text {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cell.current .text {
|
||||
background: #626aef;
|
||||
color: #fff;
|
||||
}
|
||||
.cell .holiday {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--el-color-danger);
|
||||
border-radius: 50%;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.select_city {
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background: rgba(2, 31, 26, 0.95);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #fff;
|
||||
}
|
||||
background: #fff;
|
||||
}
|
||||
.el-select__popper {
|
||||
border: none !important;
|
||||
@ -1283,10 +1404,22 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.el-popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
background: #fff !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.el-popper__arrow::before {
|
||||
background: rgba(41, 255, 255, 0.7) !important;
|
||||
display: none;
|
||||
}
|
||||
.disabled {
|
||||
color: var(--el-datepicker-off-text-color) !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
.el-select-dropdown {
|
||||
position: absolute !important;
|
||||
left: 0;
|
||||
background: #fff !important;
|
||||
border: 1px solid #ccc;
|
||||
max-width: 230px;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -47,12 +47,12 @@
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }"
|
||||
header-row-class-name="tabth"
|
||||
height="80%"
|
||||
height="90%"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column prop="dataTime" label="日期" width="160">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.dataTime}}</div>
|
||||
<div>{{ scope.row.dataTime }}</div>
|
||||
<!-- <div>{{ handleDate(scope.row.dataTime) }}</div>
|
||||
<div>{{ handleTime(scope.row.dataTime) }}</div> -->
|
||||
</template>
|
||||
@ -72,11 +72,11 @@
|
||||
/>
|
||||
</el-table>
|
||||
<div class="example-pagination-block">
|
||||
共{{ tabulation.length }}条
|
||||
共{{ tabulation }}条
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tabulation.length"
|
||||
:total="Number(tabulation)"
|
||||
:current-page="tabulationcurrentPage"
|
||||
:page-size="tabulationpageSize"
|
||||
@current-change="tabulationCurrentChange"
|
||||
@ -193,7 +193,7 @@ let formInline = ref({
|
||||
});
|
||||
let flags = ref(false);
|
||||
let tabulationcurrentPage = ref(1); //列表当前页
|
||||
let tabulationpageSize = ref(11); //每页条数
|
||||
let tabulationpageSize = ref(14); //每页条数
|
||||
let center = null; // 指定中心点
|
||||
let chartData = ref({
|
||||
airTemperature: [], //空气温度
|
||||
@ -219,14 +219,13 @@ const data = reactive({
|
||||
onMounted(() => {
|
||||
getmeteorologicals();
|
||||
initLeafletMap();
|
||||
getmeteorologys();
|
||||
getMeteorologyTbs();
|
||||
});
|
||||
onUpdated(() => {
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
window.document.querySelector('#screenfull').style.display = 'none';
|
||||
});
|
||||
|
||||
let baseLayers = null;
|
||||
const initLeafletMap = () => {
|
||||
//加载地图
|
||||
map = L.map('cesiumContainers', {
|
||||
@ -235,20 +234,58 @@ const initLeafletMap = () => {
|
||||
zoomControl: false, //禁用 + - 按钮
|
||||
doubleClickZoom: false, // 禁用双击放大
|
||||
attributionControl: false, // 移除右下角leaflet标识
|
||||
maxZoom: 16,
|
||||
crs: serverAPI.tiandituzhuji=='http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng' ? L.CRS.EPSG4326 : L.CRS.EPSG3857
|
||||
});
|
||||
// 渲染底图
|
||||
L.tileLayer(
|
||||
'http://t0.tianditu.com/DataServer?T=img_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||||
).addTo(map);
|
||||
L.tileLayer(
|
||||
'http://t0.tianditu.com/DataServer?T=cia_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||||
).addTo(map);
|
||||
map._onResize();
|
||||
// 创建底图图层
|
||||
let imgBaseLayer = null;
|
||||
let ciaBaseLayer = null;
|
||||
if (
|
||||
serverAPI.tiandituzhuji ==
|
||||
'http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'
|
||||
) {
|
||||
imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
|
||||
maxZoom: 20,
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
});
|
||||
|
||||
ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
|
||||
maxZoom: 20,
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
});
|
||||
} else {
|
||||
// 创建底图图层
|
||||
imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
|
||||
// maxZoom: 20,
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1,
|
||||
});
|
||||
|
||||
ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
|
||||
// maxZoom: 20,
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1,
|
||||
});
|
||||
}
|
||||
// 将底图图层添加到地图
|
||||
imgBaseLayer.addTo(map);
|
||||
ciaBaseLayer.addTo(map);
|
||||
baseLayers = {
|
||||
'Image Base Map': imgBaseLayer,
|
||||
'CIA Base Map': ciaBaseLayer,
|
||||
};
|
||||
L.Util.requestAnimFrame(map.invalidateSize, map, !1, map._container); //解决首次加载不完全问题
|
||||
};
|
||||
|
||||
/*-----------接口---------------*/
|
||||
const getmeteorologicals = () => {
|
||||
getmeteorological({ divisions: code }).then(res => {
|
||||
label2.value = res.data[0].children[0].label;
|
||||
city.value = res.data[0].children[0].label;
|
||||
getmeteorologys();
|
||||
res.data.forEach(item => {
|
||||
devicesArr.value.push(item);
|
||||
});
|
||||
@ -256,96 +293,142 @@ const getmeteorologicals = () => {
|
||||
};
|
||||
const getmeteorologys = () => {
|
||||
getmeteorology({
|
||||
msName: city.value,
|
||||
whetherToDownload: false,
|
||||
startTime: value1.value[0] ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
divisions: code,
|
||||
pageNums:tabulationcurrentPage.value,
|
||||
pageSizes:tabulationpageSize.value
|
||||
}).then(res => {
|
||||
tabulation.value = res.data[0] && res.data[0].pageCount;
|
||||
tableNewData.value = res.data
|
||||
});
|
||||
getMeteorologyTbs();
|
||||
// getMeteorological({ divisions: code }).then(res => {
|
||||
// map.eachLayer(layer => {
|
||||
// // 检查图层是否为底图
|
||||
// const isBaseLayer = Object.values(baseLayers).includes(layer);
|
||||
// // 如果不是底图，删除图层
|
||||
// if (!isBaseLayer) {
|
||||
// map.removeLayer(layer);
|
||||
// }
|
||||
// });
|
||||
// res.data.forEach(item => {
|
||||
// center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
// map.setView(center, 17);
|
||||
// L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||||
// .addTo(map)
|
||||
// .bindPopup(
|
||||
// `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||||
// )
|
||||
// .openPopup();
|
||||
// });
|
||||
// });
|
||||
};
|
||||
const getMeteorologyTbs = () => {
|
||||
getMeteorologyTb({
|
||||
name: city.value,
|
||||
whetherToDownload: false,
|
||||
startTime: value1.value[0] ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
divisions: window.localStorage.getItem('divisions'),
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
tabulation.value = res.data;
|
||||
tableNewData.value = res.data.slice(
|
||||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
|
||||
);
|
||||
});
|
||||
getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
map.setView(center, 17);
|
||||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||||
.addTo(map)
|
||||
.bindPopup(
|
||||
`<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||||
)
|
||||
.openPopup();
|
||||
});
|
||||
});
|
||||
};
|
||||
const getMeteorologyTbs = () => {
|
||||
(chartData.value['airTemperature'] = []), //空气温度
|
||||
(chartData.value['airHumidity'] = []), //空气湿度
|
||||
(chartData.value['windSpeed'] = []), //风速
|
||||
(chartData.value['windDirection'] = []), //风向
|
||||
(chartData.value['rainfall'] = []), //雨量
|
||||
(chartData.value['atmosphericPressure'] = []), //大气压力
|
||||
(chartData.value['evaporation'] = []), //蒸发
|
||||
(chartData.value['lightIntensity'] = []), //光照强度
|
||||
(chartData.value['sunlightHours'] = []), //日照时数
|
||||
(chartData.value['photosyntheticEffectiveRadiation'] = []), //光合有效
|
||||
(chartData.value['dataTimeArr'] = []),
|
||||
getMeteorologyTb({
|
||||
name: city.value,
|
||||
whetherToDownload: false,
|
||||
startTime: value1.value[0]
|
||||
? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss')
|
||||
: null,
|
||||
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
}).then(res => {
|
||||
(chartData.value['airTemperature'] = []), //空气温度
|
||||
(chartData.value['airHumidity'] = []), //空气湿度
|
||||
(chartData.value['windSpeed'] = []), //风速
|
||||
(chartData.value['windDirection'] = []), //风向
|
||||
(chartData.value['rainfall'] = []), //雨量
|
||||
(chartData.value['atmosphericPressure'] = []), //大气压力
|
||||
(chartData.value['evaporation'] = []), //蒸发
|
||||
(chartData.value['lightIntensity'] = []), //光照强度
|
||||
(chartData.value['sunlightHours'] = []), //日照时数
|
||||
(chartData.value['photosyntheticEffectiveRadiation'] = []), //光合有效
|
||||
(chartData.value['dataTimeArr'] = []),
|
||||
res.data.forEach(item => {
|
||||
chartData.value['airTemperature'].unshift(item.airTemperature);
|
||||
chartData.value['airHumidity'].unshift(item.airHumidity);
|
||||
chartData.value['windSpeed'].unshift(item.windSpeed);
|
||||
chartData.value['windDirection'].unshift(item.windDirection);
|
||||
chartData.value['rainfall'].unshift(item.rainfall);
|
||||
chartData.value['atmosphericPressure'].unshift(item.atmosphericPressure);
|
||||
chartData.value['evaporation'].unshift(item.evaporation);
|
||||
chartData.value['lightIntensity'].unshift(item.lightIntensity);
|
||||
chartData.value['sunlightHours'].unshift(item.sunlightHours);
|
||||
chartData.value['photosyntheticEffectiveRadiation'].unshift(
|
||||
chartData.value['airTemperature'].push(item.airTemperature);
|
||||
chartData.value['airHumidity'].push(item.airHumidity);
|
||||
chartData.value['windSpeed'].push(item.windSpeed);
|
||||
chartData.value['windDirection'].push(item.windDirection);
|
||||
chartData.value['rainfall'].push(item.rainfall);
|
||||
chartData.value['atmosphericPressure'].push(item.atmosphericPressure);
|
||||
chartData.value['evaporation'].push(item.evaporation);
|
||||
chartData.value['lightIntensity'].push(item.lightIntensity);
|
||||
chartData.value['sunlightHours'].push(item.sunlightHours);
|
||||
chartData.value['photosyntheticEffectiveRadiation'].push(
|
||||
item.photosyntheticEffectiveRadiation
|
||||
);
|
||||
chartData.value['dataTimeArr'].unshift(item.dataTime);
|
||||
chartData.value['dataTimeArr'].push(item.dataTime);
|
||||
});
|
||||
chart();
|
||||
});
|
||||
chart();
|
||||
});
|
||||
};
|
||||
/*------------事件----------------*/
|
||||
watch(
|
||||
() => label2.value,
|
||||
(val, oldVal) => {
|
||||
getMeteorological({ divisions: code }).then(res => {
|
||||
map.eachLayer(layer => {
|
||||
// 检查图层是否为底图
|
||||
const isBaseLayer = Object.values(baseLayers).includes(layer);
|
||||
// 如果不是底图，删除图层
|
||||
if (!isBaseLayer) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
res.data.forEach(item => {
|
||||
if (item.msName == label2.value) {
|
||||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
map.setView(center, 17);
|
||||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||||
.addTo(map)
|
||||
.bindPopup(
|
||||
`<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||||
)
|
||||
.openPopup();
|
||||
}
|
||||
});
|
||||
});
|
||||
getMeteorologyTbs();
|
||||
}
|
||||
);
|
||||
//树结构
|
||||
const handleNodeClick = (data, node, data1, data2) => {
|
||||
label2.value = data.label;
|
||||
formInline.value.flag = '';
|
||||
// let oriFatherId = node.parent.parent.data;
|
||||
// label1.value = oriFatherId.label;
|
||||
// getCameraNames(label2.value);
|
||||
city.value = label2.value;
|
||||
getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.msName == label2.value) {
|
||||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
map.setView(center, 17);
|
||||
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||||
.addTo(map)
|
||||
.bindPopup(
|
||||
`<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||||
)
|
||||
.openPopup();
|
||||
}
|
||||
});
|
||||
});
|
||||
tabulationcurrentPage.value = 1;
|
||||
if (!data.children) {
|
||||
label2.value = data.label;
|
||||
formInline.value.flag = '';
|
||||
value1.value = [];
|
||||
city.value = label2.value;
|
||||
// getMeteorological({ divisions: code }).then(res => {
|
||||
// map.eachLayer(layer => {
|
||||
// // 检查图层是否为底图
|
||||
// const isBaseLayer = Object.values(baseLayers).includes(layer);
|
||||
// // 如果不是底图，删除图层
|
||||
// if (!isBaseLayer) {
|
||||
// map.removeLayer(layer);
|
||||
// }
|
||||
// });
|
||||
// res.data.forEach(item => {
|
||||
// if (item.msName == label2.value) {
|
||||
// center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
// map.setView(center, 17);
|
||||
// L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
|
||||
// .addTo(map)
|
||||
// .bindPopup(
|
||||
// `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
|
||||
// )
|
||||
// .openPopup();
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
getmeteorologys();
|
||||
}
|
||||
};
|
||||
|
||||
//查询
|
||||
const onSubmit = e => {
|
||||
tabulationcurrentPage.value = 1;
|
||||
getmeteorologys();
|
||||
getMeteorologyTbs();
|
||||
chart();
|
||||
@ -395,10 +478,17 @@ const foldClick = () => {
|
||||
//分页
|
||||
const tabulationCurrentChange = val => {
|
||||
tabulationcurrentPage.value = val;
|
||||
tableNewData.value = tabulation.value.slice(
|
||||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
|
||||
(tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
|
||||
);
|
||||
getmeteorology({
|
||||
msName: city.value,
|
||||
whetherToDownload: false,
|
||||
startTime: value1.value[0] ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
divisions: code,
|
||||
pageNums:tabulationcurrentPage.value,
|
||||
pageSizes:tabulationpageSize.value
|
||||
}).then(res => {
|
||||
tableNewData.value = res.data
|
||||
});
|
||||
};
|
||||
//时间换行
|
||||
const handleDate = timestamp => {
|
||||
@ -419,6 +509,7 @@ const handleTime = timestamp => {
|
||||
const resetForm = () => {
|
||||
value1.value = '';
|
||||
formInline.value.flag = '';
|
||||
tabulationcurrentPage.value=1
|
||||
getmeteorologys();
|
||||
};
|
||||
//图表切换
|
||||
@ -432,6 +523,7 @@ const dowcity = () => {
|
||||
whetherToDownload: true,
|
||||
startTime: value1.value[0] ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
|
||||
divisions: code,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||||
});
|
||||
@ -837,10 +929,10 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
.chartModeFather {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
height: calc(100% - 140px);
|
||||
.chartDiv {
|
||||
width: 100% !important;
|
||||
height: 89% !important;
|
||||
height: calc(100% - 26px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -989,15 +1081,16 @@ $height: calc(100vh - 100px);
|
||||
) {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
height: 93%;
|
||||
height: 100%;
|
||||
:deep(.el-table__inner-wrapper) {
|
||||
height: 96% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.example-pagination-block {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
:deep(.tabth) {
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
@ -1042,9 +1135,9 @@ $height: calc(100vh - 100px);
|
||||
) {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
height: 93%;
|
||||
height: 100%;
|
||||
:deep(.el-table__inner-wrapper) {
|
||||
height: 96% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.example-pagination-block {
|
||||
font-size: 14px;
|
||||
@ -1146,6 +1239,15 @@ $height: calc(100vh - 100px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node) {
|
||||
//el-tree 换行展示
|
||||
white-space: normal; //关键代码!!!!!!!!!
|
||||
.el-tree-node__content {
|
||||
height: 100%;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.video {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
192
src/views/operationLog/index.vue
Normal file
192
src/views/operationLog/index.vue
Normal file
@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="jobLogList"
|
||||
header-row-class-name="tabth"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column label="数据名称" width="180" align="center" prop="name" />
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
prop="operate"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作状态"
|
||||
align="center"
|
||||
prop="runningStatus"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="开始时间"
|
||||
align="center"
|
||||
prop="startTime"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="结束时间"
|
||||
align="center"
|
||||
prop="endTime"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="存储路径"
|
||||
align="center"
|
||||
prop="cclj"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="View"
|
||||
@click="handleView(scope.row)"
|
||||
v-hasPermi="['monitor:job:query']"
|
||||
>
|
||||
详细
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
/>
|
||||
|
||||
<!-- 调度日志详细 -->
|
||||
<el-dialog title="调度日志详细" v-model="open" width="700px" append-to-body>
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
|
||||
<el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="任务分组：">{{ form.jobGroup }}</el-form-item>
|
||||
<el-form-item label="执行时间：">{{ form.createTime }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="调用方法：">{{ form.invokeTarget }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="日志信息：">{{ form.jobMessage }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="执行状态：">
|
||||
<div v-if="form.status == 0">正常</div>
|
||||
<div v-else-if="form.status == 1">失败</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="异常信息：" v-if="form.status == 1">
|
||||
{{ form.exceptionInfo }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="open = false">关 闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="JobLog">
|
||||
import { getJob } from '@/api/monitor/job';
|
||||
import { getfindLog } from '@/api/operationLog/operationLog.js';
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { sys_common_status, sys_job_group } = proxy.useDict('sys_common_status', 'sys_job_group');
|
||||
|
||||
const jobLogList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const dateRange = ref([]);
|
||||
const route = useRoute();
|
||||
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 17,
|
||||
dictName: undefined,
|
||||
dictType: undefined,
|
||||
status: undefined,
|
||||
},
|
||||
});
|
||||
let pageArr = ref([]);
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
onUpdated(() => {
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
window.document.querySelector('#screenfull').style.display = 'none';
|
||||
})
|
||||
watch(
|
||||
() => data.queryParams.pageNum,
|
||||
(val, oldVal) => {
|
||||
jobLogList.value = pageArr.value.slice(
|
||||
(data.queryParams.pageNum - 1) * data.queryParams.pageSize,
|
||||
data.queryParams.pageNum * data.queryParams.pageSize
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
/** 查询调度日志列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
getfindLog().then(res => {
|
||||
loading.value = false;
|
||||
pageArr.value = res.data;
|
||||
jobLogList.value = pageArr.value.slice(
|
||||
(data.queryParams.pageNum - 1) * data.queryParams.pageSize,
|
||||
data.queryParams.pageNum * data.queryParams.pageSize
|
||||
);
|
||||
total.value = pageArr.value.length;
|
||||
});
|
||||
}
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map(item => item.jobLogId);
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
(() => {
|
||||
const jobId = route.params && route.params.jobId;
|
||||
if (jobId !== undefined && jobId != 0) {
|
||||
getJob(jobId).then(response => {
|
||||
queryParams.value.jobName = response.data.jobName;
|
||||
queryParams.value.jobGroup = response.data.jobGroup;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
getList();
|
||||
}
|
||||
})();
|
||||
|
||||
getList();
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.tabth) {
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
}
|
||||
:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
:deep(.el-pagination__sizes){
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -2,8 +2,21 @@
|
||||
<div class="center">
|
||||
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||||
<div class="rightWra">
|
||||
<div class="rightbottom">
|
||||
<div class="tabar">
|
||||
<div :class="tabrFlag ? 'tabarS' : ''" @click="tabRightWra(true)">行政区划</div>
|
||||
<div :class="!tabrFlag ? 'tabarS' : ''" @click="tabRightWra(false)">高标准农田</div>
|
||||
</div>
|
||||
<div class="rightbottom" v-show="tabrFlag">
|
||||
<div class="title">
|
||||
<div
|
||||
style="
|
||||
width: 3px;
|
||||
height: 19px;
|
||||
opacity: 1;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
margin-right: 12px;
|
||||
"
|
||||
></div>
|
||||
<span>非粮化耕地面积统计</span>
|
||||
<p @click="Deta()">
|
||||
下载
|
||||
@ -29,12 +42,46 @@
|
||||
</el-select>
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
<div class="rightbottom">
|
||||
<div class="rightbottom" v-show="tabrFlag">
|
||||
<div class="title">
|
||||
<div
|
||||
style="
|
||||
width: 3px;
|
||||
height: 19px;
|
||||
opacity: 1;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
margin-right: 12px;
|
||||
"
|
||||
></div>
|
||||
<span>非粮化耕地面积占比</span>
|
||||
</div>
|
||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||
</div>
|
||||
<div v-show="!tabrFlag" class="rightTop">
|
||||
<div class="title">
|
||||
<div
|
||||
style="
|
||||
width: 3px;
|
||||
height: 19px;
|
||||
opacity: 1;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
margin-right: 12px;
|
||||
"
|
||||
></div>
|
||||
<span>高标准农田</span>
|
||||
<p @click="Deta3()" v-if="limits">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div v-show="limits" ref="farmlandDiv" class="farmlandDiv"></div>
|
||||
<div v-if="!limits">
|
||||
<img src="@/assets/images/qx.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-tooltip
|
||||
:disabled="!rightWraFlag"
|
||||
@ -46,7 +93,9 @@
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
<el-icon v-if="rightWraFlag">
|
||||
<img src="@/assets/images/shouhuis.png" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="rightWraFlag"
|
||||
@ -58,12 +107,9 @@
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="!rightWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
<el-icon v-if="!rightWraFlag">
|
||||
<img src="@/assets/images/zhankaiss.png" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -100,6 +146,8 @@
|
||||
v-if="dataSource.length > 0"
|
||||
:dataSource="dataSource"
|
||||
@dataHandle="handleData"
|
||||
:allCount="allCount"
|
||||
@getcurrentPage="getcurrentPage"
|
||||
/>
|
||||
</div>
|
||||
<div class="tool">
|
||||
@ -118,9 +166,11 @@
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
color: rgba(246, 255, 255, 1);
|
||||
line-height: 42px;
|
||||
padding-left: 45px;
|
||||
padding-left: 15px;
|
||||
border-radius: 8px;
|
||||
margin: 20px;
|
||||
background: rgba(100, 195, 164, 0.05);
|
||||
"
|
||||
></div>
|
||||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
||||
@ -128,9 +178,7 @@
|
||||
<div id="popup-content" style="padding: 10px">
|
||||
<div class="perform" v-for="(item, index) in alterArr" :key="index">
|
||||
<div class="perform_children">
|
||||
<img src="@/assets/images/icon.png" />
|
||||
<span>非粮化</span>
|
||||
:
|
||||
<div class="label">非粮化:</div>
|
||||
<span>{{ Number(item.farm).toFixed(2) }}(亩)</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -147,7 +195,13 @@ import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getNonFood, getNonFoodHuoChun, getNonFoodChun, getFlYear } from '@/api/plough/degrain.js';
|
||||
import {
|
||||
getNonFood,
|
||||
getNonFoodHuoChun,
|
||||
getNonFoodChun,
|
||||
getFlYear,
|
||||
getlhdHeith,
|
||||
} from '@/api/plough/degrain.js';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
import axios from 'axios';
|
||||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||||
@ -161,14 +215,21 @@ const value = ref('370211');
|
||||
const clickInfoMap = ref({ info: [] });
|
||||
const flag = ref(false);
|
||||
let leftWraFlag = ref(true);
|
||||
let rightWraFlag = ref(true);
|
||||
let rightWraFlag = ref(false);
|
||||
const checkList = ref([]);
|
||||
let checkListdata = ref([]);
|
||||
let alterArr = ref([]);
|
||||
let dataSource = ref([]);
|
||||
let oldDatas = ref('');
|
||||
let time = ref(1);
|
||||
let allCount = ref([]);
|
||||
let currentPageS = ref('');
|
||||
let pageSizeS = ref(5);
|
||||
let timeArr = ref([]);
|
||||
let tabrFlag = ref(true);
|
||||
let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
|
||||
let standardArr = ref([]);
|
||||
const farmlandDiv = ref(null);
|
||||
let code =
|
||||
window.localStorage.getItem('deptName') == '青岛西海岸新区'
|
||||
? '黄岛区'
|
||||
@ -196,9 +257,7 @@ let dic = {
|
||||
非粮化: { color: 'rgba(47, 236, 56, 0.8)', disabled: false },
|
||||
};
|
||||
// 图层字典
|
||||
let layersDic = {
|
||||
|
||||
};
|
||||
let layersDic = {};
|
||||
let layers = ref(null); //村
|
||||
var data = {
|
||||
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
|
||||
@ -218,6 +277,15 @@ const options = [
|
||||
label: 'Option2',
|
||||
},
|
||||
];
|
||||
const tabRightWra = flag => {
|
||||
tabrFlag.value = flag;
|
||||
if (flag) {
|
||||
ASdivision()
|
||||
typesof()
|
||||
} else {
|
||||
farmland()
|
||||
}
|
||||
};
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
initonMounted();
|
||||
@ -236,6 +304,8 @@ function initonMounted() {
|
||||
}
|
||||
}
|
||||
checkList.value = checkListdata.value;
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
}
|
||||
onUpdated(() => {
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
@ -296,10 +366,11 @@ function initmap() {
|
||||
}),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Tianditu({
|
||||
layerType: 'img',
|
||||
key: '1d109683f4d84198e37a38c442d68311',
|
||||
source: new ol.source.XYZ({
|
||||
url: `${serverAPI.tiandituLayers}`,
|
||||
projection: serverAPI.tiandituLayers == 'http://59.206.203.34/tileservice/SdRasterPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdimg2017&STYLE=default&TILEMATRIXSET=img2017&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'?'EPSG:4326':'EPSG:3857',
|
||||
}),
|
||||
preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
|
||||
}),
|
||||
//注记
|
||||
// new ol.layer.Tile({
|
||||
@ -337,19 +408,19 @@ function initmap() {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
`${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
`${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
let url = 'http://36.134.44.75:8090/iserver/services/data-huangdaoqu_bianjie/rest/data';
|
||||
let url = `${serverAPI.geoserverUrl}/data-huangdaoqu_bianjie/rest/data`;
|
||||
let sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
|
||||
queryParameter: {
|
||||
name: 'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
@ -384,14 +455,14 @@ function initmap() {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
`${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
`${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
@ -428,7 +499,7 @@ function SQLSearch(name) {
|
||||
let setName = '';
|
||||
let setOf = '';
|
||||
let quyu = '';
|
||||
url = 'http://36.134.44.75:8090/iserver/services/data-huangdaoqu_bianjie/rest/data';
|
||||
url = `${serverAPI.geoserverUrl}/data-huangdaoqu_bianjie/rest/data`;
|
||||
names = name;
|
||||
|
||||
setName = 'XJQY3702112019WGS84';
|
||||
@ -486,15 +557,14 @@ function SQLSearch(name) {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//添加村级矢量
|
||||
const cun = () => {
|
||||
layers = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'huangdaoqu_village',
|
||||
name: 'CJQY3702112019WGS84',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
@ -503,10 +573,10 @@ const cun = () => {
|
||||
const zhen = () => {
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: 'XJQY3702112019WGS84',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
@ -722,7 +792,6 @@ watch(
|
||||
});
|
||||
newData.forEach(item => {
|
||||
if (layersDic[item]) {
|
||||
console.log(2);
|
||||
addwms(layersDic[item]);
|
||||
}
|
||||
});
|
||||
@ -762,19 +831,33 @@ function rightFoldClick() {
|
||||
rightWra.style.transform = 'translate(0,0)';
|
||||
} else {
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
rightWra.style.transform = 'translate(101%,0)';
|
||||
}
|
||||
}
|
||||
|
||||
//接口
|
||||
const getcurrentPage = params => {
|
||||
dataSource.value = timeArr.value.slice(
|
||||
(params - 1) * pageSizeS.value,
|
||||
params * pageSizeS.value
|
||||
);
|
||||
};
|
||||
|
||||
//时间
|
||||
const getFlYears = () => {
|
||||
getFlYear().then(res => {
|
||||
oldDatas.value = { name: res.data[res.data.length - 1] };
|
||||
let arr = [];
|
||||
res.data.forEach(item => {
|
||||
dataSource.value.push({ name: item });
|
||||
arr.push({ name: item });
|
||||
});
|
||||
timeArr.value = arr;
|
||||
allCount.value = Math.ceil(timeArr.value.length / 5); //总页数
|
||||
currentPageS = Math.ceil(arr.length / 5); //当前页
|
||||
dataSource.value = timeArr.value.slice(
|
||||
(currentPageS - 1) * pageSizeS.value,
|
||||
currentPageS * pageSizeS.value
|
||||
);
|
||||
let str = oldDatas.value.name;
|
||||
let str1 = str.replace(/-/g, '_');
|
||||
layersDic = {
|
||||
@ -783,6 +866,25 @@ const getFlYears = () => {
|
||||
name: `T${str1}_feilianghua`,
|
||||
},
|
||||
};
|
||||
getlhdHeiths()
|
||||
});
|
||||
};
|
||||
//高标准
|
||||
const getlhdHeiths = () => {
|
||||
getlhdHeith({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
|
||||
standardArr.value = res.data;
|
||||
if (res.data.length > 0) {
|
||||
farmland();
|
||||
}
|
||||
});
|
||||
};
|
||||
const Deta3 = item => {
|
||||
getlhdHeith({
|
||||
divisions: '370211',
|
||||
yearMonth: oldDatas.value.name,
|
||||
whetherToDownload: true,
|
||||
}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
};
|
||||
//镇
|
||||
@ -893,7 +995,7 @@ function ASdivision() {
|
||||
show: true,
|
||||
top: '10',
|
||||
right: '5%',
|
||||
textStyle: { color: 'rgba(255,255,255,.9)' },
|
||||
textStyle: { color: 'rgba(153, 153, 153, 1)' },
|
||||
itemWidth: 20,
|
||||
itemHeight: 12.5,
|
||||
icon: 'rect',
|
||||
@ -953,7 +1055,7 @@ function ASdivision() {
|
||||
textStyle: {
|
||||
padding: [8, 0, 0, 0],
|
||||
fontSize: 14,
|
||||
color: '#fff',
|
||||
color: 'rgba(153, 153, 153, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -961,7 +1063,7 @@ function ASdivision() {
|
||||
name: '',
|
||||
triggerEvent: true,
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255,255,255,1)',
|
||||
color: 'rgba(153, 153, 153, 1)',
|
||||
fontSize: 16,
|
||||
padding: [0, 0, 10, -20],
|
||||
},
|
||||
@ -981,7 +1083,7 @@ function ASdivision() {
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
color: 'rgba(153, 153, 153, 1)',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
@ -1000,11 +1102,15 @@ function ASdivision() {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(47, 236, 56, 1)',
|
||||
color: 'rgba(255, 211, 81, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: 'rgba(255, 211, 81, 1)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(47, 236, 56, 0.8)',
|
||||
color: 'rgba(255, 211, 81, 0.05)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
@ -1051,7 +1157,7 @@ function typesof() {
|
||||
text: '非粮化总面积',
|
||||
subtext: `${totalArea.toFixed(2)}亩`,
|
||||
textStyle: {
|
||||
color: '#f2f2f2',
|
||||
color: 'rgba(51, 51, 51, 1)',
|
||||
fontSize: 14,
|
||||
// align: 'center'
|
||||
},
|
||||
@ -1138,32 +1244,6 @@ function typesof() {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '外边框',
|
||||
type: 'pie',
|
||||
clockWise: false, //顺时加载
|
||||
hoverAnimation: false, //鼠标移入变大
|
||||
center: ['50%', '50%'],
|
||||
radius: ['85%', '85%'],
|
||||
tooltip: { show: false },
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 9,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#0b5263',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -1175,6 +1255,209 @@ function typesof() {
|
||||
});
|
||||
});
|
||||
}
|
||||
function farmland() {
|
||||
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||||
let subNameArr = [];
|
||||
let wheatUnitOutputValueArr = [];
|
||||
let wheatOutputArr = [];
|
||||
standardArr.value.forEach(item => {
|
||||
subNameArr.push(item.subregionName);
|
||||
wheatUnitOutputValueArr.push(item.farm);
|
||||
});
|
||||
let ends = (3 / subNameArr.length) * 100;
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params, ticket, callback) {
|
||||
var res = params[0].name;
|
||||
|
||||
for (var i = 0, l = params.length; i < l; i++) {
|
||||
if (params[i].seriesType === 'line') {
|
||||
res +=
|
||||
'<br/>' +
|
||||
params[i].seriesName +
|
||||
' : ' +
|
||||
(params[i].value ? params[i].value : '-') +
|
||||
'h';
|
||||
} else {
|
||||
res +=
|
||||
'<br/>' +
|
||||
params[i].seriesName +
|
||||
' : ' +
|
||||
(params[i].value ? params[i].value : '-') +
|
||||
'';
|
||||
}
|
||||
}
|
||||
return res;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
bottom: '15%',
|
||||
left: '15%',
|
||||
right: '10%',
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: false, //隐藏或显示（true）组件
|
||||
type: 'slider',
|
||||
width: '40%',
|
||||
zoomLock: false,
|
||||
top: '90%',
|
||||
start: 0,
|
||||
end: ends,
|
||||
showDataShadow: false,
|
||||
showDetail: false,
|
||||
fillerColor: 'rgba(64, 158, 255)',
|
||||
borderRadius: '50%',
|
||||
moveHandleSize: 0,
|
||||
moveHandleStyle: {},
|
||||
left: '35%',
|
||||
height: 12,
|
||||
handleSize: '80%',
|
||||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||||
handleStyle: {
|
||||
borderWidth: 0,
|
||||
color: 'rgba(64, 158, 255)',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
],
|
||||
// legend: {
|
||||
// data: ['单产量', '总产量'],
|
||||
// textStyle: {
|
||||
// color: 'rgba(153, 153, 153, 1)',
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// type: 'scroll',
|
||||
// top: '3%',
|
||||
// },
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
formatter: function (value) {
|
||||
var ret = ''; //拼接加\n返回的类目项
|
||||
var maxLength = 5; //每项显示文字个数
|
||||
var valLength = value.length; //X轴类目项的文字个数
|
||||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||||
if (rowN > 1) {
|
||||
//如果类目项的文字大于5,
|
||||
for (var i = 0; i < rowN; i++) {
|
||||
var temp = ''; //每次截取的字符串
|
||||
var start = i * maxLength; //开始截取的位置
|
||||
var end = start + maxLength; //结束截取的位置
|
||||
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||||
temp = value.substring(start, end) + '\n';
|
||||
ret += temp; //凭借最终的字符串
|
||||
}
|
||||
return ret;
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(153, 153, 153, 1)',
|
||||
},
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
data: subNameArr,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '面积(亩)',
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
relativeSize: -2,
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(153, 153, 153, 1)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
//分割线样式
|
||||
type: 'dashed',
|
||||
color: 'rgba(153, 153, 153, 1)',
|
||||
},
|
||||
},
|
||||
min: 0,
|
||||
position: 'top',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '面积(亩)',
|
||||
type: 'bar',
|
||||
barWidth: '10%',
|
||||
yAxisIndex: 0,
|
||||
data: wheatUnitOutputValueArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 2,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(64, 192, 87, 0.5)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(64, 192, 87, 0.2)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
// borderColor:'rgba(0, 170, 255, 0.9)',
|
||||
shadowColor: 'rgba(255, 255, 255, 0.5)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// areaDivIntance.off('click') //图表渲染前销毁点击事件,防止点击图标多次触发
|
||||
// farmlandDivIntance.on('click', param => ChartClick(param));
|
||||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
let erd = elementResizeDetectorMaker();
|
||||
erd.listenTo(farmlandDiv.value, () => {
|
||||
nextTick(() => {
|
||||
farmlandDivIntance.resize();
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -1188,33 +1471,29 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: url('@/assets/images/title.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 110% 100%;
|
||||
color: #fff;
|
||||
width: 90%;
|
||||
margin: 15px;
|
||||
height: 37px;
|
||||
border-radius: 3px 3px, 0px, 0px;
|
||||
background: linear-gradient(90deg, rgba(208, 245, 233, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 45px;
|
||||
padding-left: 46px;
|
||||
line-height: 37px;
|
||||
padding-left: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
width: 80%;
|
||||
width: 95%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 1) 33.33%,
|
||||
rgba(41, 255, 219, 1) 100%
|
||||
);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -1222,13 +1501,10 @@ $height: calc(100vh - 100px);
|
||||
height: 25px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
border-radius: 4px;
|
||||
background: rgba(100, 195, 164, 1);
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -1290,24 +1566,51 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.rightWra {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 23%;
|
||||
height: $height;
|
||||
height: calc(100vh - 98px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.09),
|
||||
0px 0px 6px rgba(0, 0, 0, 0.06), 0px 0px 9px rgba(0, 0, 0, 0.03);
|
||||
transition: transform 1s;
|
||||
.tabar {
|
||||
width: 90%;
|
||||
margin: 15px 15px 0 15px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
padding: 0 15px;
|
||||
justify-content: space-around;
|
||||
div {
|
||||
width: 45%;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(100, 195, 164, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(100, 195, 164, 1);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tabarS {
|
||||
background: rgba(100, 195, 164, 1);
|
||||
border: 1px solid rgba(100, 195, 164, 1);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
.rightFoldDiv {
|
||||
width: 30px;
|
||||
width: 28px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
left: -8%;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
transform: translate(-100%, -50%);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
}
|
||||
@ -1337,42 +1640,36 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.rightbottom {
|
||||
width: 100%;
|
||||
height: 455px;
|
||||
height: calc(50% - 25px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding-top: 13px;
|
||||
|
||||
.el-select {
|
||||
width: 80%;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
background: rgba(22, 94, 102, 1);
|
||||
// border: 1px solid rgba(4, 153, 153, 1) !important;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #ccc !important;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: transparent;
|
||||
// background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
.typesofDiv {
|
||||
width: 100%;
|
||||
height: 368px;
|
||||
height: calc(100% - 67px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85% 85%;
|
||||
background-position: center;
|
||||
}
|
||||
.ASdivision {
|
||||
width: 100%;
|
||||
height: 368px;
|
||||
height: calc(100% - 100px);
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -1393,17 +1690,22 @@ $height: calc(100vh - 100px);
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 25%;
|
||||
bottom: 7%;
|
||||
bottom: 60px;
|
||||
width: 129px;
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
|
||||
// height: 50px;
|
||||
:deep(.el-collapse-item__header) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
font-size: 14px;
|
||||
.el-icon {
|
||||
color: rgba(100, 195, 164, 1);
|
||||
}
|
||||
}
|
||||
|
||||
--el-collapse-content-bg-color {
|
||||
@ -1411,7 +1713,6 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__content) {
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
padding: 0 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
@ -1447,7 +1748,7 @@ $height: calc(100vh - 100px);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
// color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@ -1467,7 +1768,7 @@ $height: calc(100vh - 100px);
|
||||
left: -2%;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: calc(100% - (400px * 2) - (10vw * 2));
|
||||
width: 570px;
|
||||
min-width: 380px;
|
||||
bottom: 5%;
|
||||
height: 75px;
|
||||
@ -1529,57 +1830,51 @@ $height: calc(100vh - 100px);
|
||||
.ol-popup-closer {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 15px;
|
||||
color: #fff !important;
|
||||
top: 25px;
|
||||
right: 30px;
|
||||
color: rgba(100, 195, 164, 1) !important;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: '✖';
|
||||
font-size: 18px;
|
||||
}
|
||||
#popup {
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08),
|
||||
0px 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
.pophead {
|
||||
background-image: url('@/assets/images/top.png') !important;
|
||||
background-repeat: no-repeat;
|
||||
min-width: 315px;
|
||||
height: 42px;
|
||||
opacity: 1;
|
||||
background: linear-gradient(270deg, rgba(19, 92, 98, 0.4) 0%, rgba(19, 92, 98, 1) 100%);
|
||||
border-radius: 8px;
|
||||
color: rgba(100, 195, 164, 1);
|
||||
.popup-title {
|
||||
min-width: 320px;
|
||||
}
|
||||
}
|
||||
#popup-content {
|
||||
background: url('@/assets/images/bottom.png') no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
width: 280px;
|
||||
height: 86px;
|
||||
width: 100% !important;
|
||||
width: max-content;
|
||||
opacity: 1;
|
||||
background: rgba(2, 31, 26, 0.7);
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
.perform {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
}
|
||||
.perform_children {
|
||||
width: 100%;
|
||||
width: 195px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(19, 92, 98, 0) 0%,
|
||||
rgba(33, 169, 169, 0.36) 100%
|
||||
);
|
||||
padding-left: 18px;
|
||||
display: flex;
|
||||
background: url('@/assets/images/duande.png') no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
justify-content: flex-end;
|
||||
.label {
|
||||
color: rgba(47, 214, 214, 1);
|
||||
color: rgba(63, 161, 128, 1);
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
background: rgba(100, 195, 164, 0.1);
|
||||
box-shadow: inset 0px 1px 1px rgba(100, 195, 164, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1594,17 +1889,7 @@ $height: calc(100vh - 100px);
|
||||
|
||||
<style lang="scss">
|
||||
.select_city {
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background: rgba(2, 31, 26, 0.95);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #fff;
|
||||
}
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.el-select__popper {
|
||||
@ -1614,9 +1899,12 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.el-popper {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
background: #fff !important;
|
||||
color: black !important;
|
||||
}
|
||||
.el-popper__arrow::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-popper__arrow::before {
|
||||
background: rgba(41, 255, 255, 0.7) !important;
|
||||
}
|
||||
|
||||
489
src/views/plough/VideoSurveillance/imouplayer.css
Normal file
489
src/views/plough/VideoSurveillance/imouplayer.css
Normal file
File diff suppressed because one or more lines are too long
@ -49,7 +49,7 @@
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }"
|
||||
header-row-class-name="tabth"
|
||||
height="80%"
|
||||
height="calc(100vh - 200px)"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column
|
||||
@ -58,7 +58,7 @@
|
||||
label="序号"
|
||||
:index="Nindex"
|
||||
/>
|
||||
<el-table-column prop="village" label="村名" width="180" />
|
||||
<el-table-column prop="village" label="位置" width="180" />
|
||||
<el-table-column prop="cameraName" label="摄像头名称" width="180" />
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
@ -77,8 +77,8 @@
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tabulation.length"
|
||||
:current-page="tabulationcurrentPage"
|
||||
:page-size="tabulationpageSize"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
@current-change="tabulationCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
@ -105,10 +105,12 @@
|
||||
class="video"
|
||||
destroy-on-close
|
||||
title="实时监控"
|
||||
width="30%"
|
||||
width="40%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<div class="myVideo"><VideoJs :videoSrc="data.videoSrc" autoPlay /></div>
|
||||
<div id="myVideo" style="width: 100%; height: 100%">
|
||||
<!-- <VideoJs :videoSrc="data.videoSrc" :sonData="fatherData" autoPlay /> -->
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,11 +121,22 @@ import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import axios from 'axios';
|
||||
import { getTreeData, getCameraName } from '../../../api/plough/VideoSurveillance';
|
||||
import '@/assets/monitor/imouplayer.js';
|
||||
import {
|
||||
getTreeData,
|
||||
getCameraName,
|
||||
getCameraNameS,
|
||||
getQuery,
|
||||
getSxtbf,
|
||||
} from '../../../api/plough/VideoSurveillance';
|
||||
import VideoJs from '@/components/video/video.vue';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import L from 'leaflet';
|
||||
import iconShadow from '/img/marker/mark.png';
|
||||
import { TileWMS } from 'ol/source';
|
||||
import md5 from 'js-md5';
|
||||
import CryptoJS from 'crypto-js';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
let map = L.Map;
|
||||
let tabulation = ref([]);
|
||||
@ -140,9 +153,11 @@ let formInline = ref({
|
||||
});
|
||||
let flags = ref(false);
|
||||
let currentPage = ref(1); //当前页
|
||||
let pageSize = ref(12); //每页条数
|
||||
let pageSize = ref(18); //每页条数
|
||||
let center = null; // 指定中心点
|
||||
const newData=ref({})
|
||||
const newData = ref({});
|
||||
let fatherData = ref('');
|
||||
let baseLayers = null;
|
||||
const data = reactive({
|
||||
videoSrc:
|
||||
'http://cmgw-vpc.lechange.com:8888/LCO/9C023C5FACFE48F/0/1/20230530T033445/a44e6e04b0608347f0209ab2b25aa258.m3u8',
|
||||
@ -151,33 +166,68 @@ onMounted(() => {
|
||||
getTreeDatas();
|
||||
initLeafletMap();
|
||||
getCameraNames();
|
||||
getCameraNameSs();
|
||||
});
|
||||
onUpdated(() => {
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
window.document.querySelector('#screenfull').style.display = 'none';
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
window.document.querySelector('#screenfull').style.display = 'none';
|
||||
});
|
||||
const initLeafletMap = () => {
|
||||
//加载地图
|
||||
map = L.map('cesiumContainers', {
|
||||
center: [36.4, 119.166326], // 地图中心
|
||||
zoom: 7, //缩放比列
|
||||
zoomControl: false, //禁用 + - 按钮
|
||||
doubleClickZoom: false, // 禁用双击放大
|
||||
attributionControl: false, // 移除右下角leaflet标识
|
||||
maxZoom: 16,
|
||||
crs: serverAPI.tiandituzhuji=='http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng' ? L.CRS.EPSG4326 : L.CRS.EPSG3857
|
||||
});
|
||||
// 渲染底图
|
||||
L.tileLayer(
|
||||
'http://t0.tianditu.com/DataServer?T=img_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||||
).addTo(map);
|
||||
L.tileLayer(
|
||||
'http://t0.tianditu.com/DataServer?T=cia_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||||
).addTo(map);
|
||||
map._onResize();
|
||||
// 创建底图图层
|
||||
let imgBaseLayer = null;
|
||||
let ciaBaseLayer = null;
|
||||
if (
|
||||
serverAPI.tiandituzhuji ==
|
||||
'http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'
|
||||
) {
|
||||
imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
|
||||
maxZoom: 20,
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
});
|
||||
|
||||
ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
|
||||
maxZoom: 20,
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
});
|
||||
} else {
|
||||
// 创建底图图层
|
||||
imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
|
||||
// maxZoom: 20,
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1,
|
||||
});
|
||||
|
||||
ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
|
||||
// maxZoom: 20,
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1,
|
||||
});
|
||||
}
|
||||
|
||||
// 将底图图层添加到地图
|
||||
imgBaseLayer.addTo(map);
|
||||
ciaBaseLayer.addTo(map);
|
||||
baseLayers = {
|
||||
'Image Base Map': imgBaseLayer,
|
||||
'CIA Base Map': ciaBaseLayer,
|
||||
};
|
||||
L.Util.requestAnimFrame(map.invalidateSize, map, !1, map._container); //解决首次加载不完全问题
|
||||
};
|
||||
|
||||
/*-----------接口---------------*/
|
||||
const getTreeDatas = () => {
|
||||
getTreeData({divisions:window.localStorage.getItem('deptName')}).then(res => {
|
||||
getTreeData({ divisions: window.localStorage.getItem('deptName') }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
devicesArr.value.push(item);
|
||||
});
|
||||
@ -185,14 +235,8 @@ const getTreeDatas = () => {
|
||||
};
|
||||
const getCameraNames = videoName => {
|
||||
getCameraName({ name: videoName }).then(res => {
|
||||
tabulation.value = res.data;
|
||||
console.log(newData.value)
|
||||
if(newData.value.children!==null){
|
||||
tableNewData.value = res.data;
|
||||
}
|
||||
|
||||
res.data.forEach((item, index) => {
|
||||
center = L.latLng(item.latitude,item.longitude);
|
||||
center = L.latLng(item.latitude, item.longitude);
|
||||
map.setView(center, 17);
|
||||
L.marker([item.latitude, item.longitude], { icon: greenIcon })
|
||||
.addTo(map)
|
||||
@ -203,6 +247,24 @@ const getCameraNames = videoName => {
|
||||
});
|
||||
});
|
||||
};
|
||||
const getCameraNameSs = () => {
|
||||
getCameraNameS().then(res => {
|
||||
tabulation.value = res.data;
|
||||
if (newData.value.children !== null) {
|
||||
tableNewData.value = res.data.slice(
|
||||
(currentPage.value - 1) * pageSize.value,
|
||||
currentPage.value * pageSize.value
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
const tabulationCurrentChange = e => {
|
||||
currentPage.value = e;
|
||||
tableNewData.value = tabulation.value.slice(
|
||||
(currentPage.value - 1) * pageSize.value,
|
||||
currentPage.value * pageSize.value
|
||||
);
|
||||
};
|
||||
/*------------事件----------------*/
|
||||
//树结构
|
||||
const handleNodeClick = (data, node, data1, data2) => {
|
||||
@ -210,14 +272,114 @@ const handleNodeClick = (data, node, data1, data2) => {
|
||||
formInline.value.flag = '';
|
||||
// let oriFatherId = node.parent.parent.data;
|
||||
// label1.value = oriFatherId.label;
|
||||
newData.value=data
|
||||
newData.value = data;
|
||||
getCameraNames(label2.value);
|
||||
};
|
||||
const onDetail = e => {
|
||||
console.log(e);
|
||||
function getRandom(a, b) {
|
||||
var max = a;
|
||||
var min = b;
|
||||
if (a < b) {
|
||||
max = b;
|
||||
min = a;
|
||||
}
|
||||
return parseInt(Math.random() * (max - min)) + min;
|
||||
}
|
||||
function suijione(num, maxA, minlA, fqy) {
|
||||
let arr = [];
|
||||
let arr1 = [];
|
||||
let arr2 = [];
|
||||
if (num) {
|
||||
for (let m = 0; m <= 9; m++) {
|
||||
arr.push(m);
|
||||
}
|
||||
}
|
||||
if (maxA) {
|
||||
for (let m = 65; m <= 90; m++) {
|
||||
arr1.push(m);
|
||||
}
|
||||
}
|
||||
if (minlA) {
|
||||
for (let m = 97; m <= 122; m++) {
|
||||
arr2.push(m);
|
||||
}
|
||||
}
|
||||
if (!fqy) {
|
||||
console.log('生成位数必传');
|
||||
}
|
||||
let mergeArr = arr.concat(arr1);
|
||||
let mergeArr1 = mergeArr.concat(arr2);
|
||||
let _length = mergeArr1.length;
|
||||
let text = '';
|
||||
for (let m = 0; m < fqy; m++) {
|
||||
let text1 = '';
|
||||
let random = getRandom(0, _length);
|
||||
if (mergeArr1[random] <= 9) {
|
||||
text1 = mergeArr1[random];
|
||||
} else if (mergeArr1[random] > 9) {
|
||||
text1 = String.fromCharCode(mergeArr1[random]);
|
||||
}
|
||||
text += text1;
|
||||
}
|
||||
return text;
|
||||
}
|
||||
let deviceId = ref('');
|
||||
let channelId = ref('');
|
||||
let token = ref('');
|
||||
let code = ref('');
|
||||
let streamId = ref(0);
|
||||
let type = ref(1);
|
||||
let recordType = ref(null);
|
||||
let onDetail = e => {
|
||||
fatherData.value = e.cameraName;
|
||||
data.videoSrc = e.hdStreaming;
|
||||
dialogVisible.value = true;
|
||||
getQuery({ name: e.cameraName }).then(res => {
|
||||
let API_KEY = res.data[0].appId;
|
||||
let SECRET = res.data[0].appSecret;
|
||||
let time = new Date().getTime() / 1000;
|
||||
let nonce = suijione(true, false, true, 32);
|
||||
const inputString = `time:${parseInt(time)},nonce:${nonce},appSecret:${SECRET}`;
|
||||
let id = res.data[0].id;
|
||||
getSxtbf({ deviceId: e.cameraName })
|
||||
.then(response => {
|
||||
let player = new imouPlayer({
|
||||
id: 'myVideo',
|
||||
// 设备序列号
|
||||
deviceId: res.data[0].deviceId,
|
||||
token: response.data.data.kitToken,
|
||||
channelId: 0,
|
||||
// 1 直播 2 录播
|
||||
type: 1,
|
||||
// 直播 0 高清 1 标清 默认
|
||||
streamId: 0,
|
||||
// 录播 云录像 1 本地录像 localRecord 默认 云录像
|
||||
recordType: 'cloud',
|
||||
// 如果设备设置了自定义音视频加密秘钥，则输入此秘钥；
|
||||
// 如果设备只设置了设备密码，则输入设备密码；其他情况默认设备序列号。
|
||||
code: '',
|
||||
});
|
||||
player.on('play', res => {
|
||||
console.log('开始播放 play', res);
|
||||
});
|
||||
player.on('pause', () => {
|
||||
console.log('播放器暂停 pause');
|
||||
});
|
||||
player.on('error', res => {
|
||||
console.log('播放器错误 error', res);
|
||||
});
|
||||
player.on('volume', res => {
|
||||
console.log('声音控制', res);
|
||||
});
|
||||
player.on('talk', res => {
|
||||
console.log('对讲 talk', res);
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const Nindex = index => {
|
||||
// 当前页数 - 1 * 每页数据条数 + 1
|
||||
const page = currentPage.value; // 当前页码
|
||||
@ -246,6 +408,7 @@ const foldClick = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./imouplayer.css" />
|
||||
<style lang="scss" scoped>
|
||||
$height: calc(100vh - 100px);
|
||||
|
||||
@ -327,6 +490,7 @@ $height: calc(100vh - 100px);
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
padding: 10px 20px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.cesiumContainersDiv {
|
||||
width: 30%;
|
||||
@ -579,6 +743,19 @@ $height: calc(100vh - 100px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
:deep().icon {
|
||||
font-size: 35px !important;
|
||||
color: #f18d00;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
:deep().record-icon {
|
||||
font-size: 35px !important;
|
||||
color: #f18d00;
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.video {
|
||||
@ -587,4 +764,22 @@ $height: calc(100vh - 100px);
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
.el-date-range-picker__header {
|
||||
.arrow-left {
|
||||
position: unset !important;
|
||||
pointer-events: all !important;
|
||||
}
|
||||
.arrow-right {
|
||||
position: unset !important;
|
||||
pointer-events: all !important;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
right: none;
|
||||
top: none;
|
||||
transform: none;
|
||||
width: 30px;
|
||||
height: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,194 +0,0 @@
|
||||
<template>
|
||||
<div class="centent">
|
||||
<div class="header">
|
||||
<el-button type="primary" @click="dialogVisible = true">添加</el-button>
|
||||
</div>
|
||||
<div class="center">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }"
|
||||
style="width: 100%"
|
||||
header-row-class-name="tabth"
|
||||
>
|
||||
<el-table-column prop="data" label="日期" />
|
||||
<el-table-column prop="layerName" label="图层名:" />
|
||||
<el-table-column prop="type" label="种类" />
|
||||
<el-table-column prop="suiffx" label="格式" />
|
||||
<el-table-column prop="remark" label="备注" />
|
||||
<el-table-column prop="操作" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" title="添加" width="30%" :before-close="handleClose">
|
||||
<el-form label-width="100px" :model="formLabelAlign" style="max-width: 460px">
|
||||
<el-form-item label="日期:">
|
||||
<el-input v-model="formLabelAlign.data" placeholder="例如：2023-06-15" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图层名:">
|
||||
<el-input
|
||||
v-model="formLabelAlign.layerName"
|
||||
placeholder="例如：2023-06-15-xiaomai"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="种类:">
|
||||
<el-select
|
||||
popper-class="select_type"
|
||||
v-model="formLabelAlign.type"
|
||||
width="100"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option label="湿润" value="湿润" />
|
||||
<el-option label="适宜" value="适宜" />
|
||||
<el-option label="轻度干旱" value="轻度干旱" />
|
||||
<el-option label="中度干旱" value="中度干旱" />
|
||||
<el-option label="重度干旱" value="重度干旱" />
|
||||
<el-option label="无冻害" value="无冻害" />
|
||||
<el-option label="轻度冻害" value="轻度冻害" />
|
||||
<el-option label="中度冻害" value="中度冻害" />
|
||||
<el-option label="重度冻害" value="重度冻害" />
|
||||
<el-option label="洪涝" value="洪涝" />
|
||||
<el-option label="好" value="好" />
|
||||
<el-option label="较好" value="较好" />
|
||||
<el-option label="适中" value="适中" />
|
||||
<el-option label="较差" value="较差" />
|
||||
<el-option label="差" value="差" />
|
||||
<el-option label="茶叶" value="茶叶" />
|
||||
<el-option label="大豆" value="大豆" />
|
||||
<el-option label="花生" value="花生" />
|
||||
<el-option label="蓝莓" value="蓝莓" />
|
||||
<el-option label="地瓜" value="地瓜" />
|
||||
<el-option label="小麦" value="小麦" />
|
||||
<el-option label="玉米" value="玉米" />
|
||||
<el-option label="马铃薯" value="马铃薯" />
|
||||
<el-option label="白菜和萝卜" value="白菜和萝卜" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="格式:">
|
||||
<el-select popper-class="select_type" v-model="formLabelAlign.suffix" width="100" placeholder="请选择">
|
||||
<el-option label="tif" value="features" />
|
||||
<el-option label="shp" value="gridValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="formLabelAlign.remark" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="addlist">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { getsaveMap } from '@/api/manage/manaje.js';
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const formLabelAlign = reactive({
|
||||
data: '',
|
||||
type: '',
|
||||
suffix: '',
|
||||
remark: '',
|
||||
layerName: '',
|
||||
});
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
];
|
||||
|
||||
/*-----------接口---------------*/
|
||||
|
||||
const getsaveMaps = data => {
|
||||
console.log(data);
|
||||
getsaveMap({ mapServices: data }).then(res => {
|
||||
console.log(res.data);
|
||||
});
|
||||
};
|
||||
|
||||
/*------------事件----------------*/
|
||||
const addlist = () => {
|
||||
dialogVisible.value = false;
|
||||
getsaveMaps(formLabelAlign);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.centent {
|
||||
width: 98%;
|
||||
margin: 10px;
|
||||
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.08);
|
||||
.header {
|
||||
padding: 10px;
|
||||
}
|
||||
.center {
|
||||
padding: 0 20px;
|
||||
:deep(
|
||||
.el-table .el-table__header-wrapper th,
|
||||
.el-table .el-table__fixed-header-wrapper th
|
||||
) {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
height: 93%;
|
||||
:deep(.el-table__inner-wrapper) {
|
||||
height: 96% !important;
|
||||
}
|
||||
.example-pagination-block {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
:deep(.tabth) {
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
.el-table-fixed-column--left {
|
||||
background: rgba(247, 247, 247, 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.select_type {
|
||||
background: #fff;
|
||||
.el-select-dropdown__item.hover {
|
||||
background: rgba(217, 231, 255, 0.2);
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -68,6 +68,12 @@ import userInfo from "./userInfo";
|
||||
import resetPwd from "./resetPwd";
|
||||
import { getUserProfile } from "@/api/system/user";
|
||||
|
||||
|
||||
onUpdated(() => {
|
||||
document.querySelector('.mode').style.display = 'none';
|
||||
window.document.querySelector('#screenfull').style.display = 'none';
|
||||
});
|
||||
|
||||
const activeTab = ref("userinfo");
|
||||
const state = reactive({
|
||||
user: {},
|
||||
|
||||
Reference in New Issue
Block a user