This commit is contained in:
duanxiaohai
parent
2f71fcf2f5
commit
6d6584263c
|
|
@ -76,7 +76,7 @@ const props = defineProps({
|
|||
hlsUriSsl: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return '';
|
||||
return "";
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -96,7 +96,7 @@ watch(
|
|||
() => props.cameraShow,
|
||||
(newVal, oldVal) => {
|
||||
cameraShow.value = newVal;
|
||||
attachmentLink.value=props.hlsUriSsl;
|
||||
attachmentLink.value = props.hlsUriSsl;
|
||||
nextTick(() => {
|
||||
loadVideo();
|
||||
});
|
||||
|
|
@ -105,9 +105,7 @@ watch(
|
|||
|
||||
const dp = ref(null);
|
||||
const videoElement = ref(null);
|
||||
const attachmentLink = ref(
|
||||
""
|
||||
);
|
||||
const attachmentLink = ref("");
|
||||
const options = {
|
||||
playbackRates: [0.5, 1.0, 1.5, 2.0],
|
||||
aspectRatio: "10:5",
|
||||
|
|
@ -119,7 +117,9 @@ const options = {
|
|||
};
|
||||
|
||||
const loadVideo = () => {
|
||||
dp.value = videojs("videoPlayer", options);
|
||||
if (videoPlayer) {
|
||||
dp.value = videojs("videoPlayer", options);
|
||||
}
|
||||
};
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<div class="dialogPage">
|
||||
<el-dialog
|
||||
v-model="cameraShow"
|
||||
center
|
||||
width="80vw"
|
||||
:show-close="false"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<div class="my-header">
|
||||
<el-icon size="26" color="#fff" @click="closeDialog">
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<div class="tabelPart">
|
||||
<div class="bo">
|
||||
<div class="title">
|
||||
<div class="title_top">
|
||||
<img
|
||||
src="@/assets/images/table_l.png"
|
||||
alt=""
|
||||
style="margin-right: 10px"
|
||||
/>
|
||||
<div class="name">{{ data.title }}</div>
|
||||
<img
|
||||
src="@/assets/images/table_r.png"
|
||||
alt=""
|
||||
style="margin-left: 10px"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
class="title_botton"
|
||||
src="@/assets/images/table_c.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: calc(100% - 110px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<video
|
||||
id="videoPlayer"
|
||||
class="video-js vjs-default-skin"
|
||||
controls
|
||||
playsinline
|
||||
autoplay="autoplay"
|
||||
>
|
||||
<source :src="attachmentLink" type="application/x-mpegURL" />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import videojs from "video.js";
|
||||
import "video.js/dist/video-js.css";
|
||||
import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
|
||||
import { CircleCloseFilled } from "@element-plus/icons-vue";
|
||||
const props = defineProps({
|
||||
cameraShow: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
hlsUriSsl: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
// 详情弹框
|
||||
const cameraShow = ref();
|
||||
const data = reactive({
|
||||
title: "摄像头",
|
||||
columns: [],
|
||||
tableData: [],
|
||||
});
|
||||
|
||||
const gridData = [];
|
||||
// 监听
|
||||
watch(
|
||||
() => props.cameraShow,
|
||||
(newVal, oldVal) => {
|
||||
cameraShow.value = newVal;
|
||||
attachmentLink.value = props.hlsUriSsl;
|
||||
nextTick(() => {
|
||||
loadVideo();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const dp = ref(null);
|
||||
const videoElement = ref(null);
|
||||
const attachmentLink = ref("");
|
||||
const options = {
|
||||
playbackRates: [0.5, 1.0, 1.5, 2.0],
|
||||
aspectRatio: "10:5",
|
||||
notSupportedMessage: "此视频暂无法播放，请稍后再试",
|
||||
autoplay: false,
|
||||
muted: true,
|
||||
preload: "auto",
|
||||
controls: true,
|
||||
};
|
||||
|
||||
const loadVideo = () => {
|
||||
if (videoPlayer) {
|
||||
dp.value = videojs("videoPlayer", options);
|
||||
}
|
||||
};
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
cameraShow.value = props.cameraShow;
|
||||
});
|
||||
const closeDialog = () => {
|
||||
cameraShow.value = false;
|
||||
if (dp.value) {
|
||||
dp.value.dispose(); // dispose()会直接删除Dom元素
|
||||
}
|
||||
emit("close");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 暂停播放按钮居中
|
||||
::v-deep .video-js .vjs-big-play-button {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.vjs-default-skin {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
--el-dialog-bg-color: none;
|
||||
--el-dialog-width: 50% !important;
|
||||
}
|
||||
|
||||
.my-header {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.tabelPart {
|
||||
padding: 16px;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(0, 77, 131, 0.69) 0%,
|
||||
rgba(0, 51, 83, 0.77) 50%,
|
||||
rgba(0, 77, 131, 0.74) 100%
|
||||
),
|
||||
radial-gradient(
|
||||
66% 40% at 50% 0%,
|
||||
rgba(1, 150, 243, 0.55) 0%,
|
||||
rgba(0, 116, 255, 0) 100%
|
||||
);
|
||||
box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(21, 150, 255, 1),
|
||||
rgba(0, 157, 227, 0)
|
||||
)
|
||||
2 2;
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-bg-color: none;
|
||||
--el-table-tr-bg-color: none;
|
||||
--el-table-header-bg-color: none;
|
||||
background: none;
|
||||
border: none;
|
||||
--el-table-text-color: #fff;
|
||||
--el-table-header-text-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.bo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 10px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&_top {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: PangMenZhengDao, PangMenZhengDao;
|
||||
font-weight: 600;
|
||||
font-size: 33px;
|
||||
color: #ffffff;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
letter-spacing: 2px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
|
||||
-webkit-background-clip: text;
|
||||
/*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent;
|
||||
/*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
&_botton {
|
||||
margin-top: 5px;
|
||||
height: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -71,6 +71,7 @@
|
|||
:name="item.property"
|
||||
:currentCol="item"
|
||||
:currentData="scope.row"
|
||||
@click.stop="item.property === 'sxt' ? openSxt() : null"
|
||||
></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -164,6 +165,10 @@ const handleRowClick = (row, column, event) => {
|
|||
// query: {nm: row.nm, identNo: row.identNo,type:'map'},
|
||||
// });
|
||||
};
|
||||
// 摄像头
|
||||
const openSxt = () => {
|
||||
emit("openSxt", { nm: row.nm, identNo: row.identNo });
|
||||
};
|
||||
// 详情弹框
|
||||
const dialogShow = ref();
|
||||
const loadT = ref();
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
<div class="right" style="width: 517px" v-show="!showEdit">
|
||||
<div class="jbggfwq">
|
||||
<div class="title">
|
||||
<div class="title_name"><span> 基本公共服务圈</span></div>
|
||||
<div class="title_name"><span @click="openSxt" > 基本公共服务圈</span></div>
|
||||
</div>
|
||||
<div class="jbggfwq_content">
|
||||
<div
|
||||
|
|
@ -179,7 +179,9 @@
|
|||
<div class="btnsave" v-if="!add_mode && !edit_mode" @click="deleteCs">
|
||||
删除地块
|
||||
</div>
|
||||
<div class="btnclose" @click="backEdit" v-if="!add_mode && !edit_mode">退出</div>
|
||||
<div class="btnclose" @click="backEdit" v-if="!add_mode && !edit_mode">
|
||||
退出
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
|
|
@ -191,7 +193,8 @@
|
|||
@close="close"
|
||||
@handle="handlePagination"
|
||||
@openMessage="openMessage"
|
||||
style="zIndex:333;"
|
||||
@openSxt="openSxt"
|
||||
style="z-index: 333"
|
||||
>
|
||||
<template #jzzt="{ currentCol, currentData }">
|
||||
<div v-if="currentData.jzzt == 0">居住</div>
|
||||
|
|
@ -200,11 +203,17 @@
|
|||
<template #sxt="{ currentCol, currentData }">
|
||||
<img
|
||||
src="@/assets/images/sxt_map.png"
|
||||
style="widht: 20px; height: 20px"
|
||||
v-if="currentData.camera"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
<!-- v-if="currentData.camera" -->
|
||||
</template>
|
||||
</Dialog>
|
||||
<DialogCameras
|
||||
style="width: 1920px; height: 1080px"
|
||||
v-show="sxtShow"
|
||||
@sxt="onsxt"
|
||||
>
|
||||
</DialogCameras>
|
||||
<!-- 详情 -->
|
||||
<personDetail
|
||||
class="detail"
|
||||
|
|
@ -319,6 +328,7 @@ import b6 from "@/assets/images/map/b6.png";
|
|||
import xcbg from "@/assets/images/map/xcbg.png";
|
||||
import AED from "@/assets/images/map/AED.png";
|
||||
import Dialog from "./dialog/dialogMapDp.vue";
|
||||
import DialogCameras from "./dialog/dialogCameras.vue";
|
||||
import personDetail from "./person/index.vue";
|
||||
// import gcj02towgs84 from "@/utils/gcj02towgs84.js";
|
||||
// import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw";
|
||||
|
|
@ -641,8 +651,7 @@ const PopulationRatio = ref([
|
|||
},
|
||||
]);
|
||||
//特殊标签左侧数据
|
||||
const tsbqTotal = ref([
|
||||
]);
|
||||
const tsbqTotal = ref([]);
|
||||
const data = reactive({
|
||||
serviceCircleList: [],
|
||||
fwqCoordinates: [], //服务圈经度
|
||||
|
|
@ -779,6 +788,7 @@ const yaosuIcon = ref({
|
|||
let currentMarker = null; // 用于保存当前标记的引用
|
||||
// 详情弹框
|
||||
const dialogShow = ref(false);
|
||||
const sxtShow = ref(false);
|
||||
const tableType = reactive({
|
||||
url: "",
|
||||
title: "人员列表",
|
||||
|
|
@ -886,7 +896,7 @@ const bd09 = (x, y) => {
|
|||
};
|
||||
//开启编辑
|
||||
const openEdit = () => {
|
||||
map.removeEventListener("click", markera);
|
||||
map.removeEventListener("click", markera);
|
||||
if (currentMarker !== null) {
|
||||
map.removeOverlay(currentMarker);
|
||||
}
|
||||
|
|
@ -949,7 +959,7 @@ const saveDK = async () => {
|
|||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
ElMessage.success({
|
||||
message: "保存成功"
|
||||
message: "保存成功",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1098,7 +1108,7 @@ const addNew = async () => {
|
|||
await http.post(`/api/ggfwyth/regionalDivision/add`, sj).then((res) => {
|
||||
if (res.code == 200) {
|
||||
ElMessage.success({
|
||||
message: "添加成功"
|
||||
message: "添加成功",
|
||||
});
|
||||
dialogVisible2.value = false;
|
||||
}
|
||||
|
|
@ -1128,7 +1138,7 @@ const deleteCs = async () => {
|
|||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
ElMessage.success({
|
||||
message: "删除成功"
|
||||
message: "删除成功",
|
||||
});
|
||||
cs_choose_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_choose_arr.value[index]);
|
||||
|
|
@ -2059,9 +2069,13 @@ const getZyys = (url, name, img, img_map) => {
|
|||
item.img = img;
|
||||
item.img_map = img_map;
|
||||
item.overlay = null;
|
||||
item.center = [];
|
||||
item.center.push(Number(item.jd));
|
||||
item.center.push(Number(item.wd));
|
||||
// item.center = [];
|
||||
// item.center.push(Number(item.jd));
|
||||
// item.center.push(Number(item.wd));
|
||||
item.center = [Number(item.jd), Number(item.wd)];
|
||||
item.onClick = () => {
|
||||
handleItemClick(item, index, name);
|
||||
};
|
||||
});
|
||||
yaosuIcon.value[name].sj.forEach((itemm, indexx) => {
|
||||
createZyys(itemm, indexx, name);
|
||||
|
|
@ -2069,6 +2083,10 @@ const getZyys = (url, name, img, img_map) => {
|
|||
}
|
||||
});
|
||||
};
|
||||
const handleItemClick = (item, index, name) => {
|
||||
console.log("Item clicked:", item, index, name);
|
||||
};
|
||||
|
||||
// 添加资源要素的图标(overlay存放标记点)
|
||||
const createZyys = (polygon, indexx, name) => {
|
||||
function createLabelDOM() {
|
||||
|
|
@ -2199,6 +2217,11 @@ const close = () => {
|
|||
pagination.currentPage = 1;
|
||||
tableType.data = [];
|
||||
};
|
||||
|
||||
const onsxt = () => {
|
||||
console.log('sxt');
|
||||
|
||||
};
|
||||
//表格分页
|
||||
const handlePagination = (current) => {
|
||||
pagination.currentPage = current;
|
||||
|
|
@ -2235,6 +2258,10 @@ const handlePagination = (current) => {
|
|||
person_detail(age);
|
||||
}
|
||||
};
|
||||
// 打开摄像头
|
||||
const openSxt = (e) => {
|
||||
sxtShow.value = true;
|
||||
};
|
||||
//打开人物详情页面
|
||||
const openMessage = (e) => {
|
||||
message.value = e;
|
||||
|
|
@ -2351,7 +2378,7 @@ const changeFwq = async (id, name, names) => {
|
|||
}, 500);
|
||||
} else {
|
||||
ElMessage.warning({
|
||||
message: "无数据"
|
||||
message: "无数据",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -2474,7 +2501,7 @@ const addggfwq = () => {
|
|||
drawACircle(maxDistance);
|
||||
} else {
|
||||
ElMessage.warning({
|
||||
message: "无数据"
|
||||
message: "无数据",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -2701,9 +2728,7 @@ const addPolygonCounty = () => {
|
|||
await getDatas(cfJd.value, "");
|
||||
loadingss.value = false;
|
||||
}
|
||||
if (
|
||||
tsbq_pp.value.includes(choose.value.person)
|
||||
) {
|
||||
if (tsbq_pp.value.includes(choose.value.person)) {
|
||||
await getDatas(cfJd.value, "", false);
|
||||
//使用await把loading放外面，没效果，所以把loading放接口里面
|
||||
getDataBqs4(cfJd.value, cfCs.value, choose.value.person);
|
||||
|
|
@ -2839,9 +2864,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
|
|||
let num = "";
|
||||
if (choose.value.person == "6666") {
|
||||
num = "swrs";
|
||||
} else if (
|
||||
tsbq_pp.value.includes(choose.value.person)
|
||||
) {
|
||||
} else if (tsbq_pp.value.includes(choose.value.person)) {
|
||||
num = "numbers";
|
||||
} else {
|
||||
num = "number";
|
||||
|
|
@ -2955,9 +2978,7 @@ const addPolygonCountyCs = () => {
|
|||
map.removeOverlay(cs_number_name_arr.value[index]);
|
||||
});
|
||||
await getDataBq(cfJd.value, cfCs.value);
|
||||
if (
|
||||
tsbq_pp.value.includes(choose.value.person)
|
||||
) {
|
||||
if (tsbq_pp.value.includes(choose.value.person)) {
|
||||
await getDataBqs3(cfJd.value, cfCs.value, choose.value.person);
|
||||
} else {
|
||||
}
|
||||
|
|
@ -3054,9 +3075,7 @@ const addCsUnChoose = () => {
|
|||
addCsUnChoose();
|
||||
await getDataBq(cfJd.value, cfCs.value);
|
||||
await getDatas2(cfJd.value, choose.value.person, cfCs.value);
|
||||
if (
|
||||
tsbq_pp.value.includes(choose.value.person)
|
||||
) {
|
||||
if (tsbq_pp.value.includes(choose.value.person)) {
|
||||
await getDataBqs3(cfJd.value, cfCs.value, choose.value.person);
|
||||
}
|
||||
loadingss.value = false;
|
||||
|
|
@ -3180,9 +3199,7 @@ const createCs2 = (polygon, indexx) => {
|
|||
let num = "";
|
||||
if (choose.value.person == "6666") {
|
||||
num = "swrs";
|
||||
} else if (
|
||||
tsbq_pp.value.includes(choose.value.person)
|
||||
) {
|
||||
} else if (tsbq_pp.value.includes(choose.value.person)) {
|
||||
num = "numbers";
|
||||
} else {
|
||||
num = "number";
|
||||
|
|
@ -3322,9 +3339,7 @@ const DGcreateCs2 = (polygon, indexx) => {
|
|||
let num = "";
|
||||
if (choose.value.person == "6666") {
|
||||
num = "swrs";
|
||||
} else if (
|
||||
tsbq_pp.value.includes(choose.value.person)
|
||||
) {
|
||||
} else if (tsbq_pp.value.includes(choose.value.person)) {
|
||||
num = "numbers";
|
||||
} else {
|
||||
num = "number";
|
||||
|
|
|
|||
Loading…
Reference in New Issue