From 2fadaade87b88bf9a6aa9902a10c5806b1d1a8df Mon Sep 17 00:00:00 2001 From: lVAL Date: Tue, 20 Oct 2020 17:22:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=BD=A6=E6=AC=A1=E5=8F=B7?= =?UTF-8?q?=E6=A0=87=E7=AD=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/theme/aus_00/planConvert.js | 148 +++++++-- src/jmapNew/theme/aus_00/utils.js | 309 ++++++++++++++++++ src/views/planMonitor/editToolAUS/index.vue | 9 +- .../planMonitor/editToolAUS/schedule.vue | 20 +- 4 files changed, 440 insertions(+), 46 deletions(-) create mode 100644 src/jmapNew/theme/aus_00/utils.js diff --git a/src/jmapNew/theme/aus_00/planConvert.js b/src/jmapNew/theme/aus_00/planConvert.js index b332fb48d..b06e963a5 100644 --- a/src/jmapNew/theme/aus_00/planConvert.js +++ b/src/jmapNew/theme/aus_00/planConvert.js @@ -1,4 +1,4 @@ -import { createMartPointReverse, createSeriesModel, createMarkLineModels, hexColor, convertSheetToList, prefixTime } from '@/utils/runPlan'; +import { createSeriesModel, createMarkLineModels, createMartPoint } from './utils'; import { toTimeStamp } from '@/utils/date'; export default { @@ -12,17 +12,17 @@ export default { TranslationTime: 0, /** 将后台数据解析成图形*/ - parseDataToGraph(chart, planData, stations, kmRangeCoordMap) { + parseDataToGraph(chart, planData, stations, kmRangeCoordinateMap) { const graphs = []; if (planData && planData.areaList && planData.areaList.length) { - planData.areaList.forEach(el => { - const startTime = toTimeStamp(el.startTime); - const endTime = toTimeStamp(el.endTime); + planData.areaList.forEach(area => { + const startTime = toTimeStamp(area.startTime); + const endTime = toTimeStamp(area.endTime); - const fartherKm = this.getCoordYByObj(stations, kmRangeCoordMap, {stationCode: el.fartherStationCode}); - const closerKm = this.getCoordYByObj(stations, kmRangeCoordMap, {stationCode: el.closerStationCode}); + const fartherKm = this.getCoordinateYByObj(stations, kmRangeCoordinateMap, {stationCode: area.fartherStationCode}); + const closerKm = this.getCoordinateYByObj(stations, kmRangeCoordinateMap, {stationCode: area.closerStationCode}); const point1 = [ startTime, fartherKm]; const point2 = [ endTime, closerKm] const position = chart.convertToPixel('grid', point1); @@ -33,11 +33,11 @@ export default { graphs.push({ type: 'rect', subType: 'Area', - areaNo: el.areaNo, + areaNo: area.areaNo, position, point1, point2, - model: el, + model: area, shape: { x: 0, y: 0, @@ -57,64 +57,127 @@ export default { }, /** 将后台数据解析成折线*/ - parseDataToSeries(chart, planData, stations, kmRangeCoordMap) { + parseDataToSeries(chart, planData, stations, kmRangeCoordinateMap) { const models = []; if (planData && planData.serviceList && planData.serviceList.length) { - planData.serviceList.forEach(el => { - if (el.tripList && - el.tripList.length) { - el.tripList.forEach(trip => { + planData.serviceList.forEach((service,i) => { + if (service.tripList && + service.tripList.length) { + + service.tripList.forEach((trip,j) => { const opt = { - name: `plan-${el.serviceNo}-${trip.tripNo}-${trip.direction}`, + name: `plan-${service.serviceNo}-${trip.tripNo}-${trip.direction}`, type: 'line', symbolSize: 1, showAllSymbol: true, - lineStyle: { - color: '#000', - width: 1, - }, - itemStyle: { - color: '#000', - fill: '#000' - }, markPoint: { data: [] }, data: [] }; - trip.stationTimeList.forEach((elem,idx) => { + var lastPoint = null; + var nextPoint = null; + var pointData = { + name: `${service.serviceNo}-${trip.tripNo}`, + color: '#000', + direction: trip.direction, + coord: [trip.stationTimeList[0].departureTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, trip.stationTimeList[0], trip.direction, false)], + }; + + opt.markPoint.data.push(createMartPoint(pointData)); + + trip.stationTimeList.forEach(elem => { + const name = `${trip.direction}${trip.tripNo}`; if (elem.arrivalTime) { - opt.data.push([elem.arrivalTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), { + opt.data.push([elem.arrivalTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, elem, elem.direction, false), { stationCode: elem.stationCode, - serviceNo: el.serviceNo, + serviceNo: service.serviceNo, tripNo: trip.tripNo, direction: trip.direction, + name }]); } if (elem.departureTime) { - opt.data.push([elem.departureTime, this.getCoordYByObj(stations, kmRangeCoordMap, elem), { + opt.data.push([elem.departureTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, elem, elem.direction, false), { stationCode: elem.stationCode, - serviceNo: el.serviceNo, + serviceNo: service.serviceNo, tripNo: trip.tripNo, direction: trip.direction, + name }]); } }); - models.push(opt); - }); + const model = createSeriesModel(opt, + { color: '#000', width: 1 }, + { color: '#000', fill: '#000'} + ); + models.push(model); + if (service.tripList[j + 1] && + service.tripList[j + 1].stationTimeList) { + const opt = { + name: `reentry-${service.serviceNo}-${trip.tripNo}-${trip.direction}`, + type: 'line', + symbolSize: 1, + showAllSymbol: false, + markPoint: { data: [] }, + data: [] + }; + + lastPoint = trip.stationTimeList[trip.stationTimeList.length-1]; + nextPoint = service.tripList[j + 1].stationTimeList[0]; + const name = `${trip.direction}${trip.tripNo}`; + opt.data.push([lastPoint.arrivalTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, lastPoint, trip.direction, false), { + stationCode: lastPoint.stationCode, + serviceNo: service.serviceNo, + tripNo: trip.tripNo, + direction: trip.direction, + name + }]); + + opt.data.push([lastPoint.arrivalTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, lastPoint, trip.direction, true), { + stationCode: lastPoint.stationCode, + serviceNo: service.serviceNo, + tripNo: trip.tripNo, + direction: trip.direction, + name + }]); + opt.data.push([nextPoint.departureTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, lastPoint, trip.direction, true), { + stationCode: lastPoint.stationCode, + serviceNo: service.serviceNo, + tripNo: trip.tripNo, + direction: trip.direction, + name + }]); + opt.data.push([nextPoint.departureTime, this.getCoordinateYByObj(stations, kmRangeCoordinateMap, lastPoint, trip.direction, false), { + stationCode: lastPoint.stationCode, + serviceNo: service.serviceNo, + tripNo: trip.tripNo, + direction: trip.direction, + name + }]); + + + const model = createSeriesModel(opt, + { color: '#000', width: 1 }, + { color: '#000', fill: '#000'} + ); + models.push(model); + } + }); } }) } + console.log(models) return models; }, /** 更新数据并解析成折线*/ - updateDataToModels(chart, planData, stations, kmRangeCoordMap, series) { + updateDataToModels(chart, planData, stations, kmRangeCoordinateMap, series) { if (planData && planData.length) { } return series; @@ -160,14 +223,29 @@ export default { }); return yText; - }, + }, + + /** 根据方向计算y折返偏移量*/ + getYvalueByDirectionCode(defaultVlue, direction) { + if (direction === '1') { + defaultVlue -= this.EdgeHeight / 2; + } else if (direction === '2') { + defaultVlue += this.EdgeHeight / 2; + } + + return defaultVlue; + }, + /** 根据elem计算y值*/ - getCoordYByObj(stations, kmRangeCoordMap, elem) { + getCoordinateYByObj(stations, kmRangeCoordinateMap, obj, direction, isSpecial) { var defaultVlue = 0; - var station = stations.find(it => { return it.code == elem.stationCode; }); + var station = stations.find(it => { return it.code == obj.stationCode; }); if (station) { - defaultVlue = kmRangeCoordMap[`${station.kmRange}`]; + defaultVlue = kmRangeCoordinateMap[`${station.kmRange}`]; + if (isSpecial) { + defaultVlue = this.getYvalueByDirectionCode(defaultVlue, direction); + } } return defaultVlue; diff --git a/src/jmapNew/theme/aus_00/utils.js b/src/jmapNew/theme/aus_00/utils.js new file mode 100644 index 000000000..404c10ab2 --- /dev/null +++ b/src/jmapNew/theme/aus_00/utils.js @@ -0,0 +1,309 @@ +import store from '@/store/index_APP_TARGET'; +import { timeFormat } from '@/utils/date'; + +/** 创建一个车次数据点*/ +export function createMartPoint(opt) { + const rotate = opt.direction == '2' ? 45 : (opt.direction == '1' ? -45 : 0); + const position = opt.type ? 'insideBottomLeft' : 'insideTopLeft'; + return { + coord: opt.coord, + name: opt.name, + label: { + normal: { + rotate: rotate, + formatter: '{b}', + backgroundColor: 'rgb(242,242,242,0.1)', + color: 'black', + position: position + } + } + }; +} + +/** 创建一个车次数据序列*/ +export function createSeriesModel(opt, lineStyle={}, itemStyle={}) { + return { + z: opt.z || 5, + zlevel: opt.zlevel || 0, + type: 'line', + name: opt.name, + data: opt.data, + sampling: 'average', + symbolSize: opt.symbolSize, + showAllSymbol: opt.showAllSymbol||'auto', + lineStyle: lineStyle, + itemStyle: itemStyle, + markPoint: { + symbol: 'roundRect', + symbolSize: 1, + data: opt.markPoint.data + } + }; +} + +/** 创建标记横线*/ +export function createMarkLineModels(stations, computedYaxis) { + const markLineModel = {}; + if (stations && stations.length) { + markLineModel.type = 'line'; + markLineModel.name = 'markline'; + markLineModel.markLine = {}; + markLineModel.markLine.silent = true; + markLineModel.markLine.data = []; + markLineModel.markLine.lineStyle = { color: '#B0C4DE', width: 0.5 }; + markLineModel.markLine.symbol = 'none'; + markLineModel.elements = [] + stations.forEach((elem, index) => { + markLineModel.markLine.data.push( + { + label: { + show: true, + position: 'start', + formatter: elem.name, + color: 'black' + }, + lineStyle: { + type: 'solid', + width: 0.5, + opacity: 0.5 + }, + yAxis: computedYaxis(elem, index) + } + ); + }); + } + return markLineModel; +} + +/** 创建不会重复颜色的内部对象*/ +export const hexColor = { + colorIndex: 0, + difValue: 0.25, // 一般为0.25 + oddColor: null, + eveColor: null, + oldColor: null, + newColor: null, + colorList: [ + '#000000', '#0000FF', '#8A2BE2', '#A52A2A', '#DEB887', '#5F9EA0', '#7FFF00', '#FF7F50', '#6495ED', '#DC143C', + '#00FFFF', '#008B8B', '#B8860B', '#BDB76B', '#8B008B', '#FF8C00', '#9932CC', '#8FBC8F', '#FF1493', '#00BFFF', + '#FF00FF', '#FFD700', '#FF69B4', '#FF4500', '#DB7093', '#4169E1', '#6A5ACD', '#00FF7F', '#EE82EE', '#40E0D0' + ], + colors: [ + '#B9C671', '#6C9040', '#79C671', '#71A5C6', '#C6A071', '#71C689', '#' + ], + randomHsl: function () { + const h = Math.random(); + const s = Math.random(); + const l = Math.random(); + return [h, s, l]; + }, + hslToRgb: function (h, s, l) { + let r, g, b; + + if (s === 0) { + r = g = b = l; // achromatic + } else { + const hue2rgb = function hue2rgb(p, q, t) { + 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 = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } + + return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; + }, + rgbToHsl: function (r, g, b) { + // eslint-disable-next-line no-sequences + r /= 255, g /= 255, b /= 255; + const max = Math.max(r, g, b); const min = Math.min(r, g, b); + let h; let s; const l = (max + min) / 2; + + if (max === min) { + h = s = 0; // achromatic + } else { + const d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + h /= 6; + } + + return [h, s, l]; + }, + // 固定颜色 + colorFixed() { + var color = this.colorList[this.colorIndex++ % this.colorList.length]; + return color; + }, + // 随机颜色 + colorRandom() { + return '#' + (Math.random() * 0xffffff << 0).toString(16); + }, + // 生成和前一个不同的随机颜色 + colorContrast() { + this.newColor = this.randomHsl(); // 获取随机的hsl,并且给一个默认的hsl + this.newColor[1] = 0.7 + this.newColor[1] * 0.2; // [0.7 - 0.9] 排除过灰颜色 + this.newColor[2] = 0.4 + this.newColor[2] * 0.2; // [0.4 - 0.8] 排除过亮过暗色 + + /** 如果oldColor不为空时，要根据车次号保证两次生成的颜色差值为difValue*/ + this.oldColor = Number(this.colorIndex) % 2 ? this.oddColor : this.eveColor; + if (this.oldColor) { + /** 保证本次的颜色和上次的不一致*/ + for (let i = 0; i < this.newColor.length && i < this.oldColor.length; i++) { + if (i === 0 && Math.abs(this.newColor[i].toFixed(2) - this.oldColor[i].toFixed(2)) < this.difValue) { + this.colorRandom(); + break; + } + } + } + + /** 保存之前的颜色状态*/ + if (Number(this.colorIndex) % 2) { + this.oddColor = this.newColor; + } else { + this.eveColor = this.newColor; + } + + this.colorIndex += 1; + return `#${this.hslToRgb(...this.newColor).map(e => { return Number(e).toString(16); }).join('')}`; + }, + // 渐进颜色 + colorProgressiveColor() { + }, + toCreate: function () { + return this.colorRandom(); + } +}; + +/** 对list数据进行排序, 相同元素保持原有顺序*/ +export function sortListByCallBack(list, callback) { + list.map((elem, index) => { elem[`oldIndex`] = index; }); + list.sort((a, b) => { + return callback(a, b) || a.oldIndex - b.oldIndex; + }); + return list; +} + +/** 将数字转换成asc码*/ +export function numToAsc(num) { + const nmA = 'A'.charCodeAt(0); + const nmZ = 'Z'.charCodeAt(0); + const len = nmZ - nmA + 1; + let str = ''; + + while (num >= 0) { + str = String.fromCharCode(num % len + nmA) + str; + num = Math.floor(num / len) - 1; + } + + return str; +} + +/** 将asc码转换成数字*/ +export function ascToNum(asc) { + const base = 'A'.charCodeAt() - 1; + let idx = asc.length - 1; + let num = 0; + let mulFactor = 1; + while (idx >= 0) { + num += (asc[idx].charCodeAt() - base) * mulFactor; + mulFactor *= 26; + idx -= 1; + } + + return num; +} + +/** 根据索引获取单元格的数据*/ +export function getCellValue(Sheet, index) { + let value; + const cell = Sheet[index]; + if (cell) { + value = cell.w || cell.v; + } + + return value; +} + +/** 转换sheet数据为json数据*/ +export function convertSheetToList(Sheet, isReverse) { + const dataList = []; + + if (Sheet) { + const refarea = Sheet['!ref']; + const regular = /([a-zA-Z]+)([0-9]+):([a-zA-Z]+)([0-9]+)/i; + + if (refarea == null) return []; // "A1:M698" + if (regular.test(refarea)) { + /** 正则转换解析行列数据*/ + const CoordList = regular.exec(refarea); + /** 转换数据为二维数组*/ + const colBeg = ascToNum(CoordList[1]); + const colEnd = ascToNum(CoordList[3]); + const rowBeg = Number(CoordList[2]); + const rowEnd = Number(CoordList[4]); + + if (isReverse) { + for (let i = colBeg - 1; i < colEnd; i++) { + dataList.push([]); + for (let j = rowBeg; j <= rowEnd; j++) { + dataList[dataList.length - 1].push(getCellValue(Sheet, numToAsc(i) + j)); + } + } + } else { + for (let i = rowBeg; i <= rowEnd; i++) { + dataList.push([]); + for (let j = colBeg - 1; j < colEnd; j++) { + dataList[dataList.length - 1].push(getCellValue(Sheet, numToAsc(j) + i)); + } + } + } + } + } + + return dataList; +} + +/** 通过time将时间格式化*/ +export function formatTime(time) { + if (Number.isInteger(time)) { + return timeFormat(time); + } else { + return ''; + } +} + +/** 通过code将名称格式化*/ +export function formatName(code) { + let name = ''; + const device = store.getters['map/getDeviceByCode'](code); + if (device) { + name = device.name; + } + return name; +} + +/** 将时间格式化前补零*/ +export function prefixTime(time) { + let str = `${time}` || ''; + if (str) { + const list = str.split(':'); + str = list.map(elem => { + return `00000${elem}`.substr(-2); + }).join(':'); + } + + return str; +} diff --git a/src/views/planMonitor/editToolAUS/index.vue b/src/views/planMonitor/editToolAUS/index.vue index 904067245..7c15bfec7 100644 --- a/src/views/planMonitor/editToolAUS/index.vue +++ b/src/views/planMonitor/editToolAUS/index.vue @@ -17,7 +17,7 @@
New - Set Param + Set Param
Plan @@ -46,7 +46,7 @@ import PlanJustStop from './dialog/planJustStop.vue'; import PlanSetParams from './dialog/planSetParams.vue'; import PlanModifyArea from './dialog/planModifyArea.vue'; import Menus from './menus.vue'; -import { DeviceMenu } from '@/scripts/ConstDic'; +import { MenuEnum } from './utils.js'; import { timeFormat } from '@/utils/date'; import { mapGetters } from 'vuex'; import { getStationList } from '@/api/runplan'; @@ -99,8 +99,8 @@ export default { lineCode() { return '00'; }, - DeviceMenu() { - return DeviceMenu; + MenuEnum() { + return MenuEnum; } }, watch: { @@ -157,6 +157,7 @@ export default { onClear() { this.model.action = ''; this.selected = null; + this.target = null; this.$refs.schedule.setLineReset(); this.$refs.schedule.clearGraphic(); }, diff --git a/src/views/planMonitor/editToolAUS/schedule.vue b/src/views/planMonitor/editToolAUS/schedule.vue index e720d7c16..a97f35136 100644 --- a/src/views/planMonitor/editToolAUS/schedule.vue +++ b/src/views/planMonitor/editToolAUS/schedule.vue @@ -47,7 +47,7 @@ export default { myChart: null, stations: [], planData: [], - kmRangeCoordMap:{} + kmRangeCoordinateMap:{} }; }, computed: { @@ -148,11 +148,17 @@ export default { type: 'inside', zoomOnMouseWheel : 'ctrl', moveOnMouseMove : 'ctrl', - moveOnMouseWheel: 'ctrl' }, { - type: 'slider', - filterMode: 'empty', + fiterMode: 'filter', + handleSize: '80%', + handleStyle: { + color: '#fff', + shadowBlur: 3, + shadowColor: 'rgba(0, 0, 0, 0.6)', + shadowOffsetX: 2, + shadowOffsetY: 2 + }, bottom: '20px' } ] @@ -231,7 +237,7 @@ export default { this.myChart.showLoading(); this.stations = stations; - this.kmRangeCoordMap = this.planUtil.convertStationsToMap(this.stations); + this.kmRangeCoordinateMap = this.planUtil.convertStationsToMap(this.stations); this.xAxisInit(stations); this.yAxisInit(stations); @@ -252,8 +258,8 @@ export default { this.planData = planData; this.pushModels(option.series, [this.planUtil.initializeYaxis(this.stations)]); - this.pushModels(option.series, this.planUtil.parseDataToSeries(this.myChart, planData, this.stations, this.kmRangeCoordMap)); - this.pushModels(option.graphic[0].elements, this.planUtil.parseDataToGraph(this.myChart, planData, this.stations, this.kmRangeCoordMap)); + this.pushModels(option.series, this.planUtil.parseDataToSeries(this.myChart, planData, this.stations, this.kmRangeCoordinateMap)); + this.pushModels(option.graphic[0].elements, this.planUtil.parseDataToGraph(this.myChart, planData, this.stations, this.kmRangeCoordinateMap)); this.myChart.setOption(option, {notMerge: true}); } catch (error) {