iscs调整
This commit is contained in:
fan
parent
e8039732ab
commit
9233728346
@ -2,4 +2,11 @@ import deviceType from './deviceType';
|
||||
|
||||
const deviceRender = {};
|
||||
|
||||
/** IbpText渲染配置*/
|
||||
deviceRender[deviceType.ManualAlarmButton] = {
|
||||
_type: deviceType.ManualAlarmButton,
|
||||
zlevel: 1,
|
||||
z: 4
|
||||
};
|
||||
|
||||
export default deviceRender;
|
||||
|
||||
@ -36,8 +36,6 @@ export function deviceFactory(type, elem) {
|
||||
export function parser(data) {
|
||||
var iscsDevice = {};
|
||||
if (data) {
|
||||
Object.assign(data.background);
|
||||
iscsDevice[data.background.code] = deviceFactory(deviceType.Background, data.background);
|
||||
|
||||
zrUtil.each(data.squareButtonList || [], elem => {
|
||||
iscsDevice[elem.code] = deviceFactory(deviceType.SquareButton, elem);
|
||||
|
||||
@ -34,6 +34,7 @@ const CacheControl = () => import('@/views/system/cacheControl/index');
|
||||
const SystemGenerate = () => import('@/views/system/systemGenerate/index');
|
||||
const IbpDraw = () => import('@/views/system/ibpDraw/index');
|
||||
const IscsDraw = () => import('@/views/system/iscsDraw/index');
|
||||
const IscsDesign = () => import('@/views/system/iscsDesign/index');
|
||||
const News = () => import('@/views/system/news/index');
|
||||
const CommandDictionary = () => import('@/views/system/commandDictionary/index');
|
||||
const CommandDictionaryDetail = () => import('@/views/system/commandDictionary/edit');
|
||||
@ -779,11 +780,18 @@ export const asyncRouter = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path:'iscs/edit',
|
||||
component: IscsDraw,
|
||||
path:'iscs/design',
|
||||
component: IscsDesign,
|
||||
meta: {
|
||||
i18n: 'router.iscsDraw'
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'edit/:id/:mode',
|
||||
component: IscsDraw,
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'dictionary',
|
||||
|
||||
@ -27,8 +27,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: this.$store.state.config.width,
|
||||
height: this.$store.state.config.height,
|
||||
dataZoom: {
|
||||
offsetX: '0',
|
||||
offsetY: '0',
|
||||
@ -57,6 +55,12 @@ export default {
|
||||
]),
|
||||
iscsId() {
|
||||
return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.config.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.config.height;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -85,7 +89,6 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setWindowSize();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.iscsDestroy();
|
||||
|
||||
160
src/views/system/iscsDesign/demonList.vue
Normal file
160
src/views/system/iscsDesign/demonList.vue
Normal file
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="joylink-card map-list-main">
|
||||
<div class="clearfix">
|
||||
<span>{{ $t('map.myMapList') }}</span>
|
||||
</div>
|
||||
<div class="text_item">
|
||||
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
|
||||
<div class="tree_box">
|
||||
<el-tree ref="tree" :data="treeList" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent" @node-contextmenu="showContextMenu">
|
||||
<span slot-scope="{ node:tnode, data }">
|
||||
<span class="el-icon-tickets" :style="{color: data.valid ? 'green':''}" />
|
||||
<span> {{ tnode.label }}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="buttonList">
|
||||
<el-button size="small" type="primary" class="eachButton" @click="createMap">{{ $t('map.newConstruction') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import { removeSessionStorage } from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'UserMapList',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
defaultShowKeys: [],
|
||||
filterText: '',
|
||||
treeList: [],
|
||||
selected: {},
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
point: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
editModel: {},
|
||||
lineCode: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// role() {
|
||||
// return this.$store.state.user.roles.includes('04') ||
|
||||
// this.$store.state.user.roles.includes('05') ||
|
||||
// this.$store.state.user.roles.includes('01');
|
||||
// }
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
removeSessionStorage('demonList');
|
||||
},
|
||||
mounted() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
createMap() {
|
||||
this.$emit('createMap');
|
||||
},
|
||||
async loadInitData() {
|
||||
this.treeList = [];
|
||||
this.treeList = [
|
||||
{
|
||||
name: 'iscs系统',
|
||||
id: 0,
|
||||
children: [
|
||||
{
|
||||
name: 'HMI界面',
|
||||
mode: 'hmi',
|
||||
id: '1'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
},
|
||||
clickEvent(obj, data, ele) {
|
||||
this.$router.push({ path: `/system/iscs/design/edit/${obj.Id}/${obj.mode}` });
|
||||
},
|
||||
showContextMenu(e, obj, node, vueElem) {
|
||||
if (obj && obj.type == 'map') {
|
||||
e.preventDefault();
|
||||
const menu = DeviceMenu.Map;
|
||||
|
||||
this.point = {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
};
|
||||
this.editModel = obj;
|
||||
this.editModel.lineCode = obj.lineCode;
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.clearfix{
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
box-sizing: border-box;
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
}
|
||||
.text_item{
|
||||
height: calc(100% - 47px);
|
||||
.tree_box{
|
||||
height: calc(100% - 89px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.buttonList{
|
||||
padding: 8px 0px 8px 0px;
|
||||
border-top: 1px #ccc solid;
|
||||
}
|
||||
.eachButton{
|
||||
margin-left:10px;
|
||||
}
|
||||
.uploadDemo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// float: right;
|
||||
padding: 9px 15px;
|
||||
margin-right: 3px;
|
||||
cursor: pointer;
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.map-list-main{
|
||||
text-align:left;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
100
src/views/system/iscsDesign/index.vue
Normal file
100
src/views/system/iscsDesign/index.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="app-wrapper">
|
||||
<div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
|
||||
<demon-list ref="demonList" :width="widthLeft" @createMap="createMap" />
|
||||
</div>
|
||||
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
|
||||
<transition>
|
||||
<router-view />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import demonList from './demonList';
|
||||
import drapLeft from '@/views/components/drapLeft/index';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
import localStore from 'storejs';
|
||||
import { getSessionStorage, setSessionStorage } from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'DesignPlatform',
|
||||
components: {
|
||||
demonList,
|
||||
drapLeft
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listShow: true,
|
||||
widthLeft: Number(localStore.get('LeftWidth')) || 450,
|
||||
lineCode: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'lessonbar'
|
||||
]),
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'lessonbar.opened': function (val) {
|
||||
this.listShow = val;
|
||||
},
|
||||
widthLeft(val) {
|
||||
this.setMapResize(val);
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.resize();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const againEnter = getSessionStorage('againEnter') || null;
|
||||
if (!againEnter) {
|
||||
launchFullscreen();
|
||||
setSessionStorage('againEnter', true);
|
||||
}
|
||||
this.resize();
|
||||
this.widthLeft = Number(localStore.get('LeftWidth'));
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
|
||||
},
|
||||
drapWidth(width) {
|
||||
this.widthLeft = Number(width);
|
||||
},
|
||||
resize() {
|
||||
this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
|
||||
const width = this.$store.state.app.width - 521 - this.widthLeft;
|
||||
const height = this.$store.state.app.height - 90;
|
||||
console.log(width, height, this.widthLeft);
|
||||
this.$store.dispatch('config/resize', { width: width, height: height });
|
||||
},
|
||||
setMapResize(LeftWidth) {
|
||||
const widths = this.$store.state.app.width - 521 - LeftWidth;
|
||||
const heights = this.$store.state.app.height - 90;
|
||||
console.log(widths, heights, '111111');
|
||||
this.$store.dispatch('config/resize', { width: widths, height: heights });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.examList {
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="mapPaint">
|
||||
<div class="map-view">
|
||||
<iscs-plate ref="iscsPlate" :size="size" />
|
||||
<iscs-plate ref="iscsPlate" />
|
||||
</div>
|
||||
<div class="map-draft">
|
||||
<iscs-operate ref="iscsOperate" @iscsChange="iscsChange" />
|
||||
@ -29,12 +29,9 @@ export default {
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 });
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 });
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.iscsPlate.show();
|
||||
|
||||
@ -13,6 +13,11 @@
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="addModel.y" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
@ -25,19 +30,68 @@ export default {
|
||||
addModel:{
|
||||
code: '',
|
||||
width: '',
|
||||
x: '',
|
||||
y: ''
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
|
||||
x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
|
||||
y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
|
||||
}
|
||||
},
|
||||
showDeleteButton: false,
|
||||
buttonText: '立即创建'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doSave() {
|
||||
|
||||
onSubmit(form) {
|
||||
if (!this.addModel.code) {
|
||||
this.generateCode();
|
||||
}
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const maButtonModel = {
|
||||
point: {
|
||||
x: this.addModel.x,
|
||||
y: this.addModel.y
|
||||
},
|
||||
code: this.addModel.code,
|
||||
_type: 'manualAlarmButton',
|
||||
width: this.addModel.width
|
||||
};
|
||||
this.$emit('createManualAlarm', maButtonModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const maButtonModel = {
|
||||
point: {
|
||||
x: this.addModel.x,
|
||||
y: this.addModel.y
|
||||
},
|
||||
code: this.addModel.code,
|
||||
_type: 'manualAlarmButton',
|
||||
width: this.addModel.width
|
||||
};
|
||||
this.$emit('deleteDataModel', maButtonModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.addModel = {
|
||||
code: '',
|
||||
width: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.addModel.code = 'manualAlarmButton_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user