mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

高速缩略图 分辨率适配

develop
lau572 5 months ago
parent
4131949725
commit
ca9a661605
3 changed files with 59 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
  2. 42
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/data.js
  3. 41
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue

20
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
View File

@ -601,13 +601,19 @@ export function addInGraphHandle(data) {
if (eventItem.id.match(eventRegex)) { if (eventItem.id.match(eventRegex)) {
let { stakeMark, lang, direction } = extData; let { stakeMark, lang, direction } = extData;
stakeMark = upperFirst(stakeMark); //统一格式 大写K stakeMark = upperFirst(stakeMark); //统一格式 大写K
const distance = // const distance =
(Number( // (Number(
stakeMark.replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "") // stakeMark.replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")
) - // ) -
54.394) * // 54.394) *
window.canvasRatio + // window.canvasRatio +
window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺 // window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺
let svgWidth = window.innerWidth - 10
let roadRatio = svgWidth * 0.83736 / 154.585
const distance = svgWidth * 0.06989 + (Number(stakeMark.replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * roadRatio; //K54+394 开始到K208+979计算的比例尺
const node = { shape: "custom-html", effect: ["data"] }; const node = { shape: "custom-html", effect: ["data"] };
node.data = getDataConf(data, extData); node.data = getDataConf(data, extData);
const id = `${stakeMark}_${direction || ""}`; const id = `${stakeMark}_${direction || ""}`;

42
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/data.js
View File

@ -2,14 +2,14 @@ export const actualLocationList = [
{ {
code: "K54", code: "K54",
name: "殷家林枢纽", name: "殷家林枢纽",
intervalDistance: 0.0, intervalDistance: 0.06989,
lng: 116.865231, lng: 116.865231,
lat: 36.57973, lat: 36.57973,
}, },
{ {
code: "K59", code: "K59",
name: "大学城收费站", name: "大学城收费站",
intervalDistance: 4.895, intervalDistance: 0.09645,
lng: 116.814343, lng: 116.814343,
lat: 36.581052, lat: 36.581052,
}, },
@ -17,84 +17,84 @@ export const actualLocationList = [
code: "K72", code: "K72",
name: "长清收费站", name: "长清收费站",
lng: 116.865231, lng: 116.865231,
intervalDistance: 13.558, intervalDistance: 0.16986,
lat: 36.57973, lat: 36.57973,
}, },
{ {
code: "K79", code: "K79",
name: "长清服务区", name: "长清服务区",
intervalDistance: 6.163, intervalDistance: 0.20330,
lng: 116.697041, lng: 116.697041,
lat: 36.428953, lat: 36.428953,
}, },
{ {
code: "K83", code: "K83",
name: "松林枢纽", name: "松林枢纽",
intervalDistance: 4.875, intervalDistance: 0.22948,
lng: 116.496503, lng: 116.496503,
lat: 36.292459, lat: 36.292459,
}, },
{ {
code: "K86", code: "K86",
name: "孝里收费站", name: "孝里收费站",
intervalDistance: 2.614, intervalDistance: 0.24369,
lng: 116.638217, lng: 116.638217,
lat: 36.38667, lat: 36.38667,
}, },
{ {
code: "K99", code: "K99",
name: "*平阴北收费站", name: "*平阴北收费站",
intervalDistance: 13.251, intervalDistance: 0.31570,
lng: 116.447305, lng: 116.447305,
lat: 36.32884, lat: 36.32884,
}, },
{ {
code: "K105", code: "K105",
name: "平阴收费站", name: "平阴收费站",
intervalDistance: 6.154, intervalDistance: 0.34870,
lng: 116.482042, lng: 116.482042,
lat: 36.276899, lat: 36.276899,
}, },
{ {
code: "K114", code: "K114",
name: "平阴停车区", name: "平阴停车区",
intervalDistance: 8.501, intervalDistance: 0.39507,
lng: 116.459654, lng: 116.459654,
lat: 36.204811, lat: 36.204811,
}, },
{ {
code: "K117", code: "K117",
name: "孔村枢纽", name: "孔村枢纽",
intervalDistance: 3.473, intervalDistance: 0.41359,
lng: 116.454379, lng: 116.454379,
lat: 36.173621, lat: 36.173621,
}, },
{ {
code: "K126", code: "K126",
name: "平阴南收费站", name: "平阴南收费站",
intervalDistance: 8.345, intervalDistance: 0.45869,
lng: 116.445836, lng: 116.445836,
lat: 36.100732, lat: 36.100732,
}, },
{ {
code: "K139", code: "K139",
name: "东平服务区", name: "东平服务区",
intervalDistance: 13.594, intervalDistance: 0.53240,
lng: 116.417716, lng: 116.417716,
lat: 35.984511, lat: 35.984511,
}, },
{ {
code: "K145", code: "K145",
name: "东平收费站", name: "东平收费站",
intervalDistance: 6.116, intervalDistance: 0.56570,
lng: 116.414862, lng: 116.414862,
lat: 35.930073, lat: 35.930073,
}, },
{ {
code: "K155", code: "K155",
name: "东平湖枢纽", name: "东平湖枢纽",
intervalDistance: 9.719, intervalDistance: 0.61836,
lng: 116.381047, lng: 116.381047,
lat: 35.844376, lat: 35.844376,
}, },
@ -102,41 +102,41 @@ export const actualLocationList = [
code: "K159", code: "K159",
name: "沙河停车区", name: "沙河停车区",
lng: 116.366287, lng: 116.366287,
intervalDistance: 3.504, intervalDistance: 0.63728,
lat: 35.823098, lat: 35.823098,
}, },
{ {
code: "K173", code: "K173",
name: "*梁山东收费站", name: "*梁山东收费站",
intervalDistance: 14.794, intervalDistance: 0.71743,
lng: 116.222211, lng: 116.222211,
lat: 35.684336, lat: 35.684336,
}, },
{ {
code: "K179", code: "K179",
name: "梁山收费站", name: "梁山收费站",
intervalDistance: 5.446, intervalDistance: 0.74700,
lng: 116.222163, lng: 116.222163,
lat: 35.684368, lat: 35.684368,
}, },
{ {
code: "K186", code: "K186",
name: "梁山服务区", name: "梁山服务区",
intervalDistance: 6.665, intervalDistance: 0.78302,
lng: 116.177576, lng: 116.177576,
lat: 35.638136, lat: 35.638136,
}, },
{ {
code: "K190", code: "K190",
name: "嘉祥西收费站", name: "嘉祥西收费站",
intervalDistance: 4.434, intervalDistance: 0.80721,
lng: 116.142081, lng: 116.142081,
lat: 35.610556, lat: 35.610556,
}, },
{ {
code: "K208", code: "K208",
name: "王官屯枢纽", name: "王官屯枢纽",
intervalDistance: 18.484, intervalDistance: 0.90725,
lng: 116.073032, lng: 116.073032,
lat: 35.462815, lat: 35.462815,
}, },
@ -148,7 +148,7 @@ export const canvasList = [
code: "K54+394", code: "K54+394",
line: "G3京台高速", line: "G3京台高速",
isFoot: true, isFoot: true,
distance: 171, distance: 0.08795,
}, },
{ name: "大学城收费站", code: "K59+289", distance: 50.563 }, { name: "大学城收费站", code: "K59+289", distance: 50.563 },
{ name: "长清收费站", code: "K72+847", distance: 140.05 }, { name: "长清收费站", code: "K72+847", distance: 140.05 },

41
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue
View File

@ -136,7 +136,11 @@ export default {
for (let n of nodes) { for (let n of nodes) {
const aryId = n.id.split('_') const aryId = n.id.split('_')
const distance = (Number(aryId[0].replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * window.canvasRatio + window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺
let svgWidth = window.innerWidth - 10
let roadRatio = svgWidth * 0.83736 / 154.585
// const distance = (Number(aryId[0].replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * window.canvasRatio + window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺
const distance = svgWidth * 0.06989 + (Number(aryId[0].replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * roadRatio; //K54+394 开始到K208+979计算的比例尺
if (n.data.nowBg) { if (n.data.nowBg) {
n.data.nowBg = this.getState(n.data.extNode) ? normalBg : faultBg; n.data.nowBg = this.getState(n.data.extNode) ? normalBg : faultBg;
} }
@ -385,10 +389,12 @@ export default {
window.offsetRatio = 0.0755; window.offsetRatio = 0.0755;
// 收费站/服务区标签 // 收费站/服务区标签
this.list.forEach(item => this.allInstance += item.distance); // this.list.forEach(item => this.allInstance += item.distance);
let svgWidth = window.innerWidth - 50
for (let index in this.list) { for (let index in this.list) {
const info = this.list[index]; const info = this.list[index];
info.distance = actualLocationList[index].intervalDistance * ratio; // info.distance = actualLocationList[index].intervalDistance * ratio;
info.distance = svgWidth * actualLocationList[index].intervalDistance;
await this.drawTag(info, graph); await this.drawTag(info, graph);
} }
//文字覆盖问题修复 //文字覆盖问题修复
@ -405,11 +411,12 @@ export default {
graph.getCellById("K190+495_底部文字").translate(10, 0); graph.getCellById("K190+495_底部文字").translate(10, 0);
}, },
async drayLine(text, graph, isFoot = false) { async drayLine(info, graph, isFoot = false) {
let x = this.translateX + 141; let text = info.line
let x = info.distance + 10;
const ipxDiff = window.screen.width === 3840?135:0; // const ipxDiff = window.screen.width === 3840?135:0;
x = x+ipxDiff // x = x+ipxDiff
if (isFoot) { if (isFoot) {
graph.addNode({ graph.addNode({
...rect, x: x, y: 30, height: 161 ...rect, x: x, y: 30, height: 161
@ -439,7 +446,7 @@ export default {
} }
}, },
async drawTag(info, graph) { async drawTag(info, graph) {
this.translateX += info.distance; this.translateX = info.distance;
let type = "3"; let type = "3";
if (info.name.indexOf("枢纽") !== -1) { if (info.name.indexOf("枢纽") !== -1) {
type = "0"; type = "0";
@ -449,14 +456,16 @@ export default {
type = "1"; type = "1";
} }
if (type === "0") { if (type === "0") {
await this.drayLine(info.line, graph, info.isFoot); await this.drayLine(info, graph, info.isFoot);
if (info.name === "东平湖枢纽") { if (info.name === "东平湖枢纽") {
const r = -150; const r = -150;
const nodeLine = graph.addNode({ ...rect, shape: 'rect', x: 1205, y: 2, height: 85, zIndex: 1 }); let ratio = window.innerWidth * 0.626
const nodeLine = graph.addNode({ ...rect, shape: 'rect', x: ratio, y: 2, height: 85, zIndex: 1 });
nodeLine.rotate((r * Math.PI)); nodeLine.rotate((r * Math.PI));
let test = ratio + 50
graph.addNode({ graph.addNode({
label: "S33济徐高速", x: 1275, y: 22, attrs: { label: "S33济徐高速", x: test, y: 22, attrs: {
label: { label: {
fontSize: 12, fontSize: 12,
fill: "#37B5D4", fill: "#37B5D4",
@ -470,17 +479,17 @@ export default {
const imageNode = graph.addNode({ const imageNode = graph.addNode({
shape: 'image', imageUrl: require(`./images/${info.icon || `tag${type}`}.png`), x: this.translateX, y: this.translateY, width: 21, height: 117 shape: 'image', imageUrl: require(`./images/${info.icon || `tag${type}`}.png`), x: this.translateX, y: this.translateY, width: 21, height: 117
}); });
imageNode.translate(width * 0.07, 0); // imageNode.translate(width * 0.07, 0);
const ipxDiff = window.screen.width === 3840?-10:0; // const ipxDiff = window.screen.width === 3840?-10:0;
for (var i = 0; i < info.name.length; i++) { // for (var i = 0; i < info.name.length; i++) { //
const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX+ipxDiff, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } }); const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } });
imageLabelNode.translate(width * window.offsetRatio, 50 + y); imageLabelNode.translate(10, 50 + y);
} }
// 修改文字位置 // 修改文字位置
const buttomLabelNode = graph.addNode({ label: info.code, x: this.translateX, y: 175, attrs: { text: { fill: "#ffffff", fontSize: 10.5 } }, id: info.code + "_底部文字" }); const buttomLabelNode = graph.addNode({ label: info.code, x: this.translateX, y: 175, attrs: { text: { fill: "#ffffff", fontSize: 10.5 } }, id: info.code + "_底部文字" });
buttomLabelNode.translate(width * window.offsetRatio, 0); buttomLabelNode.translate(10, 0);
}, },
loadImage(url) { loadImage(url) {

Write Preview
Loading…
Cancel
Save