修改媒体地图、供应商表单、PPT工具分析添加上传图片。添加查看全部通知界面
This commit is contained in:
wangchengming
parent
ab440226c7
commit
37a07491b6
|
|
@ -1049,7 +1049,7 @@ h6 {
|
|||
// 弹窗样式覆盖
|
||||
.media_dialog {
|
||||
padding: 0 !important;
|
||||
top: 148px;
|
||||
top: 164px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
|
|
@ -1118,7 +1118,7 @@ h6 {
|
|||
.media_dialog .el-dialog__body {
|
||||
padding: 0px;
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 220px);
|
||||
height: calc(100vh - 234px);
|
||||
}
|
||||
|
||||
.my_dialog .el-dialog__body {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</el-tooltip>
|
||||
</div>
|
||||
<img :src="userStore.avatar ? userStore.avatar : avatar_icon" class="user-avatar" />
|
||||
<span class="user-nickname"> {{ userStore.nickName }} admin </span>
|
||||
<span class="user-nickname"> {{ userStore.name }} </span>
|
||||
<div class="logout_icon">
|
||||
<el-tooltip class="box-item" effect="dark" content="退出" placement="bottom-start">
|
||||
<img :src="logout_icon" class="custom-icon" @click="logout" />
|
||||
|
|
@ -70,7 +70,7 @@ import useSettingsStore from '@/store/modules/settings'
|
|||
import { addSysReaddBusProblemFeedbackgion } from "@/api/problemFeedback"
|
||||
|
||||
const appStore = useAppStore()
|
||||
const userStore = useUserStore()
|
||||
const userStore = useUserStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ const useUserStore = defineStore(
|
|||
id: '',
|
||||
name: '',
|
||||
nickName: '',
|
||||
userName: '',
|
||||
avatar: '',
|
||||
phoneNumber: '',
|
||||
roles: [],
|
||||
permissions: []
|
||||
}),
|
||||
|
|
@ -38,7 +40,7 @@ const useUserStore = defineStore(
|
|||
getInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo().then(res => {
|
||||
const user = res.user
|
||||
const user = res.user
|
||||
let avatar = user.avatar || ""
|
||||
if (!isHttp(avatar)) {
|
||||
avatar = (isEmpty(avatar)) ? defAva : import.meta.env.VITE_APP_BASE_API + avatar
|
||||
|
|
@ -50,9 +52,11 @@ const useUserStore = defineStore(
|
|||
this.roles = ['ROLE_DEFAULT']
|
||||
}
|
||||
this.id = user.userId
|
||||
this.name = user.userName
|
||||
this.nickName = user.nickName
|
||||
this.name = user.realName
|
||||
// this.nickName = user.nickName
|
||||
this.userName = user.userName
|
||||
this.avatar = avatar
|
||||
this.phoneNumber = user.phonenumber
|
||||
/* 初始密码提示 */
|
||||
if(res.isDefaultModifyPwd) {
|
||||
ElMessageBox.confirm('您的密码还是初始密码，请修改密码！', '安全提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
|
||||
|
|
|
|||
|
|
@ -45,7 +45,9 @@
|
|||
<div class="right-content">
|
||||
<div class="title-container">
|
||||
<div class="title-label">
|
||||
<img :src="notic_icon" class="custom-icon" /><span>系统通知</span>
|
||||
<img :src="notic_icon" class="custom-icon" />
|
||||
<span>系统通知</span>
|
||||
<span class="moreText" @click="handleGoNoticeList">更多...</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="resource-list" v-if="notices.length > 0">
|
||||
|
|
@ -67,6 +69,7 @@
|
|||
|
||||
<script setup name="Index">
|
||||
import { nextTick, onMounted, ref } from 'vue';
|
||||
// import { More } from '@element-plus/icons-vue'
|
||||
import { noticeList } from "@/api/notice"
|
||||
import mediaMap from '@/assets/images/mediaMap.png'
|
||||
import supplierManage from '@/assets/images/supplierManage.png'
|
||||
|
|
@ -167,10 +170,14 @@ const handleGeoConvertBack = () => {
|
|||
|
||||
// 获取通知
|
||||
const getNoticeList = () => {
|
||||
noticeList({ noticeType: 1, status: 0 }).then(res => {
|
||||
noticeList({ noticeType: 1, status: 0 }).then(res => {
|
||||
notices.value = res.rows
|
||||
})
|
||||
}
|
||||
// 打开通知列表
|
||||
const handleGoNoticeList = () => {
|
||||
router.push('/noticeList')
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.flex-container {
|
||||
|
|
@ -350,4 +357,13 @@ const getNoticeList = () => {
|
|||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.moreText {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
padding-left: 158px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,47 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="searchPanel">
|
||||
<div class="more-search-pane">
|
||||
<div class="search-where-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchPanelForm">
|
||||
<el-form-item label="媒体类型:">
|
||||
<el-select v-model="queryParams.mediaType" placeholder="请选择" @change="getMediaTypeTwo"
|
||||
clearable style="min-width: 30px">
|
||||
<el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="媒体大类:">
|
||||
<el-select v-model="queryParams.mediaCategory" placeholder="请选择" @change="getMediaTypeThree"
|
||||
clearable style="min-width: 30px">
|
||||
<el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="展示形式:">
|
||||
<el-select v-model="queryParams.displayForm" placeholder="请选择" clearable
|
||||
style="min-width: 30px">
|
||||
<el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="choseResultPanel">
|
||||
<el-form :inline="true" class="searchSmallPanelForm">
|
||||
<el-form-item label="已选媒体:">
|
||||
<div v-if="multipleChoseArr.length == 0" class="noChoseLabel">未选择媒体</div>
|
||||
<template v-else>
|
||||
<el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="choseResultTag"
|
||||
@close="handleCloseTag(tag)" closable>
|
||||
{{ tag.mediaName }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-card class="mediaCard">
|
||||
<el-row :gutter="10" class="my_row" style="padding: 0 20px;">
|
||||
<el-col :span="12">
|
||||
|
|
@ -7,13 +49,9 @@
|
|||
<el-form-item label="" prop="templateName">
|
||||
<el-select class="filterSelect" v-model="centerPointName" filterable remote reserve-keyword
|
||||
:remote-method="getLocaleListList" :loading="selectLoading" @change="currentSelect"
|
||||
placeholder="请输入内容以设置中心点" remote-show-suffix clearable style="width: 400px">
|
||||
<el-option v-for="item in localeList" :key="item.id" :label="item.name" :value="item"
|
||||
class="one-text">
|
||||
<div style="height: 24px; line-height: 24px;font-size: 16px;">{{ item.name }}</div>
|
||||
<div style="color: #8492a6; font-size: 12px;height: 18px; line-height: 18px;">{{
|
||||
item.address
|
||||
}}</div>
|
||||
placeholder="请输入媒体名称/媒体编号/关键字" remote-show-suffix clearable style="width: 400px">
|
||||
<el-option v-for="item in localeList" :key="item.mediaId" :label="item.mediaName"
|
||||
:value="item.mediaId" class="one-text">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -33,10 +71,29 @@
|
|||
</template>
|
||||
</el-dropdown>
|
||||
<div class="clearBtn" @click="resetQuery">清除条件</div>
|
||||
<el-dropdown placement="bottom-start" style="margin: 0 12px;">
|
||||
<el-button type="primary" class="mediaMapExportBtn">
|
||||
导出PPT
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item class="dropItem" v-for="temp in templateList"
|
||||
@click="handleExportPPT(temp.id)">
|
||||
<span v-if="temp.type == 3">优客模板导出</span>
|
||||
<span v-if="temp.type == 2">滴滴模板导出</span>
|
||||
<span v-if="temp.type == 1">空白模板导出</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div id="mapContainer" class="mediaMapContainer"></div>
|
||||
<div id="mapContainer" class="mediaMapContainer">
|
||||
</div>
|
||||
<div v-if="contextMenuVisible" class="custom-context-menu" :style="menuPosition" @click="handleChoseMedia">
|
||||
选择媒体
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="open" width="400px" :modal="false" class="media_dialog" :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
|
|
@ -148,6 +205,7 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<export-p-p-t-dialog ref="exportPPTDialogRef" />
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
|
|
@ -166,21 +224,34 @@ import {
|
|||
ZoomOut,
|
||||
} from '@element-plus/icons-vue'
|
||||
import AMapLoader from "@amap/amap-jsapi-loader"; // 引入地图服务
|
||||
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
|
||||
import { mediaByMap, mediaDetail } from "@/api/mediaLibrary"
|
||||
import { pptTemplatePage } from "@/api/system/pptTemplate"
|
||||
import exportPPTDialog from '../mediaLibrary/exportPPTDialog.vue';
|
||||
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API
|
||||
const bgStore = useBackgroundStore()
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const { apiKey, secretKey } = window._CONFIG
|
||||
// ppt模板数据
|
||||
const templateList = ref([])
|
||||
const exportPPTDialogRef = ref(null)
|
||||
|
||||
// 媒体类型数据
|
||||
const mediaTypeOne = ref([])
|
||||
const mediaTypeTwo = ref([])
|
||||
const mediaTypeThree = ref([])
|
||||
// 媒体多选数据
|
||||
const multipleChoseArr = ref([])
|
||||
|
||||
const open = ref(false)
|
||||
const detailForm = ref({})
|
||||
const fileList = ref([])
|
||||
const previewImg = ref([])
|
||||
// 中心点名称
|
||||
const centerPointName = ref(null)
|
||||
// map实例
|
||||
const mapInstance = ref(null)
|
||||
const massMarks = ref(null)
|
||||
|
|
@ -191,9 +262,12 @@ const mapMode = ref('2D')
|
|||
const isFullscreen = ref(false)
|
||||
const placeSearch = ref(null)
|
||||
|
||||
// 中心点名称
|
||||
const centerPointName = ref(null)
|
||||
|
||||
// 热区圆实例
|
||||
const circle = ref(null);
|
||||
const circleRadius = ref(500); // 实际半径（米）
|
||||
const circleRadius = ref(1000); // 实际半径（米）
|
||||
const circleHandle = ref(null); // 拖拽手柄
|
||||
|
||||
// 选择地点展示框
|
||||
|
|
@ -213,6 +287,13 @@ const distanceLableArray = ref([
|
|||
])
|
||||
|
||||
const points = ref([])
|
||||
// 悬浮菜单
|
||||
const contextMenuVisible = ref(false);
|
||||
const menuPosition = ref({
|
||||
top: '0px', left: '0px', zIndex: 999
|
||||
});
|
||||
// 当前操作媒体
|
||||
const curMediaInfo = ref(null)
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
|
|
@ -220,6 +301,9 @@ const data = reactive({
|
|||
x: undefined, //中心点经度
|
||||
y: undefined, //中心点纬度
|
||||
distance: undefined,
|
||||
mediaType: undefined,
|
||||
mediaCategory: undefined,
|
||||
displayForm: undefined
|
||||
}
|
||||
})
|
||||
const { queryParams } = toRefs(data)
|
||||
|
|
@ -231,12 +315,15 @@ const resetQuery = () => {
|
|||
x: undefined, //中心点经度
|
||||
y: undefined, //中心点纬度
|
||||
distance: undefined,
|
||||
mediaType: undefined,
|
||||
mediaCategory: undefined,
|
||||
displayForm: undefined
|
||||
}
|
||||
// 距离显示文本
|
||||
distanceLable.value = '请选择'
|
||||
// 选择的距离值
|
||||
activeLableIndex.value = null
|
||||
circleRadius.value = 500; // 实际半径（米）
|
||||
circleRadius.value = 1000; // 实际半径（米）
|
||||
selectConfig.value = null
|
||||
|
||||
// 清除现有的圆形和标记
|
||||
|
|
@ -272,72 +359,79 @@ const handleViewMedia = (_mediaId) => {
|
|||
}
|
||||
|
||||
|
||||
// 调用API获取地点
|
||||
// 查询媒体信息
|
||||
const getLocaleListList = (searchValue) => {
|
||||
selectLoading.value = true
|
||||
if (searchValue !== "") {
|
||||
placeSearch.value.search(searchValue, function (status, result) {
|
||||
// 查询成功时，result即对应匹配的POI信息
|
||||
if (result.poiList.pois?.length) {
|
||||
localeList.value = result.poiList?.pois
|
||||
queryParams.value.keyword = searchValue
|
||||
mediaByMap(queryParams.value).then(res => {
|
||||
if (res.code == 200) {
|
||||
localeList.value = res.data.length > 0 ? res.data : []
|
||||
selectLoading.value = false
|
||||
}
|
||||
selectLoading.value = false
|
||||
});
|
||||
})
|
||||
|
||||
// placeSearch.value.search(searchValue, function (status, result) {
|
||||
// // 查询成功时，result即对应匹配的POI信息
|
||||
// if (result.poiList.pois?.length) {
|
||||
// localeList.value = result.poiList?.pois
|
||||
// }
|
||||
// selectLoading.value = false
|
||||
// });
|
||||
}
|
||||
}
|
||||
// 中心点选择
|
||||
const currentSelect = (val) => {
|
||||
selectConfig.value = val
|
||||
centerPointName.value = val.name
|
||||
// queryParams.value.keyword = val.name
|
||||
queryParams.value.x = val.location.lng
|
||||
queryParams.value.y = val.location.lat
|
||||
queryParams.value.distance = circleRadius.value
|
||||
const chosedMedia = localeList.value.filter(item => item.mediaId == val)[0]
|
||||
if (chosedMedia) {
|
||||
centerPointName.value = chosedMedia.mediaName
|
||||
|
||||
// 距离显示文本
|
||||
distanceLable.value = circleRadius.value == 500 ? '500米' : circleRadius.value + '米'
|
||||
// 选择的距离值
|
||||
activeLableIndex.value = circleRadius.value == 500 ? 500 : circleRadius.value
|
||||
// 距离显示文本
|
||||
distanceLable.value = circleRadius.value == 1000 ? '1000米' : circleRadius.value + '米'
|
||||
// 选择的距离值
|
||||
activeLableIndex.value = circleRadius.value == 1000 ? 1000 : circleRadius.value
|
||||
|
||||
// 清除现有的圆形和标记
|
||||
if (circle.value) {
|
||||
mapInstance.value.remove(circle.value);
|
||||
circle.value = null;
|
||||
}
|
||||
if (circleHandle.value) {
|
||||
mapInstance.value.remove(circleHandle.value);
|
||||
circleHandle.value = null;
|
||||
// 清除现有的圆形和标记
|
||||
if (circle.value) {
|
||||
mapInstance.value.remove(circle.value);
|
||||
circle.value = null;
|
||||
}
|
||||
if (circleHandle.value) {
|
||||
mapInstance.value.remove(circleHandle.value);
|
||||
circleHandle.value = null;
|
||||
}
|
||||
|
||||
// addCenterMark(chosedMedia)
|
||||
createCircle(chosedMedia)
|
||||
}
|
||||
|
||||
createCircle(val)
|
||||
addCenterMark(val)
|
||||
|
||||
}
|
||||
// 创建中心点标记
|
||||
const addCenterMark = (val) => {
|
||||
if (centerMarker.value) mapInstance.value.remove(centerMarker.value);
|
||||
centerMarker.value = new AMap.Marker({
|
||||
position: [val.location.lng, val.location.lat],
|
||||
title: val.name,
|
||||
position: [val.x, val.y],
|
||||
title: val.mediaName,
|
||||
zIndex: 100,
|
||||
draggable: false, // 是否可以拖拽
|
||||
cursor: 'move'
|
||||
});
|
||||
// 将点添加到地图
|
||||
mapInstance.value.add(centerMarker.value);
|
||||
mapInstance.value.setFitView();
|
||||
mapInstance.value.setFitView(centerMarker.value);
|
||||
}
|
||||
// 创建圆形热区
|
||||
const createCircle = (val) => {
|
||||
// 创建圆形覆盖物
|
||||
circle.value = new AMap.Circle({
|
||||
center: [val.location.lng, val.location.lat],
|
||||
center: [val.x, val.y],
|
||||
radius: circleRadius.value,
|
||||
strokeColor: '#4e54c8',
|
||||
strokeOpacity: 0.8,
|
||||
strokeWeight: 2,
|
||||
fillColor: '#4e54c8',
|
||||
fillOpacity: 0.15,
|
||||
zIndex: 100,
|
||||
bubble: true,
|
||||
cursor: 'move',
|
||||
draggable: false // 是否可以拖拽
|
||||
|
|
@ -345,12 +439,10 @@ const createCircle = (val) => {
|
|||
|
||||
// 将圆形添加到地图
|
||||
mapInstance.value.add(circle.value);
|
||||
mapInstance.value.setFitView(circle.value);
|
||||
|
||||
// 创建圆形边缘拖拽手柄
|
||||
createCircleHandle();
|
||||
|
||||
// 渲染数据点
|
||||
renderMassMarks()
|
||||
}
|
||||
// 创建圆形边缘拖拽手柄
|
||||
const createCircleHandle = () => {
|
||||
|
|
@ -367,11 +459,11 @@ const createCircleHandle = () => {
|
|||
position: [handlePosition.lng, handlePosition.lat],
|
||||
icon: new AMap.Icon({
|
||||
size: new AMap.Size(20, 20),
|
||||
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
||||
// image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
||||
image: otherbg,
|
||||
imageSize: new AMap.Size(20, 20)
|
||||
}),
|
||||
offset: new AMap.Pixel(-10, -10),
|
||||
zIndex: 101,
|
||||
draggable: true,
|
||||
cursor: 'pointer'
|
||||
});
|
||||
|
|
@ -385,7 +477,7 @@ const createCircleHandle = () => {
|
|||
const newRadius = Math.round(calculateDistance(center, handlePos));
|
||||
circleRadius.value = newRadius;
|
||||
distanceLable.value = `${Math.round(circleRadius.value)}米`;
|
||||
queryParams.value.distance = circleRadius.value // 更改查询条件距离
|
||||
|
||||
if (circleRadius.value !== 1000 && circleRadius.value !== 2000 && circleRadius.value !== 3000 && circleRadius.value !== 5000) activeLableIndex.value = null
|
||||
else activeLableIndex.value = circleRadius.value
|
||||
circle.value.setRadius(newRadius);
|
||||
|
|
@ -394,8 +486,6 @@ const createCircleHandle = () => {
|
|||
circleHandle.value.on('dragend', () => {
|
||||
// 拖拽结束后更新手柄位置
|
||||
updateCircleHandlePosition();
|
||||
// 重新渲染数据点
|
||||
renderMassMarks()
|
||||
});
|
||||
}
|
||||
// 更新圆形拖拽手柄位置
|
||||
|
|
@ -419,6 +509,8 @@ const calculateDistance = (point1, point2) => {
|
|||
const lng2 = point2.lng;
|
||||
const lat2 = point2.lat;
|
||||
|
||||
console.log('sdfadsf', point1.lng, point2)
|
||||
|
||||
const radLat1 = lat1 * Math.PI / 180.0;
|
||||
const radLat2 = lat2 * Math.PI / 180.0;
|
||||
const a = radLat1 - radLat2;
|
||||
|
|
@ -437,14 +529,10 @@ const handleChangeDistance = (itemDistance) => {
|
|||
queryParams.value.distance = itemDistance.value
|
||||
activeLableIndex.value = itemDistance.value
|
||||
distanceLable.value = itemDistance.value + '米'
|
||||
|
||||
// 更新热区
|
||||
circleRadius.value = itemDistance.value;
|
||||
circle.value.setRadius(itemDistance.value);
|
||||
updateCircleHandlePosition();
|
||||
|
||||
// 重新渲染数据点
|
||||
renderMassMarks()
|
||||
}
|
||||
// 初始化地图
|
||||
const loadMap = () => {
|
||||
|
|
@ -453,10 +541,10 @@ const loadMap = () => {
|
|||
window._AMapSecurityConfig = {
|
||||
securityJsCode: secretKey
|
||||
};
|
||||
|
||||
AMapLoader.load({
|
||||
key: apiKey,
|
||||
plugins: ["AMap.PlaceSearch"],
|
||||
version: '2.0', // 指定API版本
|
||||
AMapUI: {
|
||||
plugins: []
|
||||
}
|
||||
|
|
@ -469,8 +557,6 @@ const loadMap = () => {
|
|||
resizeEnable: true,
|
||||
pitch: initialPitch, // 倾斜角度决定2D/3D模式
|
||||
rotation: initialRotation, // 旋转角度
|
||||
zoom: 16,
|
||||
zooms: [3, 16],
|
||||
viewMode: mapMode.value // 启用3D视图
|
||||
});
|
||||
|
||||
|
|
@ -493,14 +579,13 @@ const loadMap = () => {
|
|||
// 监听地图渲染完成事件
|
||||
mapInstance.value.on('render', hideAmapLogo);
|
||||
|
||||
// 添加缩放变化监听
|
||||
mapInstance.value.on('zoomchange', handleZoomChange);
|
||||
if (selectConfig.value !== null) {
|
||||
currentSelect(selectConfig.value)
|
||||
} else {
|
||||
// 在地图完全加载后执行点数据处理
|
||||
renderMassMarks();
|
||||
}
|
||||
// // 关键：监听地图的右键点击事件
|
||||
// mapInstance.value.on('rightclick', handleRightClick);
|
||||
mapInstance.value.on('click', function (e) {
|
||||
hideContextMenu()
|
||||
});
|
||||
// 在地图完全加载后执行点数据处理
|
||||
renderMassMarks();
|
||||
|
||||
resolve();
|
||||
|
||||
|
|
@ -510,15 +595,7 @@ const loadMap = () => {
|
|||
});
|
||||
});
|
||||
}
|
||||
// 处理地图缩放事件
|
||||
const handleZoomChange = () => {
|
||||
const currentZoomLevel = mapInstance.value.getZoom();
|
||||
// 如果缩放级别超过16，自动调整回16
|
||||
if (currentZoomLevel > 16) {
|
||||
mapInstance.value.setZoom(16);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加自定义控件
|
||||
const addCustomControls = (AMap) => {
|
||||
// 创建控件容器
|
||||
|
|
@ -649,6 +726,7 @@ const createPointStyle = (color, size, styleType) => {
|
|||
|
||||
return canvas;
|
||||
}
|
||||
|
||||
// 渲染海量点
|
||||
const renderMassMarks = () => {
|
||||
// 清除现有的海量点
|
||||
|
|
@ -683,8 +761,8 @@ const renderMassMarks = () => {
|
|||
mediaByMap(queryParams.value).then(res => {
|
||||
if (res.code == 200) {
|
||||
res.data.forEach(itemPoint => {
|
||||
if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, "style": 0 })
|
||||
else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, "style": 1 })
|
||||
if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, 'mediaName': itemPoint.mediaName, "style": 0 })
|
||||
else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, 'mediaName': itemPoint.mediaName, "style": 1 })
|
||||
|
||||
// 同时更新极值
|
||||
const lng = itemPoint.x;
|
||||
|
|
@ -709,9 +787,17 @@ const renderMassMarks = () => {
|
|||
|
||||
// 添加点击事件
|
||||
massMarks.value.on('click', function (e) {
|
||||
hideContextMenu()
|
||||
handleViewMedia(e.data.mediaId)
|
||||
});
|
||||
|
||||
// 鼠标悬浮
|
||||
massMarks.value.on('mouseover', function (e) {
|
||||
var pixel = mapInstance.value.lngLatToContainer(e.data.lnglat);
|
||||
curMediaInfo.value = e.data
|
||||
showContextMenu(pixel)
|
||||
});
|
||||
|
||||
// ==================================================
|
||||
// 新增：计算边界并设置地图视野
|
||||
// ==================================================
|
||||
|
|
@ -723,6 +809,25 @@ const renderMassMarks = () => {
|
|||
mapInstance.value.setBounds(bounds);
|
||||
})
|
||||
}
|
||||
const showContextMenu = (pixel) => {
|
||||
// 更新菜单位置跟随鼠标光标
|
||||
menuPosition.value = {
|
||||
top: `${pixel.y + 210}px`,
|
||||
left: `${pixel.x + 50}px`,
|
||||
position: 'absolute',
|
||||
padding: '10px',
|
||||
background: '#FFFFFF',
|
||||
lineHeight: '16px',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
boxShadow: '0 0 4px #ccc'
|
||||
};
|
||||
contextMenuVisible.value = true;
|
||||
}
|
||||
|
||||
const hideContextMenu = () => {
|
||||
contextMenuVisible.value = false;
|
||||
}
|
||||
// 隐藏Logo的函数
|
||||
const hideAmapLogo = () => {
|
||||
const logos = document.querySelectorAll('.amap-logo, .amap-copyright');
|
||||
|
|
@ -732,7 +837,55 @@ const hideAmapLogo = () => {
|
|||
logo.style.opacity = '0';
|
||||
});
|
||||
}
|
||||
|
||||
// 获取PPT模板
|
||||
const getpptTemplatePageList = () => {
|
||||
pptTemplatePage(queryParams.value).then(res => {
|
||||
templateList.value = res.data.list
|
||||
})
|
||||
}
|
||||
/** 导出PPT按钮操作 */
|
||||
const handleExportPPT = (tempId) => {
|
||||
if (multipleChoseArr.value.length == 0) {
|
||||
proxy.$modal.msgWarning("请选择要导出的媒体!!!")
|
||||
return false
|
||||
}
|
||||
const mediaIds = multipleChoseArr.value.map(item => item.id);
|
||||
exportPPTDialogRef.value.initExportPPT(tempId, mediaIds, multipleChoseArr.value)
|
||||
}
|
||||
// 获取一级媒体类型
|
||||
const getMediaTypeOne = () => {
|
||||
sysMediaTypeListByPid({ parentId: 0 }).then(res => {
|
||||
mediaTypeOne.value = res.data
|
||||
})
|
||||
}
|
||||
// 获取二级媒体类型
|
||||
const getMediaTypeTwo = (value) => {
|
||||
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
||||
queryParams.value.mediaTypeTwo = undefined
|
||||
queryParams.value.mediaTypeThree = undefined
|
||||
mediaTypeTwo.value = res.data
|
||||
})
|
||||
}
|
||||
// 获取三级媒体类型
|
||||
const getMediaTypeThree = (value) => {
|
||||
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
||||
queryParams.value.mediaTypeThree = undefined
|
||||
mediaTypeThree.value = res.data
|
||||
})
|
||||
}
|
||||
// 选择媒体事件
|
||||
const handleChoseMedia = () => {
|
||||
hideContextMenu()
|
||||
if (curMediaInfo.value) {
|
||||
const rowIndex = multipleChoseArr.value.findIndex(item => item.id == curMediaInfo.value.mediaId)
|
||||
if (rowIndex == -1) multipleChoseArr.value.push({ id: curMediaInfo.value.mediaId, mediaName: curMediaInfo.value.mediaName })
|
||||
}
|
||||
}
|
||||
// 移除媒体选择项
|
||||
const handleCloseTag = (tag) => {
|
||||
const rowIndex = multipleChoseArr.value.findIndex(item => item.id == tag.id)
|
||||
multipleChoseArr.value.splice(rowIndex, 1)
|
||||
}
|
||||
onUnmounted(() => {
|
||||
if (mapInstance.value) {
|
||||
mapInstance.value.destroy();
|
||||
|
|
@ -741,6 +894,8 @@ onUnmounted(() => {
|
|||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getMediaTypeOne()
|
||||
getpptTemplatePageList()
|
||||
loadMap()
|
||||
});
|
||||
</script>
|
||||
|
|
@ -773,6 +928,30 @@ onMounted(() => {
|
|||
background: #1a75e6;
|
||||
}
|
||||
|
||||
|
||||
.mediaMapExportBtn {
|
||||
// min-width: 122px;
|
||||
height: 34px;
|
||||
border-radius: 4px;
|
||||
background: #1a75e6;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
color: #FFFFFF;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mediaMapExportBtn>span {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mediaMapExportBtn:hover {
|
||||
background: #1a75e6;
|
||||
}
|
||||
|
||||
.distanceItem {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
|
|
@ -839,7 +1018,7 @@ onMounted(() => {
|
|||
|
||||
.mediaMapContainer {
|
||||
width: 100%;
|
||||
height: calc(100vh - 170px);
|
||||
height: calc(100vh - 256px);
|
||||
background: #3f8bff;
|
||||
}
|
||||
|
||||
|
|
@ -919,10 +1098,10 @@ onMounted(() => {
|
|||
height: 100% !important;
|
||||
}
|
||||
|
||||
.one-text {
|
||||
height: 50px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
// .one-text {
|
||||
// height: 50px;
|
||||
// padding-top: 4px;
|
||||
// }
|
||||
|
||||
// 分割线
|
||||
.splineBar {
|
||||
|
|
@ -936,4 +1115,23 @@ onMounted(() => {
|
|||
max-height: 70vh;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.noChoseLabel {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #ffffff90;
|
||||
}
|
||||
|
||||
.custom-menu {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
132
src/views/mediaTool/noticeList.vue
Normal file
132
src/views/mediaTool/noticeList.vue
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>工作台</span> <span class="subHeaderTitle">- 系统通知</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="10" class="my_row">
|
||||
<el-col :span="12">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchInputForm">
|
||||
<el-form-item label="" prop="templateName">
|
||||
<el-input v-model="queryParams.templateName" placeholder="请输入供应商/媒体名称/业务部门名称"
|
||||
:prefix-icon="Search" style="width: 400px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right;">
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="noticeList" height="calc(100vh - 306px)">
|
||||
<el-table-column label="序号" align="center" width="80">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商/媒体名称" align="center" prop="templateName" />
|
||||
<el-table-column label="业务部门" align="center" prop="type" />
|
||||
<el-table-column label="通知内容" align="center" prop="originalFileName" />
|
||||
<el-table-column label="通知时间" align="center" prop="createTime">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="130" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:pptTemplate:edit']">去处理</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination :total="total" v-model:page="queryParams.pageIndex" v-model:limit="queryParams.pageSize"
|
||||
@pagination="getpptTemplatePageList" />
|
||||
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Post">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
// import { pptTemplatePage, addPptTemplate, updatePptTemplate, getPptTemplate, deletePptTemplate } from "@/api/system/pptTemplate"
|
||||
import { uploadFile } from "@/api/common"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
// 列表数据
|
||||
const noticeList = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref(0)
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
templateName: undefined,
|
||||
}
|
||||
})
|
||||
|
||||
const { queryParams } = toRefs(data)
|
||||
|
||||
/** 查询通知列表 */
|
||||
const getNoticePageList = () => {
|
||||
loading.value = false
|
||||
// pptTemplatePage(queryParams.value).then(res => {
|
||||
// templateList.value = res.data.list
|
||||
// total.value = res.data.total
|
||||
// loading.value = false
|
||||
// })
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageIndex = 1
|
||||
getNoticePageList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef")
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 去处理 */
|
||||
const handleUpdate = (row) => {
|
||||
|
||||
}
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
// exportSupplier(queryParams.value).then(res => {
|
||||
// // 通过a标签打开新页面下载文件
|
||||
// const a = document.createElement('a')
|
||||
// a.href = URL.createObjectURL(res)
|
||||
// // a标签里有download属性可以自定义文件名
|
||||
// const downLoadName = '供应商_' + Date.now() + '.xlsx'
|
||||
// a.setAttribute('download', downLoadName)
|
||||
// document.body.appendChild(a)
|
||||
// a.click()
|
||||
// document.body.removeChild(a)
|
||||
// })
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getNoticePageList()
|
||||
});
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.el-form-item__content {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<span class="upload_tip">将文件拖曳至此区域，或</span> <em>点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__text">
|
||||
支持扩展名：.pptx
|
||||
支持扩展名：.jpeg、.jpg、.png、.pptx
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
|
|
@ -149,34 +149,22 @@ const requestDocUpload = (options) => {
|
|||
})
|
||||
}
|
||||
//自定义上传文件资料校验
|
||||
const beforeDocUpload = (file) => {
|
||||
const type = [
|
||||
const beforeDocUpload = (file) => {
|
||||
const validTypes = [
|
||||
// 图片类型
|
||||
"image/jpeg",
|
||||
"image/jpg",
|
||||
"image/png",
|
||||
// PPT 类型
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.presentation'
|
||||
];
|
||||
const isXlsx = type.includes(file.type);
|
||||
// 检验文件格式
|
||||
if (!isXlsx) {
|
||||
proxy.$modal.msgError("文件格式错误，请上传.pptx后缀的文件。");
|
||||
return false;
|
||||
}
|
||||
|
||||
// 定义大小限制：500MB = 500 * 1024 * 1024 字节
|
||||
const MAX_SIZE = 500 * 1024 * 1024
|
||||
|
||||
if (file.size > MAX_SIZE) {
|
||||
// 文件大小超出限制
|
||||
proxy.$modal.msgError(`文件大小不能超过 500MB！当前文件为 ${formatFileSize(file.size)}`);
|
||||
// 返回 false 会阻止上传
|
||||
]
|
||||
const isValidType = validTypes.includes(file.type)
|
||||
if (!isValidType) {
|
||||
proxy.$modal.msgError("文件格式错误，请上传 .jpeg、.jpg、.png、.pptx 后缀的文件。");
|
||||
return false
|
||||
}
|
||||
}
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
|
||||
}
|
||||
return true
|
||||
}
|
||||
// 移除已上传文件列表
|
||||
const removeDocUpload = (file, fileList) => {
|
||||
docUploadList.value = docUploadList.value.filter(
|
||||
|
|
|
|||
|
|
@ -330,11 +330,13 @@ import { Close } from '@element-plus/icons-vue'
|
|||
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
|
||||
import { addBusSupplier, updateBusSupplier, getBusSupplier } from "@/api/supplier"
|
||||
import { listDept } from "@/api/system/dept"
|
||||
import useUserStore from '@/store/modules/user'
|
||||
|
||||
import multiFileUpload from '../../components/FileUpload/multiFileUpload.vue'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const emit = defineEmits(['handleShowList']);
|
||||
const userStore = useUserStore()
|
||||
|
||||
const formTitle = ref('新建')
|
||||
// 查询条件 省、市、县
|
||||
|
|
@ -550,6 +552,10 @@ const initForm = (_formTitle, _ruleForm) => {
|
|||
getDepList()
|
||||
getProvinceList()
|
||||
if (ruleForm.value.supplierId) getSupplierInfo()
|
||||
else {
|
||||
ruleForm.value.dockingName = userStore.name
|
||||
ruleForm.value.dockingPhone = userStore.phoneNumber
|
||||
}
|
||||
nextTick(() => {
|
||||
businessLicenseRef.value._fileType = 1
|
||||
otherFileRef.value._fileType = 9
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user