<template>
|
<div class="picker_box">
|
<div class="pickerBox">
|
<div class="picker_title">超标点预测</div>
|
<div class="form_box">
|
<div class="inp_box XZboxDate">
|
<!-- <span>时间选择</span> -->
|
<el-date-picker
|
size="large"
|
v-model="selectform.value"
|
type="datetime"
|
@change="changeTime"
|
format="YYYY-MM-DD HH"
|
value-format="YYYY-MM-DD HH"
|
:disabledDate="disabledDate"
|
placeholder="选择时间"
|
/>
|
</div>
|
|
<div class="button_box"></div>
|
|
<div class="button_box">
|
<el-button @click="selectBtn" v-if="data.SJWGisshow">确定</el-button>
|
<el-button v-else @click="selectBtn">隐藏</el-button>
|
<el-button
|
size="small"
|
:disabled="data.BTNdisabled"
|
@click="SYshow"
|
v-show="flyBtnState"
|
>飞入</el-button
|
>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="pickerBox1">
|
<div class="picker_title picker_title_right">三天全域动态展示</div>
|
<div class="">
|
<div class="button_box">
|
|
</div>
|
|
<div class="button_box button_box_right" style="margin-left: 0">
|
<el-button @click="WGBtn" v-if="data.WGisshow">网格</el-button>
|
<el-button v-else @click="WGBtn">隐藏网格</el-button>
|
</div>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive, onMounted, watch, computed } from "vue";
|
|
import { selectVocByTime } from "@/api/api.js";
|
import { useStore } from "vuex";
|
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
props: ["state"],
|
data() {
|
return {
|
color: "red",
|
};
|
},
|
setup(props, { emit }) {
|
const store = useStore();
|
let data = reactive({
|
value1: "",
|
newTimeStr: "",
|
value: "",
|
// 表单对象
|
form: {
|
startTime: "",
|
endTime: "",
|
},
|
// 表格信息
|
tableData: [],
|
WGisshow: true,
|
SJWGisshow: true,
|
});
|
const selectform = reactive({
|
value: "",
|
});
|
let flyBtnState = ref(false);
|
//全域网格
|
// const WGBtn = () => {
|
// data.WGisshow = !data.WGisshow;
|
// if (!data.WGisshow) {
|
// window.sgworld.Core.postMessage({ TypeG1: "Loop", LG1: "1" });
|
// sgworld.Navigate.flyToPosition(115.9527, 39.7283, 6000, {
|
// heading: -90,
|
// });
|
// } else {
|
// window.sgworld.Core.postMessage({ TypeG1: "Delete" });
|
// }
|
// };
|
const selectBtn = async () => {
|
let arr = [];
|
data.SJWGisshow = !data.SJWGisshow;
|
if (!data.SJWGisshow) {
|
const data = await selectVocByTime({
|
date: `${selectform.value}:00:00`,
|
});
|
if (data.result.length == 0) {
|
return ElMessage.error("请检查是否有数据");
|
}
|
data.result.forEach((e) => {
|
arr.push({
|
T: 0.8,
|
C: e.val,
|
X: e.x,
|
Y: e.y,
|
N: e.addr,
|
|
ID: e.suYuanId,
|
});
|
});
|
|
window.sgworld.Core.postMessage({
|
TypeG1: "Time",
|
QY: arr,
|
Time: `${selectform.value}:00:00`,
|
});
|
} else {
|
window.sgworld.Core.postMessage({ TypeG1: "Delete" });
|
}
|
};
|
// watch(
|
// () => props.state,
|
// (nVal, oVal) => {
|
// console.log(nVal);
|
// },
|
// { deep: true }
|
// );
|
|
// function operationType(type) {
|
// switch (type) {
|
// case "t":
|
// break;
|
|
// default:
|
// break;
|
// }
|
// }
|
//限制时间选择范围
|
const disabledDate = (time) => {
|
if (store.state.POItype == "CJ") {
|
const start = new Date(
|
new Date(new Date().toLocaleDateString()).getTime() +
|
96 * 60 * 60 * 1000 -
|
1
|
);
|
return (
|
// time.getTime() < new Date().getTime() - 1 * 24 * 60 * 60 * 1000 ||
|
time.getTime() > new Date().getTime() + (start - new Date().getTime())
|
);
|
} else {
|
const start = new Date(
|
new Date(new Date().toLocaleDateString()).getTime() +
|
96 * 60 * 60 * 1000 -
|
1
|
);
|
|
return (
|
// time.getTime() < new Date().getTime() - 1 * 24 * 60 * 60 * 1000 ||
|
time.getTime() > new Date().getTime() + (start - new Date().getTime())
|
);
|
}
|
};
|
function changeTime(value) {}
|
|
const scale = ref(2);
|
function nowSize(val, initWidth = 1920) {
|
let nowClientWidth = document.documentElement.clientWidth;
|
|
return val * (nowClientWidth / initWidth);
|
}
|
const SYshow = () => {
|
sgworld.Core.postMessage({
|
func_name: "ClickAndFlyto",
|
Length: "10000",
|
});
|
// sgworld.Navigate.flyToPosition(
|
// store.state.WGobj.lon,
|
// store.state.WGobj.lat,
|
// 120,
|
// {
|
// heading: 270,
|
// pitch: -89.5,
|
// roll: 0,
|
// }
|
// );
|
// data.btnIsshow = !data.btnIsshow;
|
// let isShow = "hide";
|
// if (data.btnIsshow) {
|
// isShow = "show";
|
// }
|
// sgworld.Core.postMessage({ type: "yc", Hs: isShow });
|
};
|
watch(
|
() => selectform.value,
|
(nVal, oVal) => {
|
data.SJWGisshow = true;
|
},
|
|
{ deep: true }
|
);
|
watch(
|
() => store.state.WGobj,
|
(nVal, oVal) => {
|
if (nVal !== null) {
|
flyBtnState.value = true;
|
} else {
|
flyBtnState.value = false;
|
}
|
},
|
|
{ deep: true, immediate: true }
|
);
|
return {
|
disabledDate,
|
data,
|
changeTime,
|
selectBtn,
|
selectform,
|
scale,
|
flyBtnState,
|
SYshow,
|
// WGBtn,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.pickerBox {
|
width: 100%;
|
}
|
.pickerBox1 {
|
margin-right: 60px;
|
width: 38%;
|
}
|
.picker_box {
|
// width: calc(742px * 1);
|
// position: absolute;
|
// right: 70px;
|
// top: 490px;
|
// width: calc(742px * 1.5);
|
// width: 560px;
|
height: calc(200px * 1);
|
|
background: url("../assets/img/d.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 40px;
|
padding-left: 60px;
|
box-sizing: border-box;
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-around;
|
.picker_title {
|
font-size: 30px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #ffffff;
|
padding-bottom: 10px;
|
}
|
.picker_title_right {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.form_box {
|
display: flex;
|
// justify-content: space-around;
|
align-items: center;
|
.inp_box {
|
span {
|
font-size: 24px;
|
font-weight: 400;
|
color: #ffffff;
|
padding-right: 10px;
|
}
|
:deep(.el-date-editor) {
|
height: 64px;
|
}
|
.el-date-picker {
|
}
|
/deep/ .el-input__wrapper {
|
width: 460px;
|
background: rgba(0, 0, 0, 0.2);
|
border: 2px solid #2e58cc;
|
border-radius: 10px;
|
color: #ffffff;
|
padding: 0;
|
padding-left: 3px;
|
}
|
/deep/ .el-input__inner,
|
/deep/ .el-textarea__inner {
|
// background-color: rgba(134, 132, 132, 0.5);
|
color: #ffffff;
|
font-size: 24px;
|
}
|
/deep/.el-range-input {
|
color: white;
|
}
|
/deep/ .el-range-separator {
|
color: white;
|
}
|
}
|
:deep(.el-range-editor--large .el-range-separator) {
|
font-size: 24px;
|
}
|
:deep(.el-input__icon),
|
:deep(.el-range__icon) {
|
font-size: 28px;
|
}
|
::-webkit-input-placeholder {
|
font-size: 24px;
|
}
|
:deep(.el-range-input) {
|
font-size: 28px;
|
}
|
}
|
.button_box {
|
margin-left: 20px;
|
}
|
.button_box_right {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.el-button {
|
background: rgba(0, 0, 0, 0.2);
|
border: 4px solid #2e58cc !important;
|
border-radius: 20px !important;
|
color: #ffffff;
|
height: 64px !important;
|
font-size: 28px !important;
|
padding: 16px 30px !important;
|
}
|
}
|
// .XZboxDate {
|
// width: 70%;
|
// /deep/ .el-input {
|
// width: 100%;
|
// }
|
// }
|
</style>
|
<style>
|
@media (width: 1920px) {
|
.el-date-range-picker {
|
transform: scale(1);
|
}
|
}
|
|
@media (width: 3840px) {
|
.el-date-range-picker {
|
transform: scale(1.7);
|
}
|
}
|
</style>
|
