516 lines
16 KiB
Vue
516 lines
16 KiB
Vue
|
<template>
|
|||
|
|
<Flex fd="co" class="page-scene">
|
|||
|
|
<Flex ai="c" jc="sb" class="page-scene-header">
|
|||
|
|
<span class="page-scene-title">场景编辑子系统</span>
|
|||
|
|
<span class="page-scene-title">推演想定【{{ roomName }}-{{ scenarioName }}】</span>
|
|||
|
|
<span class="page-scene-title">剩余 {{ roomInfo.remainTimeStr }}</span>
|
|||
|
|
</Flex>
|
|||
|
|
<Grid class="page-scene-main flex-1 oh" :columns="['320px', 1, '320px']" :rows="['30px', 1]" gap="0px">
|
|||
|
|
<div class="tool-wrapper" style="grid-area: 1 / 1 / 2 / 4"></div>
|
|||
|
|
<div
|
|||
|
|
ref="scene-cesium-container"
|
|||
|
|
class="scene-cesium-container"
|
|||
|
|
id="scene-cesium-container"
|
|||
|
|
style="grid-area: 2 / 1 / 3 / 4"
|
|||
|
|
></div>
|
|||
|
|
<div class="pr zi1" style="grid-area: 2 / 1 / 3 / 2">
|
|||
|
|
<ModuleWrapper title="作战/保障力量" height="45%">
|
|||
|
|
<template #extra>
|
|||
|
|
<a-button type="text-primary" icon="sync" style="font-size: 20px" @click="getZzbzllTreeData()"></a-button>
|
|||
|
|
</template>
|
|||
|
|
<div class="normal" style="padding: 5px; overflow-y: auto">
|
|||
|
|
<a-tree
|
|||
|
|
class="simulation-tree"
|
|||
|
|
:treeData="zzbzll.treeData"
|
|||
|
|
:selectedKeys.sync="zzbzll.selectedKeys"
|
|||
|
|
:replaceFields="{ children: 'children', title: 'title', key: 'id' }"
|
|||
|
|
@select="handleSelectZzbzll"
|
|||
|
|
>
|
|||
|
|
<template #title="{ id, dataRef }">
|
|||
|
|
<a-dropdown :trigger="['contextmenu']">
|
|||
|
|
<span>{{ dataRef.resourceName || dataRef.title }}</span>
|
|||
|
|
<template #overlay>
|
|||
|
|
<Flex>
|
|||
|
|
<a-button
|
|||
|
|
type="text-primary"
|
|||
|
|
icon="edit"
|
|||
|
|
title="修改名称"
|
|||
|
|
@click="handleOpenEditZzbzllModal(id, dataRef)"
|
|||
|
|
></a-button>
|
|||
|
|
<AntFormModal
|
|||
|
|
:visible.sync="zzbzllModal.visible"
|
|||
|
|
:title="zzbzllModal.title"
|
|||
|
|
:formItems="zzbzllModal.formItems"
|
|||
|
|
:formRules="zzbzllModal.formRules"
|
|||
|
|
:formData="zzbzllModal.formData"
|
|||
|
|
:onSubmit="handleSubmitZzbzll"
|
|||
|
|
@success="handleSubmitZzbzllSuccess"
|
|||
|
|
></AntFormModal>
|
|||
|
|
<a-button
|
|||
|
|
type="text-danger"
|
|||
|
|
icon="delete"
|
|||
|
|
title="删除"
|
|||
|
|
@click="handleDeleteZzbzll(id, dataRef)"
|
|||
|
|
></a-button>
|
|||
|
|
</Flex>
|
|||
|
|
</template>
|
|||
|
|
</a-dropdown>
|
|||
|
|
</template>
|
|||
|
|
</a-tree>
|
|||
|
|
</div>
|
|||
|
|
</ModuleWrapper>
|
|||
|
|
<ModuleWrapper height="55%">
|
|||
|
|
<template #title>
|
|||
|
|
<a-radio-group v-model="model.type" button-style="solid" @change="getModelListData">
|
|||
|
|
<a-radio-button :value="5">作战分队</a-radio-button>
|
|||
|
|
<a-radio-button :value="6">保障分队</a-radio-button>
|
|||
|
|
</a-radio-group>
|
|||
|
|
</template>
|
|||
|
|
<Flex class="normal" fd="co" style="padding: 5px">
|
|||
|
|
<Flex class="flex-1 scroller-y" fw="w" ac="fs">
|
|||
|
|
<Flex v-for="item in model.listData" :key="item.id" class="model-item" fd="co" ai="c">
|
|||
|
|
<img class="model-image" :src="item.imgBase64" :draggable="true" @dragend="dragend(item, $event)" />
|
|||
|
|
<span class="model-name">{{ item.name }}</span>
|
|||
|
|
</Flex>
|
|||
|
|
</Flex>
|
|||
|
|
</Flex>
|
|||
|
|
</ModuleWrapper>
|
|||
|
|
</div>
|
|||
|
|
<div class="pr zi1" style="grid-area: 2 / 3 / 3 / 4">
|
|||
|
|
<ModuleWrapper title="兵力编组" height="30%">
|
|||
|
|
<template #extra>
|
|||
|
|
<a-button type="text-primary" icon="plus" @click="handleOpenBlbzModal()"></a-button>
|
|||
|
|
<a-modal
|
|||
|
|
v-model="blbzModal.visible"
|
|||
|
|
:title="'兵力编组-' + (blbz.modelData && (blbz.modelData.resourceName || blbz.modelData.title))"
|
|||
|
|
width="900px"
|
|||
|
|
:maskClosable="false"
|
|||
|
|
:destroyOnClose="true"
|
|||
|
|
@ok="handleSubmitBlbz()"
|
|||
|
|
>
|
|||
|
|
<Grid :columns="['300px', 1]" :rows="[1, 1]" style="height: 600px">
|
|||
|
|
<ModuleWrapper title="组织机构" style="grid-row: 1 / 3">
|
|||
|
|
<a-tree
|
|||
|
|
class="simulation-tree"
|
|||
|
|
:treeData="blbzModal.treeData"
|
|||
|
|
:checkable="true"
|
|||
|
|
v-model="blbzModal.checkedKeys"
|
|||
|
|
:selectedKeys.sync="blbzModal.selectedKeys"
|
|||
|
|
@select="
|
|||
|
|
() => ($refs['zzry-table'].commitAction('query'), $refs['zzzb-table'].commitAction('query'))
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
</a-tree>
|
|||
|
|
</ModuleWrapper>
|
|||
|
|
<ModuleWrapper title="组织人员">
|
|||
|
|
<AntQueryTable
|
|||
|
|
ref="zzry-table"
|
|||
|
|
height="100%"
|
|||
|
|
:queryConfig="blbzModal.zzry.queryConfig"
|
|||
|
|
:tableConfig="blbzModal.zzry.tableConfig"
|
|||
|
|
:pageConfig="blbzModal.zzry.pageConfig"
|
|||
|
|
:showTool="blbzModal.zzry.showTool"
|
|||
|
|
>
|
|||
|
|
</AntQueryTable>
|
|||
|
|
</ModuleWrapper>
|
|||
|
|
<ModuleWrapper title="组织机构">
|
|||
|
|
<AntQueryTable
|
|||
|
|
ref="zzzb-table"
|
|||
|
|
height="100%"
|
|||
|
|
:queryConfig="blbzModal.zzzb.queryConfig"
|
|||
|
|
:tableConfig="blbzModal.zzzb.tableConfig"
|
|||
|
|
:pageConfig="blbzModal.zzzb.pageConfig"
|
|||
|
|
:showTool="blbzModal.zzzb.showTool"
|
|||
|
|
>
|
|||
|
|
</AntQueryTable>
|
|||
|
|
</ModuleWrapper>
|
|||
|
|
</Grid>
|
|||
|
|
</a-modal>
|
|||
|
|
</template>
|
|||
|
|
<div class="normal" style="padding: 5px; overflow-y: auto">
|
|||
|
|
<a-tree
|
|||
|
|
class="simulation-tree"
|
|||
|
|
:treeData="showBlbzCheckedTreeData"
|
|||
|
|
:selectable="false"
|
|||
|
|
:replaceFields="{ children: 'children', title: 'title', key: 'id' }"
|
|||
|
|
>
|
|||
|
|
</a-tree>
|
|||
|
|
</div>
|
|||
|
|
</ModuleWrapper>
|
|||
|
|
<ModuleWrapper height="70%">
|
|||
|
|
<template #title>
|
|||
|
|
<a-radio-group v-model="modelInfoType" button-style="solid">
|
|||
|
|
<a-radio-button value="jcsx">基础属性</a-radio-button>
|
|||
|
|
<a-radio-button value="zzxd">作战行动</a-radio-button>
|
|||
|
|
<a-radio-button value="bzrw">保障任务</a-radio-button>
|
|||
|
|
</a-radio-group>
|
|||
|
|
</template>
|
|||
|
|
<div class="normal" style="padding: 15px 0">
|
|||
|
|
<div style="height: 100%; padding: 0 15px; overflow-y: auto">
|
|||
|
|
<Jcsx v-if="modelInfoType === 'jcsx'" :scenarioId="scenarioId" :modelData="jcsx.data" />
|
|||
|
|
<Zzxd v-if="modelInfoType === 'zzxd'" :actionList="zzxd.data" />
|
|||
|
|
<BzTask v-if="modelInfoType === 'bzrw'" :scenarioId="scenarioId" :resourceid="resourceid" :type="type" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</ModuleWrapper>
|
|||
|
|
</div>
|
|||
|
|
</Grid>
|
|||
|
|
</Flex>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getAction, postAction } from '@/api/manage'
|
|||
|
|
import Jcsx from './components/Jcsx.vue'
|
|||
|
|
import Zzxd from './components/Zzxd.vue'
|
|||
|
|
import BzTask from './components/BzTask.vue'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'SubsystemScene',
|
|||
|
|
components: {
|
|||
|
|
Jcsx,
|
|||
|
|
Zzxd,
|
|||
|
|
BzTask,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
ws: null,
|
|||
|
|
roomInfo: {
|
|||
|
|
remainTimeStr: '',
|
|||
|
|
remainTime: '',
|
|||
|
|
duringTime: '',
|
|||
|
|
},
|
|||
|
|
roomId: '',
|
|||
|
|
roomName: '',
|
|||
|
|
scenarioId: '',
|
|||
|
|
scenarioName: '',
|
|||
|
|
cesium: null,
|
|||
|
|
zzbzll: {
|
|||
|
|
treeData: [],
|
|||
|
|
selectedKeys: [],
|
|||
|
|
},
|
|||
|
|
zzbzllModal: {
|
|||
|
|
title: '修改名称',
|
|||
|
|
visible: false,
|
|||
|
|
formItems: [
|
|||
|
|
{ label: '原名称', prop: 'originName', customRender: (text) => text },
|
|||
|
|
{ label: '新名称', prop: 'resourceName', required: true },
|
|||
|
|
],
|
|||
|
|
formRules: {},
|
|||
|
|
formData: {},
|
|||
|
|
},
|
|||
|
|
model: {
|
|||
|
|
type: 5,
|
|||
|
|
listData: [],
|
|||
|
|
},
|
|||
|
|
blbz: {
|
|||
|
|
modelData: null,
|
|||
|
|
treeData: [],
|
|||
|
|
checkedKeys: [],
|
|||
|
|
},
|
|||
|
|
blbzModal: {
|
|||
|
|
visible: false,
|
|||
|
|
treeData: [],
|
|||
|
|
checkedKeys: [],
|
|||
|
|
selectedKeys: [],
|
|||
|
|
zzry: {
|
|||
|
|
queryConfig: false,
|
|||
|
|
tableConfig: {
|
|||
|
|
table: {},
|
|||
|
|
immediate: false,
|
|||
|
|
query: () =>
|
|||
|
|
this.$http({
|
|||
|
|
url: `/baseData/fightPowerHierarchy/staff/${this.blbzModal.selectedKeys[0]}`,
|
|||
|
|
method: 'get',
|
|||
|
|
}),
|
|||
|
|
columns: [
|
|||
|
|
{ dataIndex: 'serial' },
|
|||
|
|
{ title: '岗位', dataIndex: 'name', width: 'auto', minWidth: 150 },
|
|||
|
|
{ title: '岗位数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
pageConfig: false,
|
|||
|
|
showTool: false,
|
|||
|
|
},
|
|||
|
|
zzzb: {
|
|||
|
|
queryConfig: false,
|
|||
|
|
tableConfig: {
|
|||
|
|
table: {},
|
|||
|
|
immediate: false,
|
|||
|
|
query: () =>
|
|||
|
|
this.$http({
|
|||
|
|
url: `/baseData/fightPowerHierarchy/weapon/${this.blbzModal.selectedKeys[0]}`,
|
|||
|
|
method: 'get',
|
|||
|
|
}),
|
|||
|
|
columns: [
|
|||
|
|
{ dataIndex: 'serial' },
|
|||
|
|
{ title: '装备名称', dataIndex: 'name', width: 'auto', minWidth: 150 },
|
|||
|
|
{ title: '装备数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
pageConfig: false,
|
|||
|
|
showTool: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
modelInfoType: 'jcsx',
|
|||
|
|
jcsx: {
|
|||
|
|
data: {
|
|||
|
|
team: {},
|
|||
|
|
person: {},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
zzxd: {
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
id: '1',
|
|||
|
|
typeName: '机动',
|
|||
|
|
typeType: '1',
|
|||
|
|
beginDateTime: '2000-01-01 00:00:00',
|
|||
|
|
endDateTime: '2000-01-01 00:00:00',
|
|||
|
|
lon: '120',
|
|||
|
|
lat: '20',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
showBlbzCheckedTreeData() {
|
|||
|
|
const target = []
|
|||
|
|
this.getTree(target, this.blbz.treeData, this.blbz.checkedKeys)
|
|||
|
|
return target
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.roomId = this.$route.params.roomId
|
|||
|
|
this.roomName = this.$route.params.roomName
|
|||
|
|
this.scenarioId = this.$route.params.scenarioId
|
|||
|
|
this.scenarioName = this.$route.params.scenarioName
|
|||
|
|
this.initWebsocket()
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.cesium = new window.MyCesium('scene-cesium-container')
|
|||
|
|
this.getZzbzllTreeData(true)
|
|||
|
|
this.getModelListData()
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
this.closeWebsocket()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initWebsocket() {
|
|||
|
|
this.ws = new window.MyWebsocket(`/ws/${this.scenarioId}/${this.roomId}`, (error, response) => {
|
|||
|
|
if (error) return this.$message.error(error.message)
|
|||
|
|
switch (response.cmdType) {
|
|||
|
|
case 'update_time':
|
|||
|
|
this.roomInfo.remainTimeStr = response.data.update_time_str
|
|||
|
|
this.roomInfo.remainTime = response.data.remain_time
|
|||
|
|
this.roomInfo.duringTime = response.data.during_time
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
closeWebsocket() {
|
|||
|
|
this.ws && this.ws.close()
|
|||
|
|
},
|
|||
|
|
getTree(target, treeData, checkedKeys) {
|
|||
|
|
treeData.forEach((item) => {
|
|||
|
|
const newChildren = []
|
|||
|
|
if (item.children && item.children.length > 0) {
|
|||
|
|
this.getTree(newChildren, item.children, checkedKeys)
|
|||
|
|
}
|
|||
|
|
if (newChildren.length > 0 || checkedKeys.includes(item.key)) {
|
|||
|
|
target.push({ ...item, children: newChildren })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
async getZzbzllTreeData(initPlot = false) {
|
|||
|
|
try {
|
|||
|
|
const res = await postAction(`/scenario/resource/`, {
|
|||
|
|
scenarioId: this.scenarioId,
|
|||
|
|
})
|
|||
|
|
this.zzbzll.treeData = [
|
|||
|
|
{
|
|||
|
|
id: '0',
|
|||
|
|
title: '红方',
|
|||
|
|
selectable: false,
|
|||
|
|
children: res.data.filter((item) => item.type === 0),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '1',
|
|||
|
|
title: '蓝方',
|
|||
|
|
selectable: false,
|
|||
|
|
children: res.data.filter((item) => item.type === 1),
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
if (initPlot) {
|
|||
|
|
this.initPlot(res.data)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
initPlot(plots) {
|
|||
|
|
plots.forEach((item) => {
|
|||
|
|
if (item.lng && item.lat) {
|
|||
|
|
this.cesium.addPlotByLonLat(item.imgBase64, { lon: +item.lng, lat: +item.lat }, item.id)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleOpenEditZzbzllModal(id, data) {
|
|||
|
|
this.zzbzllModal.formData = { id, originName: data.resourceName || data.title }
|
|||
|
|
this.zzbzllModal.visible = true
|
|||
|
|
this.zzbzllModal.originData = data
|
|||
|
|
},
|
|||
|
|
handleSubmitZzbzll(formData) {
|
|||
|
|
return postAction('/scenario/resource/save', formData)
|
|||
|
|
},
|
|||
|
|
handleSubmitZzbzllSuccess() {
|
|||
|
|
this.$set(this.zzbzllModal.originData, 'resourceName', this.zzbzllModal.formData.resourceName)
|
|||
|
|
},
|
|||
|
|
async handleDeleteZzbzll(id, data) {
|
|||
|
|
try {
|
|||
|
|
await this.$confirm({ content: `确定删除${data.resourceName || data.title}？` })
|
|||
|
|
const res = await getAction(`/scenario/resource/remove/${id}`)
|
|||
|
|
this.$message.success(res.message)
|
|||
|
|
this.cesium.removePlotById(id)
|
|||
|
|
this.getZzbzllTreeData()
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getModelListData() {
|
|||
|
|
try {
|
|||
|
|
const res = await getAction(`/baseData/scenario/resources/${this.model.type}`)
|
|||
|
|
this.model.listData = res.data
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleSelectZzbzll(selectedKeys, { node }) {
|
|||
|
|
this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
|
|||
|
|
this.blbz.modelData = node.dataRef
|
|||
|
|
this.resourceid = node.dataRef.id
|
|||
|
|
this.type = node.dataRef.type
|
|||
|
|
this.getBlbzTreeData()
|
|||
|
|
this.getJcsxData()
|
|||
|
|
},
|
|||
|
|
async getBlbzTreeData() {
|
|||
|
|
try {
|
|||
|
|
const res = await getAction('/tree/organization')
|
|||
|
|
this.blbz.treeData = res.data
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error)
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const { type, id: resourceId, scenarioId } = this.blbz.modelData
|
|||
|
|
const res = await postAction('/scenarioOrgPost/getPost', { type, resourceId, scenarioId })
|
|||
|
|
this.blbz.checkedKeys = res.data
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async handleOpenBlbzModal() {
|
|||
|
|
if (!this.blbz.modelData) {
|
|||
|
|
this.$message.error('未选择分队!')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.blbzModal.treeData = this.blbz.treeData
|
|||
|
|
this.blbzModal.checkedKeys = [...this.blbz.checkedKeys]
|
|||
|
|
this.blbzModal.visible = true
|
|||
|
|
},
|
|||
|
|
async handleSubmitBlbz() {
|
|||
|
|
try {
|
|||
|
|
const { type, id: resourceId, scenarioId } = this.blbz.modelData
|
|||
|
|
const res = await postAction('/scenarioOrgPost/batchSave', {
|
|||
|
|
type,
|
|||
|
|
resourceId,
|
|||
|
|
scenarioId,
|
|||
|
|
orgIdList: this.blbzModal.checkedKeys,
|
|||
|
|
})
|
|||
|
|
this.blbzModal.visible = false
|
|||
|
|
this.$message.success(res.message)
|
|||
|
|
this.getBlbzTreeData()
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getJcsxData() {
|
|||
|
|
try {
|
|||
|
|
const { type, id: resourceId, scenarioId } = this.blbz.modelData
|
|||
|
|
const res = await getAction('/statistic/info', { type, resourceId, scenarioId })
|
|||
|
|
this.jcsx.data = res.data
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.page-scene {
|
|||
|
|
height: 100%;
|
|||
|
|
color: #ffffff;
|
|||
|
|
.page-scene-header {
|
|||
|
|
height: 50px;
|
|||
|
|
background-color: #0a2a3d;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
.page-scene-title {
|
|||
|
|
color: #00d5fe;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
letter-spacing: 2px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.page-scene-main {
|
|||
|
|
background-color: #022234;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.scene-cesium-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
::v-deep {
|
|||
|
|
.compass {
|
|||
|
|
right: 320px;
|
|||
|
|
}
|
|||
|
|
.navigation-controls {
|
|||
|
|
right: 350px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.simulation-tree::v-deep {
|
|||
|
|
color: #a1c2d0;
|
|||
|
|
li .ant-tree-node-content-wrapper {
|
|||
|
|
color: #a1c2d0;
|
|||
|
|
}
|
|||
|
|
li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
|||
|
|
background-color: #bae7ff44;
|
|||
|
|
}
|
|||
|
|
li .ant-tree-node-content-wrapper:hover {
|
|||
|
|
background-color: #bae7ff22;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.model-item {
|
|||
|
|
width: calc(100% / 3);
|
|||
|
|
.model-image {
|
|||
|
|
width: 74px;
|
|||
|
|
height: 62px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
margin: 16px 0 8px;
|
|||
|
|
}
|
|||
|
|
.model-name {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
max-width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.model-item:hover {
|
|||
|
|
.model-name {
|
|||
|
|
overflow: visible;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|