wangchengming/YouKeChuanMei_VUE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工作台添加跳转链接

Browse Source
This commit is contained in:
wangchengming 2025-09-01 23:00:15 +08:00
parent 0df2319062
commit 3f52daa131
3 changed files with 115 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/views/index.vue
View File

@ -3,37 +3,37 @@
<!-- 左侧内容 - 自动宽度 --> <!-- 左侧内容 - 自动宽度 -->
<div class="left-content"> <div class="left-content">
<div class="dashboard-4grid"> <div class="dashboard-4grid">
<div class="grid-item4"> <div class="grid-item4" @click="handleGoMediaMap">
<img :src="mediaMap" class="custom-icon" /> <img :src="mediaMap" class="custom-icon" />
<div class="grid-title grid-item4-margin">媒体地图</div> <div class="grid-title grid-item4-margin">媒体地图</div>
<div class="grid-line"></div> <div class="grid-line"></div>
</div> </div>
<div class="grid-item4"> <div class="grid-item4" @click="handleGoSupplierManage">
<img :src="supplierManage" class="custom-icon" /> <img :src="supplierManage" class="custom-icon" />
<div class="grid-title grid-item4-margin">供应商管理</div> <div class="grid-title grid-item4-margin">供应商管理</div>
<div class="grid-line"></div> <div class="grid-line"></div>
</div> </div>
<div class="grid-item4"> <div class="grid-item4" @click="handleGoMediaLibary">
<img :src="mediaLibary" class="custom-icon" /> <img :src="mediaLibary" class="custom-icon" />
<div class="grid-title grid-item4-margin">媒体库管理</div> <div class="grid-title grid-item4-margin">媒体库管理</div>
<div class="grid-line"></div> <div class="grid-line"></div>
</div> </div>
<div class="grid-item4"> <div class="grid-item4" @click="handleGoOutdoorMediaMap">
<img :src="outdoorMediaMap" class="custom-icon" /> <img :src="outdoorMediaMap" class="custom-icon" />
<div class="grid-title grid-item4-margin">户外媒介数据</div> <div class="grid-title grid-item4-margin">户外媒介数据</div>
<div class="grid-line"></div> <div class="grid-line"></div>
</div> </div>
</div> </div>
<div class="dashboard-3grid"> <div class="dashboard-3grid">
<div class="grid-item3 calibrationPlatform"> <div class="grid-item3 calibrationPlatform" @click="handleGoCalibrationPlatform">
<div class="grid-title">校准平台</div> <div class="grid-title">校准平台</div>
<div class="grid-sub-title"><span>去使用</span>></div> <div class="grid-sub-title"><span>去使用</span>></div>
</div> </div>
<div class="grid-item3 PPTAnalysisTool"> <div class="grid-item3 PPTAnalysisTool" @click="handleGoPPTAnalysisTool">
<div class="grid-title">PPT分析工具</div> <div class="grid-title">PPT分析工具</div>
<div class="grid-sub-title"><span>去使用</span>></div> <div class="grid-sub-title"><span>去使用</span>></div>
</div> </div>
<div class="grid-item3 longitudeConversion"> <div class="grid-item3 longitudeConversion" @click="handleGoLongitudeConversion">
<div class="grid-title">经纬度转换</div> <div class="grid-title">经纬度转换</div>
<div class="grid-sub-title"><span>去使用</span>></div> <div class="grid-sub-title"><span>去使用</span>></div>
</div> </div>
@ -48,7 +48,7 @@
</div> </div>
</div> </div>
<ul class="resource-list" v-if="notices.length > 0"> <ul class="resource-list" v-if="notices.length > 0">
<li v-for="(notice, index) in notices" :key="index" class="resource-link"> <li v-for="(notice, index) in notices" :key="index" class="resource-link" @click="handleGoSupplierManage">
{{ notice.content }} {{ notice.content }}
</li> </li>
</ul> </ul>
@ -68,41 +68,78 @@ import mediaLibary from '@/assets/images/mediaLibary.png'
import outdoorMediaMap from '@/assets/images/outdoorMediaMap.png' import outdoorMediaMap from '@/assets/images/outdoorMediaMap.png'
import notic_icon from '@/assets/images/notic-icon.png' import notic_icon from '@/assets/images/notic-icon.png'
import no_notice from '@/assets/images/no_notice.png' import no_notice from '@/assets/images/no_notice.png'
import { useRouter } from 'vue-router'
import { useBackgroundStore } from '@/store/modules/background' import { useBackgroundStore } from '@/store/modules/background'
import bigBackgroud from '@/assets/images/bigBackgroud.png' import bigBackgroud from '@/assets/images/bigBackgroud.png'
const bgStore = useBackgroundStore() const bgStore = useBackgroundStore()
const router = useRouter()
// 初始化 // 初始化
onMounted(() => { onMounted(() => {
bgStore.setBgImage(bigBackgroud) bgStore.setBgImage(bigBackgroud)
}); });
const notices = ref([ const notices = ref([
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
// { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' }, { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
]); ]);
// 打开媒体地图
const handleGoMediaMap = () => {
// router.push('/pitchPrice')
}
// 打开供应商管理
const handleGoSupplierManage = () => {
router.push('/supplier')
}
// 打开媒体库管理
const handleGoMediaLibary = () => {
router.push('/mediaLibrary')
}
// 打开户外媒介数据
const handleGoOutdoorMediaMap = () => {
router.push('/outdoorMedia')
}
// 打开校准平台
const handleGoCalibrationPlatform = () => {
// router.push('/pitchPrice')
}
// 打开PPT分析工具
const handleGoPPTAnalysisTool = () => {
// router.push('/pitchPrice')
}
// 打开经纬度转换工具
const handleGoLongitudeConversion = () => {
// router.push('/pitchPrice')
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.flex-container { .flex-container {
@ -157,6 +194,7 @@ const notices = ref([
background: #ffffffdb; background: #ffffffdb;
text-align: center; text-align: center;
padding: 38px 40px; padding: 38px 40px;
cursor: pointer;
} }
.grid-item4-margin { .grid-item4-margin {
@ -169,6 +207,7 @@ const notices = ref([
border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;
background: #ffffffdb; background: #ffffffdb;
padding: 40px 9px 7px 40px; padding: 40px 9px 7px 40px;
cursor: pointer;
} }
.grid-title { .grid-title {
@ -278,5 +317,6 @@ const notices = ref([
.resource-link { .resource-link {
line-height: 28px; line-height: 28px;
cursor: pointer;
} }
</style> </style>

6
src/views/mediaLibrary/index.vue
View File

@ -12,14 +12,14 @@
:value="item.id" /> :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="媒体大类"> <el-form-item label="媒体大类:">
<el-select v-model="queryParams.mediaTypeTwo" placeholder="请选择" <el-select v-model="queryParams.mediaTypeTwo" placeholder="请选择"
@change="getMediaTypeThree" clearable style="min-width: 30px"> @change="getMediaTypeThree" clearable style="min-width: 30px">
<el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name" <el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name"
:value="item.id" /> :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="展示形式"> <el-form-item label="展示形式:">
<el-select v-model="queryParams.mediaTypeThree" placeholder="请选择" clearable <el-select v-model="queryParams.mediaTypeThree" placeholder="请选择" clearable
style="min-width: 30px"> style="min-width: 30px">
<el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name" <el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name"
@ -84,7 +84,7 @@
<el-option v-for="item in town" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in town" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商圈"> <el-form-item label="商圈:">
<el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
style="min-width: 30px;"> style="min-width: 30px;">
<el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label" <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"

85
src/views/outdoorMedia/index.vue
View File

@ -11,14 +11,14 @@
:value="item.id" /> :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="媒体大类"> <el-form-item label="媒体大类:">
<el-select v-model="queryParams.mediaTypeTwo" placeholder="请选择" @change="getMediaTypeThree" <el-select v-model="queryParams.mediaTypeTwo" placeholder="请选择" @change="getMediaTypeThree"
clearable style="min-width: 30px"> clearable style="min-width: 30px">
<el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name" <el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name"
:value="item.id" /> :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="展示形式"> <el-form-item label="展示形式:">
<el-select v-model="queryParams.mediaTypeThree" placeholder="请选择" clearable <el-select v-model="queryParams.mediaTypeThree" placeholder="请选择" clearable
style="min-width: 30px"> style="min-width: 30px">
<el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name" <el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name"
@ -62,7 +62,7 @@
<el-option v-for="item in town" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in town" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商圈"> <el-form-item label="商圈:">
<el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
style="min-width: 30px;"> style="min-width: 30px;">
<el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label" <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
@ -134,7 +134,7 @@
v-hasPermi="['problemFeedback:edit']">查看 v-hasPermi="['problemFeedback:edit']">查看
</div> </div>
<div class="popBtns" @click="handleDownFiles(scope.row)" <div class="popBtns" @click="handleDownFiles(scope.row)"
v-hasPermi="['problemFeedback:edit']">下载</div> v-hasPermi="['problemFeedback:edit']">下载PPT</div>
<template #reference> <template #reference>
<img style="cursor: pointer;" :src="scope.row.currentImageSrc" <img style="cursor: pointer;" :src="scope.row.currentImageSrc"
@mouseenter="scope.row.currentImageSrc = hoverImageSrc" @mouseenter="scope.row.currentImageSrc = hoverImageSrc"
@ -366,14 +366,7 @@ const loadMap = () => {
const addCustomControls = (AMap) => { const addCustomControls = (AMap) => {
// 创建控件容器 // 创建控件容器
const controlContainer = document.createElement('div'); const controlContainer = document.createElement('div');
controlContainer.className = 'custom-map-controls'; controlContainer.className = 'custom-map-controls';
controlContainer.style.position = 'absolute';
controlContainer.style.top = '20px';
controlContainer.style.right = '20px';
controlContainer.style.zIndex = '1000';
controlContainer.style.display = 'flex';
controlContainer.style.gap = '10px';
controlContainer.style.flexDirection = 'column';
// 2D/3D切换按钮 // 2D/3D切换按钮
const toggle2D3DBtn = document.createElement('div'); const toggle2D3DBtn = document.createElement('div');
@ -511,26 +504,28 @@ const renderMassMarks = () => {
// 创建三种不同大小的样式 // 创建三种不同大小的样式
const styles = [ const styles = [
// 优势媒体颜色-红色
{ {
url: createPointStyle('#EC1B60', 18, 'circle').toDataURL(), url: createPointStyle('#EC1B60', 18, 'circle').toDataURL(),
anchor: new AMap.Pixel(18, 18), anchor: new AMap.Pixel(18, 18),
size: new AMap.Size(18, 18) size: new AMap.Size(18, 18)
}, },
// 网络媒体颜色-蓝色
{ {
url: createPointStyle('#058DED', 18, 'circle').toDataURL(), url: createPointStyle('#058DED', 18, 'circle').toDataURL(),
anchor: new AMap.Pixel(18, 18), anchor: new AMap.Pixel(18, 18),
size: new AMap.Size(18, 18) size: new AMap.Size(18, 18)
}, },
{ // {
url: createPointStyle('#FFA200', 18, 'circle').toDataURL(), // url: createPointStyle('#FFA200', 18, 'circle').toDataURL(),
anchor: new AMap.Pixel(18, 18), // anchor: new AMap.Pixel(18, 18),
size: new AMap.Size(18, 18) // size: new AMap.Size(18, 18)
}, // },
{ // {
url: createPointStyle('#00C272', 18, 'circle').toDataURL(), // url: createPointStyle('#00C272', 18, 'circle').toDataURL(),
anchor: new AMap.Pixel(18, 18), // anchor: new AMap.Pixel(18, 18),
size: new AMap.Size(18, 18) // size: new AMap.Size(18, 18)
} // }
]; ];
// 测试数据 // 测试数据
@ -540,26 +535,26 @@ const renderMassMarks = () => {
{ "lnglat": [116.366794, 39.915309], "name": "西城区", "style": 1 }, { "lnglat": [116.366794, 39.915309], "name": "西城区", "style": 1 },
{ "lnglat": [116.486409, 39.921489], "name": "朝阳区", "style": 1 }, { "lnglat": [116.486409, 39.921489], "name": "朝阳区", "style": 1 },
{ "lnglat": [116.286968, 39.863642], "name": "丰台区", "style": 1 }, { "lnglat": [116.286968, 39.863642], "name": "丰台区", "style": 1 },
{ "lnglat": [116.195445, 39.914601], "name": "石景山区", "style": 2 }, { "lnglat": [116.195445, 39.914601], "name": "石景山区", "style": 1 },
{ "lnglat": [116.310316, 39.956074], "name": "海淀区", "style": 2 }, { "lnglat": [116.310316, 39.956074], "name": "海淀区", "style": 1 },
{ "lnglat": [116.105381, 39.937183], "name": "门头沟区", "style": 2 }, { "lnglat": [116.105381, 39.937183], "name": "门头沟区", "style": 0 },
{ "lnglat": [116.139157, 39.735535], "name": "房山区", "style": 2 }, { "lnglat": [116.139157, 39.735535], "name": "房山区", "style": 0 },
{ "lnglat": [116.658603, 39.902486], "name": "通州区", "style": 2 }, { "lnglat": [116.658603, 39.902486], "name": "通州区", "style": 0 },
{ "lnglat": [116.653525, 40.128936], "name": "顺义区", "style": 2 }, { "lnglat": [116.653525, 40.128936], "name": "顺义区", "style": 0 },
{ "lnglat": [116.235906, 40.218085], "name": "昌平区", "style": 2 }, { "lnglat": [116.235906, 40.218085], "name": "昌平区", "style": 0 },
{ "lnglat": [116.338033, 39.728908], "name": "大兴区", "style": 2 }, { "lnglat": [116.338033, 39.728908], "name": "大兴区", "style": 0 },
{ "lnglat": [116.637122, 40.324272], "name": "怀柔区", "style": 2 }, { "lnglat": [116.637122, 40.324272], "name": "怀柔区", "style": 0 },
{ "lnglat": [117.112335, 40.144783], "name": "平谷区", "style": 3 }, { "lnglat": [117.112335, 40.144783], "name": "平谷区", "style": 0 },
{ "lnglat": [116.843352, 40.377362], "name": "密云区", "style": 3 }, { "lnglat": [116.843352, 40.377362], "name": "密云区", "style": 0 },
{ "lnglat": [115.985006, 40.465325], "name": "延庆区", "style": 3 }, { "lnglat": [115.985006, 40.465325], "name": "延庆区", "style": 1 },
{ "lnglat": [113.56925, 22.136546], "name": "路凼填海区", "style": 3 }, { "lnglat": [113.56925, 22.136546], "name": "路凼填海区", "style": 1 },
{ "lnglat": [117.195907, 39.118327], "name": "和平区", "style": 2 }, { "lnglat": [117.195907, 39.118327], "name": "和平区", "style": 1 },
{ "lnglat": [117.226568, 39.122125], "name": "河东区", "style": 2 }, { "lnglat": [117.226568, 39.122125], "name": "河东区", "style": 1 },
{ "lnglat": [117.217536, 39.101897], "name": "河西区", "style": 2 }, { "lnglat": [117.217536, 39.101897], "name": "河西区", "style": 1 },
{ "lnglat": [117.164143, 39.120474], "name": "南开区", "style": 2 }, { "lnglat": [117.164143, 39.120474], "name": "南开区", "style": 1 },
{ "lnglat": [117.201569, 39.156632], "name": "河北区", "style": 2 }, { "lnglat": [117.201569, 39.156632], "name": "河北区", "style": 0 },
{ "lnglat": [117.163301, 39.175066], "name": "红桥区", "style": 2 }, { "lnglat": [117.163301, 39.175066], "name": "红桥区", "style": 1 },
{ "lnglat": [117.313967, 39.087764], "name": "东丽区", "style": 2 }, { "lnglat": [117.313967, 39.087764], "name": "东丽区", "style": 0 },
{ "lnglat": [117.012247, 39.139446], "name": "西青区", "style": 0 }, { "lnglat": [117.012247, 39.139446], "name": "西青区", "style": 0 },
{ "lnglat": [117.382549, 38.989577], "name": "津南区", "style": 0 }, { "lnglat": [117.382549, 38.989577], "name": "津南区", "style": 0 },
{ "lnglat": [117.13482, 39.225555], "name": "北辰区", "style": 0 }, { "lnglat": [117.13482, 39.225555], "name": "北辰区", "style": 0 },
@ -620,12 +615,12 @@ onMounted(() => {
.custom-map-controls { .custom-map-controls {
position: absolute; position: absolute;
top: 10px; top: 5px;
right: 10px; right: 5px;
z-index: 1000; z-index: 1000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 0px;
} }
.map-control-btn { .map-control-btn {