调整线路配置项，增加 ISCS 绘图元素

2020-01-16 18:02:57 +08:00 · 2020-01-16 18:02:57 +08:00 · 27257482ab
commit 27257482ab
parent 4a67f2b096
13 changed files with 318 additions and 44 deletions
--- a/src/iscs/constant/deviceRender.js
+++ b/src/iscs/constant/deviceRender.js
@ -52,11 +52,18 @@ deviceRender[deviceType.FrozenPump] = {
    z: 0
 };

-/** IbpText渲染配置*/
+/** Vidicon渲染配置*/
 deviceRender[deviceType.Vidicon] = {
    _type: deviceType.Vidicon,
    zlevel: 1,
    z: 4
 };

+/** VidiconCloud渲染配置*/
+deviceRender[deviceType.VidiconCloud] = {
+    _type: deviceType.VidiconCloud,
+    zlevel: 1,
+    z: 4
+};
+
 export default deviceRender;
--- a/src/iscs/constant/deviceType.js
+++ b/src/iscs/constant/deviceType.js
@ -1,6 +1,7 @@
 const deviceType = {
    ManualAlarmButton: 'manualAlarmButton',
    Vidicon: 'Vidicon',
+    VidiconCloud: 'VidiconCloud',
    CheckBox: 'CheckBox',
    FrozenPump:'FrozenPump',
    FireHydranAlarmButton: 'fireHydranAlarmButton',
--- a/src/iscs/shape/Vidicon.js
+++ b/src/iscs/shape/Vidicon.js
@ -2,7 +2,7 @@ import Group from 'zrender/src/container/Group';
 import Rect from 'zrender/src/graphic/shape/Rect';
 import Polyline from 'zrender/src/graphic/shape/Polyline';

-export default class Button extends Group {
+export default class Vidicon extends Group {
    constructor(device) {
        super();
        this.model = device.model;
--- a/src/iscs/shape/VidiconCloud.js
+++ b/src/iscs/shape/VidiconCloud.js
@ -0,0 +1,66 @@
+import Group from 'zrender/src/container/Group';
+import Sector from 'zrender/src/graphic/shape/Sector';
+import Polyline from 'zrender/src/graphic/shape/Polyline';
+
+export default class VidiconCloud extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.zlevel;
+        this.create();
+    }
+    create() {
+        console.log(this.model, Math.cos(45 * (Math.PI / 180)));
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.semicircle = new Sector({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape: {
+                cx: this.model.point.x,
+                cy: this.model.point.y,
+                r: this.model.r || 30,
+                startAngle: 0,
+                endAngle: Math.PI,
+                clockwise: true
+            },
+            style: {
+                stroke: '#00FF00',
+                lineWidth: 2,
+                fill: 'rgba(0,0,0,0)'
+            }
+        });
+
+        this.Polyline = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z + 1,
+            shape: {
+                points: [
+                    [this.model.point.x + this.model.r / 2, this.model.point.y],
+                    [this.model.point.x - Math.cos(45 * (Math.PI / 180)) * this.model.r, this.model.point.y + Math.sin(45 * (Math.PI / 180)) * this.model.r],
+                    [this.model.point.x - Math.cos(55 * (Math.PI / 180)) * this.model.r, this.model.point.y + Math.sin(55 * (Math.PI / 180)) * this.model.r],
+                    [this.model.point.x + this.model.r / 1.2, this.model.point.y]
+                ]
+            },
+            style: {
+                stroke: '#00FF00',
+                lineWidth: 2,
+                fill: '#00FF00'
+            }
+        });
+
+        this.grouper.add(this.semicircle);
+        this.grouper.add(this.Polyline);
+        this.add(this.grouper);
+    }
+
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}
--- a/src/iscs/shape/factory.js
+++ b/src/iscs/shape/factory.js
@ -1,5 +1,6 @@
 import ManualAlarmButton from './manualAlarmButton';
 import Vidicon from './Vidicon';
+import VidiconCloud from './VidiconCloud';
 import deviceType from '../constant/deviceType';
 import CheckBox from './checkBox';
 import FrozenPump from './frozenPump';
@ -12,6 +13,7 @@ import PlatformScreenDoor from './psd/platformScreenDoor';
 const iscsShape = {};
 iscsShape[deviceType.ManualAlarmButton] = ManualAlarmButton;
 iscsShape[deviceType.Vidicon] = Vidicon;
+iscsShape[deviceType.VidiconCloud] = VidiconCloud;
 iscsShape[deviceType.CheckBox] = CheckBox;
 iscsShape[deviceType.FrozenPump] = FrozenPump;
 iscsShape[deviceType.FireHydranAlarmButton] = FireHydranAlarmButton;
--- a/src/iscs/utils/parser.js
+++ b/src/iscs/utils/parser.js
@ -40,7 +40,10 @@ export function parser(data) {
            iscsDevice[elem.code] = deviceFactory(deviceType.ManualAlarmButton, elem);
        }, this);
        zrUtil.each(data.vidiconList || [], elem => {
-            iscsDevice[elem.code] = deviceFactory(deviceType.Vidicon, elem);
+            iscsDevice[elem.code] = deviceFactory(deviceType.vidiconList, elem);
+        }, this);
+        zrUtil.each(data.vidiconCloudList || [], elem => {
+            iscsDevice[elem.code] = deviceFactory(deviceType.vidiconCloudList, elem);
        }, this);
        zrUtil.each(data.frozenPumpList || [], elem => {
            iscsDevice[elem.code] = deviceFactory(deviceType.FrozenPump, elem);
@ -87,6 +90,12 @@ function updateIscsListByDevice(iscs, name, device) {
 export function updateIscsData(device) {
    const iscsData = store.getters['iscs/iscs'];
    switch (device._type) {
+    case deviceType.vidiconList :
+        updateIscsListByDevice(iscsData, 'vidiconList', device);
+        break;
+    case deviceType.vidiconCloudList :
+        updateIscsListByDevice(iscsData, 'vidiconCloudList', device);
+        break;
    case deviceType.ManualAlarmButton :
        updateIscsListByDevice(iscsData, 'manualAlarmButtonList', device);
        break;
--- a/src/store/modules/iscs.js
+++ b/src/store/modules/iscs.js
@ -32,9 +32,16 @@ const iscs = {
        updateDeviceData: (state) => {
            return state.updateDeviceData;
        },
-        buttonList: (state) => {
-            if (state.iscs && state.iscs.buttonList) {
-                return state.iscs.buttonList;
+        vidiconList: (state) => {
+            if (state.iscs && state.iscs.vidiconList) {
+                return state.iscs.vidiconList;
+            } else {
+                return [];
+            }
+        },
+        vidiconCloudList: (state) => {
+            if (state.iscs && state.iscs.vidiconCloudList) {
+                return state.iscs.vidiconCloudList;
            } else {
                return [];
            }
--- a/src/utils/baseUrl.js
+++ b/src/utils/baseUrl.js
@ -3,11 +3,11 @@ export function getBaseUrl() {
    let BASE_API;
    if (process.env.NODE_ENV === 'development') {
        // BASE_API = 'https://joylink.club/jlcloud';
-        BASE_API = 'https://test.joylink.club/jlcloud';
+        // BASE_API = 'https://test.joylink.club/jlcloud';
        // BASE_API = 'http://192.168.3.5:9000'; // 袁琪
        // BASE_API = 'http://192.168.3.6:9000'; // 旭强
        // BASE_API = 'http://192.168.3.41:9000'; // 张赛
-        // BASE_API = 'http://192.168.3.82:9000'; // 杜康
+        BASE_API = 'http://192.168.3.82:9000'; // 杜康
    } else {
        BASE_API = process.env.VUE_APP_BASE_API;
    }
--- a/src/views/system/configLine/config.vue
+++ b/src/views/system/configLine/config.vue
@ -4,10 +4,20 @@
      <div style="height: 370px; overflow: auto;">
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column prop="configKey" label="key" />
-          <el-table-column prop="configValue" label="value" />
-          <el-table-column prop="description" label="描述" />
-          <el-table-column>
-            <template slot="header" slot-scope="scope">
+          <el-table-column prop="configValue" label="value">
+            <template slot-scope="scope">
+              <div v-if="!scope.row.boolean">
+                <div v-if="!scope.row.focus" style="width: 100%;cursor: pointer;" @click="scope.row.focus = true">{{ scope.row.configValue }}</div>
+                <el-input v-if="scope.row.focus" v-model="scope.row.configValue" style="width: 100%" @blur="scope.row.focus = false" />
+              </div>
+              <div v-if="scope.row.boolean">
+                <el-checkbox v-model="scope.row.configValue">{{ scope.row.configValue }}</el-checkbox>
+              </div>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column prop="description" label="描述" /> -->
+          <!-- <el-table-column>
+            <template slot="header">
              <div class="flex_box">
                <span>操作</span>
                <i class="el-icon-circle-plus-outline icon_font" @click="addModel(scope)" />
@ -17,7 +27,7 @@
              <el-button type="text" size="small" @click="editModel(scope.row, scope.$index)">编辑</el-button>
              <el-button type="text" size="small" @click="delModel(scope.row, scope.$index)">删除</el-button>
            </template>
-          </el-table-column>
+          </el-table-column> -->
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
@ -25,18 +35,18 @@
        <el-button @click="dialogVisible = false">{{ $t('global.cancel') }}</el-button>
      </span>
    </el-dialog>
-    <edit-config ref="addConfig" type="ADD" @create="createModel" />
-    <edit-config ref="editConfig" type="EDIT" @update="updateModel" />
+    <!-- <edit-config ref="addConfig" type="ADD" @create="createModel" />
+    <edit-config ref="editConfig" type="EDIT" @update="updateModel" /> -->
  </div>
 </template>

 <script>
 import { getRealLineConfigList, putRealLineConfig } from '@/api/management/mapline';
-import EditConfig from './editConfig';
+// import EditConfig from './editConfig';
 export default {
    name: 'Config',
    components: {
-        EditConfig
+        // EditConfig
    },
    props: {
        type: {
@ -49,7 +59,9 @@ export default {
            dialogVisible: false,
            index: 0,
            id: '',
-            tableData: []
+            tableData: [],
+            focus: false,
+            icloudList: ['lockFirst']
        };
    },
    computed: {
@ -67,7 +79,24 @@ export default {
            try {
                const res = await getRealLineConfigList(this.id);
                if (res.data) {
-                    this.tableData = res.data;
+                    const keys = Object.keys(res.data);
+                    this.tableData = [];
+                    keys.forEach(key => {
+                        // let value = '';
+                        let boolean = false;
+                        if (this.icloudList.indexOf(key) >= 0) {
+                            // value = JSON.stringify(res.data[key]);
+                            boolean = true;
+                        } else {
+                            // value = res.data[key];
+                        }
+                        const param = {
+                            configKey: key,
+                            configValue: res.data[key],
+                            boolean: boolean
+                        };
+                        this.tableData.push(param);
+                    });
                } else {
                    this.tableData = [];
                }
@ -105,7 +134,15 @@ export default {
            this.tableData.splice(this.index, 1, data);
        },
        save() {
-            putRealLineConfig(this.id, this.tableData).then(res => {
+            const param = {};
+            this.tableData.forEach(item => {
+                param[item.configKey] = item.configValue;
+                // if (item.boolean) {
+                //     const value = item.configValue == 'true';
+                //     param[item.configKey] = value;
+                // }
+            });
+            putRealLineConfig(this.id, param).then(res => {
                this.$message.success(`保存配置项成功!`);
                this.dialogVisible = false;
            }).catch(() => {
--- a/src/views/system/configLine/editConfig.vue
+++ b/src/views/system/configLine/editConfig.vue
@ -23,7 +23,8 @@ export default {
            formModel: {
                configKey: '',
                configValue: '',
-                description: ''
+                boolean: false
+                // description: ''
            }
        };
    },
@ -32,25 +33,25 @@ export default {
            const form = {
                labelWidth: '100px',
                items: [
-                    { prop: 'configKey', label: 'key:', type: 'text' },
-                    { prop: 'configValue', label: 'value:', type: 'text' },
-                    { prop: 'description', label: '描述:', type: 'text' }
+                    { prop: 'configKey', label: 'key:', type: 'text' }
+                    // { prop: 'description', label: '描述:', type: 'text' }
                ]
            };
            return form;
        },
        rules() {
-            return {
-                key: [
+            const rules = {
+                configKey: [
                    { required: true, message: '请输入key值', trigger: 'blur' }
                ],
-                value: [
+                configValue: [
                    { required: true, message: '请输入value值', trigger: 'blur' }
-                ],
-                remarks: [
-                    { required: true, message: '请输入描述', trigger: 'blur' }
                ]
+                // remarks: [
+                //     { required: true, message: '请输入描述', trigger: 'blur' }
+                // ]
            };
+            return rules;
        },
        title() {
            if (this.type === 'ADD') {
@ -63,11 +64,12 @@ export default {
    methods: {
        show(row) {
            this.dialogVisible = true;
-            if (row && row.id) {
+            if (row && row.configKey) {
                this.formModel = {
                    configKey: row.configKey,
-                    configValue: row.configValue,
-                    description: row.description
+                    configValue: JSON.parse(row.configValue),
+                    boolean: row.boolean
+                    // description: row.description
                };
            }
        },
@ -83,12 +85,9 @@ export default {
        },
        buildModel(data) {
            return {
-                configEg: data.configEg,
                configKey: data.configKey,
-                configValue: data.configValue,
-                description: data.description,
-                id: data.id,
-                lineCode: data.lineCode
+                configValue: data.boolean ? JSON.stringify(data.configValue) : data.configValue,
+                boolean: data.boolean
            };
        },
        create() {
@ -102,8 +101,8 @@ export default {
        handleClose(done) {
            this.formModel = {
                configKey: '',
-                configValue: '',
-                description: ''
+                configValue: ''
+                // description: ''
            };
            this.$refs.dataform.resetForm();
            if (done) {
--- a/src/views/system/iscsDraw/iscsOperate/index.vue
+++ b/src/views/system/iscsDraw/iscsOperate/index.vue
@ -18,8 +18,16 @@
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
-          <el-tab-pane label="摄像机" name="Vidicon">
-            <Vidicon
+          <el-tab-pane label="固定摄像机" name="vidicon">
+            <vidicon
+              ref="vidiconCloud"
+              style="width:90%"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="云台摄像机" name="vidiconCloud">
+            <vidicon-cloud
              ref="vidicon"
              style="width:90%"
              @createDataModel="createDataModel"
@ -75,6 +83,7 @@
 import {deviceFactory} from '@/iscs/utils/parser';
 import ManualAlarmButton from './manualAlarmButton';
 import Vidicon from './vidicon';
+import VidiconCloud from './vidiconCloud';
 import FireHydranAlarmButton from './fireHydranAlarmButton';
 import GasFireControl from './gasFireControl';
 import SmokeDetector from './smokeDetector';
@ -86,6 +95,7 @@ export default {
    components: {
        ManualAlarmButton,
        Vidicon,
+        VidiconCloud,
        FireHydranAlarmButton,
        GasFireControl,
        SmokeDetector,
--- a/src/views/system/iscsDraw/iscsOperate/vidicon.vue
+++ b/src/views/system/iscsDraw/iscsOperate/vidicon.vue
@ -48,16 +48,26 @@ export default {
    },
    computed: {
        ...mapGetters('iscs', [
-            'buttonList'
+            'vidiconList'
        ])
    },
    methods: {
+        getUid() {
+            if (this.vidiconList.length) {
+                const lastCode = this.vidiconList[this.vidiconList.length - 1].code;
+                const num = lastCode.split('vidicon_')[1];
+                return `vidicon_${num + 1}`;
+            } else {
+                return `vidicon_1`;
+            }
+        },
        onSubmit(form) {
            this.$refs.form.validate((valid) => {
                if (valid) {
+                    const Uid = this.getUid();
                    const model = {
                        _type: 'Vidicon',
-                        code: `Vidicon_${this.buttonList.length + 1}`,
+                        code: Uid,
                        width: this.addModel.width,
                        height: this.addModel.height,
                        content: this.addModel.content,
--- a/src/views/system/iscsDraw/iscsOperate/vidiconCloud.vue
+++ b/src/views/system/iscsDraw/iscsOperate/vidiconCloud.vue
@ -0,0 +1,126 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item label="半径">
+        <el-input-number v-model="addModel.r" />
+      </el-form-item>
+      <el-form-item label="X轴坐标">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit()">{{ 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>
+
+<script>
+// 车站摄像机
+import { mapGetters } from 'vuex';
+
+export default {
+    name: 'ManualAlarmButton',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                r: 30,
+                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: '立即创建'
+        };
+    },
+    computed: {
+        ...mapGetters('iscs', [
+            'vidiconCloudList'
+        ])
+    },
+    methods: {
+        getUid() {
+            if (this.vidiconCloudList.length) {
+                const lastCode = this.vidiconCloudList[this.vidiconCloudList.length - 1].code;
+                const num = lastCode.split('vidiconCloud_')[1];
+                return `vidiconCloud_${num + 1}`;
+            } else {
+                return `vidiconCloud_1`;
+            }
+        },
+        onSubmit(form) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    const Uid = this.getUid();
+                    const model = {
+                        _type: 'VidiconCloud',
+                        code: Uid,
+                        r: this.addModel.r,
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        }
+                    };
+                    this.$emit('createDataModel', model);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            // const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+            // if (selected && selected._type.toUpperCase() === 'Psd'.toUpperCase()) {
+            //     const _that = this;
+            //     this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
+            //         confirmButtonText: this.$t('tip.confirm'),
+            //         cancelButtonText: this.$t('tip.cancel'),
+            //         type: 'warning'
+            //     }).then(() => {
+            //         _that.$emit('updateMapModel', {...selected, _dispose: true});
+            //         _that.deviceSelect();
+            //         this.$refs.dataform.resetFields();
+            //     }).catch(() => {
+            //         _that.$message.info(this.$t('tip.cancelledDelete'));
+            //     });
+            // }
+            const model = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'VidiconCloud',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', model);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                r: 30,
+                x: 10,
+                y: 10
+            };
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>