Compare commits

...

4 Commits

4 changed files with 856 additions and 821 deletions

View File

@ -8,139 +8,58 @@
</div> </div>
<div class="form-container"> <div class="form-container">
<div v-if="applySuccess"> <div v-if="applySuccess">
<a-form <a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }"
ref="formRef" :wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off">
:model="formName"
name="basic"
:label-col="{ style: { width: '106px' } }"
:wrapper-col="{ style: { width: '230px' } }"
labelAlign="left"
autocomplete="off"
>
<div class="base-info"> <div class="base-info">
<a-form-item <a-form-item label="申请标题" name="title" :rules="[{ required: true, message: '请输入申请标题' }]">
label="申请标题" <a-input placeholder="请输入能力申请标题" v-model:value="formName.title" />
name="title"
:rules="[{ required: true, message: '请输入申请标题' }]"
>
<a-input
placeholder="请输入能力申请标题"
v-model:value="formName.title"
/>
</a-form-item> </a-form-item>
</div> </div>
<div class="base-info"> <div class="base-info">
<a-form-item <a-form-item label="申请人信息" name="user" :rules="[{ required: true, message: '请输入申请人' }]">
label="申请人信息" <a-input placeholder="请输入申请人" v-model:value="formName.user" disabled />
name="user"
:rules="[{ required: true, message: '请输入申请人' }]"
>
<a-input
placeholder="请输入申请人"
v-model:value="formName.user"
disabled
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="margin: 0 22px" label="电话" name="phone" :rules="[
style="margin: 0 22px"
label="电话"
name="phone"
:rules="[
{ {
required: true, required: true,
pattern: /^1[3456789]\d{9}$/, pattern: /^1[3456789]\d{9}$/,
message: '请输入正确的电话号码', message: '请输入正确的电话号码',
}, },
]" ]">
> <a-input placeholder="请输入申请人电话" v-model:value="formName.phone" />
<a-input
placeholder="请输入申请人电话"
v-model:value="formName.phone"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item label="单位" name="unit" :rules="[{ required: true, message: '请输入单位' }]">
label="单位" <a-input placeholder="请输入单位" v-model:value="formName.unit" disabled v-if="deptFlage" />
name="unit" <a-select v-else placeholder="请选择归属部门" v-model:value="formName.unit" @change="deptIdChangeFunction">
:rules="[{ required: true, message: '请输入单位' }]" <a-select-option v-for="(item, index) in deptNameAll" :key="`${index}-${item}`" :value="item.name">
>
<a-input
placeholder="请输入单位"
v-model:value="formName.unit"
disabled
v-if="deptFlage"
/>
<a-select
v-else
placeholder="请选择归属部门"
v-model:value="formName.unit"
@change="deptIdChangeFunction"
>
<a-select-option
v-for="(item, index) in deptNameAll"
:key="`${index}-${item}`"
:value="item.name"
>
{{ item.name }} {{ item.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</div> </div>
<div class="base-info" v-if="flag"> <div class="base-info" v-if="flag">
<a-form-item <a-form-item label="应用系统" name="applicationSystem" :rules="[{ required: true, message: '请选择应用系统' }]">
label="应用系统" <a-select v-model:value="formName.applicationSystem" show-search placeholder="请输入关键字"
name="applicationSystem" style="width: 200px" :options="systemOptions" @focus="handleFocus" @blur="handleBlur"
:rules="[{ required: true, message: '请选择应用系统' }]" @change="systemHandleChange" @search="systemHandleSearch"></a-select>
>
<a-select
v-model:value="formName.applicationSystem"
show-search
placeholder="请输入关键字"
style="width: 200px"
:options="systemOptions"
@focus="handleFocus"
@blur="handleBlur"
@change="systemHandleChange"
@search="systemHandleSearch"
></a-select>
</a-form-item> </a-form-item>
<a-form-item <a-form-item class="applicationScene" label="应用领域" name="applicationScene"
class="applicationScene" :rules="[{ required: true, message: '请选择应用领域' }]" style="width: 6.93rem">
label="应用领域" <a-select v-model:value="formName.applicationScene" :options="applicationSceneOpthion" mode="tags"
name="applicationScene" :size="size" placeholder="请选择应用领域" :filterOption="false" :searchValue="false"
:rules="[{ required: true, message: '请选择应用领域' }]" style="width: 5.87rem"></a-select>
style="width: 6.93rem"
>
<a-select
v-model:value="formName.applicationScene"
:options="applicationSceneOpthion"
mode="tags"
:size="size"
placeholder="请选择应用领域"
:filterOption="false"
:searchValue="false"
style="width: 5.87rem"
></a-select>
</a-form-item> </a-form-item>
</div> </div>
<div> <div>
<a-form-item <a-form-item label="需求依据" name="applicationBackground" :rules="[
label="需求依据"
name="applicationBackground"
:rules="[
{ required: true, message: '请输入需求依据' }, { required: true, message: '请输入需求依据' },
{ min: 50, message: '需求依据最少为50个字' }, { min: 50, message: '需求依据最少为50个字' },
]" ]">
> <a-textarea placeholder="请输入需求依据" v-model:value="formName.applicationBackground" :rows="4" />
<a-textarea
placeholder="请输入需求依据"
v-model:value="formName.applicationBackground"
:rows="4"
/>
</a-form-item> </a-form-item>
</div> </div>
<div class="bottom-btn"> <div class="bottom-btn">
<a-button <a-button style="
style="
width: 80px; width: 80px;
height: 38px; height: 38px;
margin-right: 20px; margin-right: 20px;
@ -151,15 +70,10 @@
border: none; border: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
" " type="primary" html-type="cancle" @click="resetFields()">
type="primary"
html-type="cancle"
@click="resetFields()"
>
退出申请 退出申请
</a-button> </a-button>
<a-button <a-button style="
style="
width: 80px; width: 80px;
height: 38px; height: 38px;
background: #0087ff; background: #0087ff;
@ -169,11 +83,7 @@
border: none; border: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
" " type="primary" html-type="submit" @click="processStartHandle()">
type="primary"
html-type="submit"
@click="processStartHandle()"
>
提交申请 提交申请
</a-button> </a-button>
</div> </div>
@ -216,6 +126,7 @@
import { sgcDel, getApplyForm } from '@/api/personalCenter' import { sgcDel, getApplyForm } from '@/api/personalCenter'
import { pageWithAttrs, updateIntegrationServices } from '@/api/home' import { pageWithAttrs, updateIntegrationServices } from '@/api/home'
import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js' import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
import { getIntegrationDetail } from '@/api/home'
export default { export default {
name: '', name: '',
@ -224,26 +135,20 @@
HomeHeader, HomeHeader,
AbilityToApplyFor, AbilityToApplyFor,
}, },
beforeRouteLeave(from, to, next) {
console.log('from, to, next------------>', from, to, next);
localStorage.removeItem('integrationServicesItemInfo')
next()
},
setup() { setup() {
const router = useRouter() const router = useRouter()
const disabled = ref(false) const disabled = ref(false)
const flag = ref(false) const flag = ref(false)
const list = ref(JSON.parse(localStorage.getItem('applyList'))) const list = ref(JSON.parse(localStorage.getItem('applyList')))
const integrationServicesItemInfo = ref(
JSON.parse(localStorage.getItem('integrationServicesItemInfo') || '{}')
)
const deptNameAll = ref([]) // const deptNameAll = ref([]) //
const deptFlage = ref(true) // const deptFlage = ref(true) //
console.log( const applyAll = router.currentRoute.value.query.applyAll;
'integrationServicesItemInfo------------>', // id
integrationServicesItemInfo const integrationServicesId = router.currentRoute.value.query.integrationServicesId;
) //
const applyAll = router.currentRoute.value.query.applyAll const integrationServicesItemInfo = ref(null)
const num = ref(0) const num = ref(0)
if (!applyAll) { if (!applyAll) {
list.value.map((item) => { list.value.map((item) => {
@ -376,7 +281,6 @@
//退 //退
const resetFields = () => { const resetFields = () => {
window.history.go(-1) window.history.go(-1)
localStorage.removeItem('integrationServicesItemInfo')
} }
// //
@ -500,11 +404,11 @@
} }
}) })
} else { } else {
// todo //
if ( if (integrationServicesId) {
Object.keys(integrationServicesItemInfo).length > 0 getIntegrationServicesDeatil(integrationServicesId).then(res => {
) {
updateIntegrationServiceAction() updateIntegrationServiceAction()
})
} }
jumpToDetailsPageconetent() jumpToDetailsPageconetent()
} }
@ -623,11 +527,11 @@
} }
}) })
} else { } else {
// todo //
if ( if (integrationServicesId) {
Object.keys(integrationServicesItemInfo).length > 0 getIntegrationServicesDeatil(integrationServicesId).then(res => {
) {
updateIntegrationServiceAction() updateIntegrationServiceAction()
})
} }
jumpToDetailsPageconetent() jumpToDetailsPageconetent()
} }
@ -800,7 +704,7 @@
mybus.off('reomveOldData') mybus.off('reomveOldData')
}) })
// - todo // -
const updateIntegrationServiceAction = () => { const updateIntegrationServiceAction = () => {
let _applyCount = let _applyCount =
Number(integrationServicesItemInfo.value.applyCount || 0) + 1 Number(integrationServicesItemInfo.value.applyCount || 0) + 1
@ -810,13 +714,32 @@
updateIntegrationServices(_data) updateIntegrationServices(_data)
.then((res) => { .then((res) => {
console.log('res---更新--------->', res) console.log('res---更新--------->', res)
localStorage.removeItem('integrationServicesItemInfo')
}) })
.catch((err) => { .catch((err) => {
console.log('err----更新-------->', err) console.log('err----更新-------->', err)
localStorage.removeItem('integrationServicesItemInfo')
}) })
} }
// --
const getIntegrationServicesDeatil = (id) => {
return new Promise((resolve, reject) => {
getIntegrationDetail(id).then(
(res) => {
resolve(res)
if (res.data.code !== 0) {
return message.error(res.data.msg)
}
integrationServicesItemInfo.value = res.data.data || {}
},
(err) => {
reject(err)
message.error(err)
}
)
})
}
return { return {
deptIdChangeFunction, deptIdChangeFunction,
formRef, formRef,
@ -848,6 +771,7 @@
applicationSceneOpthion, applicationSceneOpthion,
flag, flag,
applyAll, applyAll,
getIntegrationServicesDeatil,
} }
}, },
} }
@ -860,6 +784,7 @@
margin: 0.8rem auto 0; margin: 0.8rem auto 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
aside { aside {
width: 282px; width: 282px;
height: 96%; height: 96%;
@ -867,6 +792,7 @@
background-color: #fff; background-color: #fff;
margin: 1% 0 3%; margin: 1% 0 3%;
} }
article { article {
width: 1090px; width: 1090px;
height: 99%; height: 99%;
@ -874,8 +800,10 @@
background-color: #fff; background-color: #fff;
margin: 1% auto; margin: 1% auto;
} }
.form-container { .form-container {
padding: 20px 20px 30px 20px; padding: 20px 20px 30px 20px;
.title { .title {
font-size: 20px; font-size: 20px;
color: #000; color: #000;
@ -883,52 +811,63 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.base-info { .base-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
:deep(.ant-form-item-label) { :deep(.ant-form-item-label) {
label { label {
color: #666; color: #666;
font-size: 16px; font-size: 16px;
&::after { &::after {
content: ''; content: '';
} }
} }
} }
:deep(.ant-form-item-required) { :deep(.ant-form-item-required) {
&::before { &::before {
font-size: 8px; font-size: 8px;
margin-right: 10px; margin-right: 10px;
} }
} }
:deep(.ant-input) { :deep(.ant-input) {
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 6px; border-radius: 6px;
} }
.success { .success {
div { div {
width: 100px; width: 100px;
margin: 80px auto 40px; margin: 80px auto 40px;
} }
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #000; color: #000;
} }
} }
.applicationScene { .applicationScene {
:deep(.ant-select-selector) { :deep(.ant-select-selector) {
overflow-x: scroll; overflow-x: scroll;
} }
:deep(.ant-select-selection-overflow) { :deep(.ant-select-selection-overflow) {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
} }
textarea { textarea {
resize: none; resize: none;
font-size: 14px; font-size: 14px;
} }
.bottom-btn { .bottom-btn {
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@ -571,10 +571,14 @@ export default {
_applyList = jcss.concat(_applyList) _applyList = jcss.concat(_applyList)
localStorage.setItem('applyList', JSON.stringify(_applyList)) localStorage.setItem('applyList', JSON.stringify(_applyList))
// //
localStorage.setItem('integrationServicesItemInfo', JSON.stringify(item))
router.push({ router.push({
path: '/apply', path: '/apply',
query: {
integrationServicesId: item.id,
},
}) })
} }
mybus.on('chongzhi', (typeObj) => { mybus.on('chongzhi', (typeObj) => {

View File

@ -494,7 +494,7 @@
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'operation'"> <template v-if="column.dataIndex === 'operation'">
<a <a
v-if="isXiHaiAn || true" v-if="isXiHaiAn"
@click=" @click="
openVideo( openVideo(
record.channelCode || record.channelCode ||
@ -1730,13 +1730,14 @@
status: 1, status: 1,
name: mapSearchParam.value.cameraName name: mapSearchParam.value.cameraName
} }
if ( // todo-
params.regionId === '70be8c5b664f4bcf869d82f2e8335051' && // if (
!params.name && // params.regionId === '70be8c5b664f4bcf869d82f2e8335051' &&
!params.longitude // !params.name &&
) { // !params.longitude
params.status = '' // ) {
} // params.status = ''
// }
let paramsFather = '' let paramsFather = ''
let i = 1 let i = 1
for (var key in params) { for (var key in params) {

View File

@ -168,7 +168,6 @@
<a-button <a-button
v-if="item.approveStatus === '通过'" v-if="item.approveStatus === '通过'"
@click.stop="switchFunction(item)" @click.stop="switchFunction(item)"
class="DownloadAttachment2"
> >
查看详情 查看详情
</a-button> </a-button>
@ -186,6 +185,14 @@
<span class="channelName">{{ val.channelName }}</span> <span class="channelName">{{ val.channelName }}</span>
<span class="type">基础设施</span> <span class="type">基础设施</span>
</div> </div>
<a-button
type="primary"
v-if="item.approveStatus === '通过' && whoShow1.itShowXiHaiAn"
@click.stop="openVideo(val)"
>
视频预览
</a-button>
</div> </div>
<div class="ability-bottom"> <div class="ability-bottom">
<div class="dec2">位置{{ val.nodeName }}</div> <div class="dec2">位置{{ val.nodeName }}</div>
@ -208,6 +215,23 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 单个预览弹窗 -->
<a-modal
wrapClassName="single-preview-modal"
v-model:visible="visible"
title="视频预览"
:width="960"
destroyOnClose
>
<template #footer></template>
<div style="width: 100%; display: flex; justify-content: center">
<div style="width: 100%; height: 100%">
<vue3VideoPlay v-bind="options"/>
</div>
</div>
</a-modal>
</div> </div>
</template> </template>
<script setup> <script setup>
@ -216,11 +240,44 @@
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { endProcess, getApplyForm } from '@/api/personalCenter.js' import { endProcess, getApplyForm } from '@/api/personalCenter.js'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import {
getStreamByChannelCode,
} from '@/api/videoSurveillance'
const router = useRouter() const router = useRouter()
const backUrl = ref(window.SITE_CONFIG.apiURL + '/') const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
const props = defineProps({ const props = defineProps({
refObj: { type: Object, default: null }, refObj: { type: Object, default: null },
}) })
const whoShow1 = ref(whoShow)
let visible = ref(false)
const options = reactive({
width: '912px', //
height: '513px', //
color: '#409eff', //
title: '', //
src: '', //
type: 'm3u8', //
muted: false, //
webFullScreen: false,
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //
autoPlay: true, //
loop: false, //
mirror: false, //
ligthOff: false, //
volume: 0.3, //
control: true, //
controlBtns: [
'audioTrack',
'quality',
'speedRate',
'volume',
'setting',
'pip',
'pageFullScreen',
'fullScreen',
], //,
})
const dept = reactive({}) const dept = reactive({})
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
if (infrastructure) { if (infrastructure) {
@ -379,6 +436,25 @@
} }
} }
} }
//
const openVideo = (item) => {
console.log('打开视频', item)
const param = {
key: item.cameraId,
}
getStreamByChannelCode(param).then((res) => {
console.log('视频预览------------>', res);
console.log(res)
visible.value = true
options.src = res.data.data || ''
}).catch(err => {
message.error(err)
})
// --
// visible.value = true
// options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.title { .title {
@ -576,4 +652,19 @@
} }
} }
} }
.single-preview-modal {
.ant-modal-header {
background: url(~@/assets/home/video-background.png) no-repeat;
background-size: cover;
}
.ant-modal-title {
font-size: 0.16rem;
font-weight: 500;
color: #ffffff;
}
.anticon {
color: #ffffff;
}
}
</style> </style>