diff --git a/public/config/config.json b/public/config/config.json index a1d00a8..e276d3a 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -18,6 +18,7 @@ "#FFA500", "#87CEEB", "#1E90FF", + "#00FF00", "#FF1493", "#DC143C", "#FFE4B5", @@ -29,7 +30,6 @@ "#DB7093", "#C71585", "#00BFFF", - "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", @@ -37,7 +37,17 @@ "#4169E1", "#00FA9A", "#DA70D6", - "#FF6347" + "#FF6347", + "#FF5252", + "#FF9800", + "#FFEB3B", + "#4CAF50", + "#00BCD4", + "#2196F3", + "#9C27B0", + "#E91E63", + "#FFC107", + "#8BC34A" ], "fontSize": "18px", "fontColor": "#1aa034", diff --git a/public/config/config.json b/public/config/config.json index a1d00a8..e276d3a 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -18,6 +18,7 @@ "#FFA500", "#87CEEB", "#1E90FF", + "#00FF00", "#FF1493", "#DC143C", "#FFE4B5", @@ -29,7 +30,6 @@ "#DB7093", "#C71585", "#00BFFF", - "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", @@ -37,7 +37,17 @@ "#4169E1", "#00FA9A", "#DA70D6", - "#FF6347" + "#FF6347", + "#FF5252", + "#FF9800", + "#FFEB3B", + "#4CAF50", + "#00BCD4", + "#2196F3", + "#9C27B0", + "#E91E63", + "#FFC107", + "#8BC34A" ], "fontSize": "18px", "fontColor": "#1aa034", diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue index afbada0..6476ebf 100644 --- a/src/layouts/components/Tools/index.vue +++ b/src/layouts/components/Tools/index.vue @@ -135,7 +135,7 @@ // 风险点地图地址 const mapResponse = await getDictByCode('dangermapLink') if (mapResponse && mapResponse.data && mapResponse.data.length) { - dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name}` + dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name.replace('$', ':')}/rest/login/home` } } getDict() @@ -150,7 +150,7 @@ case 'map': // 风险点地图 console.log('风险点地图跳转链接', dangerMapLink.value) // eslint-disable-next-line no-case-declarations - const tempUrl = `${dangerMapLink.value}?token=${window.localStorage.getItem('token')}` + const tempUrl = `${dangerMapLink.value}?threeToken=${window.localStorage.getItem('token')}&embedding=1` window.open(tempUrl) break } diff --git a/public/config/config.json b/public/config/config.json index a1d00a8..e276d3a 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -18,6 +18,7 @@ "#FFA500", "#87CEEB", "#1E90FF", + "#00FF00", "#FF1493", "#DC143C", "#FFE4B5", @@ -29,7 +30,6 @@ "#DB7093", "#C71585", "#00BFFF", - "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", @@ -37,7 +37,17 @@ "#4169E1", "#00FA9A", "#DA70D6", - "#FF6347" + "#FF6347", + "#FF5252", + "#FF9800", + "#FFEB3B", + "#4CAF50", + "#00BCD4", + "#2196F3", + "#9C27B0", + "#E91E63", + "#FFC107", + "#8BC34A" ], "fontSize": "18px", "fontColor": "#1aa034", diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue index afbada0..6476ebf 100644 --- a/src/layouts/components/Tools/index.vue +++ b/src/layouts/components/Tools/index.vue @@ -135,7 +135,7 @@ // 风险点地图地址 const mapResponse = await getDictByCode('dangermapLink') if (mapResponse && mapResponse.data && mapResponse.data.length) { - dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name}` + dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name.replace('$', ':')}/rest/login/home` } } getDict() @@ -150,7 +150,7 @@ case 'map': // 风险点地图 console.log('风险点地图跳转链接', dangerMapLink.value) // eslint-disable-next-line no-case-declarations - const tempUrl = `${dangerMapLink.value}?token=${window.localStorage.getItem('token')}` + const tempUrl = `${dangerMapLink.value}?threeToken=${window.localStorage.getItem('token')}&embedding=1` window.open(tempUrl) break } diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index 62810ce..b1832ea 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -52,15 +52,21 @@ ctx.beginPath() // 绘制图形边界 if (e.boundary && e.boundary.length) { // 画线 + // ctx.moveTo(e.boundary[0].x, e.boundary[0].y) + // ctx.lineTo(e.boundary[1].x, e.boundary[1].y) + // ctx.lineTo(e.boundary[2].x, e.boundary[2].y) + // ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + // ctx.lineTo(e.boundary[0].x, e.boundary[0].y) + // 支持多边形绘制 ctx.moveTo(e.boundary[0].x, e.boundary[0].y) - ctx.lineTo(e.boundary[1].x, e.boundary[1].y) - ctx.lineTo(e.boundary[2].x, e.boundary[2].y) - ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + for (let i = 1; i < e.boundary.length; i++) { + ctx.lineTo(e.boundary[i].x, e.boundary[i].y) + } ctx.lineTo(e.boundary[0].x, e.boundary[0].y) } // ---------------------------------线-------------------------------- // 获取线的颜色 - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.strokeStyle = lineColors.value[index] } else { @@ -70,7 +76,7 @@ ctx.closePath() // 闭合路径形成图形 // --------------------------------文字------------------------------- ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.fillStyle = lineColors.value[index] } else { @@ -124,93 +130,94 @@ else if (mousePos.y > props.height) { mousePos.y = props.height } - // 计算商和余数的辅助函数 - const { quotient, remainder } = divideAndModulo(pointIndex, 4) - if (props.currentDrawButton === '1') { - const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组 - const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象 + // 根据实际多边形边数计算索引 + let currentIndex = 0; + for (let i = 0; i < pointsInfo.value.length; i++) { + const polygon = pointsInfo.value[i]; + const boundaryLength = polygon.boundary.length; + if (pointIndex < currentIndex + boundaryLength) { + const remainder = pointIndex - currentIndex; + const rect = polygon.boundary; + const draggedPoint = rect[remainder]; + if (props.currentDrawButton === '1') { // 矩形拖拽 + console.log('矩形拖拽') + // 保存原始矩形的宽高（基于未拖拽前的坐标） + const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x + const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y + // 计算动态宽高（根据拖拽点和原始顶点的相对位置） + // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 + switch (remainder) { + case 0: + // 左上角顶点（x0,y0） + // 保持宽高不变，右下角顶点 = 左上角 + 宽高 + // rect[2].x = draggedPoint.x + originalWidth // 右下角x + // rect[2].y = draggedPoint.y + originalHeight // 右下角y + // 右上角顶点y与左上角相同，x为宽 + rect[1].y = draggedPoint.y + // rect[1].x = draggedPoint.x + originalWidth + // 左下角顶点x与左上角相同，y为高 + rect[3].x = draggedPoint.x + rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') + break; - // 保存原始矩形的宽高（基于未拖拽前的坐标） - const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x - const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y - // 计算动态宽高（根据拖拽点和原始顶点的相对位置） - // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 - switch (remainder) { - case 0: - // 左上角顶点（x0,y0） - // 保持宽高不变，右下角顶点 = 左上角 + 宽高 - // rect[2].x = draggedPoint.x + originalWidth // 右下角x - // rect[2].y = draggedPoint.y + originalHeight // 右下角y - // 右上角顶点y与左上角相同，x为宽 - rect[1].y = draggedPoint.y - // rect[1].x = draggedPoint.x + originalWidth - // 左下角顶点x与左上角相同，y为高 - rect[3].x = draggedPoint.x - rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') - break + case 1: // 右上角顶点（x1,y1） + // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） + // rect[3].x = draggedPoint.x - originalWidth // 左下角x + // rect[3].y = draggedPoint.y + originalHeight // 左下角y + // 左上角顶点x = 右上角x - 宽，y相同 + rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') + rect[0].y = draggedPoint.y + // 右下角顶点x相同，y = 右上角y + 高 + rect[2].x = draggedPoint.x + // rect[2].y = draggedPoint.y + originalHeight + break; - case 1: // 右上角顶点（x1,y1） - // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） - // rect[3].x = draggedPoint.x - originalWidth // 左下角x - // rect[3].y = draggedPoint.y + originalHeight // 左下角y - // 左上角顶点x = 右上角x - 宽，y相同 - rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') - rect[0].y = draggedPoint.y - // 右下角顶点x相同，y = 右上角y + 高 - rect[2].x = draggedPoint.x - // rect[2].y = draggedPoint.y + originalHeight - break + case 2: + // 右下角顶点（x2,y2） + // 保持宽高不变，左上角顶点 = 右下角 - 宽高 + // rect[0].x = draggedPoint.x - originalWidth // 左上角x + // rect[0].y = draggedPoint.y - originalHeight // 左上角y + // 右上角顶点x = 右下角x，y = 右下角y - 高 + rect[1].x = draggedPoint.x + rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 左下角顶点x = 右下角x - 宽，y相同 + // rect[3].x = draggedPoint.x - originalWidth + rect[3].y = draggedPoint.y + break; - case 2: - // 右下角顶点（x2,y2） - // 保持宽高不变，左上角顶点 = 右下角 - 宽高 - // rect[0].x = draggedPoint.x - originalWidth // 左上角x - // rect[0].y = draggedPoint.y - originalHeight // 左上角y - // 右上角顶点x = 右下角x，y = 右下角y - 高 - rect[1].x = draggedPoint.x - rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 左下角顶点x = 右下角x - 宽，y相同 - // rect[3].x = draggedPoint.x - originalWidth - rect[3].y = draggedPoint.y - break + case 3: + // 左下角顶点（x3,y3） + // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） + // rect[1].x = draggedPoint.x + originalWidth // 右上角x + // rect[1].y = draggedPoint.y - originalHeight // 右上角y + // 左上角顶点y = 左下角y - 高，x相同 + rect[0].x = draggedPoint.x + rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 右下角顶点x = 左下角x + 宽，y相同 + rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') + rect[2].y = draggedPoint.y + break; + } - case 3: - // 左下角顶点（x3,y3） - // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） - // rect[1].x = draggedPoint.x + originalWidth // 右上角x - // rect[1].y = draggedPoint.y - originalHeight // 右上角y - // 左上角顶点y = 左下角y - 高，x相同 - rect[0].x = draggedPoint.x - rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 右下角顶点x = 左下角x + 宽，y相同 - rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') - rect[2].y = draggedPoint.y - break + // 更新坐标（注意：顶点对象是引用类型，直接修改即可） + // 无需重新赋值数组，直接修改对象属性保证响应式 + draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 + draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 + + // 限制拖拽点在画布内 + } else { // 多边形拖拽 + console.log('-----修改-----', pointsInfo.value) + polygon.boundary[remainder].x = mousePos.x + polygon.boundary[remainder].y = mousePos.y + } + break; } - - // 更新坐标（注意：顶点对象是引用类型，直接修改即可） - // 无需重新赋值数组，直接修改对象属性保证响应式 - draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 - draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 - - // 限制拖拽点在画布内 - } - else { - pointsInfo.value[quotient].boundary[remainder].x = mousePos.x - pointsInfo.value[quotient].boundary[remainder].y = mousePos.y + currentIndex += boundaryLength; } draw() } - function divideAndModulo(dividend: number, divisor: number) { - const quotient = Math.floor(dividend / divisor) // 求商 - const remainder = dividend % divisor // 求余数 - return { - quotient, - remainder, - } - } // 为每个点添加拖拽事件监听器 function addDragEvents() { if (props.dialogStatus === 'detail') { @@ -356,7 +363,7 @@ 'top': `${item.y - 5}px`, 'left': `${item.x - 5}px`, // '--lineColor': lineColor, - '--lineColor': lineColors.length ? lineColors[indexOut] : lineColor, + '--lineColor': lineColors.length && indexOut < lineColors.length ? lineColors[indexOut] : lineColor, }" /> diff --git a/public/config/config.json b/public/config/config.json index a1d00a8..e276d3a 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -18,6 +18,7 @@ "#FFA500", "#87CEEB", "#1E90FF", + "#00FF00", "#FF1493", "#DC143C", "#FFE4B5", @@ -29,7 +30,6 @@ "#DB7093", "#C71585", "#00BFFF", - "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", @@ -37,7 +37,17 @@ "#4169E1", "#00FA9A", "#DA70D6", - "#FF6347" + "#FF6347", + "#FF5252", + "#FF9800", + "#FFEB3B", + "#4CAF50", + "#00BCD4", + "#2196F3", + "#9C27B0", + "#E91E63", + "#FFC107", + "#8BC34A" ], "fontSize": "18px", "fontColor": "#1aa034", diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue index afbada0..6476ebf 100644 --- a/src/layouts/components/Tools/index.vue +++ b/src/layouts/components/Tools/index.vue @@ -135,7 +135,7 @@ // 风险点地图地址 const mapResponse = await getDictByCode('dangermapLink') if (mapResponse && mapResponse.data && mapResponse.data.length) { - dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name}` + dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name.replace('$', ':')}/rest/login/home` } } getDict() @@ -150,7 +150,7 @@ case 'map': // 风险点地图 console.log('风险点地图跳转链接', dangerMapLink.value) // eslint-disable-next-line no-case-declarations - const tempUrl = `${dangerMapLink.value}?token=${window.localStorage.getItem('token')}` + const tempUrl = `${dangerMapLink.value}?threeToken=${window.localStorage.getItem('token')}&embedding=1` window.open(tempUrl) break } diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index 62810ce..b1832ea 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -52,15 +52,21 @@ ctx.beginPath() // 绘制图形边界 if (e.boundary && e.boundary.length) { // 画线 + // ctx.moveTo(e.boundary[0].x, e.boundary[0].y) + // ctx.lineTo(e.boundary[1].x, e.boundary[1].y) + // ctx.lineTo(e.boundary[2].x, e.boundary[2].y) + // ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + // ctx.lineTo(e.boundary[0].x, e.boundary[0].y) + // 支持多边形绘制 ctx.moveTo(e.boundary[0].x, e.boundary[0].y) - ctx.lineTo(e.boundary[1].x, e.boundary[1].y) - ctx.lineTo(e.boundary[2].x, e.boundary[2].y) - ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + for (let i = 1; i < e.boundary.length; i++) { + ctx.lineTo(e.boundary[i].x, e.boundary[i].y) + } ctx.lineTo(e.boundary[0].x, e.boundary[0].y) } // ---------------------------------线-------------------------------- // 获取线的颜色 - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.strokeStyle = lineColors.value[index] } else { @@ -70,7 +76,7 @@ ctx.closePath() // 闭合路径形成图形 // --------------------------------文字------------------------------- ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.fillStyle = lineColors.value[index] } else { @@ -124,93 +130,94 @@ else if (mousePos.y > props.height) { mousePos.y = props.height } - // 计算商和余数的辅助函数 - const { quotient, remainder } = divideAndModulo(pointIndex, 4) - if (props.currentDrawButton === '1') { - const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组 - const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象 + // 根据实际多边形边数计算索引 + let currentIndex = 0; + for (let i = 0; i < pointsInfo.value.length; i++) { + const polygon = pointsInfo.value[i]; + const boundaryLength = polygon.boundary.length; + if (pointIndex < currentIndex + boundaryLength) { + const remainder = pointIndex - currentIndex; + const rect = polygon.boundary; + const draggedPoint = rect[remainder]; + if (props.currentDrawButton === '1') { // 矩形拖拽 + console.log('矩形拖拽') + // 保存原始矩形的宽高（基于未拖拽前的坐标） + const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x + const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y + // 计算动态宽高（根据拖拽点和原始顶点的相对位置） + // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 + switch (remainder) { + case 0: + // 左上角顶点（x0,y0） + // 保持宽高不变，右下角顶点 = 左上角 + 宽高 + // rect[2].x = draggedPoint.x + originalWidth // 右下角x + // rect[2].y = draggedPoint.y + originalHeight // 右下角y + // 右上角顶点y与左上角相同，x为宽 + rect[1].y = draggedPoint.y + // rect[1].x = draggedPoint.x + originalWidth + // 左下角顶点x与左上角相同，y为高 + rect[3].x = draggedPoint.x + rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') + break; - // 保存原始矩形的宽高（基于未拖拽前的坐标） - const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x - const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y - // 计算动态宽高（根据拖拽点和原始顶点的相对位置） - // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 - switch (remainder) { - case 0: - // 左上角顶点（x0,y0） - // 保持宽高不变，右下角顶点 = 左上角 + 宽高 - // rect[2].x = draggedPoint.x + originalWidth // 右下角x - // rect[2].y = draggedPoint.y + originalHeight // 右下角y - // 右上角顶点y与左上角相同，x为宽 - rect[1].y = draggedPoint.y - // rect[1].x = draggedPoint.x + originalWidth - // 左下角顶点x与左上角相同，y为高 - rect[3].x = draggedPoint.x - rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') - break + case 1: // 右上角顶点（x1,y1） + // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） + // rect[3].x = draggedPoint.x - originalWidth // 左下角x + // rect[3].y = draggedPoint.y + originalHeight // 左下角y + // 左上角顶点x = 右上角x - 宽，y相同 + rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') + rect[0].y = draggedPoint.y + // 右下角顶点x相同，y = 右上角y + 高 + rect[2].x = draggedPoint.x + // rect[2].y = draggedPoint.y + originalHeight + break; - case 1: // 右上角顶点（x1,y1） - // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） - // rect[3].x = draggedPoint.x - originalWidth // 左下角x - // rect[3].y = draggedPoint.y + originalHeight // 左下角y - // 左上角顶点x = 右上角x - 宽，y相同 - rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') - rect[0].y = draggedPoint.y - // 右下角顶点x相同，y = 右上角y + 高 - rect[2].x = draggedPoint.x - // rect[2].y = draggedPoint.y + originalHeight - break + case 2: + // 右下角顶点（x2,y2） + // 保持宽高不变，左上角顶点 = 右下角 - 宽高 + // rect[0].x = draggedPoint.x - originalWidth // 左上角x + // rect[0].y = draggedPoint.y - originalHeight // 左上角y + // 右上角顶点x = 右下角x，y = 右下角y - 高 + rect[1].x = draggedPoint.x + rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 左下角顶点x = 右下角x - 宽，y相同 + // rect[3].x = draggedPoint.x - originalWidth + rect[3].y = draggedPoint.y + break; - case 2: - // 右下角顶点（x2,y2） - // 保持宽高不变，左上角顶点 = 右下角 - 宽高 - // rect[0].x = draggedPoint.x - originalWidth // 左上角x - // rect[0].y = draggedPoint.y - originalHeight // 左上角y - // 右上角顶点x = 右下角x，y = 右下角y - 高 - rect[1].x = draggedPoint.x - rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 左下角顶点x = 右下角x - 宽，y相同 - // rect[3].x = draggedPoint.x - originalWidth - rect[3].y = draggedPoint.y - break + case 3: + // 左下角顶点（x3,y3） + // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） + // rect[1].x = draggedPoint.x + originalWidth // 右上角x + // rect[1].y = draggedPoint.y - originalHeight // 右上角y + // 左上角顶点y = 左下角y - 高，x相同 + rect[0].x = draggedPoint.x + rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 右下角顶点x = 左下角x + 宽，y相同 + rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') + rect[2].y = draggedPoint.y + break; + } - case 3: - // 左下角顶点（x3,y3） - // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） - // rect[1].x = draggedPoint.x + originalWidth // 右上角x - // rect[1].y = draggedPoint.y - originalHeight // 右上角y - // 左上角顶点y = 左下角y - 高，x相同 - rect[0].x = draggedPoint.x - rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 右下角顶点x = 左下角x + 宽，y相同 - rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') - rect[2].y = draggedPoint.y - break + // 更新坐标（注意：顶点对象是引用类型，直接修改即可） + // 无需重新赋值数组，直接修改对象属性保证响应式 + draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 + draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 + + // 限制拖拽点在画布内 + } else { // 多边形拖拽 + console.log('-----修改-----', pointsInfo.value) + polygon.boundary[remainder].x = mousePos.x + polygon.boundary[remainder].y = mousePos.y + } + break; } - - // 更新坐标（注意：顶点对象是引用类型，直接修改即可） - // 无需重新赋值数组，直接修改对象属性保证响应式 - draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 - draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 - - // 限制拖拽点在画布内 - } - else { - pointsInfo.value[quotient].boundary[remainder].x = mousePos.x - pointsInfo.value[quotient].boundary[remainder].y = mousePos.y + currentIndex += boundaryLength; } draw() } - function divideAndModulo(dividend: number, divisor: number) { - const quotient = Math.floor(dividend / divisor) // 求商 - const remainder = dividend % divisor // 求余数 - return { - quotient, - remainder, - } - } // 为每个点添加拖拽事件监听器 function addDragEvents() { if (props.dialogStatus === 'detail') { @@ -356,7 +363,7 @@ 'top': `${item.y - 5}px`, 'left': `${item.x - 5}px`, // '--lineColor': lineColor, - '--lineColor': lineColors.length ? lineColors[indexOut] : lineColor, + '--lineColor': lineColors.length && indexOut < lineColors.length ? lineColors[indexOut] : lineColor, }" /> diff --git "a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" new file mode 100644 index 0000000..d30474a --- /dev/null +++ "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" @@ -0,0 +1,374 @@ + + + + + diff --git a/public/config/config.json b/public/config/config.json index a1d00a8..e276d3a 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -18,6 +18,7 @@ "#FFA500", "#87CEEB", "#1E90FF", + "#00FF00", "#FF1493", "#DC143C", "#FFE4B5", @@ -29,7 +30,6 @@ "#DB7093", "#C71585", "#00BFFF", - "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", @@ -37,7 +37,17 @@ "#4169E1", "#00FA9A", "#DA70D6", - "#FF6347" + "#FF6347", + "#FF5252", + "#FF9800", + "#FFEB3B", + "#4CAF50", + "#00BCD4", + "#2196F3", + "#9C27B0", + "#E91E63", + "#FFC107", + "#8BC34A" ], "fontSize": "18px", "fontColor": "#1aa034", diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue index afbada0..6476ebf 100644 --- a/src/layouts/components/Tools/index.vue +++ b/src/layouts/components/Tools/index.vue @@ -135,7 +135,7 @@ // 风险点地图地址 const mapResponse = await getDictByCode('dangermapLink') if (mapResponse && mapResponse.data && mapResponse.data.length) { - dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name}` + dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name.replace('$', ':')}/rest/login/home` } } getDict() @@ -150,7 +150,7 @@ case 'map': // 风险点地图 console.log('风险点地图跳转链接', dangerMapLink.value) // eslint-disable-next-line no-case-declarations - const tempUrl = `${dangerMapLink.value}?token=${window.localStorage.getItem('token')}` + const tempUrl = `${dangerMapLink.value}?threeToken=${window.localStorage.getItem('token')}&embedding=1` window.open(tempUrl) break } diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index 62810ce..b1832ea 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -52,15 +52,21 @@ ctx.beginPath() // 绘制图形边界 if (e.boundary && e.boundary.length) { // 画线 + // ctx.moveTo(e.boundary[0].x, e.boundary[0].y) + // ctx.lineTo(e.boundary[1].x, e.boundary[1].y) + // ctx.lineTo(e.boundary[2].x, e.boundary[2].y) + // ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + // ctx.lineTo(e.boundary[0].x, e.boundary[0].y) + // 支持多边形绘制 ctx.moveTo(e.boundary[0].x, e.boundary[0].y) - ctx.lineTo(e.boundary[1].x, e.boundary[1].y) - ctx.lineTo(e.boundary[2].x, e.boundary[2].y) - ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + for (let i = 1; i < e.boundary.length; i++) { + ctx.lineTo(e.boundary[i].x, e.boundary[i].y) + } ctx.lineTo(e.boundary[0].x, e.boundary[0].y) } // ---------------------------------线-------------------------------- // 获取线的颜色 - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.strokeStyle = lineColors.value[index] } else { @@ -70,7 +76,7 @@ ctx.closePath() // 闭合路径形成图形 // --------------------------------文字------------------------------- ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.fillStyle = lineColors.value[index] } else { @@ -124,93 +130,94 @@ else if (mousePos.y > props.height) { mousePos.y = props.height } - // 计算商和余数的辅助函数 - const { quotient, remainder } = divideAndModulo(pointIndex, 4) - if (props.currentDrawButton === '1') { - const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组 - const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象 + // 根据实际多边形边数计算索引 + let currentIndex = 0; + for (let i = 0; i < pointsInfo.value.length; i++) { + const polygon = pointsInfo.value[i]; + const boundaryLength = polygon.boundary.length; + if (pointIndex < currentIndex + boundaryLength) { + const remainder = pointIndex - currentIndex; + const rect = polygon.boundary; + const draggedPoint = rect[remainder]; + if (props.currentDrawButton === '1') { // 矩形拖拽 + console.log('矩形拖拽') + // 保存原始矩形的宽高（基于未拖拽前的坐标） + const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x + const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y + // 计算动态宽高（根据拖拽点和原始顶点的相对位置） + // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 + switch (remainder) { + case 0: + // 左上角顶点（x0,y0） + // 保持宽高不变，右下角顶点 = 左上角 + 宽高 + // rect[2].x = draggedPoint.x + originalWidth // 右下角x + // rect[2].y = draggedPoint.y + originalHeight // 右下角y + // 右上角顶点y与左上角相同，x为宽 + rect[1].y = draggedPoint.y + // rect[1].x = draggedPoint.x + originalWidth + // 左下角顶点x与左上角相同，y为高 + rect[3].x = draggedPoint.x + rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') + break; - // 保存原始矩形的宽高（基于未拖拽前的坐标） - const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x - const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y - // 计算动态宽高（根据拖拽点和原始顶点的相对位置） - // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 - switch (remainder) { - case 0: - // 左上角顶点（x0,y0） - // 保持宽高不变，右下角顶点 = 左上角 + 宽高 - // rect[2].x = draggedPoint.x + originalWidth // 右下角x - // rect[2].y = draggedPoint.y + originalHeight // 右下角y - // 右上角顶点y与左上角相同，x为宽 - rect[1].y = draggedPoint.y - // rect[1].x = draggedPoint.x + originalWidth - // 左下角顶点x与左上角相同，y为高 - rect[3].x = draggedPoint.x - rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') - break + case 1: // 右上角顶点（x1,y1） + // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） + // rect[3].x = draggedPoint.x - originalWidth // 左下角x + // rect[3].y = draggedPoint.y + originalHeight // 左下角y + // 左上角顶点x = 右上角x - 宽，y相同 + rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') + rect[0].y = draggedPoint.y + // 右下角顶点x相同，y = 右上角y + 高 + rect[2].x = draggedPoint.x + // rect[2].y = draggedPoint.y + originalHeight + break; - case 1: // 右上角顶点（x1,y1） - // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） - // rect[3].x = draggedPoint.x - originalWidth // 左下角x - // rect[3].y = draggedPoint.y + originalHeight // 左下角y - // 左上角顶点x = 右上角x - 宽，y相同 - rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') - rect[0].y = draggedPoint.y - // 右下角顶点x相同，y = 右上角y + 高 - rect[2].x = draggedPoint.x - // rect[2].y = draggedPoint.y + originalHeight - break + case 2: + // 右下角顶点（x2,y2） + // 保持宽高不变，左上角顶点 = 右下角 - 宽高 + // rect[0].x = draggedPoint.x - originalWidth // 左上角x + // rect[0].y = draggedPoint.y - originalHeight // 左上角y + // 右上角顶点x = 右下角x，y = 右下角y - 高 + rect[1].x = draggedPoint.x + rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 左下角顶点x = 右下角x - 宽，y相同 + // rect[3].x = draggedPoint.x - originalWidth + rect[3].y = draggedPoint.y + break; - case 2: - // 右下角顶点（x2,y2） - // 保持宽高不变，左上角顶点 = 右下角 - 宽高 - // rect[0].x = draggedPoint.x - originalWidth // 左上角x - // rect[0].y = draggedPoint.y - originalHeight // 左上角y - // 右上角顶点x = 右下角x，y = 右下角y - 高 - rect[1].x = draggedPoint.x - rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 左下角顶点x = 右下角x - 宽，y相同 - // rect[3].x = draggedPoint.x - originalWidth - rect[3].y = draggedPoint.y - break + case 3: + // 左下角顶点（x3,y3） + // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） + // rect[1].x = draggedPoint.x + originalWidth // 右上角x + // rect[1].y = draggedPoint.y - originalHeight // 右上角y + // 左上角顶点y = 左下角y - 高，x相同 + rect[0].x = draggedPoint.x + rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 右下角顶点x = 左下角x + 宽，y相同 + rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') + rect[2].y = draggedPoint.y + break; + } - case 3: - // 左下角顶点（x3,y3） - // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） - // rect[1].x = draggedPoint.x + originalWidth // 右上角x - // rect[1].y = draggedPoint.y - originalHeight // 右上角y - // 左上角顶点y = 左下角y - 高，x相同 - rect[0].x = draggedPoint.x - rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 右下角顶点x = 左下角x + 宽，y相同 - rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') - rect[2].y = draggedPoint.y - break + // 更新坐标（注意：顶点对象是引用类型，直接修改即可） + // 无需重新赋值数组，直接修改对象属性保证响应式 + draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 + draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 + + // 限制拖拽点在画布内 + } else { // 多边形拖拽 + console.log('-----修改-----', pointsInfo.value) + polygon.boundary[remainder].x = mousePos.x + polygon.boundary[remainder].y = mousePos.y + } + break; } - - // 更新坐标（注意：顶点对象是引用类型，直接修改即可） - // 无需重新赋值数组，直接修改对象属性保证响应式 - draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 - draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 - - // 限制拖拽点在画布内 - } - else { - pointsInfo.value[quotient].boundary[remainder].x = mousePos.x - pointsInfo.value[quotient].boundary[remainder].y = mousePos.y + currentIndex += boundaryLength; } draw() } - function divideAndModulo(dividend: number, divisor: number) { - const quotient = Math.floor(dividend / divisor) // 求商 - const remainder = dividend % divisor // 求余数 - return { - quotient, - remainder, - } - } // 为每个点添加拖拽事件监听器 function addDragEvents() { if (props.dialogStatus === 'detail') { @@ -356,7 +363,7 @@ 'top': `${item.y - 5}px`, 'left': `${item.x - 5}px`, // '--lineColor': lineColor, - '--lineColor': lineColors.length ? lineColors[indexOut] : lineColor, + '--lineColor': lineColors.length && indexOut < lineColors.length ? lineColors[indexOut] : lineColor, }" /> diff --git "a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" new file mode 100644 index 0000000..d30474a --- /dev/null +++ "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" @@ -0,0 +1,374 @@ + + + + + diff --git "a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" new file mode 100644 index 0000000..62810ce --- /dev/null +++ "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" @@ -0,0 +1,414 @@ + + + + + diff --git a/public/config/config.json b/public/config/config.json index a1d00a8..e276d3a 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -18,6 +18,7 @@ "#FFA500", "#87CEEB", "#1E90FF", + "#00FF00", "#FF1493", "#DC143C", "#FFE4B5", @@ -29,7 +30,6 @@ "#DB7093", "#C71585", "#00BFFF", - "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", @@ -37,7 +37,17 @@ "#4169E1", "#00FA9A", "#DA70D6", - "#FF6347" + "#FF6347", + "#FF5252", + "#FF9800", + "#FFEB3B", + "#4CAF50", + "#00BCD4", + "#2196F3", + "#9C27B0", + "#E91E63", + "#FFC107", + "#8BC34A" ], "fontSize": "18px", "fontColor": "#1aa034", diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue index afbada0..6476ebf 100644 --- a/src/layouts/components/Tools/index.vue +++ b/src/layouts/components/Tools/index.vue @@ -135,7 +135,7 @@ // 风险点地图地址 const mapResponse = await getDictByCode('dangermapLink') if (mapResponse && mapResponse.data && mapResponse.data.length) { - dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name}` + dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name.replace('$', ':')}/rest/login/home` } } getDict() @@ -150,7 +150,7 @@ case 'map': // 风险点地图 console.log('风险点地图跳转链接', dangerMapLink.value) // eslint-disable-next-line no-case-declarations - const tempUrl = `${dangerMapLink.value}?token=${window.localStorage.getItem('token')}` + const tempUrl = `${dangerMapLink.value}?threeToken=${window.localStorage.getItem('token')}&embedding=1` window.open(tempUrl) break } diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index 62810ce..b1832ea 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -52,15 +52,21 @@ ctx.beginPath() // 绘制图形边界 if (e.boundary && e.boundary.length) { // 画线 + // ctx.moveTo(e.boundary[0].x, e.boundary[0].y) + // ctx.lineTo(e.boundary[1].x, e.boundary[1].y) + // ctx.lineTo(e.boundary[2].x, e.boundary[2].y) + // ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + // ctx.lineTo(e.boundary[0].x, e.boundary[0].y) + // 支持多边形绘制 ctx.moveTo(e.boundary[0].x, e.boundary[0].y) - ctx.lineTo(e.boundary[1].x, e.boundary[1].y) - ctx.lineTo(e.boundary[2].x, e.boundary[2].y) - ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + for (let i = 1; i < e.boundary.length; i++) { + ctx.lineTo(e.boundary[i].x, e.boundary[i].y) + } ctx.lineTo(e.boundary[0].x, e.boundary[0].y) } // ---------------------------------线-------------------------------- // 获取线的颜色 - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.strokeStyle = lineColors.value[index] } else { @@ -70,7 +76,7 @@ ctx.closePath() // 闭合路径形成图形 // --------------------------------文字------------------------------- ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.fillStyle = lineColors.value[index] } else { @@ -124,93 +130,94 @@ else if (mousePos.y > props.height) { mousePos.y = props.height } - // 计算商和余数的辅助函数 - const { quotient, remainder } = divideAndModulo(pointIndex, 4) - if (props.currentDrawButton === '1') { - const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组 - const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象 + // 根据实际多边形边数计算索引 + let currentIndex = 0; + for (let i = 0; i < pointsInfo.value.length; i++) { + const polygon = pointsInfo.value[i]; + const boundaryLength = polygon.boundary.length; + if (pointIndex < currentIndex + boundaryLength) { + const remainder = pointIndex - currentIndex; + const rect = polygon.boundary; + const draggedPoint = rect[remainder]; + if (props.currentDrawButton === '1') { // 矩形拖拽 + console.log('矩形拖拽') + // 保存原始矩形的宽高（基于未拖拽前的坐标） + const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x + const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y + // 计算动态宽高（根据拖拽点和原始顶点的相对位置） + // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 + switch (remainder) { + case 0: + // 左上角顶点（x0,y0） + // 保持宽高不变，右下角顶点 = 左上角 + 宽高 + // rect[2].x = draggedPoint.x + originalWidth // 右下角x + // rect[2].y = draggedPoint.y + originalHeight // 右下角y + // 右上角顶点y与左上角相同，x为宽 + rect[1].y = draggedPoint.y + // rect[1].x = draggedPoint.x + originalWidth + // 左下角顶点x与左上角相同，y为高 + rect[3].x = draggedPoint.x + rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') + break; - // 保存原始矩形的宽高（基于未拖拽前的坐标） - const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x - const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y - // 计算动态宽高（根据拖拽点和原始顶点的相对位置） - // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 - switch (remainder) { - case 0: - // 左上角顶点（x0,y0） - // 保持宽高不变，右下角顶点 = 左上角 + 宽高 - // rect[2].x = draggedPoint.x + originalWidth // 右下角x - // rect[2].y = draggedPoint.y + originalHeight // 右下角y - // 右上角顶点y与左上角相同，x为宽 - rect[1].y = draggedPoint.y - // rect[1].x = draggedPoint.x + originalWidth - // 左下角顶点x与左上角相同，y为高 - rect[3].x = draggedPoint.x - rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') - break + case 1: // 右上角顶点（x1,y1） + // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） + // rect[3].x = draggedPoint.x - originalWidth // 左下角x + // rect[3].y = draggedPoint.y + originalHeight // 左下角y + // 左上角顶点x = 右上角x - 宽，y相同 + rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') + rect[0].y = draggedPoint.y + // 右下角顶点x相同，y = 右上角y + 高 + rect[2].x = draggedPoint.x + // rect[2].y = draggedPoint.y + originalHeight + break; - case 1: // 右上角顶点（x1,y1） - // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） - // rect[3].x = draggedPoint.x - originalWidth // 左下角x - // rect[3].y = draggedPoint.y + originalHeight // 左下角y - // 左上角顶点x = 右上角x - 宽，y相同 - rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') - rect[0].y = draggedPoint.y - // 右下角顶点x相同，y = 右上角y + 高 - rect[2].x = draggedPoint.x - // rect[2].y = draggedPoint.y + originalHeight - break + case 2: + // 右下角顶点（x2,y2） + // 保持宽高不变，左上角顶点 = 右下角 - 宽高 + // rect[0].x = draggedPoint.x - originalWidth // 左上角x + // rect[0].y = draggedPoint.y - originalHeight // 左上角y + // 右上角顶点x = 右下角x，y = 右下角y - 高 + rect[1].x = draggedPoint.x + rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 左下角顶点x = 右下角x - 宽，y相同 + // rect[3].x = draggedPoint.x - originalWidth + rect[3].y = draggedPoint.y + break; - case 2: - // 右下角顶点（x2,y2） - // 保持宽高不变，左上角顶点 = 右下角 - 宽高 - // rect[0].x = draggedPoint.x - originalWidth // 左上角x - // rect[0].y = draggedPoint.y - originalHeight // 左上角y - // 右上角顶点x = 右下角x，y = 右下角y - 高 - rect[1].x = draggedPoint.x - rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 左下角顶点x = 右下角x - 宽，y相同 - // rect[3].x = draggedPoint.x - originalWidth - rect[3].y = draggedPoint.y - break + case 3: + // 左下角顶点（x3,y3） + // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） + // rect[1].x = draggedPoint.x + originalWidth // 右上角x + // rect[1].y = draggedPoint.y - originalHeight // 右上角y + // 左上角顶点y = 左下角y - 高，x相同 + rect[0].x = draggedPoint.x + rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 右下角顶点x = 左下角x + 宽，y相同 + rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') + rect[2].y = draggedPoint.y + break; + } - case 3: - // 左下角顶点（x3,y3） - // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） - // rect[1].x = draggedPoint.x + originalWidth // 右上角x - // rect[1].y = draggedPoint.y - originalHeight // 右上角y - // 左上角顶点y = 左下角y - 高，x相同 - rect[0].x = draggedPoint.x - rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 右下角顶点x = 左下角x + 宽，y相同 - rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') - rect[2].y = draggedPoint.y - break + // 更新坐标（注意：顶点对象是引用类型，直接修改即可） + // 无需重新赋值数组，直接修改对象属性保证响应式 + draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 + draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 + + // 限制拖拽点在画布内 + } else { // 多边形拖拽 + console.log('-----修改-----', pointsInfo.value) + polygon.boundary[remainder].x = mousePos.x + polygon.boundary[remainder].y = mousePos.y + } + break; } - - // 更新坐标（注意：顶点对象是引用类型，直接修改即可） - // 无需重新赋值数组，直接修改对象属性保证响应式 - draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 - draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 - - // 限制拖拽点在画布内 - } - else { - pointsInfo.value[quotient].boundary[remainder].x = mousePos.x - pointsInfo.value[quotient].boundary[remainder].y = mousePos.y + currentIndex += boundaryLength; } draw() } - function divideAndModulo(dividend: number, divisor: number) { - const quotient = Math.floor(dividend / divisor) // 求商 - const remainder = dividend % divisor // 求余数 - return { - quotient, - remainder, - } - } // 为每个点添加拖拽事件监听器 function addDragEvents() { if (props.dialogStatus === 'detail') { @@ -356,7 +363,7 @@ 'top': `${item.y - 5}px`, 'left': `${item.x - 5}px`, // '--lineColor': lineColor, - '--lineColor': lineColors.length ? lineColors[indexOut] : lineColor, + '--lineColor': lineColors.length && indexOut < lineColors.length ? lineColors[indexOut] : lineColor, }" /> diff --git "a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" new file mode 100644 index 0000000..d30474a --- /dev/null +++ "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" @@ -0,0 +1,374 @@ + + + + + diff --git "a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" new file mode 100644 index 0000000..62810ce --- /dev/null +++ "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" @@ -0,0 +1,414 @@ + + + + + diff --git a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak.vue b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak.vue deleted file mode 100644 index d30474a..0000000 --- a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak.vue +++ /dev/null @@ -1,374 +0,0 @@ - - - - - diff --git a/public/config/config.json b/public/config/config.json index a1d00a8..e276d3a 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -18,6 +18,7 @@ "#FFA500", "#87CEEB", "#1E90FF", + "#00FF00", "#FF1493", "#DC143C", "#FFE4B5", @@ -29,7 +30,6 @@ "#DB7093", "#C71585", "#00BFFF", - "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", @@ -37,7 +37,17 @@ "#4169E1", "#00FA9A", "#DA70D6", - "#FF6347" + "#FF6347", + "#FF5252", + "#FF9800", + "#FFEB3B", + "#4CAF50", + "#00BCD4", + "#2196F3", + "#9C27B0", + "#E91E63", + "#FFC107", + "#8BC34A" ], "fontSize": "18px", "fontColor": "#1aa034", diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue index afbada0..6476ebf 100644 --- a/src/layouts/components/Tools/index.vue +++ b/src/layouts/components/Tools/index.vue @@ -135,7 +135,7 @@ // 风险点地图地址 const mapResponse = await getDictByCode('dangermapLink') if (mapResponse && mapResponse.data && mapResponse.data.length) { - dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name}` + dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name.replace('$', ':')}/rest/login/home` } } getDict() @@ -150,7 +150,7 @@ case 'map': // 风险点地图 console.log('风险点地图跳转链接', dangerMapLink.value) // eslint-disable-next-line no-case-declarations - const tempUrl = `${dangerMapLink.value}?token=${window.localStorage.getItem('token')}` + const tempUrl = `${dangerMapLink.value}?threeToken=${window.localStorage.getItem('token')}&embedding=1` window.open(tempUrl) break } diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index 62810ce..b1832ea 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -52,15 +52,21 @@ ctx.beginPath() // 绘制图形边界 if (e.boundary && e.boundary.length) { // 画线 + // ctx.moveTo(e.boundary[0].x, e.boundary[0].y) + // ctx.lineTo(e.boundary[1].x, e.boundary[1].y) + // ctx.lineTo(e.boundary[2].x, e.boundary[2].y) + // ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + // ctx.lineTo(e.boundary[0].x, e.boundary[0].y) + // 支持多边形绘制 ctx.moveTo(e.boundary[0].x, e.boundary[0].y) - ctx.lineTo(e.boundary[1].x, e.boundary[1].y) - ctx.lineTo(e.boundary[2].x, e.boundary[2].y) - ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + for (let i = 1; i < e.boundary.length; i++) { + ctx.lineTo(e.boundary[i].x, e.boundary[i].y) + } ctx.lineTo(e.boundary[0].x, e.boundary[0].y) } // ---------------------------------线-------------------------------- // 获取线的颜色 - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.strokeStyle = lineColors.value[index] } else { @@ -70,7 +76,7 @@ ctx.closePath() // 闭合路径形成图形 // --------------------------------文字------------------------------- ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.fillStyle = lineColors.value[index] } else { @@ -124,93 +130,94 @@ else if (mousePos.y > props.height) { mousePos.y = props.height } - // 计算商和余数的辅助函数 - const { quotient, remainder } = divideAndModulo(pointIndex, 4) - if (props.currentDrawButton === '1') { - const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组 - const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象 + // 根据实际多边形边数计算索引 + let currentIndex = 0; + for (let i = 0; i < pointsInfo.value.length; i++) { + const polygon = pointsInfo.value[i]; + const boundaryLength = polygon.boundary.length; + if (pointIndex < currentIndex + boundaryLength) { + const remainder = pointIndex - currentIndex; + const rect = polygon.boundary; + const draggedPoint = rect[remainder]; + if (props.currentDrawButton === '1') { // 矩形拖拽 + console.log('矩形拖拽') + // 保存原始矩形的宽高（基于未拖拽前的坐标） + const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x + const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y + // 计算动态宽高（根据拖拽点和原始顶点的相对位置） + // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 + switch (remainder) { + case 0: + // 左上角顶点（x0,y0） + // 保持宽高不变，右下角顶点 = 左上角 + 宽高 + // rect[2].x = draggedPoint.x + originalWidth // 右下角x + // rect[2].y = draggedPoint.y + originalHeight // 右下角y + // 右上角顶点y与左上角相同，x为宽 + rect[1].y = draggedPoint.y + // rect[1].x = draggedPoint.x + originalWidth + // 左下角顶点x与左上角相同，y为高 + rect[3].x = draggedPoint.x + rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') + break; - // 保存原始矩形的宽高（基于未拖拽前的坐标） - const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x - const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y - // 计算动态宽高（根据拖拽点和原始顶点的相对位置） - // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 - switch (remainder) { - case 0: - // 左上角顶点（x0,y0） - // 保持宽高不变，右下角顶点 = 左上角 + 宽高 - // rect[2].x = draggedPoint.x + originalWidth // 右下角x - // rect[2].y = draggedPoint.y + originalHeight // 右下角y - // 右上角顶点y与左上角相同，x为宽 - rect[1].y = draggedPoint.y - // rect[1].x = draggedPoint.x + originalWidth - // 左下角顶点x与左上角相同，y为高 - rect[3].x = draggedPoint.x - rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') - break + case 1: // 右上角顶点（x1,y1） + // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） + // rect[3].x = draggedPoint.x - originalWidth // 左下角x + // rect[3].y = draggedPoint.y + originalHeight // 左下角y + // 左上角顶点x = 右上角x - 宽，y相同 + rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') + rect[0].y = draggedPoint.y + // 右下角顶点x相同，y = 右上角y + 高 + rect[2].x = draggedPoint.x + // rect[2].y = draggedPoint.y + originalHeight + break; - case 1: // 右上角顶点（x1,y1） - // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） - // rect[3].x = draggedPoint.x - originalWidth // 左下角x - // rect[3].y = draggedPoint.y + originalHeight // 左下角y - // 左上角顶点x = 右上角x - 宽，y相同 - rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') - rect[0].y = draggedPoint.y - // 右下角顶点x相同，y = 右上角y + 高 - rect[2].x = draggedPoint.x - // rect[2].y = draggedPoint.y + originalHeight - break + case 2: + // 右下角顶点（x2,y2） + // 保持宽高不变，左上角顶点 = 右下角 - 宽高 + // rect[0].x = draggedPoint.x - originalWidth // 左上角x + // rect[0].y = draggedPoint.y - originalHeight // 左上角y + // 右上角顶点x = 右下角x，y = 右下角y - 高 + rect[1].x = draggedPoint.x + rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 左下角顶点x = 右下角x - 宽，y相同 + // rect[3].x = draggedPoint.x - originalWidth + rect[3].y = draggedPoint.y + break; - case 2: - // 右下角顶点（x2,y2） - // 保持宽高不变，左上角顶点 = 右下角 - 宽高 - // rect[0].x = draggedPoint.x - originalWidth // 左上角x - // rect[0].y = draggedPoint.y - originalHeight // 左上角y - // 右上角顶点x = 右下角x，y = 右下角y - 高 - rect[1].x = draggedPoint.x - rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 左下角顶点x = 右下角x - 宽，y相同 - // rect[3].x = draggedPoint.x - originalWidth - rect[3].y = draggedPoint.y - break + case 3: + // 左下角顶点（x3,y3） + // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） + // rect[1].x = draggedPoint.x + originalWidth // 右上角x + // rect[1].y = draggedPoint.y - originalHeight // 右上角y + // 左上角顶点y = 左下角y - 高，x相同 + rect[0].x = draggedPoint.x + rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 右下角顶点x = 左下角x + 宽，y相同 + rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') + rect[2].y = draggedPoint.y + break; + } - case 3: - // 左下角顶点（x3,y3） - // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） - // rect[1].x = draggedPoint.x + originalWidth // 右上角x - // rect[1].y = draggedPoint.y - originalHeight // 右上角y - // 左上角顶点y = 左下角y - 高，x相同 - rect[0].x = draggedPoint.x - rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 右下角顶点x = 左下角x + 宽，y相同 - rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') - rect[2].y = draggedPoint.y - break + // 更新坐标（注意：顶点对象是引用类型，直接修改即可） + // 无需重新赋值数组，直接修改对象属性保证响应式 + draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 + draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 + + // 限制拖拽点在画布内 + } else { // 多边形拖拽 + console.log('-----修改-----', pointsInfo.value) + polygon.boundary[remainder].x = mousePos.x + polygon.boundary[remainder].y = mousePos.y + } + break; } - - // 更新坐标（注意：顶点对象是引用类型，直接修改即可） - // 无需重新赋值数组，直接修改对象属性保证响应式 - draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 - draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 - - // 限制拖拽点在画布内 - } - else { - pointsInfo.value[quotient].boundary[remainder].x = mousePos.x - pointsInfo.value[quotient].boundary[remainder].y = mousePos.y + currentIndex += boundaryLength; } draw() } - function divideAndModulo(dividend: number, divisor: number) { - const quotient = Math.floor(dividend / divisor) // 求商 - const remainder = dividend % divisor // 求余数 - return { - quotient, - remainder, - } - } // 为每个点添加拖拽事件监听器 function addDragEvents() { if (props.dialogStatus === 'detail') { @@ -356,7 +363,7 @@ 'top': `${item.y - 5}px`, 'left': `${item.x - 5}px`, // '--lineColor': lineColor, - '--lineColor': lineColors.length ? lineColors[indexOut] : lineColor, + '--lineColor': lineColors.length && indexOut < lineColors.length ? lineColors[indexOut] : lineColor, }" /> diff --git "a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" new file mode 100644 index 0000000..d30474a --- /dev/null +++ "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" @@ -0,0 +1,374 @@ + + + + + diff --git "a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" new file mode 100644 index 0000000..62810ce --- /dev/null +++ "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" @@ -0,0 +1,414 @@ + + + + + diff --git a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak.vue b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak.vue deleted file mode 100644 index d30474a..0000000 --- a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak.vue +++ /dev/null @@ -1,374 +0,0 @@ - - - - - diff --git a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue index 3efbdb9..e17a85b 100644 --- a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue +++ b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue @@ -29,7 +29,7 @@ const videoHeight = ref(360) const cameraIndexCode = ref('') // 设备国标号 const nvrIndexCode = ref('') // nvr国标号 -const currentDrawButton = ref('1') +const currentDrawButton = ref('2') // 显示标题 const textMap: { [key: string]: string } = { detail: '详情', @@ -313,9 +313,101 @@ const a = 1 // 0-1 return `rgba(${r}, ${g}, ${b}, ${a})` } -// 多选 + +// 初始化多边形数据 +function initPolygonData(value: string) { + let params: any = [] + if (`${formData.value.type}` === '0') { + switch (value) { + case '5': // 五边形 + params = [[ // 标记点位置 + { x: 214, y: 34 }, + { x: 149, y: 236 }, + { x: 320, y: 360 }, + { x: 491, y: 236 }, + { x: 426, y: 34 }, + ]] + break + case '6': // 六边形 + params = [[ // 标记点位置 + { x: 200, y: 100 }, // 左上点（第一个点） + { x: 440, y: 100 }, // 右上点（顶部边为水平线） + { x: 560, y: 200 }, // 右下点 + { x: 440, y: 300 }, // 右下点下方 + { x: 200, y: 300 }, // 左下点下方 + { x: 80, y: 200 }, // 左下点 + ]] + break + case '8': // 六边形 + params = [[ // 标记点位置 + { x: 180, y: 60 }, // 左上点（第一个点） + { x: 460, y: 60 }, // 右上点（顶部边水平） + { x: 540, y: 140 }, // 右上斜下点 + { x: 540, y: 240 }, // 右下点 + { x: 460, y: 320 }, // 右下斜下点（底部边水平起点） + { x: 180, y: 320 }, // 左下点（底部边水平终点） + { x: 100, y: 240 }, // 左下斜上点 + { x: 100, y: 140 }, // 左上斜上点 + ]] + break + default: + params = [[ // 标记点位置 + { x: 0, y: 0 }, + { x: 640, y: 0 }, + { x: 640, y: 360 }, + { x: 0, y: 360 }, + ]] + } + } else { // 业务场景 + switch (value) { + case '5': // 五边形 + params = [ // 标记点位置 + { x: 214, y: 34 }, + { x: 149, y: 236 }, + { x: 320, y: 360 }, + { x: 491, y: 236 }, + { x: 426, y: 34 }, + ] + break + case '6': // 六边形 + params = [ // 标记点位置 + { x: 200, y: 100 }, // 左上点（第一个点） + { x: 440, y: 100 }, // 右上点（顶部边为水平线） + { x: 560, y: 200 }, // 右下点 + { x: 440, y: 300 }, // 右下点下方 + { x: 200, y: 300 }, // 左下点下方 + { x: 80, y: 200 }, // 左下点 + ] + break + case '8': // 六边形 + params = [ // 标记点位置 + { x: 180, y: 60 }, // 左上点（第一个点） + { x: 460, y: 60 }, // 右上点（顶部边水平） + { x: 540, y: 140 }, // 右上斜下点 + { x: 540, y: 240 }, // 右下点 + { x: 460, y: 320 }, // 右下斜下点（底部边水平起点） + { x: 180, y: 320 }, // 左下点（底部边水平终点） + { x: 100, y: 240 }, // 左下斜上点 + { x: 100, y: 140 }, // 左上斜上点 + ] + break + default: + params = [ // 标记点位置 + { x: 0, y: 0 }, + { x: 640, y: 0 }, + { x: 640, y: 360 }, + { x: 0, y: 360 }, + ] + } + } + + return params +} + +// 算法-报警对象-多选选中 const selectModel = (value: any) => { console.log('监听算法报警对象的变化，更新区域绘制', value) + console.log('currentDrawButton', currentDrawButton.value) selectModelList.value = value.map((item: any) => { return { ...item, @@ -334,16 +426,7 @@ ...i, remark: i.recognitionTypeName, isUse: '1', - boundary: [ // 标记点位置 - // { x: 50, y: 50 }, - // { x: 150, y: 50 }, - // { x: 150, y: 150 }, - // { x: 50, y: 150 }, - [{ x: 0, y: 0 }, - { x: 640, y: 0 }, - { x: 640, y: 360 }, - { x: 0, y: 360 }], - ], + boundary: initPolygonData(currentDrawButton.value), } } else { @@ -552,9 +635,8 @@ let tempBoundary = [] if (row.sceneRelation.boundary) { const tempList = JSON.parse(row.sceneRelation.boundary) + currentDrawButton.value = `${tempList.length}` === '4' ? '2' : `${tempList.length}` if (`${videoHeight.value}` && `${videoWidth.value}`) { - console.log('1111111111111', tempList); - tempBoundary = calRealData(tempList, Number(videoWidth.value), Number(videoHeight.value)) } else { @@ -604,6 +686,8 @@ mediaToken.value = '' // 流媒体url mediaToken.value = '' // 设备国标号 mediaToken.value = '' // nvr国标号 + points.value = [] + currentDrawButton.value = '2' resetForm() emits('closeRefresh') } @@ -628,12 +712,7 @@ // id: points.value && points.value.length && points.value[0].id ? points.value[0].id : '', remark: sceneName, sceneId: val, - boundary: [ // 标记点位置 - { x: 0, y: 0 }, - { x: 640, y: 0 }, - { x: 640, y: 360 }, - { x: 0, y: 360 }, - ], + boundary: initPolygonData(currentDrawButton.value), }, ] } @@ -652,16 +731,11 @@ // 算法-报警对象-点击加号触发 function addBoundary(row: any) { - console.log('点击加号触发', row) + console.log('点击加号触发', row, 'currentDrawButton:', currentDrawButton.value) const index = points.value.findIndex((item: { modelId: any; recognitionTypeId: any; algoModelId: any }) => item.modelId === row.modelId && item.recognitionTypeId === row.recognitionTypeId && item.algoModelId === row.algoModelId) - const defaultBoundary = [ - { x: 0, y: 0 }, - { x: 640, y: 0 }, - { x: 640, y: 360 }, - { x: 0, y: 360 }, - ] + const defaultBoundary = initPolygonData(currentDrawButton.value) if (index !== -1) { - points.value[index].boundary.push(defaultBoundary) + points.value[index].boundary.push(defaultBoundary[0]) } } // ----------------------------------------------流媒体取流--------------------------------------------------------- @@ -740,6 +814,12 @@ }) } // ----------------------------------------------------------------------------------------------- +function changeCurrentDrawButton(val: any) { + if (`${formData.value.type}` === '1') { // 业务场景 + points.value[0].boundary = initPolygonData(currentDrawButton.value) + } +} + // 监听器函数 function handleStorageChange(event: any) { let getWidth = 640 @@ -981,9 +1061,10 @@ {{ item.name }} diff --git a/public/config/config.json b/public/config/config.json index a1d00a8..e276d3a 100644 --- a/public/config/config.json +++ b/public/config/config.json @@ -18,6 +18,7 @@ "#FFA500", "#87CEEB", "#1E90FF", + "#00FF00", "#FF1493", "#DC143C", "#FFE4B5", @@ -29,7 +30,6 @@ "#DB7093", "#C71585", "#00BFFF", - "#00FF00", "#2E8B57", "#FF7F50", "#FFC0CB", @@ -37,7 +37,17 @@ "#4169E1", "#00FA9A", "#DA70D6", - "#FF6347" + "#FF6347", + "#FF5252", + "#FF9800", + "#FFEB3B", + "#4CAF50", + "#00BCD4", + "#2196F3", + "#9C27B0", + "#E91E63", + "#FFC107", + "#8BC34A" ], "fontSize": "18px", "fontColor": "#1aa034", diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue index afbada0..6476ebf 100644 --- a/src/layouts/components/Tools/index.vue +++ b/src/layouts/components/Tools/index.vue @@ -135,7 +135,7 @@ // 风险点地图地址 const mapResponse = await getDictByCode('dangermapLink') if (mapResponse && mapResponse.data && mapResponse.data.length) { - dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name}` + dangerMapLink.value = `${mapResponse.data[0].value}://${mapResponse.data[0].name.replace('$', ':')}/rest/login/home` } } getDict() @@ -150,7 +150,7 @@ case 'map': // 风险点地图 console.log('风险点地图跳转链接', dangerMapLink.value) // eslint-disable-next-line no-case-declarations - const tempUrl = `${dangerMapLink.value}?token=${window.localStorage.getItem('token')}` + const tempUrl = `${dangerMapLink.value}?threeToken=${window.localStorage.getItem('token')}&embedding=1` window.open(tempUrl) break } diff --git a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue index 62810ce..b1832ea 100644 --- a/src/views/alarm/policyConfig/monitorPoint/drawArea.vue +++ b/src/views/alarm/policyConfig/monitorPoint/drawArea.vue @@ -52,15 +52,21 @@ ctx.beginPath() // 绘制图形边界 if (e.boundary && e.boundary.length) { // 画线 + // ctx.moveTo(e.boundary[0].x, e.boundary[0].y) + // ctx.lineTo(e.boundary[1].x, e.boundary[1].y) + // ctx.lineTo(e.boundary[2].x, e.boundary[2].y) + // ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + // ctx.lineTo(e.boundary[0].x, e.boundary[0].y) + // 支持多边形绘制 ctx.moveTo(e.boundary[0].x, e.boundary[0].y) - ctx.lineTo(e.boundary[1].x, e.boundary[1].y) - ctx.lineTo(e.boundary[2].x, e.boundary[2].y) - ctx.lineTo(e.boundary[3].x, e.boundary[3].y) + for (let i = 1; i < e.boundary.length; i++) { + ctx.lineTo(e.boundary[i].x, e.boundary[i].y) + } ctx.lineTo(e.boundary[0].x, e.boundary[0].y) } // ---------------------------------线-------------------------------- // 获取线的颜色 - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.strokeStyle = lineColors.value[index] } else { @@ -70,7 +76,7 @@ ctx.closePath() // 闭合路径形成图形 // --------------------------------文字------------------------------- ctx.font = `${window.localStorage.getItem('fontSize')} 微软雅黑` || '13px 微软雅黑' - if (lineColors.value.length) { + if (lineColors.value.length && index < lineColors.value.length) { ctx.fillStyle = lineColors.value[index] } else { @@ -124,93 +130,94 @@ else if (mousePos.y > props.height) { mousePos.y = props.height } - // 计算商和余数的辅助函数 - const { quotient, remainder } = divideAndModulo(pointIndex, 4) - if (props.currentDrawButton === '1') { - const rect = pointsInfo.value[quotient].boundary // 获取矩形的四个顶点数组 - const draggedPoint = rect[remainder] // 当前被拖拽的顶点对象 + // 根据实际多边形边数计算索引 + let currentIndex = 0; + for (let i = 0; i < pointsInfo.value.length; i++) { + const polygon = pointsInfo.value[i]; + const boundaryLength = polygon.boundary.length; + if (pointIndex < currentIndex + boundaryLength) { + const remainder = pointIndex - currentIndex; + const rect = polygon.boundary; + const draggedPoint = rect[remainder]; + if (props.currentDrawButton === '1') { // 矩形拖拽 + console.log('矩形拖拽') + // 保存原始矩形的宽高（基于未拖拽前的坐标） + const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x + const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y + // 计算动态宽高（根据拖拽点和原始顶点的相对位置） + // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 + switch (remainder) { + case 0: + // 左上角顶点（x0,y0） + // 保持宽高不变，右下角顶点 = 左上角 + 宽高 + // rect[2].x = draggedPoint.x + originalWidth // 右下角x + // rect[2].y = draggedPoint.y + originalHeight // 右下角y + // 右上角顶点y与左上角相同，x为宽 + rect[1].y = draggedPoint.y + // rect[1].x = draggedPoint.x + originalWidth + // 左下角顶点x与左上角相同，y为高 + rect[3].x = draggedPoint.x + rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') + break; - // 保存原始矩形的宽高（基于未拖拽前的坐标） - const originalWidth = rect[1].x - rect[0].x // 右顶点x - 左顶点x - const originalHeight = rect[2].y - rect[1].y // 下顶点y - 右顶点y - // 计算动态宽高（根据拖拽点和原始顶点的相对位置） - // 根据拖拽的顶点索引（0-3），计算其他顶点的坐标 - switch (remainder) { - case 0: - // 左上角顶点（x0,y0） - // 保持宽高不变，右下角顶点 = 左上角 + 宽高 - // rect[2].x = draggedPoint.x + originalWidth // 右下角x - // rect[2].y = draggedPoint.y + originalHeight // 右下角y - // 右上角顶点y与左上角相同，x为宽 - rect[1].y = draggedPoint.y - // rect[1].x = draggedPoint.x + originalWidth - // 左下角顶点x与左上角相同，y为高 - rect[3].x = draggedPoint.x - rect[3].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '+') - break + case 1: // 右上角顶点（x1,y1） + // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） + // rect[3].x = draggedPoint.x - originalWidth // 左下角x + // rect[3].y = draggedPoint.y + originalHeight // 左下角y + // 左上角顶点x = 右上角x - 宽，y相同 + rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') + rect[0].y = draggedPoint.y + // 右下角顶点x相同，y = 右上角y + 高 + rect[2].x = draggedPoint.x + // rect[2].y = draggedPoint.y + originalHeight + break; - case 1: // 右上角顶点（x1,y1） - // 保持宽高不变，左下角顶点 = 右上角 - 宽高（x减宽，y增高） - // rect[3].x = draggedPoint.x - originalWidth // 左下角x - // rect[3].y = draggedPoint.y + originalHeight // 左下角y - // 左上角顶点x = 右上角x - 宽，y相同 - rect[0].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '-') - rect[0].y = draggedPoint.y - // 右下角顶点x相同，y = 右上角y + 高 - rect[2].x = draggedPoint.x - // rect[2].y = draggedPoint.y + originalHeight - break + case 2: + // 右下角顶点（x2,y2） + // 保持宽高不变，左上角顶点 = 右下角 - 宽高 + // rect[0].x = draggedPoint.x - originalWidth // 左上角x + // rect[0].y = draggedPoint.y - originalHeight // 左上角y + // 右上角顶点x = 右下角x，y = 右下角y - 高 + rect[1].x = draggedPoint.x + rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 左下角顶点x = 右下角x - 宽，y相同 + // rect[3].x = draggedPoint.x - originalWidth + rect[3].y = draggedPoint.y + break; - case 2: - // 右下角顶点（x2,y2） - // 保持宽高不变，左上角顶点 = 右下角 - 宽高 - // rect[0].x = draggedPoint.x - originalWidth // 左上角x - // rect[0].y = draggedPoint.y - originalHeight // 左上角y - // 右上角顶点x = 右下角x，y = 右下角y - 高 - rect[1].x = draggedPoint.x - rect[1].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 左下角顶点x = 右下角x - 宽，y相同 - // rect[3].x = draggedPoint.x - originalWidth - rect[3].y = draggedPoint.y - break + case 3: + // 左下角顶点（x3,y3） + // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） + // rect[1].x = draggedPoint.x + originalWidth // 右上角x + // rect[1].y = draggedPoint.y - originalHeight // 右上角y + // 左上角顶点y = 左下角y - 高，x相同 + rect[0].x = draggedPoint.x + rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') + // 右下角顶点x = 左下角x + 宽，y相同 + rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') + rect[2].y = draggedPoint.y + break; + } - case 3: - // 左下角顶点（x3,y3） - // 保持宽高不变，右上角顶点 = 左下角 + 宽高（x增高，y减高） - // rect[1].x = draggedPoint.x + originalWidth // 右上角x - // rect[1].y = draggedPoint.y - originalHeight // 右上角y - // 左上角顶点y = 左下角y - 高，x相同 - rect[0].x = draggedPoint.x - rect[0].y = useCalc(Number(draggedPoint.y), Number(originalHeight), '-') - // 右下角顶点x = 左下角x + 宽，y相同 - rect[2].x = useCalc(Number(draggedPoint.x), Number(originalWidth), '+') - rect[2].y = draggedPoint.y - break + // 更新坐标（注意：顶点对象是引用类型，直接修改即可） + // 无需重新赋值数组，直接修改对象属性保证响应式 + draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 + draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 + + // 限制拖拽点在画布内 + } else { // 多边形拖拽 + console.log('-----修改-----', pointsInfo.value) + polygon.boundary[remainder].x = mousePos.x + polygon.boundary[remainder].y = mousePos.y + } + break; } - - // 更新坐标（注意：顶点对象是引用类型，直接修改即可） - // 无需重新赋值数组，直接修改对象属性保证响应式 - draggedPoint.x = mousePos.x // 更新当前拖拽点的x坐标 - draggedPoint.y = mousePos.y // 更新当前拖拽点的y坐标 - - // 限制拖拽点在画布内 - } - else { - pointsInfo.value[quotient].boundary[remainder].x = mousePos.x - pointsInfo.value[quotient].boundary[remainder].y = mousePos.y + currentIndex += boundaryLength; } draw() } - function divideAndModulo(dividend: number, divisor: number) { - const quotient = Math.floor(dividend / divisor) // 求商 - const remainder = dividend % divisor // 求余数 - return { - quotient, - remainder, - } - } // 为每个点添加拖拽事件监听器 function addDragEvents() { if (props.dialogStatus === 'detail') { @@ -356,7 +363,7 @@ 'top': `${item.y - 5}px`, 'left': `${item.x - 5}px`, // '--lineColor': lineColor, - '--lineColor': lineColors.length ? lineColors[indexOut] : lineColor, + '--lineColor': lineColors.length && indexOut < lineColors.length ? lineColors[indexOut] : lineColor, }" /> diff --git "a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" new file mode 100644 index 0000000..d30474a --- /dev/null +++ "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\2131\344\270\252\346\241\206.vue" @@ -0,0 +1,374 @@ + + + + + diff --git "a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" new file mode 100644 index 0000000..62810ce --- /dev/null +++ "b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak-1\346\212\245\350\255\246\345\257\271\350\261\241-\343\200\213\345\244\232\344\270\252\346\241\206.vue" @@ -0,0 +1,414 @@ + + + + + diff --git a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak.vue b/src/views/alarm/policyConfig/monitorPoint/drawAreaBak.vue deleted file mode 100644 index d30474a..0000000 --- a/src/views/alarm/policyConfig/monitorPoint/drawAreaBak.vue +++ /dev/null @@ -1,374 +0,0 @@ - - - - - diff --git a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue index 3efbdb9..e17a85b 100644 --- a/src/views/alarm/policyConfig/monitorPoint/editDialog.vue +++ b/src/views/alarm/policyConfig/monitorPoint/editDialog.vue @@ -29,7 +29,7 @@ const videoHeight = ref(360) const cameraIndexCode = ref('') // 设备国标号 const nvrIndexCode = ref('') // nvr国标号 -const currentDrawButton = ref('1') +const currentDrawButton = ref('2') // 显示标题 const textMap: { [key: string]: string } = { detail: '详情', @@ -313,9 +313,101 @@ const a = 1 // 0-1 return `rgba(${r}, ${g}, ${b}, ${a})` } -// 多选 + +// 初始化多边形数据 +function initPolygonData(value: string) { + let params: any = [] + if (`${formData.value.type}` === '0') { + switch (value) { + case '5': // 五边形 + params = [[ // 标记点位置 + { x: 214, y: 34 }, + { x: 149, y: 236 }, + { x: 320, y: 360 }, + { x: 491, y: 236 }, + { x: 426, y: 34 }, + ]] + break + case '6': // 六边形 + params = [[ // 标记点位置 + { x: 200, y: 100 }, // 左上点（第一个点） + { x: 440, y: 100 }, // 右上点（顶部边为水平线） + { x: 560, y: 200 }, // 右下点 + { x: 440, y: 300 }, // 右下点下方 + { x: 200, y: 300 }, // 左下点下方 + { x: 80, y: 200 }, // 左下点 + ]] + break + case '8': // 六边形 + params = [[ // 标记点位置 + { x: 180, y: 60 }, // 左上点（第一个点） + { x: 460, y: 60 }, // 右上点（顶部边水平） + { x: 540, y: 140 }, // 右上斜下点 + { x: 540, y: 240 }, // 右下点 + { x: 460, y: 320 }, // 右下斜下点（底部边水平起点） + { x: 180, y: 320 }, // 左下点（底部边水平终点） + { x: 100, y: 240 }, // 左下斜上点 + { x: 100, y: 140 }, // 左上斜上点 + ]] + break + default: + params = [[ // 标记点位置 + { x: 0, y: 0 }, + { x: 640, y: 0 }, + { x: 640, y: 360 }, + { x: 0, y: 360 }, + ]] + } + } else { // 业务场景 + switch (value) { + case '5': // 五边形 + params = [ // 标记点位置 + { x: 214, y: 34 }, + { x: 149, y: 236 }, + { x: 320, y: 360 }, + { x: 491, y: 236 }, + { x: 426, y: 34 }, + ] + break + case '6': // 六边形 + params = [ // 标记点位置 + { x: 200, y: 100 }, // 左上点（第一个点） + { x: 440, y: 100 }, // 右上点（顶部边为水平线） + { x: 560, y: 200 }, // 右下点 + { x: 440, y: 300 }, // 右下点下方 + { x: 200, y: 300 }, // 左下点下方 + { x: 80, y: 200 }, // 左下点 + ] + break + case '8': // 六边形 + params = [ // 标记点位置 + { x: 180, y: 60 }, // 左上点（第一个点） + { x: 460, y: 60 }, // 右上点（顶部边水平） + { x: 540, y: 140 }, // 右上斜下点 + { x: 540, y: 240 }, // 右下点 + { x: 460, y: 320 }, // 右下斜下点（底部边水平起点） + { x: 180, y: 320 }, // 左下点（底部边水平终点） + { x: 100, y: 240 }, // 左下斜上点 + { x: 100, y: 140 }, // 左上斜上点 + ] + break + default: + params = [ // 标记点位置 + { x: 0, y: 0 }, + { x: 640, y: 0 }, + { x: 640, y: 360 }, + { x: 0, y: 360 }, + ] + } + } + + return params +} + +// 算法-报警对象-多选选中 const selectModel = (value: any) => { console.log('监听算法报警对象的变化，更新区域绘制', value) + console.log('currentDrawButton', currentDrawButton.value) selectModelList.value = value.map((item: any) => { return { ...item, @@ -334,16 +426,7 @@ ...i, remark: i.recognitionTypeName, isUse: '1', - boundary: [ // 标记点位置 - // { x: 50, y: 50 }, - // { x: 150, y: 50 }, - // { x: 150, y: 150 }, - // { x: 50, y: 150 }, - [{ x: 0, y: 0 }, - { x: 640, y: 0 }, - { x: 640, y: 360 }, - { x: 0, y: 360 }], - ], + boundary: initPolygonData(currentDrawButton.value), } } else { @@ -552,9 +635,8 @@ let tempBoundary = [] if (row.sceneRelation.boundary) { const tempList = JSON.parse(row.sceneRelation.boundary) + currentDrawButton.value = `${tempList.length}` === '4' ? '2' : `${tempList.length}` if (`${videoHeight.value}` && `${videoWidth.value}`) { - console.log('1111111111111', tempList); - tempBoundary = calRealData(tempList, Number(videoWidth.value), Number(videoHeight.value)) } else { @@ -604,6 +686,8 @@ mediaToken.value = '' // 流媒体url mediaToken.value = '' // 设备国标号 mediaToken.value = '' // nvr国标号 + points.value = [] + currentDrawButton.value = '2' resetForm() emits('closeRefresh') } @@ -628,12 +712,7 @@ // id: points.value && points.value.length && points.value[0].id ? points.value[0].id : '', remark: sceneName, sceneId: val, - boundary: [ // 标记点位置 - { x: 0, y: 0 }, - { x: 640, y: 0 }, - { x: 640, y: 360 }, - { x: 0, y: 360 }, - ], + boundary: initPolygonData(currentDrawButton.value), }, ] } @@ -652,16 +731,11 @@ // 算法-报警对象-点击加号触发 function addBoundary(row: any) { - console.log('点击加号触发', row) + console.log('点击加号触发', row, 'currentDrawButton:', currentDrawButton.value) const index = points.value.findIndex((item: { modelId: any; recognitionTypeId: any; algoModelId: any }) => item.modelId === row.modelId && item.recognitionTypeId === row.recognitionTypeId && item.algoModelId === row.algoModelId) - const defaultBoundary = [ - { x: 0, y: 0 }, - { x: 640, y: 0 }, - { x: 640, y: 360 }, - { x: 0, y: 360 }, - ] + const defaultBoundary = initPolygonData(currentDrawButton.value) if (index !== -1) { - points.value[index].boundary.push(defaultBoundary) + points.value[index].boundary.push(defaultBoundary[0]) } } // ----------------------------------------------流媒体取流--------------------------------------------------------- @@ -740,6 +814,12 @@ }) } // ----------------------------------------------------------------------------------------------- +function changeCurrentDrawButton(val: any) { + if (`${formData.value.type}` === '1') { // 业务场景 + points.value[0].boundary = initPolygonData(currentDrawButton.value) + } +} + // 监听器函数 function handleStorageChange(event: any) { let getWidth = 640 @@ -981,9 +1061,10 @@ {{ item.name }} diff --git a/src/views/alarm/policyConfig/monitorPoint/randomColor.ts b/src/views/alarm/policyConfig/monitorPoint/randomColor.ts new file mode 100644 index 0000000..b746e37 --- /dev/null +++ b/src/views/alarm/policyConfig/monitorPoint/randomColor.ts @@ -0,0 +1,57 @@ +/** + * 生成明亮的随机颜色 + * @returns 格式为 #RRGGBB 的十六进制颜色字符串 + */ +export function getBrightRandomColor(): string { + // 生成 0-360 度之间的随机色相（全色域） + const hue = Math.floor(Math.random() * 361) + // 将色相转换到 0-1 范围 + const h = hue / 360 + // 生成 70%-100% 之间的随机饱和度（确保颜色不过于灰） + const s = Math.random() * 0.3 + 0.7 + // 生成 65%-90% 之间的随机亮度（避免过暗或过亮） + const l = Math.random() * 0.25 + 0.65 + + let r: number, g: number, b: number + + // HSL 转 RGB 算法 + if (s === 0) { + // 当饱和度为 0 时，为灰色 + r = g = b = l + } + else { + const hue2rgb = (p: number, q: number, t: number): number => { + if (t < 0) { + t += 1 + } + if (t > 1) { + t -= 1 + } + if (t < 1 / 6) { + return p + (q - p) * 6 * t + } + if (t < 1 / 2) { + return q + } + if (t < 2 / 3) { + return p + (q - p) * (2 / 3 - t) * 6 + } + return p + } + + const q = l < 0.5 ? l * (1 + s) : l + s - l * s + const p = 2 * l - q + + r = Math.round(hue2rgb(p, q, h + 1 / 3) * 255) + g = Math.round(hue2rgb(p, q, h) * 255) + b = Math.round(hue2rgb(p, q, h - 1 / 3) * 255) + } + + // 转换 RGB 为十六进制 + const toHex = (c: number): string => { + const hex = c.toString(16) + return hex.length === 1 ? `0${hex}` : hex + } + + return `#${toHex(r)}${toHex(g)}${toHex(b)}` +}