CIM专区 图层 算法开发

This commit is contained in:
a0049873 2022-08-19 16:53:42 +08:00
parent 2938de6392
commit 73591c0ed2
10 changed files with 397 additions and 8 deletions

View File

@ -1,8 +1,8 @@
<!--
* @Author: hisense.wuhongjian
* @Date: 2022-03-29 16:45:25
* @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-08-12 16:43:50
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-08-19 14:01:44
* @Description: 告诉大家这是什么
-->
<!DOCTYPE html>
@ -34,7 +34,7 @@
// window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
// window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
// window.SITE_CONFIG['websocketURL'] = '15.72.183.90:8000/renren-admin';
window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
// window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
// 包头
// window.SITE_CONFIG['backUrl'] = 'http://10.110.205.1:8001';
// window.SITE_CONFIG['previewUrl'] = 'http://10.110.205.1:8002/';

View File

@ -1,3 +1,10 @@
/*
* @Author: hisense.liangjunhua
* @Date: 2022-08-19 14:25:45
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-08-19 15:25:03
* @Description: 告诉大家这是什么
*/
import request from '@/utils/request'
// cim
export function countByType() {
@ -13,3 +20,17 @@ export function getCIMApplyApplicationList() {
method: 'get',
})
}
// cim+
export function cimImgResources(params) {
return request({
url: '/resource/cimImgResources?type=' + params,
method: 'get',
})
}
// cim+
export function cimAssemblyResources() {
return request({
url: '/resource/cimAssemblyResources',
method: 'get',
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,87 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-08-19 10:00:16
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-08-19 15:55:05
* @Description: 告诉大家这是什么
-->
<template>
<div class="algorithm">
<div class="header">CIM+算法</div>
<div class="main">
<div
class="item"
v-for="val in data.list"
:key="val.id"
@click="goToView(val.id)"
>
<div class="name">{{ val.name }}</div>
<div class="img"></div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import { cimAssemblyResources } from '@/api/cimSpecialArea'
import { useRouter } from 'vue-router'
const router = useRouter()
const data = reactive({ list: [] })
cimAssemblyResources().then((res) => {
console.log('算法================>', res.data.data)
data.list = res.data.data
})
const goToView = (id) => {
const newpage = router.resolve({
path: '/details',
query: {
id: id,
},
})
window.open(newpage.href, '_blank')
}
</script>
<style lang="less" scoped>
.algorithm {
padding: 0.7rem 1.05rem 0.5rem;
.header {
padding-bottom: 0.15rem;
border-bottom: 1px solid #bdbdbd;
font-size: 30px;
font-weight: 600;
}
.main {
padding: 0 0.93rem;
display: flex;
flex-wrap: wrap;
.item {
width: 3.39rem;
height: 1rem;
border: 2px solid #7dbbff;
border-radius: 0.2rem;
margin: 0.3rem 0.2rem 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.41rem 0.4rem;
transition: all 0.5s;
.name {
font-size: 26px;
color: #7dbbff;
}
.img {
width: 0.57rem;
height: 0.57rem;
background: url('~@/assets/cimSpecialArea/zj.png') no-repeat;
background-size: 100%;
}
}
.item:hover {
cursor: pointer;
width: 3.45rem;
height: 1.1rem;
margin: 0.25rem 0.17rem -0.05rem;
}
}
}
</style>

View File

@ -0,0 +1,279 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-08-19 10:00:16
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-08-19 16:53:31
* @Description: 告诉大家这是什么
-->
<template>
<div class="layer">
<div class="header">CIM+图层</div>
<div class="main">
<div class="top">
<div class="box">
<div
class="item"
v-for="(val, index) in data.resourcesList"
:class="selectResources.name == val.name ? 'select-item' : ''"
:key="val.id"
v-show="index < 6"
@click="chageResources(val)"
>
<a-tooltip>
<template #title>{{ val.name }}</template>
{{ val.name }}
</a-tooltip>
</div>
</div>
<caret-down-outlined
v-show="data.resourcesList.length > 6 && !boxFlag"
@click="showList"
/>
<caret-up-outlined
v-show="data.resourcesList.length > 6 && boxFlag"
@click="boxFlag = false"
/>
<div class="listBox" v-show="boxFlag">
<div
class="item"
v-for="(val, index) in data.resourcesList"
:class="selectResources.name == val.name ? 'select-item' : ''"
:key="val.id"
v-show="index > 5"
@click="chageResources(val)"
>
<a-tooltip>
<template #title>{{ val.name }}</template>
{{ val.name }}
</a-tooltip>
</div>
</div>
</div>
<div class="bottom">
<div class="left">
<div
class="list-item"
:class="selectDictLabel == val.dictLabel ? 'list-item-select' : ''"
v-for="val in data.dicList"
:key="val.id"
@click="selectLeft(val.dictLabel)"
>
{{ val.dictLabel }}
</div>
</div>
<div class="right">
<a-image
:width="1250"
:height="600"
:preview="false"
:src="selectResources.link || imgSrc"
:fallback="imgSrc"
@click="goToView"
/>
<div class="name">{{ selectResources.name }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue'
import { getCategoryTreePage } from '@/api/personalCenter'
import { cimImgResources } from '@/api/cimSpecialArea'
import { useRouter } from 'vue-router'
const router = useRouter()
const data = reactive({ dicList: [], resourcesList: [] })
const selectDictLabel = ref('')
const selectResources = ref({})
const boxFlag = ref(false)
const imgSrc = ref(require('@/assets/cimSpecialArea/tcmr.jpg'))
const selectLeft = (dictLabel) => {
selectDictLabel.value = dictLabel
getData(selectDictLabel.value)
}
getCategoryTreePage({
page: 1,
limit: 99,
dictTypeId: '1560456227954102274',
}).then((res) => {
// console.log('==============>', res.data.data)
data.dicList = res.data.data.list
selectDictLabel.value = res.data.data.list[0].dictLabel
getData(selectDictLabel.value)
})
const getData = (type) => {
cimImgResources(type).then((res) => {
console.log('图层================》', res.data.data)
data.resourcesList = res.data.data
if (res.data.data.length > 0) {
selectResources.value = res.data.data[0]
} else {
selectResources.value = {}
}
})
}
const chageResources = (val) => {
selectResources.value = val
boxFlag.value = false
}
const showList = () => {
boxFlag.value = true
}
const goToView = () => {
if (selectResources.value.id) {
const newpage = router.resolve({
path: '/details',
query: {
id: selectResources.value.id,
},
})
window.open(newpage.href, '_blank')
}
}
</script>
<style lang="less" scoped>
.layer {
padding: 0.7rem 1.05rem;
background: url('~@/assets/cimSpecialArea/tcbg.png') no-repeat;
font-size: 100%;
.header {
padding-bottom: 0.15rem;
border-bottom: 1px solid #bdbdbd;
font-size: 30px;
font-weight: 600;
}
.main {
margin-top: 0.4rem;
.top {
display: flex;
flex-wrap: wrap;
text-align: center;
padding-left: 3rem;
padding-right: 1.56rem;
position: relative;
.box {
display: flex;
flex-wrap: wrap;
text-align: center;
.item {
font-size: 18px;
width: 2.08rem;
height: 30px;
padding: 0 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
word-break: break-all;
color: #707070;
// margin-left: 0.2rem;
}
.item:hover {
cursor: pointer;
border-radius: 10px;
background: #ddd;
}
.select-item {
font-weight: 600;
}
}
:deep(.anticon) {
cursor: pointer;
position: absolute;
top: 0.06rem;
right: 1.35rem;
}
.listBox {
width: 12.5rem;
position: absolute;
top: 0.35rem;
left: 3.2rem;
z-index: 200;
background: #fff;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
text-align: center;
.item {
font-size: 18px;
width: 2.08rem;
height: 30px;
padding: 0 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
word-break: break-all;
color: #707070;
// margin-left: 0.2rem;
}
.item:hover {
cursor: pointer;
border-radius: 10px;
background: #ddd;
}
.select-item {
font-weight: 600;
}
}
}
.bottom {
margin-top: 0.2rem;
padding: 0 1.1rem;
display: flex;
.left {
width: 1.5rem;
text-align: center;
border-right: 1px solid #ccc;
.list-item {
height: 0.3rem;
line-height: 0.3rem;
font-size: 20px;
margin-bottom: 0.35rem;
color: #707070;
border-right: 1px solid #fff;
}
.list-item:hover {
cursor: pointer;
color: #6771fa;
}
.list-item-select,
.list-item-select:hover {
border-right: 1px solid #2433ff;
color: #2433ff;
font-weight: 600;
}
}
.right {
flex: 1;
height: 6rem;
margin-left: 40px;
position: relative;
// background: #ccc;
.name {
width: 100%;
height: 0.75rem;
line-height: 0.75rem;
padding-left: 0.2rem;
background: rgba(255, 255, 255, 0.58);
font-size: 30px;
font-weight: 600;
color: #707070;
position: absolute;
top: 0;
left: 0;
}
:deep(.ant-image-img) {
cursor: pointer;
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}
}
</style>

View File

@ -14,7 +14,7 @@
>
<swiper-slide v-for="item in platformList" :key="item.id">
<div class="platformBox">
<h2>{{ item.name }}</h2>
<h2>{{ item.NAME }}</h2>
<a-image
:preview="false"
:src="item.pic"

View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua
* @Date: 2022-08-09 11:32:47
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-08-19 10:02:30
* @LastEditTime: 2022-08-19 10:09:58
* @Description: 告诉大家这是什么
-->
<template>
@ -12,6 +12,7 @@
<platform></platform>
<layer></layer>
<algorithm></algorithm>
<home-footer></home-footer>
</div>
</template>
<script setup>
@ -20,6 +21,7 @@
import platform from './components/platform'
import layer from './components/layer'
import algorithm from './components/algorithm'
import HomeFooter from '@/views/newHome/components/Footer'
</script>
<style lang="less" scoped>
.cimSpecialArea {

View File

@ -3,7 +3,7 @@
class="home-header"
:class="[
select !== 'home' || scrollTop > 500 ? 'white' : '',
props.showView === 'algorithm-details' ? 'blue' : '',
props.showView === 'algorithm-details' ? '' : '',
]"
>
<div class="name" @click="goToHome">
@ -38,7 +38,7 @@
>
<path
d="M384 832v85.333333h-85.333333v-85.333333h85.333333z m405.333333 0v85.333333h-85.333333v-85.333333h85.333333zM240.32 185.002667l24.149333 140.928h633.173334L835.285333 746.666667h-563.626666l-85.333334-497.685334H94.485333v-64h145.834667z m583.104 204.928H275.434667L325.632 682.666667h454.464l43.328-292.736z"
:fill="props.showView === 'algorithm-details' ? '#fff' : '#1296db'"
:fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'"
p-id="2070"
></path>
</svg>
@ -58,7 +58,7 @@
>
<path
d="M544 161.536a330.666667 330.666667 0 0 1 298.666667 329.130667h-0.341334c0.213333 1.493333 0.341333 2.986667 0.341334 4.565333v219.434667h39.68a32 32 0 0 1 0 64h-212.053334a160 160 0 0 1-316.586666 0H141.909333a32 32 0 1 1 0-64h39.424v-219.434667c0-1.578667 0.128-3.072 0.341334-4.565333H181.333333a330.666667 330.666667 0 0 1 298.666667-329.130667V128a32 32 0 1 1 64 0v33.536z m-298.666667 553.130667h533.333334v-219.434667c0-1.578667 0.128-3.072 0.341333-4.565333h-0.341333a266.666667 266.666667 0 1 0-533.333334 0h-0.341333c0.213333 1.493333 0.341333 2.986667 0.341333 4.565333v219.434667z m359.765334 64H418.901333a96 96 0 0 0 186.197334 0z"
:fill="props.showView === 'algorithm-details' ? '#fff' : '#1296db'"
:fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'"
p-id="2188"
></path>
</svg>