joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

iscs 代码调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2021-04-06 10:19:23 +08:00
parent 4322001225
commit e6f7d8a207
8 changed files with 579 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/iscs_new/core/form/allElments.js
View File

@ -1,19 +0,0 @@
// export const allElements = {
// elementsList:[
// {code:'line', name:'线段'},
// {code:'text', name:'文字'},
// {code:'rect', name:'矩形'},
// {code:'circle', name:'圆形'},
// {code:'polygon', name:'多边形'},
// {code:'triangle', name:'三角形'},
// {code:'arrow', name:'箭头'},
// {code:'polyline', name:'多边形折线段'},
// {code:'isogon', name:'正多边形'},
// {code:'ellipse', name:'椭圆'},
// {code:'arc', name:'圆弧'},
// {code:'sector', name:'扇形'},
// {code:'heart', name:'心形'},
// {code:'droplet', name:'水滴'}
// ]
// };

37
src/iscs_new/core/form/builderFactory.js Normal file
View File

@ -0,0 +1,37 @@
import {elementConst} from './elementConst';
import form2Base from './form2Base';
class BuilderFactory {
constructor() {
this.formList = [];
}
getFormList() {
const elementList = elementConst.elementsList;
elementList.forEach(element=>{
const temp = Object.assign({}, element);
temp.formGroup = [];
temp.model = {};
temp.rules = {};
// 添加通用配置
temp.formGroup.push({name:'通用配置', code:'base', styleList:form2Base});
form2Base.forEach(each=>{
temp.model[each.prop] = each.defValue;
temp.rules[each.prop] = each.rules;
});
// 添加绘图配置 shape
// temp.formGroup.push({name:'绘图配置', code:'shape', styleList:form2Base});
// temp.rules
// let ClassName=element.code;
// const = elementTypeList[element];
// temp.formStyle=new ClassName();
// 添加样式配置 style
this.formList.push(temp);
});
return this.formList;
}
}
export default BuilderFactory;

19
src/iscs_new/core/form/elementConst.js Normal file
View File

@ -0,0 +1,19 @@
export const elementConst = {
elementsList:[
{code:'line', name:'线段', formList:{style:[], shape:[] }},
{code:'text', name:'文字', formList:{style:[], shape:[] }},
{code:'rect', name:'矩形', formList:{style:[], shape:[] }},
{code:'circle', name:'圆形', formList:{style:[], shape:[] }},
{code:'polygon', name:'多边形', formList:{style:[], shape:[] }},
{code:'triangle', name:'三角形', formList:{style:[], shape:[] }},
{code:'arrow', name:'箭头', formList:{style:[], shape:[] }},
{code:'polyline', name:'多边形折线段', formList:{style:[], shape:[] }},
{code:'isogon', name:'正多边形', formList:{style:[], shape:[] }},
{code:'ellipse', name:'椭圆', formList:{style:[], shape:[] }},
{code:'arc', name:'圆弧', formList:{style:[], shape:[] }},
{code:'sector', name:'扇形', formList:{style:[], shape:[] }},
{code:'heart', name:'心形', formList:{style:[], shape:[] }},
{code:'droplet', name:'水滴', formList:{style:[], shape:[] }}
]
};

3
src/iscs_new/core/form/elementForm/lineForm.js
View File

@ -1,3 +0,0 @@
class lineForm {
}

70
src/iscs_new/core/form/form2Base.js
View File

@ -1,37 +1,33 @@
export default {
// number 0 控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低，而且不会创建新的 Canvas。
z2: {
prop: 'z', label: '层级 z2', type: 'select', defValue: 10,
},
name: {
},
// boolean false 是否进行裁剪。
culling: {
},
// string 'pointer' 鼠标移到元素上时的鼠标样式。
cursor: {
},
// boolean false 图形是否可拖曳。
draggable: {
},
// boolean false 图形是否不可见，为 true 时不绘制图形，但是仍能触发鼠标事件。
invisible: {
},
// number -1 是否渐进式渲染。当图形元素过多时才使用，用大于 0 的数字表示渲染顺序。
progressive: {
},
// boolean false 是否使用包围盒检验鼠标是否移动到物体。false 则检测元素实际的内容。
rectHover: {
},
// boolean false 是否响应鼠标事件。
silent: {
}
}
export default [
// number 0 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。
{ prop: 'z', label: '层级 z',
type: 'number', precisionFlag:0, min:0, max:100, step:1,
rules:[{ required: true, message:'请输入层级z', trigger: 'blur' }],
defValue: 1, required:true
},
// number 0 控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低，而且不会创建新的 Canvas。
{ prop: 'z2', label: '层级 z2',
type: 'number', precisionFlag:0, min:0, max:100, step:1,
rules:[{ required: true, message:'请输入层级z2', trigger: 'blur' }],
defValue: 10, required:true
}
// boolean false 图形是否不可见，为 true 时不绘制图形，但是仍能触发鼠标事件。
// {prop: 'invisible', label: '不可见', type: 'switch', defValue: false,required:true},
// // boolean false 是否响应鼠标事件。
// {prop: 'silent', label: '响应鼠标事件', type: 'switch', defValue: false,required:true}
// // boolean false 是否进行裁剪。
// culling: {
// },
// // string 'pointer' 鼠标移到元素上时的鼠标样式。
// cursor: {
// },
// // boolean false 图形是否可拖曳。
// draggable: {
// },
// // number -1 是否渐进式渲染。当图形元素过多时才使用，用大于 0 的数字表示渲染顺序。
// progressive: {
// },
// // boolean false 是否使用包围盒检验鼠标是否移动到物体。false 则检测元素实际的内容。
// rectHover: {
// },
];

81
src/views/iscs_new/components/dataForm.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<el-form ref="form" :model="formModel" :rules="rules" class="composeForm" label-width="auto">
<div v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
<div class="styleGroupName">
{{ styleGroup.name }}
</div>
<template v-for="item in styleGroup.styleList">
<template v-if="checkFieldType(item, 'number')">
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required" class="formName">
<el-input-number
v-if="item.precisionFlag"
v-model="formModel[styleGroup.code][item.prop]"
size="mini"
:min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max"
:step="isNaN(item.step) ? -Infinity : item.step"
:precision="item.precision"
/>
<el-input-number
v-else
v-model="formModel[styleGroup.code][item.prop]"
size="mini"
:min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max"
:step="isNaN(item.step) ? -Infinity : item.step"
/>
</el-form-item>
</template>
<template v-else-if="checkFieldType(item, 'switch')">
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
<el-switch
v-model="formModel[styleGroup.code][item.prop]"
:active-color="item.activeColor || '#409eff'"
:inactive-color="item.inactiveColor || '#dcdfe6'"
/>
</el-form-item>
</template>
</template>
</div>
</el-form>
</template>
<script>
export default {
name:'DataForm',
props: {
form: {
type: Object,
required: true
},
formModel: {
type: Object,
required: true
},
rules: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
};
},
mounted() {
},
methods: {
checkFieldType(field, type) {
return field.type === type;
}
}
};
</script>
<style lang="scss" scoped>
.composeForm{padding: 10px 15px;}
.styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin-bottom: 30px;}
.formName .el-form-item__label {font-size:14px;}
.formName.el-form-item {margin-bottom:12px}
.styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
</style>

61
src/views/iscs_new/iscsDraw/index.vue
View File

@ -14,27 +14,35 @@
@click="handleSave"
>保存</el-button>
</div>
<el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
<!-- <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
<el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code">{{ element.name }}</el-tab-pane>
</el-tabs> -->
<el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
<el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code">
<data-form :ref="'dataform'+index" :form="element" :form-model="element.model" :rules="element.rules" />
</el-tab-pane>
</el-tabs>
</el-card>
</div>
<div class="right-card" :class="{'hide': tableShow}">
<!-- <div class="right-card" :class="{'hide': tableShow}">
<div class="btn_table_box" @click="clickTableBtn"><i :class="tableShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
</div>
</div> -->
</div>
</transition>
</template>
<script>
import localStore from 'storejs';
import IscsPlate from '@/views/iscsSystem/index';
import {allElements} from '@/iscs_new/core/form/allElments';
// import {allElements} from '@/iscs_new/core/form/allElments';
import BuilderFactory from '@/iscs_new/core/form/builderFactory';
import DataForm from '../components/dataForm';
import { saveIscsElement } from '@/api/iscs';
export default {
name: 'IscsView',
components: {
IscsPlate
IscsPlate,
DataForm
},
data() {
return {
@ -44,7 +52,7 @@ export default {
},
widthLeft: Number(localStore.get('LeftWidth')) || 450,
draftShow: false,
tableShow: false,
// tableShow: false,
enabledTab:'',
elementList:[]
};
@ -60,10 +68,13 @@ export default {
}
},
mounted() {
this.$refs.iscsPlate.show(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
this.$refs.iscsPlate.drawIscsInit();
debugger;
this.elementList = allElements.elementsList;
// this.$refs.iscsPlate.show(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
// this.$refs.iscsPlate.drawIscsInit();
// debugger;
// this.elementList = allElements.elementsList;
// this.enabledTab = this.elementList[0].code;
this.composeName = this.$route.query.composeName;
this.elementList = new BuilderFactory().getFormList();
this.enabledTab = this.elementList[0].code;
},
beforeDestroy() {
@ -77,22 +88,22 @@ export default {
clickDraftBtn() {
this.draftShow = !this.draftShow;
},
clickTableBtn() {
this.tableShow = !this.tableShow;
},
// clickTableBtn() {
// this.tableShow = !this.tableShow;
// },
handleSave(data) {
const param = {
graphData: data,
mapId: this.$route.query.mapId,
system: this.$route.query.system,
totalSystem: this.$route.query.mode,
userInterface: this.$route.query.part
};
saveIscsElement(param).then(resp => {
this.$message.success('ISCS数据保存成功！');
}).catch(() => {
this.$message.error('ISCS数据保存异常！');
});
// const param = {
// graphData: data,
// mapId: this.$route.query.mapId,
// system: this.$route.query.system,
// totalSystem: this.$route.query.mode,
// userInterface: this.$route.query.part
// };
// saveIscsElement(param).then(resp => {
// this.$message.success('ISCS数据保存成功！');
// }).catch(() => {
// this.$message.error('ISCS数据保存异常！');
// });
},
handleTabClick() {

373
src/views/newMap/displayNew/demon/runPlanView2.vue Normal file
View File

@ -0,0 +1,373 @@
<template>
<!-- v-dialogDrag -->
<el-dialog
v-dialogLoading="dialogLoading"
:title="title"
:visible.sync="dialogShow"
width="100%"
:before-close="doClose"
:close-on-click-modal="false"
:modal="false"
fullscreen
>
<div :id="runPlanId" v-loading="loading" />
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { getPublishMapInfo } from '@/api/jmap/map';
import { timeFormat } from '@/utils/date';
import echarts from 'echarts';
import {toTimeStamp, formatDuring} from '@/utils/date';
// 运行图预览
export default {
name: 'RunPlanView',
props: {
group: {
type: String,
required: true
}
},
data() {
return {
dialogShow: false,
loading: true,
runPlanId: 'run-plan-view',
myChart: null,
PlanConvert: {},
series: [],
option: {
title: {
text: '',
left: 'center'
},
grid: {
top: '30px',
left: '120px',
right: '40px',
bottom: '80px',
containLabel: true,
backgroundColor: 'floralwhite'
},
toolbox: {
// right: '20px',
// feature: {
// dataZoom: {
// yAxisIndex: 'none'
// },
// restore: {},
// saveAsImage: {}
// }
},
tooltip: {
axisPointer: {
trigger: 'item',
type: 'cross'
},
formatter: this.axisTooltip,
borderWidth: 1
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [],
axisLine: {
onZero: false,
lineStyle: {
width: 2,
color: '#d14a61'
}
},
axisLabel: {
formatter: this.xAxisLableFormat,
textStyle: {
color: '#333'
}
},
axisPointer: {
snap: true,
label: {
formatter: this.xAxisPointFormat,
backgroundColor: 'rgb(255,0,0,0.5)',
color: 'white'
}
}
}
],
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
onZero: false,
lineStyle: {
width: 2,
color: '#d14a61'
}
},
axisLabel: {
interval: 'auto',
formatter: this.yAxisLableFormat
},
axisPointer: {
xAxisIndex: 'all',
label: {
formatter: this.yAxisPointFormat,
backgroundColor: 'rgb(0,100,0,0.5)',
color: 'white'
}
},
min: 0,
max: 0
},
// graphic: {
// type: 'line',
// progressive: true
// },
series: [],
dataZoom: [
{
type: 'inside'
},
{
fiterMode: 'filter',
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
},
bottom: '25px'
}
]
},
absoluteTime: 2 * 3600,
indexKmRangeMap: {},
runPlanData: {},
dialogLoading: false,
initialPlanData: []
};
},
computed: {
...mapGetters('runPlan', [
'stations'
]),
title() {
return this.$t('display.runPlan.previewRunDiagram');
}
},
watch: {
'$store.state.runPlan.planLoadedCount': async function () {
try {
await this.loadChartPage();
if (this.dialogShow) {
await this.loadInitData(this.series);
}
} catch (e) {
console.error(e);
} finally {
this.loading = false;
}
},
'$store.state.runPlan.planUpdateCount': function () {
this.updateRunPlanData(this.$store.state.runPlan.updateData);
},
'$store.state.app.windowSizeCount': function() {
this.reSize({ width: this.$store.state.app.width, height: this.$store.state.app.height - 55 });
}
},
mounted() {
getPublishMapInfo(this.$route.query.mapId).then(res=>{
this.PlanConvert = this.$theme.loadPlanConvert(res.data.lineCode);
this.initialPlanData = this.$store.state.runPlan.planData;
this.loadChartPage();
});
},
beforeDestroy() {
if (this.myChart && this.myChart.isDisposed) {
this.myChart.dispose();
this.myChart = null;
}
},
methods: {
async doShow() {
try {
this.dialogLoading = true;
this.dialogShow = true;
this.loadInitData(this.series);
} catch (e) {
console.error(e);
} finally {
this.dialogLoading = false;
}
},
async doClose() {
this.dialogShow = false;
},
async loadChartPage() {
const stations = this.$store.state.runPlan.stations;
const planData = this.$store.state.runPlan.planData;
this.series = [];
this.kmRangeCoordMap = this.PlanConvert.convertStationsToMap(stations);
this.pushModels(this.series, [this.PlanConvert.initializeYaxis(stations)]);
this.pushModels(this.series, this.PlanConvert.convertDataToModels(planData, stations, this.kmRangeCoordMap, { width: 1, color: '#000' }));
},
async loadInitData(series) {
this.myChart && this.myChart.showLoading();
await this.xAxisInit();
await this.yAxisInit();
await this.loadInitChart(series);
this.myChart && this.myChart.hideLoading();
},
loadInitChart(series) {
return new Promise((resolve, reject) => {
try {
if (this.myChart && this.myChart.isDisposed) {
this.myChart.clear();
}
let startValue = 3600 + this.PlanConvert.TranslationTime;
const offsetTime = 3600;
const initTime = toTimeStamp(formatDuring(this.$store.state.training.initTime));
startValue = initTime - this.PlanConvert.TranslationTime;
this.option.dataZoom[0].startValue = this.option.dataZoom[1].startValue = startValue - offsetTime;
this.option.dataZoom[0].endValue = this.option.dataZoom[1].endValue = startValue + offsetTime;
this.option.series = series;
this.myChart = echarts.init(document.getElementById(this.runPlanId));
if (this.myChart) {
this.myChart.setOption(this.option);
this.reSize({ width: document.documentElement.clientWidth - 10, height: document.documentElement.clientHeight - 55 });
this.myChart.on('click', this.mouseClick);
}
resolve(true);
} catch (error) {
reject(error);
}
});
},
updateRunPlanData(data) {
const stations = this.$store.state.runPlan.stations;
const planData = this.$store.state.runPlan.planData;
const initialPlanData = this.$store.state.runPlan.initialPlanData;
if (data[0] && initialPlanData[data[0].serviceNumber]) {
Object.keys(initialPlanData[data[0].serviceNumber].trainMap).forEach(item => {
if (initialPlanData[data[0].serviceNumber].trainMap[item + ''].tripNumber == data[0].tripNumber) {
data[0].directionCode = initialPlanData[data[0].serviceNumber].trainMap[item + ''].directionCode;
}
});
}
if (data[0]) {
data[0].secondTime = data[0].second;
}
this.series = this.PlanConvert.updateDataToModels(data, stations, this.kmRangeCoordMap,
planData, this.series, { color: '#FF00DE', width: 2 }
);
this.myChart && this.myChart.setOption({ series: this.series });
},
pushModels(series, models) {
if (models && models.length) {
models.forEach(elem => {
if (elem) {
series.push(elem);
}
});
}
return series;
},
popModels(series, models) {
if (models && models.length) {
models.forEach(elem => {
const index = series.indexOf(elem);
if (index >= 0) {
series.split(index, 1);
}
});
}
return series;
},
xAxisPointFormat(params) {
return timeFormat(params.value);
},
yAxisPointFormat(params) {
return this.PlanConvert.computedFormatYAxis(this.stations, params);
},
xAxisLableFormat(value, index) {
if (value % 60 === 0) {
return timeFormat(value);
}
},
yAxisLableFormat(value, index) {
return '';
},
xAxisInit() {
const list = [];
for (var time = this.PlanConvert.TranslationTime; time < 3600 * 24 + this.PlanConvert.TranslationTime; time++) {
list.push(time);
}
this.option.xAxis[0].data = list;
},
yAxisInit() {
if (Object.keys(this.PlanConvert).length) {
this.option.yAxis.min = this.PlanConvert.computedYaxisMinValue(this.stations);
this.option.yAxis.max = this.PlanConvert.computedYaxisMaxValue(this.stations);
}
},
axisTooltip(param) {
const station = this.stations[Math.floor((param.data[1] - this.PlanConvert.EdgeHeight) / this.PlanConvert.CoordMultiple)] || { name: '', kmRange: '' };
return [
`Point Data <hr size=1 style="margin: 3px 0">`,
`${this.$t('display.runPlan.stationName')}: ${station.name}<br>`,
`${this.$t('display.runPlan.stationMark')}: ${station.kmRange} km <br>`,
`${this.$t('display.runPlan.arrivalTime')}: ${timeFormat(param.data[0] + this.PlanConvert.TranslationTime)} (${param.data[0]})<br>`
].join('');
},
settingExac(data) {
this.absoluteTime = Math.abs(parseInt(data.endValue) - parseInt(data.startValue)) / 1000;
this.myChart && this.myChart.setOption({
xAxis: this.option.xAxis,
yAxis: this.option.yAxis
});
this.myChart && this.myChart.dispatchAction({
type: 'dataZoom',
dataZoomIndex: [0, 1],
startValue: parseInt(data.startValue / 1000),
endValue: parseInt(data.endValue / 1000)
});
},
run(start) {
this.myChart && this.myChart.dispatchAction({
type: 'dataZoom',
dataZoomIndex: [0, 1],
startValue: parseInt(start - this.absoluteTime / 2),
endValue: parseInt(start + this.absoluteTime / 2)
});
this.loadInitData(this.series);
},
reSize(opt) {
if (this.myChart) {
this.myChart.resize({ width: opt.width, height: opt.height, silent: false });
}
}
}
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
/deep/ {
.el-dialog__body {
padding: 0px !important;
background-color: floralwhite !important;
}
}
</style>