Skip to content

蒋秀川 / miniProject

Go to a project
Commit 484a935d by 陈岩
Options

feat: h5页面增加页面ip适配

1 parent 81b755f5
Inline Side-by-side
Showing 7 changed files with 314 additions and 329 deletions
.DS_Store
No preview for this file type
h5/src/api/heatMap.js
......@@ -10,8 +10,8 @@ const heatmap = {
return req("post", `/report/heatMap/getNew`, params, config);
},
// 获取门店数据
getStoreDataApi(mallId) {
return req("get", `/report/b-mall/${mallId}`);
getStoreDataApi(mallId, config) {
return req("get", `/report/b-mall/${mallId}`, {}, config);
},
getAreaGateStatisticsApi(params, config) {
return req("get", `/report/gate/analyse/statistics`, params, config);
......
h5/src/api/http.js
import axios from 'axios'
import md5 from 'blueimp-md5'
import { param2 } from '@/utils'
import { Toast } from 'vant';
import axios from "axios";
import md5 from "blueimp-md5";
import { param2 } from "@/utils";
import { Toast } from "vant";
//const baseURL = 'https://store.keliuyun.com/report';
//const baseURL = 'https://mall.keliuyun.com';
const baseURL = 'https://store.keliuyun.com';
// const baseURL = "https://store.keliuyun.com";
const Axios = axios.create({
baseURL: baseURL, // 因为我本地做了反向代理
timeout: 0,
// responseType: "json",
// changeOrigin: true,//允许跨域
withCredentials: true, // 是否允许带cookie这些
headers: {
"Content-Type": "application/json;charset=UTF-8"
// 'Content-Type': 'application/x-www-form-urlencoded'
}
})
// baseURL 通过接口信息数据传递
// baseURL: baseURL, // 因为我本地做了反向代理
timeout: 0,
// responseType: "json",
// changeOrigin: true,//允许跨域
withCredentials: true, // 是否允许带cookie这些
headers: {
"Content-Type": "application/json;charset=UTF-8",
// 'Content-Type': 'application/x-www-form-urlencoded'
},
});
let store = {
source: {
token: null,
cancel: null
}
}
source: {
token: null,
cancel: null,
},
};
// 请求拦截器
Axios.interceptors.request.use(
config => {
const suffix = '4c413628731691abc99eb2fca5f69aab'
const { method, params, data, url } = config
let language = localStorage.getItem('lang'),
aToken = localStorage.getItem('atoken');
if (language) {
let languageObj = {
'mall_CN': 'zh-CN,zh;q=0.9',
'zh_CN': 'zh-CN,zh;q=0.9',
'en_US': 'en-US,en;q=0.5',
'zh_TW': 'zh-TW,zh;q=0.3',
// 'zh_ar': 'zh-AR,zh;q=0.9'
}
languageObj[language] && (config.headers['Accept-Language'] = languageObj[language]);
}
aToken && (config.headers.Authorization = aToken);
config.cancelToken = store.source.token
const signalStr = method.toUpperCase() +
(params ? param2(params) : '') +
(data ? JSON.stringify(data) : '') +
suffix + (config.headers.Authorization ? config.headers.Authorization : '');
const hashSignature = md5(signalStr)
config.headers['signature'] = hashSignature
return config;
}, error => {
console.error(error);
return Promise.reject(error.data.msg)
(config) => {
// 如果有serverIp, 则用传入值替换baseURL
if (config.serverIp) {
config.baseURL = config.serverIp;
} else if (config.config?.serverIp) {
config.baseURL = config.config.serverIp;
} else {
config.baseURL = "https://store.keliuyun.com";
}
)
Axios.interceptors.response.use(
res => {
if (res.data && !res.data.success) {
if (res.data.ecode && res.data.ecode != 200) {
Toast.fail(res.data.enote)
console.error(res.data.enote)
return ;
} else {
// 非标准返回体
if (res.status == 200) {
return res;
}
}
if (res.data.code == 500) {
console.error(res.data.msg)
}
return Promise.reject(res.data.msg);
} else if (!res.data && res.status == 200) {
return res;
} else if (res.data.success && res.config.method != 'get') {
//
}
return res;
const suffix = "4c413628731691abc99eb2fca5f69aab";
const { method, params, data, url } = config;
let language = localStorage.getItem("lang"),
aToken = localStorage.getItem("atoken");
if (language) {
let languageObj = {
mall_CN: "zh-CN,zh;q=0.9",
zh_CN: "zh-CN,zh;q=0.9",
en_US: "en-US,en;q=0.5",
zh_TW: "zh-TW,zh;q=0.3",
// 'zh_ar': 'zh-AR,zh;q=0.9'
};
languageObj[language] &&
(config.headers["Accept-Language"] = languageObj[language]);
}
)
export default function(method, url, data = null, config = null, bodyDelete) {
method = method.toLowerCase()
if (method == 'post') {
return Axios.post(url, data, config)
} else if (method == 'get') {
let defaultParam = {
_t: Date.parse(new Date()) / 1000
}
return Axios.get(url, { params: {...defaultParam, ...data }, config })
} else if (bodyDelete) {
return Axios.delete(url, { data: data }, config)
} else if (method == 'delete') {
return Axios.delete(url, { params: data }, config)
} else if (method == 'put') {
return Axios.put(url, data, config)
aToken && (config.headers.Authorization = aToken);
config.cancelToken = store.source.token;
const signalStr =
method.toUpperCase() +
(params ? param2(params) : "") +
(data ? JSON.stringify(data) : "") +
suffix +
(config.headers.Authorization ? config.headers.Authorization : "");
const hashSignature = md5(signalStr);
config.headers["signature"] = hashSignature;
return config;
},
(error) => {
console.error(error);
return Promise.reject(error.data.msg);
}
);
Axios.interceptors.response.use((res) => {
if (res.data && !res.data.success) {
if (res.data.ecode && res.data.ecode != 200) {
Toast.fail(res.data.enote);
console.error(res.data.enote);
return;
} else {
console.error('unknown method' + method)
return false
// 非标准返回体
if (res.status == 200) {
return res;
}
}
}
\ No newline at end of file
if (res.data.code == 500) {
console.error(res.data.msg);
}
return Promise.reject(res.data.msg);
} else if (!res.data && res.status == 200) {
return res;
} else if (res.data.success && res.config.method != "get") {
//
}
return res;
});
export default function (method, url, data = null, config = null, bodyDelete) {
method = method.toLowerCase();
if (method == "post") {
return Axios.post(url, data, config);
} else if (method == "get") {
let defaultParam = {
_t: Date.parse(new Date()) / 1000,
};
return Axios.get(url, { params: { ...defaultParam, ...data }, config });
} else if (bodyDelete) {
return Axios.delete(url, { data: data }, config);
} else if (method == "delete") {
return Axios.delete(url, { params: data }, config);
} else if (method == "put") {
return Axios.put(url, data, config);
} else {
console.error("unknown method" + method);
return false;
}
}
h5/src/api/index.js
import req from '@/api/http.js'
const tourApi = {
getLiveAddress(params,config) {
return req('get', `/patrol/patrolDeviceChannel/getLiveAddress/${params.id}`, params, config)
},
// 查询视频平台token
getPatrolDeviceToken(params, config){
return req('GET', `/patrol/patrolDevice/token`, params, config)
},
getLiveInfo(params,config){
return req('get', `/patrol/patrolDeviceChannel/getLiveInfo/${params.id}`, params, config)
},
// 截图
getCapture(params,config) {
return req('get', `/patrol/patrolDeviceChannel/capture/${params.id}`, params, config)
},
// 提交巡店记录
submitPatrolRecord(params,config) {
return req('post', `/patrol/patrolRecord`, params, config)
},
setBookmark(params,config) {
return req('post', `/patrol/patrolGate/bookmark`, params, config)
},
delBookmark(params,config) {
return req('post', `/patrol/patrolGate/unbookmark`, params, config)
},
// 获取监控点
getPatrolGateList(params,config) {
return req('get', `/patrol/patrolGate/list`, params, config)
},
uploadScreenshot(params,config){
return req('post', `/patrol/b-patrol-screenshot`, params, config)
},
// 获取抓拍图
getScreenshotList(params,config){
return req('GET', `/b-patrol-screenshot/list`, params, config)
},
// 巡店模板
getPatrolTemplateListFun(params,config){
return req('get', `/patrol/b-patrol-template/list`, params, config)
},
// 查询单个模板
getPatrolTemplateOne(params,config){
return req('get', `/patrol/b-patrol-template/${params.id}`, params, config)
},
getPatrolSopTypeTree(params,config) {
return req('get', `/patrol/patrolSopType/tree`, params, config)
},
getUsers(params,config) {
return req('get', `/patrol/s-user/mall/${params.mallId}`)
},
//提交巡店记录
confirmPatrolRecord(params,config) {
return req('post', `/patrol/patrolRecord`, params, config)
},
// 获取通道的视频直播与回放地址
getLiveAndPlaybackAddress(params, config){
return req('GET', `/patrol/patrolDeviceChannel/getLiveAndPlaybackAddress`, params, config)
},
// 云控制
ptzStart(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStart`, params, config)
},
ptzStop(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStop`, params, config)
},
// 获取设备录像记录
getThroughVideoRecord(params, config){
return req('GET', `/patrol/patrolDeviceChannel/video/record`, params, config)
},
// 获取设备分组
getDeviceGroupList(shopId) {
return req('GET', `/patrol/b-mall-org/mall/${shopId}`);
},
// 修改监控场景
editPatrolGate(params,config) {
return req('PUT', `/patrol/patrolGate/${params.id}`, params, config)
},
import req from "@/api/http.js";
function getCommonConfig(config) {
return {
...config,
serverIp:
window.localStorage.getItem("serverIp") || "https://store.keliuyun.com",
};
}
export default tourApi;
\ No newline at end of file
const tourApi = {
getLiveAddress(params, config) {
return req(
"get",
`/patrol/patrolDeviceChannel/getLiveAddress/${params.id}`,
params,
getCommonConfig(config)
);
},
// 查询视频平台token
getPatrolDeviceToken(params, config) {
return req("GET", `/patrol/patrolDevice/token`, params, config);
},
getLiveInfo(params, config) {
return req(
"get",
`/patrol/patrolDeviceChannel/getLiveInfo/${params.id}`,
params,
getCommonConfig(config)
);
},
// 截图
getCapture(params, config) {
return req(
"get",
`/patrol/patrolDeviceChannel/capture/${params.id}`,
params,
getCommonConfig(config)
);
},
// 提交巡店记录
submitPatrolRecord(params, config) {
return req("post", `/patrol/patrolRecord`, params, getCommonConfig(config));
},
setBookmark(params, config) {
return req(
"post",
`/patrol/patrolGate/bookmark`,
params,
getCommonConfig(config)
);
},
delBookmark(params, config) {
return req(
"post",
`/patrol/patrolGate/unbookmark`,
params,
getCommonConfig(config)
);
},
// 获取监控点
getPatrolGateList(params, config) {
return req(
"get",
`/patrol/patrolGate/list`,
params,
getCommonConfig(config)
);
},
uploadScreenshot(params, config) {
return req(
"post",
`/patrol/b-patrol-screenshot`,
params,
getCommonConfig(config)
);
},
// 获取抓拍图
getScreenshotList(params, config) {
return req(
"GET",
`/b-patrol-screenshot/list`,
params,
getCommonConfig(config)
);
},
// 巡店模板
getPatrolTemplateListFun(params, config) {
return req(
"get",
`/patrol/b-patrol-template/list`,
params,
getCommonConfig(config)
);
},
// 查询单个模板
getPatrolTemplateOne(params, config) {
return req(
"get",
`/patrol/b-patrol-template/${params.id}`,
params,
getCommonConfig(config)
);
},
getPatrolSopTypeTree(params, config) {
return req(
"get",
`/patrol/patrolSopType/tree`,
params,
getCommonConfig(config)
);
},
getUsers(params, config) {
return req(
"get",
`/patrol/s-user/mall/${params.mallId}`,
{},
getCommonConfig(config)
);
},
//提交巡店记录
confirmPatrolRecord(params, config) {
return req("post", `/patrol/patrolRecord`, params, getCommonConfig(config));
},
// 获取通道的视频直播与回放地址
getLiveAndPlaybackAddress(params, config) {
return req(
"GET",
`/patrol/patrolDeviceChannel/getLiveAndPlaybackAddress`,
params,
getCommonConfig(config)
);
},
// 云控制
ptzStart(params, config) {
return req(
"PUT",
`/patrol/patrolDeviceChannel/ptzStart`,
params,
getCommonConfig(config)
);
},
ptzStop(params, config) {
return req(
"PUT",
`/patrol/patrolDeviceChannel/ptzStop`,
params,
getCommonConfig(config)
);
},
// 获取设备录像记录
getThroughVideoRecord(params, config) {
return req(
"GET",
`/patrol/patrolDeviceChannel/video/record`,
params,
getCommonConfig(config)
);
},
// 获取设备分组
getDeviceGroupList(shopId) {
return req(
"GET",
`/patrol/b-mall-org/mall/${shopId}`,
{},
getCommonConfig({})
);
},
// 修改监控场景
editPatrolGate(params, config) {
return req(
"PUT",
`/patrol/patrolGate/${params.id}`,
params,
getCommonConfig(config)
);
},
};
export default tourApi;
h5/src/views/areaHeat/index.vue
<!-- <template>
<div class="heat-map-container">
<div class="heat-map" style="background-color: #f00">
<div class="canvas">
<img
:src="floorImage"
class="editFloorimg"
id="editFloorimg"
style="width: 100%"
/>
<canvas class="canvas-position" id="canvas-position"></canvas>
</div>
</div>
</div>
</template>
<script setup>
import { watch, ref, onMounted } from "vue";
import { Toast } from "vant";
import { useRoute } from "vue-router";
import heatmap from "@/api/heatMap";
/************** 图片相关 **************/
const $route = useRoute();
const floorImage = ref(""); // 楼层图片
const startDate = ref(""); // 开始日期
const endDate = ref(""); // 结束日期
const getFloorImage = async () => {
try {
const { data } = await heatmap.getStoreDataApi(storeId.value);
if (data.code === 200) {
return data.data?.mallPlan || "";
}
return "";
} catch (error) {
return "";
}
};
watch(
() => $route.query,
async (newVal) => {
const { token, mallId, startDate: sDate, endDate: eDate, key } = newVal;
if (token) {
window.localStorage.setItem("atoken", token);
}
startDate.value = sDate;
endDate.value = eDate;
Toast(startDate.value, endDate.value);
if (mallId) {
indicatorKey.value = key;
storeId.value = mallId;
const url = await getFloorImage();
if (!url) {
Toast.fail("未找到门店平面图");
return false;
}
floorImage.value = `https://store.keliuyun.com/images/${url}`;
// getFloorImage();
// if (floorImage.value) {
// getChannelList(mallId);
// }
}
},
{ immediate: true }
);
</script>
<style>
.canvas {
position: relative;
width: 100%;
}
.canvas .canvas-position {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.color-legend {
height: 70px;
margin-top: 30px;
}
.color-box {
float: left;
position: relative;
}
.color-block {
float: left;
width: 60px;
height: 40px;
}
.color-text {
width: 100%;
text-align: center;
font-size: 1em;
left: -15px;
position: absolute;
}
</style> -->
<template>
<div class="heat-map-container">
<div class="heat-map" style="background-color: #fff">
<div class="canvas">
<img
:src="floorImage"
class="editFloorimg"
id="editFloorimg"
style="width: 100%"
@load="handleLoad"
/>
<img :src="floorImage" class="editFloorimg" id="editFloorimg" style="width: 100%" @load="handleLoad" />
<canvas class="canvas-position" id="canvas-position"></canvas>
</div>
</div>
<div class="color-legend" v-if="floorImage">
<div v-for="(item, index) in gateLegend" :key="index" class="color-box">
<p
class="color-text"
:style="{ top: (index + 1) % 2 == 0 ? '19px' : '-21px' }"
>
<p class="color-text" :style="{ top: (index + 1) % 2 == 0 ? '19px' : '-21px' }">
{{ item.text }}
</p>
<span
class="color-block"
:style="{ 'background-color': item.color }"
></span>
<span
class="border-span"
:style="{ top: (index + 1) % 2 == 0 ? '14px' : '-5px' }"
></span>
<span class="color-block" :style="{ 'background-color': item.color }"></span>
<span class="border-span" :style="{ top: (index + 1) % 2 == 0 ? '14px' : '-5px' }"></span>
</div>
</div>
</div>
......@@ -158,7 +35,7 @@ const indicatorKey = ref(""); // 时间级别，默认实时
const floorImage = ref(""); // 楼层图片
const getFloorImage = async () => {
try {
const { data } = await heatmap.getStoreDataApi(storeId.value);
const { data } = await heatmap.getStoreDataApi(storeId.value, { serverIp: serverIp.value });
if (data.code === 200) {
return data.data?.mallPlan || "";
}
......@@ -188,7 +65,7 @@ const handleLoad = () => {
const channelList = ref([]); // 渠道列表
const getChannelList = async (mallId) => {
try {
const { data } = await heatmap.getChannelsListApi({ mallId, status: 1 });
const { data } = await heatmap.getChannelsListApi({ mallId, status: 1 }, { serverIp: serverIp.value });
if (data.code === 200) {
channelList.value = data.data || [];
......@@ -199,7 +76,7 @@ const getChannelList = async (mallId) => {
} else {
channelList.value = [];
}
} catch (error) {}
} catch (error) { }
};
// 获取区域数据
const gateData = ref([]);
......@@ -211,7 +88,7 @@ const getGateStatistics = async () => {
startDate: startDate.value,
endDate: endDate.value,
};
const { data } = await heatmap.getAreaGateStatisticsApi(params);
const { data } = await heatmap.getAreaGateStatisticsApi(params, { serverIp: serverIp.value });
if (data.code === 200) {
gateData.value = data.data || [];
gateDataMap.value = {};
......@@ -449,11 +326,13 @@ function formatSecondsMin(val) {
if (isNaN(val)) return val;
return parseInt(val / 60) + "m";
}
const serverIp = ref('')
watch(
() => $route.query,
async (newVal) => {
const { token, mallId, startDate: sDate, endDate: eDate, key } = newVal;
const { token, mallId, startDate: sDate, endDate: eDate, key, serverIp: httpsIp } = newVal;
serverIp.value = httpsIp || 'https://store.keliuyun.com'
if (token) {
window.localStorage.setItem("atoken", token);
......@@ -469,7 +348,7 @@ watch(
Toast.fail("未找到门店平面图");
return false;
}
floorImage.value = `https://store.keliuyun.com/images/${url}`;
floorImage.value = `${serverIp.value}/images/${url}`;
if (floorImage.value) {
getChannelList(mallId);
}
......@@ -496,6 +375,7 @@ function numFormat(val) {
position: relative;
width: 100%;
}
.canvas .canvas-position {
position: absolute !important;
top: 0;
......@@ -504,14 +384,17 @@ function numFormat(val) {
height: 100%;
z-index: 1;
}
.color-legend {
height: 70px;
margin-top: 30px;
}
.color-box {
float: left;
position: relative;
}
.color-block {
float: left;
width: 60px;
......
h5/src/views/heatMap/index.vue
<template>
<div class="heat-map" style="background-color: #fff">
<div class="canvas">
<img
:src="floorImage"
class="editFloorimg"
id="editFloorimg"
style="width: 100%"
@load="handleLoad"
/>
<img :src="floorImage" class="editFloorimg" id="editFloorimg" style="width: 100%" @load="handleLoad" />
<div class="canvas-position" id="canvas-position"></div>
</div>
</div>
<div
style="width: 90%; margin-top: 20px; padding: 0 20px"
v-if="channelList.length"
>
<van-slider
bar-height="15px"
:max="sliderMax"
:min="1"
v-model="sliderVal"
@change="slideHandle"
>
<div style="width: 90%; margin-top: 20px; padding: 0 20px" v-if="channelList.length">
<van-slider bar-height="15px" :max="sliderMax" :min="1" v-model="sliderVal" @change="slideHandle">
</van-slider>
<!-- <div v-if="sliderVal" class="custom-button">{{ getSliderVal }}</div> -->
</div>
......@@ -38,7 +23,7 @@ let map = null; // 地图对象
const $route = useRoute();
const getSliderVal = computed(() => {
return timeLevel.value == "rt"
return timeLevel.value === "rt"
? getTimeMin(sliderVal.value)
: Math.round(sliderVal.value) + "";
});
......@@ -49,7 +34,7 @@ const storeId = ref(""); // 店铺id
const channelList = ref([]); // 渠道列表
const getChannelList = async (mallId) => {
try {
const { data } = await heatmap.getChannelsListApi({ mallId, status: 1 });
const { data } = await heatmap.getChannelsListApi({ mallId, status: 1 }, { serverIp: serverIp.value });
if (data.code === 200) {
channelList.value =
......@@ -87,9 +72,11 @@ const getHeatMapData = async (params) => {
mallId: params.mallId,
};
const { data } = await heatmap.getHeatMapValueApi(options);
const { data } = await heatmap.getHeatMapValueApi(options, { serverIp: serverIp.value });
if (data.code === 200) {
heatDataObj.value = data.data || [];
console.log(111222);
nextTick(() => {
dealHeatData();
});
......@@ -106,7 +93,7 @@ const getHeatMapData = async (params) => {
const floorImage = ref("");
const getFloorImage = async () => {
try {
const { data } = await heatmap.getStoreDataApi(storeId.value);
const { data } = await heatmap.getStoreDataApi(storeId.value, { serverIp: serverIp.value });
if (data.code === 200) {
return data.data?.mallPlan || "";
}
......@@ -174,7 +161,7 @@ function dealHeatData() {
heatInstance.value = heatmapFactory.create({
container: heatDom,
radius: heatRadius.value,
onExtremaChange: () => {},
onExtremaChange: () => { },
});
let points = [];
let maxVal = 1;
......@@ -259,10 +246,12 @@ function numFormat(val) {
return val > 9 ? val : "0" + val;
}
const serverIp = ref("");
watch(
() => $route.query,
async (newVal) => {
const { token, mallId, startDate: sDate, endDate: eDate, level } = newVal;
const { token, mallId, startDate: sDate, endDate: eDate, level, serverIp: httpsIp } = newVal;
serverIp.value = httpsIp || 'https://store.keliuyun.com'
if (token) {
window.localStorage.setItem("atoken", token);
......@@ -282,7 +271,7 @@ watch(
Toast.fail("未找到门店平面图");
return false;
}
floorImage.value = `https://store.keliuyun.com/images/${url}`;
floorImage.value = `${serverIp.value}/images/${url}`;
if (floorImage.value) {
getChannelList(mallId);
}
......@@ -296,6 +285,7 @@ watch(
position: relative;
width: 100%;
}
.canvas .canvas-position {
position: absolute !important;
top: 0;
......
h5/src/views/video/index.vue
......@@ -196,6 +196,9 @@ function handleScreenshot() {
}
// const paramObj = parse(url).search || {}
const paramObj = parse(window.location.href).search || {};
window.localStorage.setItem('serverIp', paramObj.serverIp ? decodeURIComponent(paramObj.serverIp) : 'https://store.keliuyun.com');
/********************************/
paramObj.name = paramObj.name ? decodeURIComponent(paramObj.name) : "";
paramObj.mallName = paramObj.mallName
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!