wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

Merge branch 'hi-ucs-dev' of http://124.222.94.39:3000/wuhongjian/hi-ucs into hi-ucs-dev

This commit is contained in:
wuhongjian 2023-01-04 17:14:23 +08:00
parent 70356805ba 344bb3b0da
commit 4617c2d892
18 changed files with 2004 additions and 985 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

730
back/src/views/modules/ability/IntegratedServices-add.vue
View File

@ -1,30 +1,38 @@
<template>
<div>
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
:close-on-click-modal="false" :close-on-press-escape="false">
<div class="first-title">
填写字段
</div>
<el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
<el-checkbox-button v-for="(item) in btnList" :label="item" :key="item">{{ item }}
</el-checkbox-button>
</el-checkbox-group>
<el-dialog custom-class="customClass" :visible.sync="cityVisibleCopy" :title="modalTypeText[modalType]"
@close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
<div class="left">
<div class="left-process">
<!-- <el-steps direction="vertical" :active="activeStep">
<el-step :key=index v-for="(item, index) in steps" :title=item @click.native="handleStep(index)"></el-step>
</el-steps> -->
<div class="li1" v-for="(item, index) in steps" :key="index" @click="handleStep(item, index)">
<div v-if="index == activeStepIndex">
<div class="node node1">{{ item.name }}</div>
<div class="borderLeft borderLeft1"></div>
</div>
<div v-else>
<div class="node">{{ item.name }}</div>
<div class="borderLeft"></div>
</div>
<div class="advice"></div>
</div>
<!-- 挂载和修改-->
<div key="1">
</div>
</div>
<!-- 挂载和修改 -->
<div class="right">
<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
:label-width="$i18n.locale === 'en-US' ? '150px' : '130px'">
<!-- 基本信息 -->
<div style="margin-bottom:20px" v-show="checkList.includes('基本信息')">
<div style="
text-align: center;
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
">
<div class="scrollBox" id="anchor1">
<div class="baseTitle">
基本信息
</div>
<el-form-item label="融合服务名称" prop="name">
<div class="baseInner">
<el-form-item label="融合服务名称" prop="name">
<el-input class="input-box" v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
</el-form-item>
<el-form-item label="融合服务描述" prop="description">
@ -37,91 +45,167 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="图片">
<el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
:on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1" :file-list="[]"
:on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
<el-button size="small" type="primary" class="button-new">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
</el-upload>
</el-form-item>
<el-form-item label="图片:">
<el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
:on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1"
:file-list="[]" :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
<div class="button-new">
<div>点击上传</div>
</div>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
</el-upload>
</el-form-item>
</div>
</div>
<!-- 组合能力 -->
<div class="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
<div class="title">
<div class="scrollBox" id="anchor2">
<div class="baseTitle">
组合能力
</div>
<InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
:modalType="modalType" ref="jcssDom"></InfrastructureModal>
<el-form-item label="基础设施总数" >
<el-input v-model="dataForm.infrastructureCount" onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
</el-form-item>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
:getDataParams="getListParams['数据资源']"></combine-ability>
<el-form-item label="数据资源总数" >
<el-input v-model="dataForm.dataSourceCount" onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入数据资源总数"></el-input>
</el-form-item>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
:getDataParams="getListParams['组件服务']"></combine-ability>
<el-form-item label="组件服务总数" >
<el-input v-model="dataForm.componentCount" placeholder="请输入组件服务总数"></el-input>
</el-form-item>
<div class="baseInner">
<!-- <scene-one-input :dataForm="dataForm" title="场景痛点" @update="updateDataForm" ref="scenePainDom"
:keyTextObj="painKeyTextObj"></scene-one-input> -->
<InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
:modalType="modalType" ref="jcssDom"></InfrastructureModal>
<el-form-item label="基础设施总数" >
<el-input v-model="dataForm.infrastructureCount" onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
</el-form-item>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
:getDataParams="getListParams['数据资源']"></combine-ability>
<el-form-item label="数据资源总数" >
<el-input v-model="dataForm.dataSourceCount" onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入数据资源总数"></el-input>
</el-form-item>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
:getDataParams="getListParams['组件服务']"></combine-ability>
<el-form-item label="组件服务总数" >
<el-input v-model="dataForm.componentCount" placeholder="请输入组件服务总数"></el-input>
</el-form-item>
</div>
</div>
</el-form>
</div>
<template slot="footer">
<el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
<el-button @click="closeModal">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import debounce from "lodash/debounce";
import qs from "qs";
import CommonQuestion from './components/common-question.vue';
import IntegratedCombineAbility from './components/integrated-combine-ability.vue';
import CombineAbility from './components/combine-ability.vue';
import Cookies from 'js-cookie'
import { tableColumns } from './IntegratedServices.vue';
import { getFuseResourceList, getListParams, modalTypeText } from "./assignedScene/add-update-scene.vue";
import debounce from 'lodash/debounce'
import InfrastructureModal from './assignedScene/components/infrastructure-modal.vue'
import CombineAbility from './components/combine-ability.vue'
import { getFuseResourceList, getListParams } from './assignedScene/add-update-scene.vue'
import qs from 'qs'
// import SceneUseStep from './components/scene-use-step.vue'
// import SceneOneInput from './components/scene-one-input.vue'
// import AbilityAdd from './components/ability-add.vue'
// import CombineAbility from '../components/combine-ability.vue'
// import CommonQuestion from '../components/common-question.vue'
// import InfrastructureModal from './components/infrastructure-modal.vue'
// import Cookies from 'js-cookie'
// import upload from '@/views/modules/components/upload'
export const getDescJson = (text) => {
return {
descObj: {
text: `${text}描述`,
key: 'description'
}
}
}
// 模态框标题
export const modalTypeText = {
add: '场景挂接',
update: '场景修改'
}
export default {
components: {
CommonQuestion,
IntegratedCombineAbility,
CombineAbility,
InfrastructureModal,
InfrastructureModal
// SceneUseStep,
// CombineAbility,
// SceneOneInput,
// upload,
// CommonQuestion,
// InfrastructureModal,
// AbilityAdd
},
data() {
watch: {
dataForm: {
handler (newVal) {
this.dataForm = newVal
},
deep: true,
immediate: true
},
cityVisible: {
handler (newVal) {
this.cityVisible = newVal
if (this.modalType == 'add' && newVal) {
this.getDetail(this.dataForm)
}
},
immediate: true
}
},
props: {
modalType: {
type: String,
default: 'add'
},
cityVisible: {
type: Boolean,
default: false
}
},
data () {
return {
domArr: [],
scrollTop: 0,
selectNow: '',
areaList: [],
activeStepIndex: 0, // 选择的步骤
activeStepIndexs: 0,
baseTypeList: [{ value: '视频资源', label: '视频资源' }, { value: '云资源', label: '云资源' }, { value: '其他', label: '其他' }],
componetTypeList: [{ value: '智能算法', label: '智能算法' }, { value: ' 图层服务', label: ' 图层服务' },
{ value: '开发组件', label: '开发组件' }, { value: '业务组件', label: '业务组件' }],
dataTypeList: [{ value: '数据', label: '数据' }],
sceneAreas: [], // 赋能领域
steps: [{ name: '基本信息', id: 'anchor1' },
{ name: '组合能力', id: 'anchor2' }],
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
painKeyTextObj: getDescJson('痛点'),
solutionKeyTextObj: getDescJson('方案'),
dataForm: {
"infrastructureCount":null,
"dataSourceCount":null,
"componentCount":null,
"name": "",
"applicationArea": "",
"description": "",
"fuseAttrList": [
infrastructureCount: null,
dataSourceCount: null,
componentCount: null,
name: '',
applicationArea: '',
description: '',
fuseAttrList: [
{
"attrType": "服务图片",
"attrValue": "",
},
attrType: '服务图片',
attrValue: ''
}
],
// 选择的能力
"fuseResourceList": [
fuseResourceList: [
{
"resourceId": 0,
"sequence": ""
resourceId: 0,
sequence: ''
}
],
type: '打包模式'
@ -130,225 +214,432 @@ export default {
name: [
{
required: true,
message: "请输入融合服务名称",
trigger: "change",
},
message: '请输入名称',
trigger: 'change'
}
],
description: [
{
required: true,
message: "请输入融合服务描述",
trigger: "change",
},
],
message: '请输入描述',
trigger: 'change'
}
]
},
btnList: ['基本信息', '组合能力'],
checkList: ['基本信息', '组合能力'],
areaList: [],
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
displayInfo: tableColumns,
getListParams: getListParams,
refsParseArray: {
'zjfwDom': '组件服务',
'sjzyDom': '数据资源',
'jcssDom': '基础设施',
checkList: ['基本信息', '场景痛点', '解决方案', '使用能力', '构建步骤'],
cityVisibleCopy: this.cityVisible,
displayInfo: {
name: '名称',
description: '描述'
},
modalTypeText: modalTypeText,
getListParams: getListParams,
refsParseArray: {
zjfwDom: '组件服务',
sjzyDom: '数据资源',
jcssDom: '基础设施'
},
abilityListObj: {},
imgData: [],
// 限定图片
handleExceed() {
handleExceed () {
this.$message({ type: 'error', message: '最多支持一张图片上传' })
},
imageUrl: ''
};
},
props: {
modalType: {
type: String,
default: 'add'
},
addOrUpdateVisible: {
type: Boolean,
default: false
}
},
watch: {
dataForm: {
handler(newVal) {
this.dataForm = newVal
},
deep: true,
immediate: true,
},
addOrUpdateVisible: {
handler(newVal) {
this.addOrUpdateVisibleCopy = newVal;
if (this.modalType == 'add' && newVal) {
this.getDetail(this.dataForm)
}
},
immediate: true,
},
},
mounted() {
// 获取应用领域
this.getAreaInfo()
},
methods: {
clearForm() {
this.$refs.dataForm && this.$refs.dataForm.resetFields();
handleStep (item, index) {
this.activeStepIndex = index
this.selectNow = item.id // 设置选中的锚点为当前点击的
const top = document.querySelector('#' + item.id).offsetTop - 100
document.querySelectorAll('.customClass .el-dialog__body')[0].scrollTop = top
},
closeModal() {
this.$emit('closeModal')
},
// 获取应用领域
getAreaInfo() {
// 获取赋能场景
getSceneArea () {
const params = {
page: 1,
limit: 99,
dictTypeId: "1513712507692818433",
};
topCategoryName: '应用资源'
}
this.$http
.get("/sys/dict/data/page" + "?" + qs.stringify(params))
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
res.data.list.map((item) => {
this.areaList.push({
label: item.dictLabel,
value: item.dictLabel
});
});
}).catch(err => {
this.$message.error(err);
.get('/category/getAllFilterCriteriaByTopCategory/', {
params
})
.then((res) => {
this.sceneAreas = res.data.data[0].typeList
})
},
clearForm () {
this.$refs.dataForm && this.$refs.dataForm.resetFields()
},
closeModal () {
this.$emit('closeModal')
},
// 更新表单
updateDataForm(data) {
updateDataForm (data) {
if (Object.keys(this.getListParams).includes(data.title)) {
this.abilityListObj[data.title] = data.list;
this.abilityListObj[data.title] = data.list
}
},
getFuseResourceList() {
return getFuseResourceList(this.abilityListObj)
// 更新数量
updateCount (data) {
if (data.title === '基础设施') {
this.dataForm.infrastructureCount = data.count
}
if (data.title === '组件服务') {
this.dataForm.componentCount = data.count
}
if (data.title === '数据资源') {
this.dataForm.dataSourceCount = data.count
}
},
// 改变按钮状态
changeBtn(data) {
this.checkList = data;
getFuseResourceList () {
return getFuseResourceList(this.abilityListObj)
},
// 表单提交
dataFormSubmitHandle: debounce(
function () {
this.$refs.dataForm.validate((valid) => {
if (!valid) {
this.$message.error("请检查表单是否填写完整");
return false;
this.$message.error('请检查表单是否填写完整')
return false
}
let methodsObj = {
'add': 'post',
'update': 'put'
const methodsObj = {
add: 'post',
update: 'put'
}
this.dataForm.fuseResourceList = this.getFuseResourceList()
if (this.imageUrl == '') {
this.$message.error("请上传图片！");
return;
this.$message.error('请上传图片！')
return
}
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || '';
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
this.$http
[methodsObj[this.modalType]]("/fuse", this.dataForm)
[methodsObj[this.modalType]]('/fuse', this.dataForm)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
return this.$message.error(res.msg)
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.$refs.dataForm && this.$refs.dataForm.resetFields();
this.$emit("refreshDataList");
this.$emit("closeModal");
},
});
this.$refs.dataForm && this.$refs.dataForm.resetFields()
this.$emit('refreshDataList')
this.$emit('closeModal')
}
})
})
.catch((err) => {
this.$message.error(err)
});
});
})
})
},
1000,
{ leading: true, trailing: false }
),
// 详情
getDetail(data) {
this.dataForm = data;
getDetail (data) {
this.dataForm = data
this.$nextTick(() => {
for (const key in this.refsParseArray) {
console.log('11111111111', data)
this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
}
let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {};
this.imageUrl = _imgObj.attrValue;
const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
this.imageUrl = _imgObj.attrValue
// 组合能力
Object.keys(this.getListParams).map(k => {
let arr = data.fuseResourceList.filter(v => v.type == k);
let arr2 = [];
const arr = data.fuseResourceList.filter(v => v.type == k)
const arr2 = []
arr.map(v => {
arr2.push(v.resourceId)
})
this.abilityListObj[k] = arr2
})
console.log('this.dataForm----详情-------->', this.dataForm);
console.log('this.dataForm----详情-------->', this.dataForm)
})
},
beforeAvatarUpload(file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
file.type === 'image/png'
if (!isImage) {
this.$message.error('上传头像图片只能是 jpg/png 格式!')
// 获取应用领域
getAreaInfo () {
const params = {
page: 1,
limit: 99,
dictTypeId: '1513712507692818433'
}
return isImage
this.$http
.get('/sys/dict/data/page' + '?' + qs.stringify(params))
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
res.data.list.map((item) => {
this.areaList.push({
label: item.dictLabel,
value: item.dictLabel
})
})
}).catch(err => {
this.$message.error(err)
})
},
addUploadRemoveFile(file, fileList) {
this.$refs.addUpload.clearFiles()
this.imageUrl = ''
},
editBeforeAvatarUpload(file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
file.type === 'image/png'
if (!isImage) {
this.$message.error('上传头像图片只能是 jpg/png 格式!')
}
return isImage
},
editUploadRemoveFile(file, fileList) {
this.$refs.editUpload.clearFiles()
this.imageUrl = ''
},
eidtHandleAvatarSuccess(res, file) {
handleAvatarSuccess (res, file) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.imageUrl = res.data
},
beforeAvatarUpload (file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
file.type === 'image/png'
if (!isImage) {
this.$message.error('上传头像图片只能是 jpg/png 格式!')
}
return isImage
},
addUploadRemoveFile (file, fileList) {
this.$refs.addUpload.clearFiles()
this.imageUrl = ''
},
editBeforeAvatarUpload (file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
file.type === 'image/png'
if (!isImage) {
this.$message.error('上传头像图片只能是 jpg/png 格式!')
}
return isImage
},
editUploadRemoveFile (file, fileList) {
this.$refs.editUpload.clearFiles()
this.imageUrl = ''
},
eidtHandleAvatarSuccess (res, file) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.imageUrl = res.data
}
},
beforeDestroy() {
mounted () {
// 获取应用领域
this.getAreaInfo()
const that = this
this.$nextTick(() => {
document.querySelector('.el-dialog__body').onscroll = function () {
const top = document.querySelectorAll('.customClass .el-dialog__body')[0].scrollTop - 100
if (top < document.querySelector('#anchor1').offsetTop - 100) {
that.activeStepIndexs = 0
} else if (top < document.querySelector('#anchor2').offsetTop - 100) {
that.activeStepIndexs = 1
} else {
that.activeStepIndexs = 0
}
if (that.activeStepIndex !== that.activeStepIndexs) {
that.activeStepIndex = that.activeStepIndexs
that.$forceUpdate()
}
}
})
},
beforeDestroy () {
this.clearForm()
},
};
}
}
</script>
<style lang="scss" scoped>
.fixed {
position: sticky;
z-index: 10012;
top: 0;
left: 50%;
margin-left: -9.56rem;
}
.button-new {
height: 90px;
width: 128px;
border: 1px dashed rgba(198, 198, 198, 0.5);
border-radius: 2px;
background: #e9eff8;
color: #666666;
font-size: 14px;
margin-right: 8px;
}
.button-new div {
background: url('~@/assets/img/uploadAdd.png') no-repeat;
color: #666666;
background-position: center;
text-align: center;
height: 90px;
padding-top: 41px;
background-position-y: 22px;
}
.left {
width: 135px;
height: 650px;
position: fixed;
background: rgba(244, 245, 248, 0.8);
.left-process {
height: 300px;
position: fixed;
padding-left: 18px;
padding-top: 24px;
.li1 {
list-style: none;
box-sizing: border-box;
padding-left: 20px;
position: relative;
}
.borderLeft {
width: 1px;
height: 100%;
background-color: #1160e2;
position: absolute;
top: 11.225px;
bottom: 0;
left: -1px;
}
.borderLeft1 {
background-color: #1160e2;
;
}
.node::before {
z-index: 1;
content: "";
background-color: #fff;
border: 1px solid #1160e2;
width: 12px;
height: 12px;
color: #fff;
position: absolute;
border-radius: 50%;
left: 0;
top: 11.225px;
transform: translate(-50%, -50%);
}
.node {
cursor: pointer;
font-size: 16px;
line-height: 22.5px;
font-weight: 500;
color: #212121;
}
.node1 {
color: #0058e1;
}
.node1::before {
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
border: 4px solid #1160e2;
}
.advice {
font-size: 10px;
color: #1160e2;
padding-bottom: 46px;
}
.li1:last-child .borderLeft {
display: none;
}
}
}
.right {
width: 770px;
margin-left: 157px;
margin-top: -5px;
.info-inner {
margin-left: 10px;
margin-right: 10px;
}
.info-title {
font-size: 14px;
font-weight: bold;
}
.baseInfo {
border-radius: 2px;
}
.baseTitle {
padding-left: 20px;
color: #212121;
font-size: 16px;
margin-bottom: 10px;
margin-top: 32px;
background: url("~@/assets/img/biaoti.png") no-repeat;
background-position-y: 2px;
}
.baseInner {
background: rgba(244, 245, 248, 0.8);
padding: 24px 120px;
}
.baseInner1 {
background: rgba(244, 245, 248, 0.8);
padding: 24px 24px;
}
}
::v-deep .el-dialog__header {
background: #0058e1;
// height: 50px;
}
::v-deep .el-dialog__title {
line-height: 18px;
font-size: 18px;
color: #fff;
}
::v-deep .el-upload {
display: inline-flex;
}
::v-deep .el-dialog__body {
padding: 0px;
height: 580px;
overflow: auto;
}
.icon-input ::v-deep .el-input__inner {
@ -379,7 +670,7 @@ export default {
}
</style>
<style lang="scss">
<style lang="scss" scoped>
.mod-sys__menu {
.menu-list,
@ -448,19 +739,14 @@ export default {
line-height: 32px;
}
.input-box {
width: 90%;
}
.first-title {
.title {
text-align: center;
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
}
.title {
.first-title {
text-align: center;
font-weight: 600;
font-size: 18px;

474
back/src/views/modules/ability/IntegratedServices-add_back.vue Normal file
View File

@ -0,0 +1,474 @@
<template>
<div>
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
:close-on-click-modal="false" :close-on-press-escape="false">
<div class="first-title">
填写字段
</div>
<el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
<el-checkbox-button v-for="(item) in btnList" :label="item" :key="item">{{ item }}
</el-checkbox-button>
</el-checkbox-group>
<!-- 挂载和修改-->
<div key="1">
<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
<!-- 基本信息 -->
<div style="margin-bottom:20px" v-show="checkList.includes('基本信息')">
<div style="
text-align: center;
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
">
基本信息
</div>
<el-form-item label="融合服务名称" prop="name">
<el-input class="input-box" v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
</el-form-item>
<el-form-item label="融合服务描述" prop="description">
<el-input type="textarea" :rows="3" class="input-box" v-model="dataForm.description"
placeholder="请输入融合服务描述"></el-input>
</el-form-item>
<el-form-item label="应用领域" prop="applicationArea">
<el-select v-model="dataForm.applicationArea" placeholder="请选择应用领域" filterable>
<el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="图片">
<el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
:on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1" :file-list="[]"
:on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
<el-button size="small" type="primary" class="button-new">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
</el-upload>
</el-form-item>
</div>
<!-- 组合能力 -->
<div class="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
<div class="title">
组合能力
</div>
<InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
:modalType="modalType" ref="jcssDom"></InfrastructureModal>
<el-form-item label="基础设施总数" >
<el-input v-model="dataForm.infrastructureCount" onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
</el-form-item>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
:getDataParams="getListParams['数据资源']"></combine-ability>
<el-form-item label="数据资源总数" >
<el-input v-model="dataForm.dataSourceCount" onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入数据资源总数"></el-input>
</el-form-item>
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
:getDataParams="getListParams['组件服务']"></combine-ability>
<el-form-item label="组件服务总数" >
<el-input v-model="dataForm.componentCount" placeholder="请输入组件服务总数"></el-input>
</el-form-item>
</div>
</el-form>
</div>
<template slot="footer">
<el-button @click="closeModal">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import debounce from 'lodash/debounce'
import qs from 'qs'
import CommonQuestion from './components/common-question.vue'
import IntegratedCombineAbility from './components/integrated-combine-ability.vue'
import CombineAbility from './components/combine-ability.vue'
import Cookies from 'js-cookie'
import { tableColumns } from './IntegratedServices.vue'
import { getFuseResourceList, getListParams, modalTypeText } from './assignedScene/add-update-scene.vue'
import InfrastructureModal from './assignedScene/components/infrastructure-modal.vue'
export default {
components: {
CommonQuestion,
IntegratedCombineAbility,
CombineAbility,
InfrastructureModal
},
data () {
return {
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
dataForm: {
infrastructureCount: null,
dataSourceCount: null,
componentCount: null,
name: '',
applicationArea: '',
description: '',
fuseAttrList: [
{
attrType: '服务图片',
attrValue: ''
}
],
// 选择的能力
fuseResourceList: [
{
resourceId: 0,
sequence: ''
}
],
type: '打包模式'
},
rules: {
name: [
{
required: true,
message: '请输入融合服务名称',
trigger: 'change'
}
],
description: [
{
required: true,
message: '请输入融合服务描述',
trigger: 'change'
}
]
},
btnList: ['基本信息', '组合能力'],
checkList: ['基本信息', '组合能力'],
areaList: [],
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
displayInfo: tableColumns,
getListParams: getListParams,
refsParseArray: {
zjfwDom: '组件服务',
sjzyDom: '数据资源',
jcssDom: '基础设施'
},
modalTypeText: modalTypeText,
abilityListObj: {},
// 限定图片
handleExceed () {
this.$message({ type: 'error', message: '最多支持一张图片上传' })
},
imageUrl: ''
}
},
props: {
modalType: {
type: String,
default: 'add'
},
addOrUpdateVisible: {
type: Boolean,
default: false
}
},
watch: {
dataForm: {
handler (newVal) {
this.dataForm = newVal
},
deep: true,
immediate: true
},
addOrUpdateVisible: {
handler (newVal) {
this.addOrUpdateVisibleCopy = newVal
if (this.modalType == 'add' && newVal) {
this.getDetail(this.dataForm)
}
},
immediate: true
}
},
mounted () {
// 获取应用领域
this.getAreaInfo()
},
methods: {
clearForm () {
this.$refs.dataForm && this.$refs.dataForm.resetFields()
},
closeModal () {
this.$emit('closeModal')
},
// 获取应用领域
getAreaInfo () {
const params = {
page: 1,
limit: 99,
dictTypeId: '1513712507692818433'
}
this.$http
.get('/sys/dict/data/page' + '?' + qs.stringify(params))
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
res.data.list.map((item) => {
this.areaList.push({
label: item.dictLabel,
value: item.dictLabel
})
})
}).catch(err => {
this.$message.error(err)
})
},
// 更新表单
updateDataForm (data) {
if (Object.keys(this.getListParams).includes(data.title)) {
this.abilityListObj[data.title] = data.list
}
},
getFuseResourceList () {
return getFuseResourceList(this.abilityListObj)
},
// 改变按钮状态
changeBtn (data) {
this.checkList = data
},
// 表单提交
dataFormSubmitHandle: debounce(
function () {
this.$refs.dataForm.validate((valid) => {
if (!valid) {
this.$message.error('请检查表单是否填写完整')
return false
}
const methodsObj = {
add: 'post',
update: 'put'
}
this.dataForm.fuseResourceList = this.getFuseResourceList()
if (this.imageUrl == '') {
this.$message.error('请上传图片！')
return
}
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
this.$http
[methodsObj[this.modalType]]('/fuse', this.dataForm)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.$refs.dataForm && this.$refs.dataForm.resetFields()
this.$emit('refreshDataList')
this.$emit('closeModal')
}
})
})
.catch((err) => {
this.$message.error(err)
})
})
},
1000,
{ leading: true, trailing: false }
),
// 详情
getDetail (data) {
this.dataForm = data
this.$nextTick(() => {
for (const key in this.refsParseArray) {
this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
}
const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
this.imageUrl = _imgObj.attrValue
// 组合能力
Object.keys(this.getListParams).map(k => {
const arr = data.fuseResourceList.filter(v => v.type == k)
const arr2 = []
arr.map(v => {
arr2.push(v.resourceId)
})
this.abilityListObj[k] = arr2
})
console.log('this.dataForm----详情-------->', this.dataForm)
})
},
beforeAvatarUpload (file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
file.type === 'image/png'
if (!isImage) {
this.$message.error('上传头像图片只能是 jpg/png 格式!')
}
return isImage
},
addUploadRemoveFile (file, fileList) {
this.$refs.addUpload.clearFiles()
this.imageUrl = ''
},
editBeforeAvatarUpload (file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
file.type === 'image/png'
if (!isImage) {
this.$message.error('上传头像图片只能是 jpg/png 格式!')
}
return isImage
},
editUploadRemoveFile (file, fileList) {
this.$refs.editUpload.clearFiles()
this.imageUrl = ''
},
eidtHandleAvatarSuccess (res, file) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.imageUrl = res.data
}
},
beforeDestroy () {
this.clearForm()
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
height: 580px;
overflow: auto;
}
.icon-input ::v-deep .el-input__inner {
cursor: pointer;
}
.detial-form ::v-deep {
.el-form-item {
margin-bottom: 0px;
line-height: 32px;
}
.el-form-item__label {
line-height: 32px;
}
.el-form-item__content {
line-height: 32px;
}
}
::v-deep .el-checkbox-button__inner {
width: 130px;
margin: 0 10px 5px;
border-left: unset !important;
border-radius: unset !important;
border: 1px solid #dcdfe6 !important;
}
</style>
<style lang="scss">
.mod-sys__menu {
.menu-list,
.icon-list {
.el-input__inner,
.el-input__suffix {
cursor: pointer;
}
}
&-icon-popover {
width: 458px;
overflow: hidden;
}
&-icon-inner {
width: 478px;
max-height: 258px;
overflow-x: hidden;
overflow-y: auto;
}
&-icon-list {
width: 458px;
padding: 0;
margin: -8px 0 0 -8px;
>.el-button {
padding: 8px;
margin: 8px 0 0 8px;
>span {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
font-size: 18px;
}
}
}
}
.previewImg {
position: fixed;
z-index: 9999;
}
.name {
text-align: right;
vertical-align: middle;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 32px;
width: 120px;
}
.text {
margin-left: 132px;
font-size: 14px;
color: #606266;
line-height: 32px;
}
.input-box {
width: 90%;
}
.first-title {
text-align: center;
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
}
.title {
text-align: center;
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
}
.avatar {
height: 100px;
width: 100px;
display: block;
}
</style>

108
back/src/views/modules/ability/IntegratedServices.vue
View File

@ -38,10 +38,9 @@
layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
:addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
:cityVisible="addOrUpdateVisible" :addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
</add-or-update>
</div>
@ -49,50 +48,51 @@
</template>
<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./IntegratedServices-add";
import qs from "qs";
import { type } from "os";
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './IntegratedServices-add'
// import AddOrUpdate from './IntegratedServices-add_back'
import qs from 'qs'
import { type } from 'os'
export const tableColumns = {
'name': '名称',
'description': '描述',
'applicationArea': '应用领域',
name: '名称',
description: '描述',
applicationArea: '应用领域'
}
export default {
mixins: [mixinViewModule],
data() {
data () {
return {
// 表格--列
tableColumns: tableColumns,
tableData: [],
mixinViewModuleOptions: {
getDataListURL: "/fuse/page",
exportURL: "/ability/bsabilityai/export",
deleteURL: "/fuse/delete",
getDataListURL: '/fuse/page',
exportURL: '/ability/bsabilityai/export',
deleteURL: '/fuse/delete',
getDataListIsPage: true,
deleteIsBatch: false,
deleteIsBatch: false
},
dataForm: {
name: "",
name: '',
order: 'desc',
orderField: 'create_date',
type: '打包模式'
},
qp: false,
modalType: 'add',
};
modalType: 'add'
}
},
components: {
AddOrUpdate,
AddOrUpdate
},
mounted() {
window.addEventListener("resize", this.a);
this.fullScreen();
mounted () {
window.addEventListener('resize', this.a)
this.fullScreen()
},
methods: {
deleteRow(id) {
deleteRow (id) {
this.$confirm('确认是否删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -103,52 +103,52 @@ export default {
}).then(res => {
console.log('删除成功', res)
if (res.data.code !== 0) {
return this.$message.error(res.msg);
return this.$message.error(res.msg)
}
this.$message({
message: '删除成功',
type: "success",
type: 'success',
duration: 500,
onClose: () => {
this.query()
},
});
}
})
}).catch(err => {
this.$message.error(err);
this.$message.error(err)
})
}).catch(() => {
});
})
},
// 查询
searchData() {
searchData () {
this.query()
},
// 重置
reset() {
this.dataForm.name = "";
reset () {
this.dataForm.name = ''
this.query()
},
// 修改
handleUpdate(val) {
this.addOrUpdateVisible = true;
this.modalType = 'update';
handleUpdate (val) {
this.addOrUpdateVisible = true
this.modalType = 'update'
const cloneVal = JSON.parse(JSON.stringify(val))
this.$nextTick(() => {
this.$refs.addOrUpdate.getDetail(cloneVal)
})
},
// 挂接
addServe() {
addServe () {
this.addOrUpdateVisible = true
this.modalType = 'add';
this.modalType = 'add'
},
closeModal() {
this.addOrUpdateVisible = false;
closeModal () {
this.addOrUpdateVisible = false
},
// 详情
showDetail(val) {
// window.open(window.SITE_CONFIG.previewUrl + '#/packagingDetails?id=' + val.id)
window.open(window.SITE_CONFIG.previewUrl + '#/integrationServicesDetails?id=' + val.id)
showDetail (val) {
// window.open(window.SITE_CONFIG.previewUrl + '#/packagingDetails?id=' + val.id)
window.open(window.SITE_CONFIG.previewUrl + '#/integrationServicesDetails?id=' + val.id)
},
// showDocument(val) {
// console.log(val);
@ -157,28 +157,28 @@ export default {
// "_blank"
// );
// },
fullScreen() {
fullScreen () {
if (window.outerHeight === screen.availHeight) {
if (window.outerWidth === screen.availWidth) {
console.log(
"全屏1",
);
this.qp = false;
'全屏1'
)
this.qp = false
} else {
console.log(
"不是全屏2",
);
this.qp = true;
'不是全屏2'
)
this.qp = true
}
} else {
console.log(
"不是全屏3",
);
this.qp = true;
'不是全屏3'
)
this.qp = true
}
},
},
};
}
}
}
</script>
<style lang="scss" scoped>
.el-tooltip__popper {

2
back/src/views/modules/ability/assignedScene/area-add.vue
View File

@ -21,7 +21,7 @@
<el-form-item label="赋能领域:" prop="unit">
<el-select v-model="dataForm.applicationArea" placeholder="请选择">
<el-option v-for="item in sceneAreas" :key="item.data" :label="item.dict_label"
:value="item.dict_value"></el-option>
:value="item.dict_label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="场景名称:" prop="name">

2
back/src/views/modules/ability/assignedScene/city-add.vue
View File

@ -36,7 +36,7 @@
<el-form-item label="赋能领域:" prop="unit">
<el-select v-model="dataForm.applicationArea" placeholder="请选择">
<el-option v-for="item in sceneAreas" :key="item.data" :label="item.dict_label"
:value="item.dict_value"></el-option>
:value="item.dict_label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="场景名称:" prop="name">

523
back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue
View File

@ -80,280 +80,277 @@
}}</el-button>
</template>
</el-dialog>
<DisplayList :displayList="displayList" showKey="channelName"></DisplayList>
</div>
</template>
<script>
import InfrastructureTree from './infrastructure-tree.vue'
import DisplayList from './display-list.vue';
import DisplayList from './display-list.vue'
export default {
components: {
InfrastructureTree,
DisplayList
components: {
InfrastructureTree,
DisplayList
},
props: {
// 最多选择的数据个数
maxNum: {
type: Number,
default: 10
},
props: {
// 最多选择的数据个数
maxNum: {
type: Number,
default: 10
},
type: {
type: String,
default: "基础设施"
},
modalType: {
type: String,
default: 'add'
}
type: {
type: String,
default: '基础设施'
},
data() {
const getYunList = () => {
let yunList = ['云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP'];
let arr = []
yunList.map(v => arr.push({ labelCode: v, labelName: v }))
return arr
}
return {
showKey: 0,
showModal: false,
selectedArray: [], // 已选择的数据id
selectedArrayCopy: [],
displayList: [], // 用于展示的list
btnList: ['视频资源', '云资源', '感知资源'],
showText: {
'视频资源': '视频标签',
'云资源': '云资源分类',
'感知资源': '感知资源分类',
},
tabData: [
{
tabName: '视频资源',
list: []
},
{
tabName: '云资源',
list: getYunList()
},
{
tabName: '感知资源',
list: []
},
],
currentList: [],
dataListLoading: false,
dataList: [],
pageData: {
total: 0,
},
cameraName: '',
postData: {},
activeBtn: '视频资源',
checkList: [],
searchData: {
cameraName: '',
pageSize: 10,
pageNum: 1,
parentId: ''
},
dataFormCopy: {}
}
},
watch: {
async showModal(newVal) {
if (newVal) {
// 默认选中复选框
this.$nextTick(() => {
this.selectCheckbox()
})
if (this.modalType == 'add') {
this.clear()
}
}
}
},
mounted() {
// 获取视频资源
this.getVideoBtn()
},
methods: {
selectCheckbox() {
if (this.selectedArray.length > 0) {
let list = []
this.dataList.forEach((item) => {
this.selectedArray.forEach(val => {
if (val === item.idtCameraChannel) {
list.push(item)
}
})
})
if (list.length) {
list.forEach((row) => {
this.$refs.dataTable && this.$refs.dataTable.toggleRowSelection(row, true)
})
}
}
},
showAction() {
this.showModal = true;
},
// 详情
async getDataInfo(dataForm) {
this.modalType == 'edit'
this.dataFormCopy = dataForm;
await this.getVideoBtn();
let arr = [];
let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
if (attrValue.length > 0) {
attrValue.map(val => {
let _obj = Object.assign({}, val, val.resource)
arr.push(_obj);
});
}
// 展示
this.displayList = JSON.parse(JSON.stringify(arr));
// 已选中
this.selectedArray = arr.map(v => v.idtCameraChannel);
this.selectedArrayCopy = JSON.parse(JSON.stringify(arr));
this.dataList = JSON.parse(JSON.stringify(arr));
this.pageData.total = arr.length;
// 默认选中复选框
this.$nextTick(() => {
this.selectCheckbox()
})
},
// 点击复选框
dataListSelectionChangeHandle(data) {
this.selectedArray = data;
},
pageCurrentChangeHandle(pageNum) {
this.searchData.pageNum = pageNum;
this.getData()
},
pageSizeChangeHandle(pageSize) {
this.searchData.pageSize = pageSize;
this.getData()
},
changeBtn(btn) {
this.activeBtn = btn;
this.currentList = this.tabData.find(v => v.tabName == btn).list || [];
this.checkList = [];
this.searchData.cameraName = '';
this.getData()
},
// 获取视频标签列表
getVideoBtn() {
return new Promise((resolve, reject) => {
this.$http.get('/api/project/selectAllLabel', {}).then(res => {
resolve(res)
if (res.data.code !== 1) {
return this.$message.error(res.msg);
}
this.tabData[0].list = res.data.data || [];
this.$nextTick(() => {
this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || [];
if (this.modalType == 'add') {
this.clear()
}
})
}).catch(err => {
reject(err)
this.$message.error(err);
})
})
},
// 视频-清空标签
clearVideo() {
this.checkList = []
this.getData()
},
// 切换视频
changeVideoBtn(item) {
let _index = this.checkList.findIndex(v => item.labelCode == v)
if (_index > -1) {
this.checkList.splice(_index, 1)
} else {
this.checkList.push(item.labelCode)
}
this.$nextTick(() => {
this.getData()
})
},
// 获取列表
getData() {
let postData = Object.assign({}, {
checkStatus: 1,
gpsX: '',
gpsY: '',
radius: '',
labelCodes: this.checkList.join(),
}, this.searchData);
return new Promise((resolve, reject) => {
this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
resolve(res)
if (res.data.code !== 1) {
return this.$message.error(res.msg);
}
this.dataList = res.data.data || []
this.pageData.total = res.data.count || 0;
}).catch(err => {
reject(err)
this.$message.error(err);
})
})
},
changeParentId(parentId) {
this.searchData.parentId = parentId;
this.getData(parentId)
},
clearSelectArray() {
this.selectedArrayCopy = []
this.selectedArray = []
this.getData()
},
confirmSubmitHandle() {
// 新选择的
let idtCameraChannelArray = this.selectedArray.map(v => v.idtCameraChannel)
// 选过的
let newIdArray = this.selectedArrayCopy.map(v => v.idtCameraChannel)
let idArray = [...new Set(newIdArray.concat(idtCameraChannelArray))]
if (idArray.length > this.maxNum) {
return this.$message.error('最多选择十条数据！');
}
let listArray = [].concat(this.selectedArrayCopy, this.dataList);
this.displayList = [];
idArray.map(v => {
let obj = listArray.find(k => k.idtCameraChannel === v)
if (obj) {
this.displayList.push({
channelName: obj.channelName
})
}
})
this.$emit('update', {
title: this.type,
list: idArray,
})
this.showModal = false;
},
close() {
this.showModal = false;
this.searchData.cameraName = ''
// this.selectedArray = [];
this.$emit('closeModal');
},
clear() {
this.changeBtn('视频资源')
},
modalType: {
type: String,
default: 'add'
}
},
data () {
const getYunList = () => {
const yunList = ['云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP']
const arr = []
yunList.map(v => arr.push({ labelCode: v, labelName: v }))
return arr
}
return {
showKey: 0,
showModal: false,
selectedArray: [], // 已选择的数据id
selectedArrayCopy: [],
displayList: [], // 用于展示的list
btnList: ['视频资源', '云资源', '感知资源'],
showText: {
视频资源: '视频标签',
云资源: '云资源分类',
感知资源: '感知资源分类'
},
tabData: [
{
tabName: '视频资源',
list: []
},
{
tabName: '云资源',
list: getYunList()
},
{
tabName: '感知资源',
list: []
}
],
currentList: [],
dataListLoading: false,
dataList: [],
pageData: {
total: 0
},
cameraName: '',
postData: {},
activeBtn: '视频资源',
checkList: [],
searchData: {
cameraName: '',
pageSize: 10,
pageNum: 1,
parentId: ''
},
dataFormCopy: {}
}
},
watch: {
async showModal (newVal) {
if (newVal) {
// 默认选中复选框
this.$nextTick(() => {
this.selectCheckbox()
})
if (this.modalType == 'add') {
this.clear()
}
}
}
},
mounted () {
// 获取视频资源
this.getVideoBtn()
},
methods: {
selectCheckbox () {
if (this.selectedArray.length > 0) {
const list = []
this.dataList.forEach((item) => {
this.selectedArray.forEach(val => {
if (val === item.idtCameraChannel) {
list.push(item)
}
})
})
if (list.length) {
list.forEach((row) => {
this.$refs.dataTable && this.$refs.dataTable.toggleRowSelection(row, true)
})
}
}
},
showAction () {
this.showModal = true
},
// 详情
async getDataInfo (dataForm) {
this.modalType == 'edit'
this.dataFormCopy = dataForm
await this.getVideoBtn()
const arr = []
const attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type)
if (attrValue.length > 0) {
attrValue.map(val => {
const _obj = Object.assign({}, val, val.resource)
arr.push(_obj)
})
}
// 展示
this.displayList = JSON.parse(JSON.stringify(arr))
// 已选中
this.selectedArray = arr.map(v => v.idtCameraChannel)
this.selectedArrayCopy = JSON.parse(JSON.stringify(arr))
this.dataList = JSON.parse(JSON.stringify(arr))
this.pageData.total = arr.length
// 默认选中复选框
this.$nextTick(() => {
this.selectCheckbox()
})
},
// 点击复选框
dataListSelectionChangeHandle (data) {
this.selectedArray = data
},
pageCurrentChangeHandle (pageNum) {
this.searchData.pageNum = pageNum
this.getData()
},
pageSizeChangeHandle (pageSize) {
this.searchData.pageSize = pageSize
this.getData()
},
changeBtn (btn) {
this.activeBtn = btn
this.currentList = this.tabData.find(v => v.tabName == btn).list || []
this.checkList = []
this.searchData.cameraName = ''
this.getData()
},
// 获取视频标签列表
getVideoBtn () {
return new Promise((resolve, reject) => {
this.$http.get('/api/project/selectAllLabel', {}).then(res => {
resolve(res)
if (res.data.code !== 1) {
return this.$message.error(res.msg)
}
this.tabData[0].list = res.data.data || []
this.$nextTick(() => {
this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || []
if (this.modalType == 'add') {
this.clear()
}
})
}).catch(err => {
reject(err)
this.$message.error(err)
})
})
},
// 视频-清空标签
clearVideo () {
this.checkList = []
this.getData()
},
// 切换视频
changeVideoBtn (item) {
const _index = this.checkList.findIndex(v => item.labelCode == v)
if (_index > -1) {
this.checkList.splice(_index, 1)
} else {
this.checkList.push(item.labelCode)
}
this.$nextTick(() => {
this.getData()
})
},
// 获取列表
getData () {
const postData = Object.assign({}, {
checkStatus: 1,
gpsX: '',
gpsY: '',
radius: '',
labelCodes: this.checkList.join()
}, this.searchData)
return new Promise((resolve, reject) => {
this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
resolve(res)
if (res.data.code !== 1) {
return this.$message.error(res.msg)
}
this.dataList = res.data.data || []
this.pageData.total = res.data.count || 0
}).catch(err => {
reject(err)
this.$message.error(err)
})
})
},
changeParentId (parentId) {
this.searchData.parentId = parentId
this.getData(parentId)
},
clearSelectArray () {
this.selectedArrayCopy = []
this.selectedArray = []
this.getData()
},
confirmSubmitHandle () {
// 新选择的
const idtCameraChannelArray = this.selectedArray.map(v => v.idtCameraChannel)
// 选过的
const newIdArray = this.selectedArrayCopy.map(v => v.idtCameraChannel)
const idArray = [...new Set(newIdArray.concat(idtCameraChannelArray))]
if (idArray.length > this.maxNum) {
return this.$message.error('最多选择十条数据！')
}
const listArray = [].concat(this.selectedArrayCopy, this.dataList)
this.displayList = []
idArray.map(v => {
const obj = listArray.find(k => k.idtCameraChannel === v)
if (obj) {
this.displayList.push({
channelName: obj.channelName
})
}
})
this.$emit('update', {
title: this.type,
list: idArray
})
this.showModal = false
},
close () {
this.showModal = false
this.searchData.cameraName = ''
// this.selectedArray = [];
this.$emit('closeModal')
},
clear () {
this.changeBtn('视频资源')
}
}
}
</script>

8
front/src/api/home.js
View File

@ -588,3 +588,11 @@ export function sysnoticemanagement(params) {
params,
})
}
//获取所有区市
export function getRegion(params) {
return request({
url: '/sys/region/list/',
method: 'get',
params,
})
}

BIN
front/src/assets/home/area.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
front/src/assets/home/city.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
front/src/assets/home/del-on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
front/src/assets/home/del.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

12
front/src/views/home/algorithmCompare.vue
View File

@ -667,12 +667,23 @@
</script>
<style>
.ant-modal-footer {
display: block;
}
</style>
<style lang="less" scoped>
:deep(.ant-table-tbody > tr.ant-table-row-selected > td){
background: #e6eefb;
}
:deep(.ant-checkbox-checked .ant-checkbox-inner){
background-color: #0058e1;
}
:deep(.ant-checkbox-indeterminate .ant-checkbox-inner::after){
background-color: #0058e1;
}
.bg {
background: #fff;
height: 100vh;
@ -884,6 +895,7 @@
.modal-box {
height: 650px;
width: 800px;
}
.add-img {

16
front/src/views/home/components/CanAssignCase.vue
View File

@ -82,14 +82,14 @@ watch(
justify-items: center;
.caseBox {
width: 3.5rem;
height: 3rem;
box-shadow: 1px 1px 5px 5px rgba(222, 222, 222, 0.152);
background: #ffffff;
border-radius: 0.05rem;
padding: 0.2rem;
margin-bottom: 0.2rem;
cursor: pointer;
width: 3.5rem;
height: 3rem;
border: 1px solid #ebecef;
box-shadow: 1px 1px 5px 5px rgb(222 222 222 / 15%);
background: #ffffff;
padding: 0.2rem;
margin-bottom: 0.2rem;
cursor: pointer;
img {
width: 3rem;

3
front/src/views/home/components/header.vue
View File

@ -189,6 +189,9 @@
}else if(newValue=='/demandDetails'){
select.value='demandCenter'
}
else if(newValue=='/integrationServicesDetails'){
select.value='integrationServices'
}
},
{ immediate: true }

1
front/src/views/home/components/searchResultList.vue
View File

@ -969,6 +969,7 @@
// margin: 11px 0 20px;
// background: #e5f2ff;
// padding-left: 20px;
padding-top:10px;
display: flex;
align-items: center;
position: relative;

70
front/src/views/home/infrastructurePage.vue
View File

@ -408,18 +408,23 @@
:wrapper-col="{ span: 14, offset: 4 }"
style="text-align: center; margin-top: 0.4rem"
>
<a-button @click="appointmentRoom = false" type="primary" danger>
取消
</a-button>
<a-button
style="margin-left: 10px"
type="primary"
<a-button
class="tijiao"
@click="onSubmit"
>
提交
</a-button>
<a-button class="quxiao" @click="appointmentRoom = false" >
取消
</a-button>
</a-form-item>
</a-form>
</a-modal>
</div>
<div v-if="room">
@ -1210,7 +1215,7 @@
if (item && item.status != 1) {
return
// return message.warning('当前设备离线, 不可预览！')
}
}handleChose
console.log('打开视频', id)
const param = {
key: id,
@ -2515,6 +2520,38 @@
})
</script>
<style lang="less" scoped>
.quxiao{
margin-right:12px;
cursor: pointer;
width: 90px;
height: 32px;
background: #ffffff;
color:#0058e1;
border-radius: 2px;
border: 1px #0058e1 solid;
}
.quxiao:hover{
background: #fff;
color: #0558e1;
opacity: 0.8;
}
.tijiao{
margin-right:12px;
cursor: pointer;
width: 90px;
height: 32px;
background: #0058e1;
color:#ffffff;
border-radius: 2px;
border: 1px #0058e1 solid;
margin-left:20px;
}
.tijiao:hover{
background: #0558e1;
color: #fff;
opacity: 0.8;
}
.queding {
margin-left: 16px;
cursor: pointer;
@ -2862,10 +2899,20 @@
// }
}
:deep(.ant-table-thead > tr > th) {
color: #5580f7 !important;
color: #0058e1 !important;
font-size: 16px !important;
font-weight: 600 !important;
}
:deep(.ant-table-tbody > tr.ant-table-row-selected > td){
background: #e6eefb;
}
:deep(.ant-checkbox-checked .ant-checkbox-inner){
background-color: #0058e1;
}
:deep(.ant-checkbox-indeterminate .ant-checkbox-inner::after){
background-color: #0058e1;
}
</style>
<style lang="less">
.eia-dropdown-class {
@ -2897,16 +2944,19 @@
.appModal {
.ant-modal-body {
height: 4.8rem !important;
height: 3.8rem !important;
overflow-y: scroll !important;
}
.ant-modal-title {
font-weight: 600;
color:#fff;
}
.ant-modal-content {
.ant-modal-header {
background: #0058e1;
margin-bottom: 16px;
border-bottom: 0 !important;
}
}

1008
front/src/views/home/integrationServices.vue
View File

File diff suppressed because it is too large Load Diff

32
front/src/views/personalCenter/components/PurchaseVehicle.vue
View File

@ -118,7 +118,7 @@
</div>
<!-- // todo -->
<span class="time">
<span v-if="!itShowXiHaiAn">
<span class="time-line" v-if="!itShowXiHaiAn">
加购时间:{{ item.time }}
</span>
<a-popconfirm
@ -128,7 +128,7 @@
@confirm="handleDelete(item, valIndex)"
@cancel="cancel"
>
<a-button
<!-- <a-button
type="primary"
style="
width: 0.7rem;
@ -141,7 +141,8 @@
@click="del"
>
删除
</a-button>
</a-button> -->
<span class="del-record" @click="del"></span>
</a-popconfirm>
</span>
<svg
@ -852,15 +853,34 @@
margin-left: 0.3rem;
font-size: 0.12rem;
color: #ccc;
display: flex;
align-content: center;
.time-line{
line-height: 32px;
}
.del-record {
width:32px;
height: 32px;
background: url('~@/assets/home/del.png') no-repeat;
cursor: pointer;
background-size: 100%;
margin-left: 0.12rem;
&:hover{
background: url('~@/assets/home/del-on.png') no-repeat;
}
}
}
.type {
margin-left: 0.1rem;
padding: 0.03rem 0.1rem;
background: #00a7e3;
border-radius: 3px;
// background: linear-gradient(-80deg, transparent 10%, #00a7e3 10%, #00a7e3 90%, transparent 0);
color: #fff;
transform: skewX(-10deg);
}
:deep(.ant-list-item-meta-description) {
margin-top: 0.1rem;
max-height: 0.22rem;
@ -929,7 +949,7 @@
}
.sousuokuang {
width: 3.25rem;
width: 3.13rem;
margin: 0.1rem 0rem 0.21rem 0.2rem;
.ant-input-search {
@ -1104,6 +1124,7 @@
width: 1rem;
height: 0.36rem;
border-radius: 2px;
margin-left: 0.12rem;
background: #fff;
color: #0558e1;
}
@ -1114,4 +1135,5 @@
margin-left: 0.12rem;
border-radius: 2px;
}
</style>