Browse Source

高速缩略图 分辨率适配

develop
lau572 4 months ago
parent
commit
ca9a661605
  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

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

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

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

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

@ -136,7 +136,11 @@ export default {
for (let n of nodes) {
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) {
n.data.nowBg = this.getState(n.data.extNode) ? normalBg : faultBg;
}
@ -385,10 +389,12 @@ export default {
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) {
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);
}
//
@ -405,11 +411,12 @@ export default {
graph.getCellById("K190+495_底部文字").translate(10, 0);
},
async drayLine(text, graph, isFoot = false) {
let x = this.translateX + 141;
async drayLine(info, graph, isFoot = false) {
let text = info.line
let x = info.distance + 10;
const ipxDiff = window.screen.width === 3840?135:0;
x = x+ipxDiff
// const ipxDiff = window.screen.width === 3840?135:0;
// x = x+ipxDiff
if (isFoot) {
graph.addNode({
...rect, x: x, y: 30, height: 161
@ -439,7 +446,7 @@ export default {
}
},
async drawTag(info, graph) {
this.translateX += info.distance;
this.translateX = info.distance;
let type = "3";
if (info.name.indexOf("枢纽") !== -1) {
type = "0";
@ -449,14 +456,16 @@ export default {
type = "1";
}
if (type === "0") {
await this.drayLine(info.line, graph, info.isFoot);
await this.drayLine(info, graph, info.isFoot);
if (info.name === "东平湖枢纽") {
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));
let test = ratio + 50
graph.addNode({
label: "S33济徐高速", x: 1275, y: 22, attrs: {
label: "S33济徐高速", x: test, y: 22, attrs: {
label: {
fontSize: 12,
fill: "#37B5D4",
@ -470,17 +479,17 @@ export default {
const imageNode = graph.addNode({
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++) { //
const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX+ipxDiff, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } });
imageLabelNode.translate(width * window.offsetRatio, 50 + y);
const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } });
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 + "_底部文字" });
buttomLabelNode.translate(width * window.offsetRatio, 0);
buttomLabelNode.translate(10, 0);
},
loadImage(url) {

Loading…
Cancel
Save