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

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;

src/iscs/constant/deviceType.js

@@ -1,6 +1,7 @@
 const deviceType = {
     ManualAlarmButton: 'manualAlarmButton',
     Vidicon: 'Vidicon',
+    VidiconCloud: 'VidiconCloud',
     CheckBox: 'CheckBox',
     FrozenPump:'FrozenPump',
     FireHydranAlarmButton: 'fireHydranAlarmButton',

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;

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;
+    }
+}

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;

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;

src/store/modules/iscs.js

@@ -32,9 +32,16 @@ const iscs = {
         updateDeviceData: (state) => {
             return state.updateDeviceData;
         },
-        buttonList: (state) => {
+        vidiconList: (state) => {
-            if (state.iscs && state.iscs.buttonList) {
+            if (state.iscs && state.iscs.vidiconList) {
-                return state.iscs.buttonList;
+                return state.iscs.vidiconList;
+            } else {
+                return [];
+            }
+        },
+        vidiconCloudList: (state) => {
+            if (state.iscs && state.iscs.vidiconCloudList) {
+                return state.iscs.vidiconCloudList;
             } else {
                 return [];
             }

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;
     }

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="configValue" label="value">
-          <el-table-column prop="description" label="描述" />
+            <template slot-scope="scope">
-          <el-table-column>
+              <div v-if="!scope.row.boolean">
-            <template slot="header" slot-scope="scope">
+                <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="addConfig" type="ADD" @create="createModel" />
-    <edit-config ref="editConfig" type="EDIT" @update="updateModel" />
+    <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(() => {

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: 'configKey', label: 'key:', type: 'text' }
-                    { prop: 'configValue', label: 'value:', type: 'text' },
+                    // { prop: 'description', label: '描述:', type: 'text' }
-                    { prop: 'description', label: '描述:', type: 'text' }
                 ]
             };
             return form;
         },
         rules() {
-            return {
+            const rules = {
-                key: [
+                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,
+                    configValue: JSON.parse(row.configValue),
-                    description: row.description
+                    boolean: row.boolean
+                    // description: row.description
                 };
             }
         },
@@ -83,12 +85,9 @@ export default {
         },
         buildModel(data) {
             return {
-                configEg: data.configEg,
                 configKey: data.configKey,
-                configValue: data.configValue,
+                configValue: data.boolean ? JSON.stringify(data.configValue) : data.configValue,
-                description: data.description,
+                boolean: data.boolean
-                id: data.id,
-                lineCode: data.lineCode
             };
         },
         create() {
@@ -102,8 +101,8 @@ export default {
         handleClose(done) {
             this.formModel = {
                 configKey: '',
-                configValue: '',
+                configValue: ''
-                description: ''
+                // description: ''
             };
             this.$refs.dataform.resetForm();
             if (done) {

src/views/system/iscsDraw/iscsOperate/index.vue

@@ -18,8 +18,16 @@
               @deleteDataModel="deleteDataModel"
             />
           </el-tab-pane>
-          <el-tab-pane label="摄像机" name="Vidicon">
+          <el-tab-pane label="固定摄像机" name="vidicon">
-            <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,

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,

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>