|
@@ -1,6 +1,362 @@
|
|
|
<template>
|
|
|
- <div class="about">
|
|
|
- <h1>This is an about page</h1>
|
|
|
+ <van-nav-bar
|
|
|
+ title="信息上报中心"
|
|
|
+ left-text=""
|
|
|
+ left-arrow
|
|
|
+ @click-left="onClickLeft"
|
|
|
+ />
|
|
|
+ <div class="main">
|
|
|
+ <p class="title">安防设施异常上报</p>
|
|
|
+ <div class="formArea">
|
|
|
+ <p class="miniTitle">基础信息</p>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="securityFacilitiesErr.siteName.name"
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ label="场所名称:"
|
|
|
+ placeholder="请选择"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="showPlace = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="showPlace" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="场所选择"
|
|
|
+ :columns="places"
|
|
|
+ :columns-field-names="customFieldName"
|
|
|
+ @cancel="showPlace = false"
|
|
|
+ @confirm="getPlace"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <van-cell-group>
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ v-model="securityFacilitiesErr.facilityTypename"
|
|
|
+ center
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ label="设施类型:"
|
|
|
+ placeholder="请选择"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="showLx = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="showLx" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="设施类型选择"
|
|
|
+ :columns="facilityTypes"
|
|
|
+ @cancel="showLx = false"
|
|
|
+ @confirm="getfacilityType"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <van-cell-group v-if="securityFacilitiesErr.facilityType==''">
|
|
|
+ <van-field
|
|
|
+ v-model="securityFacilitiesErr.facilityTypename"
|
|
|
+ center
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ label="位置:"
|
|
|
+ placeholder="请选择"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <van-cell-group v-if="securityFacilitiesErr.facilityType=='0'">
|
|
|
+ <van-field
|
|
|
+ v-model="securityFacilitiesErr.videoAudioPoint.name"
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ label="音视频点位:"
|
|
|
+ placeholder="请选择"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="showVideoAudio = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="showVideoAudio" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="音视频点位选择"
|
|
|
+ :columns="VideoAudios"
|
|
|
+ :columns-field-names="customFieldName"
|
|
|
+ @cancel="showVideoAudio = false"
|
|
|
+ @confirm="setVideoAudios"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <van-cell-group v-if="securityFacilitiesErr.facilityType=='1'">
|
|
|
+ <van-field
|
|
|
+ v-model="securityFacilitiesErr.siteFireProtection.name"
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ label="消防点位:"
|
|
|
+ placeholder="请选择"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="showFireStation = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="showFireStation" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="消防点位选择"
|
|
|
+ :columns="FireStations"
|
|
|
+ :columns-field-names="customFieldName"
|
|
|
+ @cancel="showFireStation = false"
|
|
|
+ @confirm="setFireStations"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field name="uploader" label="附件:">
|
|
|
+ <template #input>
|
|
|
+ <van-uploader>
|
|
|
+ <van-button icon="plus">上传文件</van-button>
|
|
|
+ </van-uploader>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <div class="rowTextArea">
|
|
|
+ <van-field
|
|
|
+ v-model="securityFacilitiesErr.abnormalContent"
|
|
|
+ center
|
|
|
+ rows="2"
|
|
|
+ type="textarea"
|
|
|
+ label="异常内容:"
|
|
|
+ label-align="top"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
+ <div class="subbtn">
|
|
|
+ <van-button type="primary" @click="submit">提交</van-button>
|
|
|
+ <van-button type="default" hairline>取消</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { reactive, ref } from "vue";
|
|
|
+import personList from "../personList.vue";
|
|
|
+import securityFacilitiesErrService from "@/api/securityFacilitiesErr/securityFacilitiesErrService";
|
|
|
+import tools from "@/api/sys/tools";
|
|
|
+export default {
|
|
|
+ components: { personList },
|
|
|
+ setup() {
|
|
|
+ const onClickLeft = () => {
|
|
|
+ history.back();
|
|
|
+ };
|
|
|
+ const securityFacilitiesErr = reactive({
|
|
|
+ id: "",
|
|
|
+ siteName: {
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ facilityType: "",
|
|
|
+ videoAudioPoint:{
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ siteFireProtection:{
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ position: "",
|
|
|
+ abnormalContent: "",
|
|
|
+ //附件
|
|
|
+ enclosure: "",
|
|
|
+ state: "0",
|
|
|
+ assessment: "0",
|
|
|
+ });
|
|
|
+ // 场所名称
|
|
|
+ let places = ref([]);
|
|
|
+ const customFieldName = {
|
|
|
+ text: "name",
|
|
|
+ value: "id",
|
|
|
+ };
|
|
|
+ new tools()
|
|
|
+ .placeList({
|
|
|
+ current: 1,
|
|
|
+ size: 10000,
|
|
|
+ })
|
|
|
+ .then(({ records }) => {
|
|
|
+ places.value.push(...records);
|
|
|
+ });
|
|
|
+ let showPlace = ref(false);
|
|
|
+ const getPlace = ({ selectedOptions }) => {
|
|
|
+ showPlace.value = false;
|
|
|
+ securityFacilitiesErr.siteName = selectedOptions[0];
|
|
|
+ //场所选择完成后刷新
|
|
|
+ getVideoAudioList();
|
|
|
+ getFireStationList();
|
|
|
+ };
|
|
|
+ //选择设施类型
|
|
|
+ let showLx = ref(false);
|
|
|
+ const facilityTypes = [{text:"监控、音频",value:"0"},{text:"消防设备",value:"1"}];
|
|
|
+ const getfacilityType= ({ selectedOptions }) => {
|
|
|
+ securityFacilitiesErr.facilityType = selectedOptions[0].value;
|
|
|
+ securityFacilitiesErr.facilityTypename = selectedOptions[0].text;
|
|
|
+ getVideoAudioList();
|
|
|
+ getFireStationList();
|
|
|
+ showLx.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ //选择视频音频点位
|
|
|
+ let showVideoAudio = ref(false);
|
|
|
+ let VideoAudios = ref([]);
|
|
|
+ //同时选择好场所、设施类型后才获取视频列表
|
|
|
+ const getVideoAudioList= () => {
|
|
|
+ if(securityFacilitiesErr.siteName.id!=""&&securityFacilitiesErr.facilityType=="0"){
|
|
|
+ new tools()
|
|
|
+ .videoPointList({
|
|
|
+ current: 1,
|
|
|
+ size: 10000,
|
|
|
+ siteId: securityFacilitiesErr.siteName.id,
|
|
|
+ })
|
|
|
+ .then(({ records }) => {
|
|
|
+ VideoAudios.value=records;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+ const setVideoAudios= ({ selectedOptions }) => {
|
|
|
+ securityFacilitiesErr.videoAudioPoint = selectedOptions[0];
|
|
|
+ securityFacilitiesErr.position=selectedOptions[0].position;
|
|
|
+ showVideoAudio.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ //选择消防点位
|
|
|
+ let showFireStation = ref(false);
|
|
|
+ let FireStations = ref([]);
|
|
|
+ //同时选择好场所、设施类型后才获取消防点位列表
|
|
|
+ const getFireStationList= () => {
|
|
|
+ if(securityFacilitiesErr.siteName.id!=""&&securityFacilitiesErr.facilityType=="1"){
|
|
|
+ new tools()
|
|
|
+ .fireStationList({
|
|
|
+ current: 1,
|
|
|
+ size: 10000,
|
|
|
+ siteId: securityFacilitiesErr.siteName.id,
|
|
|
+ })
|
|
|
+ .then(({ records }) => {
|
|
|
+ FireStations.value=records;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+ const setFireStations= ({ selectedOptions }) => {
|
|
|
+ securityFacilitiesErr.siteFireProtection = selectedOptions[0];
|
|
|
+ securityFacilitiesErr.position=selectedOptions[0].position;
|
|
|
+ showFireStation.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 提交数据
|
|
|
+ const submit = () => {
|
|
|
+ //添加保存前判断
|
|
|
+
|
|
|
+ new securityFacilitiesErrService().save(securityFacilitiesErr).then((res) => {
|
|
|
+ if(res.data=="保存安防设施异常成功"){
|
|
|
+ window.xm.showToast({
|
|
|
+ message:"保存成功!"
|
|
|
+ })
|
|
|
+ history.back();
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ securityFacilitiesErr,
|
|
|
+ // 场所
|
|
|
+ customFieldName,
|
|
|
+ showPlace,
|
|
|
+ places,
|
|
|
+ getPlace,
|
|
|
+ //设施类型选择
|
|
|
+ showLx,
|
|
|
+ facilityTypes,
|
|
|
+ getfacilityType,
|
|
|
+ //选择视频音频点位
|
|
|
+ showVideoAudio,
|
|
|
+ getVideoAudioList,
|
|
|
+ VideoAudios,
|
|
|
+ setVideoAudios,
|
|
|
+
|
|
|
+ //选择消防点位
|
|
|
+ showFireStation,
|
|
|
+ getFireStationList,
|
|
|
+ FireStations,
|
|
|
+ setFireStations,
|
|
|
+
|
|
|
+ // 返回
|
|
|
+ onClickLeft,
|
|
|
+ submit,
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+* {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.main {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.main p {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #36a7f3;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+.miniTitle {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.formArea {
|
|
|
+ padding: 0px 20px;
|
|
|
+}
|
|
|
+.formArea .van-cell-group .van-field__label {
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+.formArea .van-cell-group .van-cell {
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+.van-cell__value .van-field__right-icon .van-icon-location {
|
|
|
+ color: #36a7f3 !important;
|
|
|
+}
|
|
|
+.rowTextArea::v-deep .van-field__value {
|
|
|
+ width: 94%;
|
|
|
+ border: 2px solid #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.rowTextArea::v-deep .van-cell {
|
|
|
+ display: flow-root;
|
|
|
+}
|
|
|
+.subbtn {
|
|
|
+ margin: 20px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.subbtn .van-button {
|
|
|
+ width: 40%;
|
|
|
+ margin: 5px;
|
|
|
+}
|
|
|
+.van-uploader .van-button {
|
|
|
+ border: none;
|
|
|
+ color: #36a7f3;
|
|
|
+ top: -4px;
|
|
|
+}
|
|
|
+.van-dialog {
|
|
|
+ width: 80%;
|
|
|
+ top: 50%;
|
|
|
+}
|
|
|
+</style>
|