231 lines
13 KiB
JavaScript
231 lines
13 KiB
JavaScript
import Canvg from 'canvg'
|
|
import {CellsysType, EditTask, EditType} from './cellsysUtil.js'
|
|
|
|
|
|
class CellsysIcon {
|
|
constructor(params) {
|
|
this.cellsysType = CellsysType.CellsysIcon
|
|
if (!params) {
|
|
params = {}
|
|
}
|
|
|
|
this.id = params.id
|
|
this.name = params.name
|
|
this.tags = params.tags
|
|
this.fillOpacity = params.fill_opacity// 填充透明度
|
|
this.fillColor = params.fill_color// 填充颜色
|
|
// this.strokeOpacity = params.stroke_opacity // 边框透明度
|
|
// this.strokeColor = params.stroke_color // 边框颜色
|
|
this.rotate = params.rotate || 0
|
|
this.type = params.type
|
|
this.typeName = params.type_name
|
|
this.data = params.data
|
|
this.sort = params.sort
|
|
this.createdId = params.create_by
|
|
this.createdTime = params.create_time
|
|
this.updatedId = params.update_by
|
|
this.updatedTime = params.update_time
|
|
}
|
|
|
|
queryIconList() {
|
|
let query = new Query()
|
|
let queryTask = new QueryTask(QueryType.Icon)
|
|
return queryTask.execute(query)
|
|
}
|
|
|
|
setStyleParams(style) {
|
|
for (let name in this) {
|
|
if (Object.hasOwnProperty.call(style, name)) {
|
|
this[name] = style[name]
|
|
}
|
|
}
|
|
}
|
|
|
|
getStyleParams() {
|
|
return {
|
|
id: this.id,
|
|
name: this.name,
|
|
fillOpacity: this.fillOpacity,
|
|
fillColor: this.fillColor,
|
|
// strokeOpacity: this.strokeOpacity,
|
|
// strokeColor: this.strokeColor,
|
|
rotate: this.rotate,
|
|
type: this.type,
|
|
data: this.data
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 将icon转为svg
|
|
* @param width
|
|
* @param height
|
|
* @returns {string}
|
|
* @constructor
|
|
*/
|
|
toSvg(width = 35, height = 35) {
|
|
if (!Number.isInteger(width) || !Number.isInteger(height)) {
|
|
throw new Error('width or height not is Integer')
|
|
}
|
|
return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
|
|
'<path d="' + this.data + '" fill="' + this.fillColor + '" opacity="' + this.fillOpacity + '" transform="rotate(' + this.rotate + ')" /></svg>'
|
|
}
|
|
|
|
/**
|
|
* 将icon转为png
|
|
* @returns {string}
|
|
* @constructor
|
|
*/
|
|
toImg() {
|
|
const svg = this.toSvg()
|
|
const canvas = document.createElement('canvas') //页面创建空canvas
|
|
const ctx = canvas.getContext('2d')
|
|
const canvg = Canvg.fromString(ctx, svg)
|
|
canvg.start()
|
|
const img = canvas.toDataURL('image/png')
|
|
canvg.stop()
|
|
return img
|
|
}
|
|
|
|
static transformToImg(icon) {
|
|
|
|
}
|
|
}
|
|
|
|
const defaultIcon = {
|
|
"id": 60,
|
|
"iconId": 60,
|
|
// 'name': '坐标',/**yrd 冲突 fpType.vue里面的pointTypeForm数据 */
|
|
'fillColor': '#1890ff',
|
|
'fillOpacity': 1,
|
|
'rotate': 0,
|
|
'data': 'M526.1121875 122.86625c-158.5603125 0.301875-286.9940625 128.9025-286.9940625 287.53125 0 148.111875 120.916875 303.909375 260.7384375 471.5015625 7.348125' + ' 8.829375 16.8534375 13.5796875 26.255625 14.1196875 9.4021875-0.54 18.9075-5.2903125 26.251875-14.1196875 139.8225-167.5921875 260.7403125-323.38875 260.7403125-471.5015625 0-158.6296875-128.4346875-287.229375-286.993125-287.53125zM526.1121875 501.6565625c-61.940625-0.335625-112.089375-50.58375-112.089375-112.5928125s50.14875-112.25625 112.089375-112.5928125c61.9396875 0.335625 112.0846875 50.58375 112.0846875 112.5928125s-50.1440625 112.25625-112.0846875 112.5928125z'
|
|
}
|
|
|
|
const directionPoint = {
|
|
'name': '方向坐标',
|
|
'fillColor': '#1890ff',
|
|
'fillOpacity': 1,
|
|
'rotate': 0,
|
|
'data': 'M270.304 620.132a257.358 257.358 0 1 0 514.716 0 257.358 257.358 0 1 0-514.716 0zM668.038 323.917L522.88 123.903 384.588 328.136c41.476-22.424 90.299-36.775 140.6-38.275 51.404.335 99.878 12.42 142.85 34.056z'
|
|
}
|
|
|
|
const startPoint = {
|
|
'name': '起点坐标',
|
|
'fillColor': '#12CA5C',
|
|
'fillOpacity': 1,
|
|
'rotate': 0,
|
|
'data': 'M812.919 125.14a424.013 424.013 0 10-601.107 598.185L509.078 1024l300.676-297.51a424.816 424.816 0 003.165-601.35zm-310.17 115.157h178.944V400.25h-31.894v-16.068H544.38v105.662a18.99 18.99 0 0022.399 22.398h76.69a25.466 25.466 0 0028.729-22.398c3.165-12.903 3.165-32.137 6.33-57.7a283.657 283.657 0 0032.137 12.903c-3.409 28.729-6.574 47.962-6.574 60.865-3.165 25.564-22.398 35.059-54.292 35.059H563.37c-31.893 0-47.962-16.069-47.962-51.127v-140.72h137.556V272.19H509.078v-31.893h-6.33zM704.09 630.566H480.35q-105.54 0-143.886-76.69a278.69 278.69 0 01-35.302 92.758c-6.33-12.903-12.66-28.728-18.99-41.632 22.399-38.467 35.059-95.924 35.059-176.022l31.893 3.165a628.643 628.643 0 01-6.33 80.098 155.62 155.62 0 0044.797 57.457V406.581H285.337v-31.893h89.594v-64.03h-73.769v-31.894h73.77v-64.03h35.058v60.621h73.525v32.137H409.99v64.03h83.02v31.894h-70.117v67.196h66.952v31.893h-66.952v83.264a159.005 159.005 0 0070.117 12.903c70.36 0 147.294 0 227.15-3.165a155.426 155.426 0 00-16.069 35.059zm0 0'
|
|
}
|
|
|
|
const endPoint = {
|
|
'name': '终点坐标',
|
|
'fillColor': '#F56C6C',
|
|
'fillOpacity': 1,
|
|
'rotate': 0,
|
|
'data': 'M807.676 727.19l-299.979 296.566-296.81-299.735a424.161 424.161 0 11596.789 3.168zm-153.28-83.098l12.916-38.259c-76.518-22.175-143.531-41.426-197.874-57.266l-12.671 31.923c57.266 15.84 124.28 38.259 197.63 63.602zm-3.167-127.448c-41.427-15.84-86.022-31.923-130.86-44.595l-12.672 28.755a554.607 554.607 0 01127.692 50.93zM290.816 618.749c54.098-16.084 102.105-25.587 140.364-35.091v-35.091c-54.343 15.84-105.273 25.587-150.112 35.09zm114.776-318.986c-12.671 22.419-25.587 44.594-35.09 63.846h-51.175c22.42-35.091 48.007-83.098 76.762-137.196l-31.923-12.672a600.542 600.542 0 01-83.098 153.036l9.748 28.755a603.832 603.832 0 0067.014-3.168 1065.399 1065.399 0 01-67.014 95.525l6.336 31.923c47.762-9.504 89.19-15.84 121.112-19.008a119.65 119.65 0 013.168-31.923c-31.923 6.336-60.434 9.504-86.021 12.672 25.587-38.259 60.678-92.601 102.104-165.95zm274.392-6.336v-31.923H517.2l19.251-38.259-31.923-9.504a578.245 578.245 0 01-83.097 149.868l22.42 22.175a757.866 757.866 0 0044.594-66.77 359.609 359.609 0 0057.51 76.518 422.553 422.553 0 01-127.692 57.266 140.217 140.217 0 0116.083 31.923 604.66 604.66 0 00137.196-67.014 495.294 495.294 0 00130.86 60.678 68.427 68.427 0 009.504-38.259 277.803 277.803 0 01-117.945-44.594 374.327 374.327 0 0086.022-102.105zm-169.119 0h137.196a302.708 302.708 0 01-73.35 82.853 287.819 287.819 0 01-63.846-82.853z'
|
|
}
|
|
|
|
const sos = {
|
|
'name': 'sos',
|
|
'fillColor': '#e30000',
|
|
'fillOpacity': 1,
|
|
'rotate': 0,
|
|
'data': 'M560.96 978.88c-25.28 30.72-72.96 30.72-98.24 0-218.24-265.28-328-457.92-328-589.44C134.72 186.56 303.68 22.4 512 22.4s377.28 164.48 377.28 367.36c0 131.2-109.792 323.84-328.32 589.12z M512 1018.56c-24.32 0-46.72-10.56-62.08-29.12-226.24-275.2-331.84-465.6-331.84-600 0-211.84 176.64-384 393.92-384s393.952 172.16 393.952 384c0 134.08-105.632 324.8-331.872 600-15.36 18.56-37.76 29.12-62.08 29.12zm0-979.52c-198.72 0-360.32 157.12-360.32 350.4 0 124.16 105.92 313.28 324.16 578.56a47.04 47.04 0 0 0 72.32 0C766.4 702.72 872.32 513.6 872.32 389.44c0-193.28-161.6-350.4-360.32-350.4z M217.024 384.224c-.032 162.336 132.128 294.016 295.168 294.048 163.04 0 295.328-131.552 295.328-293.952v-.128c0-162.368-132.192-294.016-295.264-294.016-163.04.032-295.232 131.68-295.232 294.048z M375.648 248.576C388.928 262.24 396.512 283.2 398.4 312h-28.8c-2.656-16.768-7.616-29.344-14.816-36.672-7.584-7.904-18.176-11.552-32.224-11.552-12.512 0-22.016 2.624-28.8 7.872-7.968 4.96-12.96 16.16-12.48 28.32 0 11.488 4.544 20.928 14.016 27.776 4.16 3.104 15.168 8.896 32.992 16.192 25.408 11.008 42.08 19.392 49.632 25.696 16.32 13.632 24.288 32.512 24.288 56.576 0 23.584-6.848 41.92-20.096 55.552-13.28 13.088-31.872 19.904-55.744 19.904-23.104 0-41.312-6.816-54.208-18.848-15.52-15.168-24.224-39.808-25.76-72.832h28.8c2.272 20.448 7.584 35.616 15.936 44.576 7.584 7.84 19.328 12.032 35.264 12.032 14.4 0 25.824-3.68 34.112-10.496 8.352-6.816 12.864-15.744 12.864-27.744 0-14.688-6.016-26.208-18.176-34.624-4.16-3.136-16.672-8.864-37.504-17.824-23.488-10.464-37.536-17.28-43.584-21.472-13.824-10.368-22.208-30.656-21.632-52.384 0-23.072 6.816-40.928 20.864-54.528 13.664-12.064 30.336-18.336 50.432-18.336 21.952.032 39.392 6.272 51.872 19.392zM583.04 268c15.936 24.608 23.872 57.12 23.872 97.472 0 39.808-7.936 72.288-23.872 97.44-16.672 25.696-39.424 38.784-68.224 38.784-28.832 0-51.936-13.088-68.288-38.784-15.904-25.152-23.488-57.12-23.488-96.928 0-39.84 7.584-72.32 23.488-97.44 16.352-26.208 39.456-39.328 68.288-39.328 28.768 0 51.552 13.088 68.224 38.784zm-115.264 24.608c-10.624 17.824-15.904 41.952-15.904 72.864 0 30.368 5.28 54.496 15.904 72.832 11.008 18.336 26.912 27.776 47.04 27.776 20.096 0 35.616-8.896 46.624-27.296 10.592-17.792 16.256-42.432 16.256-73.344 0-31.456-5.664-56.064-16.256-74.4-11.008-18.336-26.528-27.264-46.624-27.264-20.128 0-35.648 9.984-47.04 28.832zm288.16-44.032c13.248 13.664 20.768 34.624 22.72 63.424h-28.8c-2.656-16.768-7.584-29.344-14.816-36.672-7.52-7.904-18.176-11.552-32.224-11.552-12.48 0-21.984 2.624-28.768 7.872-8.384 5.76-12.16 15.2-12.16 28.8 0 11.552 4.576 20.992 14.048 27.776 4.16 3.136 15.136 8.896 32.992 16.256 25.376 11.008 42.016 19.392 49.6 25.664 16.384 13.664 24.288 32.48 24.288 56.576 0 23.584-6.464 41.952-20.096 55.584-13.28 13.088-31.84 19.904-55.744 19.904-23.072 0-41.312-6.784-54.176-18.848-15.52-15.2-24.288-39.808-25.76-72.832h28.8c2.272 20.48 7.552 35.648 15.872 44.576 7.616 7.84 19.328 12.032 35.264 12.032 14.432 0 25.824-3.68 34.144-10.496 8.32-6.816 12.864-15.744 12.864-27.776 0-14.656-6.048-26.208-18.208-34.592-4.16-3.136-16.672-8.928-37.472-17.824-23.488-10.496-37.568-17.312-43.616-21.504-14.4-12.064-21.632-29.856-21.632-52.384 0-23.072 6.816-40.864 20.864-54.528 13.248-12.576 29.984-18.848 50.016-18.848 22.336.032 39.84 6.272 52 19.392z'
|
|
}
|
|
|
|
//站立的人员
|
|
const personStand = {
|
|
'name': 'sos',
|
|
'fillColor': '#1890ff',
|
|
'fillOpacity': 1,
|
|
'rotate': 0,
|
|
'data': 'M505.394 231.226c49.548 0 92.49-46.245 92.49-102.4s-42.942-105.703-92.49-105.703-92.49 46.245-92.49 102.4 39.638 105.703 92.49 105.703zm75.974 66.064H429.419c-16.516 0-33.032 6.607-46.245 19.82-13.213 13.213-19.82 33.032-19.82 52.851v214.71c0 39.639 26.427 69.368 59.459 72.67l6.606 3.304v336.93h151.949V657.341h6.606c33.032-3.303 56.155-33.032 59.458-72.671v-214.71c0-39.638-29.729-72.67-66.064-72.67z'
|
|
}
|
|
|
|
/**
|
|
* 创建图标
|
|
* @param {*} icon
|
|
*/
|
|
export function saveIcon(icon) {
|
|
let editTask = new EditTask(EditType.saveIcon);
|
|
editTask.addParam("_name", icon.name);
|
|
editTask.addParam("_fill_color", icon.fillColor);
|
|
editTask.addParam("_fill_opacity", icon.fillOpacity);
|
|
editTask.addParam("_type", icon.type);
|
|
editTask.addParam("_tags", icon.tags);
|
|
editTask.addParam("_data", icon.data);
|
|
editTask.addParam("_rotate", icon.rotate);
|
|
return editTask.execute();
|
|
}
|
|
|
|
/**
|
|
* 导入图标
|
|
* @param {*} cellsysObject
|
|
*/
|
|
export function importIcons(cellsysObject) {
|
|
let editTask = new EditTask(EditType.importIcons),
|
|
paramList = []
|
|
if (cellsysObject.length > 0) {
|
|
cellsysObject.forEach(icon => {
|
|
paramList.push({
|
|
'_name': icon.name,
|
|
'_fill_color': icon.fillColor,
|
|
'_fill_opacity': icon.fillOpacity,
|
|
'_type': icon.type,
|
|
'_tags': icon.tags,
|
|
'_data': icon.data,
|
|
'_rotate': icon.rotate
|
|
})
|
|
})
|
|
editTask.addParam('_icons', paramList)
|
|
}
|
|
return editTask.execute()
|
|
}
|
|
|
|
/**
|
|
* 更新图标
|
|
* @param {*} cellsysObject
|
|
*/
|
|
export function updateIcon(cellsysObject) {
|
|
let editTask = new EditTask(EditType.updateIcon);
|
|
editTask.addParam("_icon_id", cellsysObject.id);
|
|
editTask.addParam("_id", cellsysObject.id);
|
|
editTask.addParam("_name", cellsysObject.name);
|
|
editTask.addParam("_fill_color", cellsysObject.fillColor);
|
|
editTask.addParam("_fill_opacity", cellsysObject.fillOpacity);
|
|
editTask.addParam("_type", cellsysObject.type);
|
|
editTask.addParam("_tags", cellsysObject.tags);
|
|
editTask.addParam("_data", cellsysObject.data);
|
|
return editTask.execute();
|
|
}
|
|
|
|
/**
|
|
* 删除图标
|
|
* @param {*} cellsysObject
|
|
*/
|
|
export function deleteIcon(cellsysObject) {
|
|
let editTask = new EditTask(EditType.deleteIcon);
|
|
editTask.addParam("_id", cellsysObject.id);
|
|
return editTask.execute();
|
|
}
|
|
|
|
/**
|
|
* 排序图标
|
|
* @param {*} data
|
|
*/
|
|
export function sortIcons(data) {
|
|
let editTask = new EditTask(EditType.sortIcon)
|
|
editTask.addParam('_icons', data)
|
|
return editTask.execute()
|
|
}
|
|
|
|
export default CellsysIcon
|
|
export {
|
|
defaultIcon,
|
|
directionPoint,
|
|
startPoint,
|
|
endPoint,
|
|
sos,
|
|
personStand
|
|
}
|