diff --git a/src/iscs/shape/VidiconCloud.js b/src/iscs/shape/VidiconCloud.js
index ce9604134..4c735eb6b 100644
--- a/src/iscs/shape/VidiconCloud.js
+++ b/src/iscs/shape/VidiconCloud.js
@@ -1,6 +1,7 @@
 import Group from 'zrender/src/container/Group';
 import Sector from 'zrender/src/graphic/shape/Sector';
 import Polyline from 'zrender/src/graphic/shape/Polyline';
+// import createPathSvg from './components/pathsvg';
 
 export default class VidiconCloud extends Group {
     constructor(device) {
@@ -13,7 +14,6 @@ export default class VidiconCloud extends Group {
         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]
@@ -35,6 +35,7 @@ export default class VidiconCloud extends Group {
                 fill: 'rgba(0,0,0,0)'
             }
         });
+        // this.path = createPathSvg(this.model);
 
         this.Polyline = new Polyline({
             zlevel: this.model.zlevel,
@@ -56,6 +57,7 @@ export default class VidiconCloud extends Group {
 
         this.grouper.add(this.semicircle);
         this.grouper.add(this.Polyline);
+        // this.grouper.add(this.path);
         this.add(this.grouper);
     }
 
diff --git a/src/iscs/shape/components/pathsvg.js b/src/iscs/shape/components/pathsvg.js
new file mode 100644
index 000000000..518b5d280
--- /dev/null
+++ b/src/iscs/shape/components/pathsvg.js
@@ -0,0 +1,17 @@
+import * as path from 'zrender/src/tool/path';
+const map = {
+    VidiconCloud: {
+        scale: [0.02, 0.02],
+        path: 'M917.749663 10.405886C911.585184 3.624959 902.758306 0.937984 893.583268 0 431.820819 9.342974 145.285208 116.940772 41.943153 319.811507-35.676029 472.166287 16.281719 643.911525 70.123626 722.186067c6.225919 9.072638 16.609276 14.909436 27.627513 13.783036a31.850488 31.850488 0 0 0 26.316794-16.261116c63.201265-112.455653 187.985875-295.958457 368.517032-386.613155-68.669424 89.593834-177.418197 237.273031-282.726332 404.778911-10.301438 14.069757-87.388139 125.62429-48.435189 262.901697A31.913976 31.913976 0 0 0 192.041037 1023.999754a31.014905 31.014905 0 0 0 8.765438-1.228799 32.00204 32.00204 0 0 0 21.893114-39.546871c-22.958074-80.855021 6.901758-152.575963 25.661434-186.695635 128.880609 54.415347 249.40538 53.637107 350.085036-2.785279 172.380119-96.645097 282.562492-351.743916 327.454642-758.210379a32.255992 32.255992 0 0 0-8.151038-25.126905zM567.377907 737.873743c-81.51038 45.690869-177.029078 46.940149-284.385212 3.788799 15.421436-24.104954 30.822393-47.513589 46.141429-70.533103l219.197387-31.436793a32.01228 32.01228 0 0 0-9.011198-63.385584l-161.710041 23.203834c13.250557-19.169275 26.173434-37.580791 38.871031-55.521267a30.595065 30.595065 0 0 0 6.184958-0.614399l159.272922-31.989753a32.028664 32.028664 0 0 0 24.985594-37.662711 31.651832 31.651832 0 0 0-37.498871-25.108474l-98.488296 19.783676c81.96094-111.742949 141.066206-183.898068 142.069726-185.139156a32.11468 32.11468 0 0 0 2.375679-37.531639 31.743992 31.743992 0 0 0-34.815991-13.844477c-85.503979 22.001659-161.484761 63.657969-227.860426 114.608101v-58.490866a31.856632 31.856632 0 1 0-63.713264 0v112.672741c-22.630395 21.202939-43.868149 43.231222-63.713265 65.574896v-101.715943a31.846392 31.846392 0 1 0-63.692785 0v179.458004c0 0.24576 0.12288 0.43008 0.12288 0.67584-24.289274 32.665592-45.711349 64.614384-63.897585 94.064618-28.344313-67.071984-54.251507-181.637076 0.83968-289.761211C186.593358 176.322518 448.921615 78.374893 858.337197 64.968688c-44.646389 363.374505-142.479326 589.653874-290.95929 672.905055z m339.353518-145.653725c-10.874877-21.626875-45.957109-21.626875-56.852466 0-19.189755 38.256631-114.872292 232.120264-114.872293 294.625209 0 75.612142 64.286705 137.154527 143.298526 137.154527s143.319006-61.542385 143.319006-137.154527c0-62.504945-95.703017-256.368578-114.892773-294.625209z m-28.426233 367.574952c-43.909109 0-79.605741-32.727032-79.605741-72.949743 0-27.770873 40.44799-123.96541 79.605741-207.09371 39.157751 83.1283 79.626221 179.322837 79.626221 207.09371 0 40.22271-35.696631 72.949742-79.626221 72.949743z'
+    }
+};
+
+export default function createPathSvg(model) {
+    const svg = path.createFromString(map[model._type].path, {
+        style: {
+            fill: model.fill || '#00FF00'
+        }
+    });
+    svg.scale = map[model._type].scale;
+    return svg;
+}
diff --git a/src/views/system/iscsDesign/demonList.vue b/src/views/system/iscsDesign/demonList.vue
index ff580f510..f07d0c5a0 100644
--- a/src/views/system/iscsDesign/demonList.vue
+++ b/src/views/system/iscsDesign/demonList.vue
@@ -103,6 +103,12 @@ export default {
                             mode: 'psd',
                             id: '3',
                             type: 'interface'
+                        },
+                        {
+                            name: 'cctv界面',
+                            mode: 'cctv',
+                            id: '4',
+                            type: 'interface'
                         }
                     ]
                 }
diff --git a/src/views/system/iscsDraw/index.vue b/src/views/system/iscsDraw/index.vue
index 49ea0b6ec..d74e8eeac 100644
--- a/src/views/system/iscsDraw/index.vue
+++ b/src/views/system/iscsDraw/index.vue
@@ -8,6 +8,7 @@
         <iscs-operate v-if="iscsMode==='fas'" ref="iscsOperate" @iscsChange="iscsChange" />
         <iscs-bas-operate v-else-if="iscsMode==='bas'" ref="iscsBasOperate" @iscsChange="iscsChange" />
         <iscs-psd-operate v-else-if="iscsMode==='psd'" ref="iscsPsdOperate" @iscsChange="iscsChange" />
+        <iscs-cctv-operate v-else-if="iscsMode==='cctv'" ref="iscsCctvOperate" @iscsChange="iscsChange" />
       </div>
     </div>
   </transition>
@@ -17,13 +18,15 @@ import IscsPlate from '@/views/iscsSystem/index';
 import IscsOperate from './iscsOperate/index';
 import IscsBasOperate from './iscsBasOperate/index';
 import IscsPsdOperate from './iscsPsdOperate/index';
+import IscsCctvOperate from './iscsCctvOperate/index';
 export default {
     name: 'IscsView',
     components: {
         IscsPlate,
         IscsOperate,
         IscsBasOperate,
-        IscsPsdOperate
+        IscsPsdOperate,
+        IscsCctvOperate
     },
     data() {
         return {
diff --git a/src/views/system/iscsDraw/iscsCctvOperate/index.vue b/src/views/system/iscsDraw/iscsCctvOperate/index.vue
new file mode 100644
index 000000000..2a0b6d83b
--- /dev/null
+++ b/src/views/system/iscsDraw/iscsCctvOperate/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="map-control heightClass">
+      <el-card type="border-card" class="heightClass">
+        <div slot="header" class="clearfix">
+          <el-button
+            type="text"
+            style="float: right; padding: 3px 0; margin-right: 5px;"
+            @click="handleSave"
+          >{{ $t('ibp.save') }}</el-button>
+        </div>
+        <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
+          <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"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </transition>
+</template>
+<script>
+import {deviceFactory} from '@/iscs/utils/parser';
+import Vidicon from './vidicon';
+import VidiconCloud from './vidiconCloud';
+
+export default {
+    name: 'IscsOperate',
+    components: {
+        Vidicon,
+        VidiconCloud
+    },
+    mixins: [
+    ],
+    data() {
+        return {
+            enabledTab: 'vidicon',
+            data: '',
+            stationCode: ''
+        };
+    },
+    computed: {
+        height() {
+            return this.$store.state.config.height;
+        }
+    },
+    watch: {
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            this.enabledTab = model._type;
+        }
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+        createDataModel(model) {
+            const newModel = deviceFactory(model._type, model);
+            this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
+        },
+        deleteDataModel(model) {
+            this.$store.dispatch('iscs/deleteIscsDevices', model);
+        },
+        handleSave() {
+            const data = JSON.stringify(this.$store.state.iscs.iscs);
+            console.log(data);
+        },
+        handleTabClick() {
+
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .map-control {
+        float: right;
+        width: 100%;
+    }
+    .heightClass{height:100%;}
+</style>
diff --git a/src/views/system/iscsDraw/iscsOperate/vidicon.vue b/src/views/system/iscsDraw/iscsCctvOperate/vidicon.vue
similarity index 96%
rename from src/views/system/iscsDraw/iscsOperate/vidicon.vue
rename to src/views/system/iscsDraw/iscsCctvOperate/vidicon.vue
index 443dcacc7..466b7b53d 100644
--- a/src/views/system/iscsDraw/iscsOperate/vidicon.vue
+++ b/src/views/system/iscsDraw/iscsCctvOperate/vidicon.vue
@@ -69,8 +69,7 @@ export default {
                         _type: 'Vidicon',
                         code: Uid,
                         width: this.addModel.width,
-                        height: this.addModel.height,
-                        content: this.addModel.content,
+                        right: this.addModel.right,
                         point: {
                             x: this.addModel.x,
                             y: this.addModel.y
@@ -100,13 +99,14 @@ export default {
             //     });
             // }
             const model = {
+                _type: 'Vidicon',
+                code: this.addModel.code,
+                width: this.addModel.width,
+                right: this.addModel.right,
                 point: {
                     x: this.addModel.x,
                     y: this.addModel.y
-                },
-                code: this.addModel.code,
-                _type: 'Vidicon',
-                width: this.addModel.width
+                }
             };
             this.$emit('deleteDataModel', model);
             this.initPage();
diff --git a/src/views/system/iscsDraw/iscsOperate/vidiconCloud.vue b/src/views/system/iscsDraw/iscsCctvOperate/vidiconCloud.vue
similarity index 100%
rename from src/views/system/iscsDraw/iscsOperate/vidiconCloud.vue
rename to src/views/system/iscsDraw/iscsCctvOperate/vidiconCloud.vue
diff --git a/src/views/system/iscsDraw/iscsOperate/index.vue b/src/views/system/iscsDraw/iscsOperate/index.vue
index 0f49bbd7e..a56fd3147 100644
--- a/src/views/system/iscsDraw/iscsOperate/index.vue
+++ b/src/views/system/iscsDraw/iscsOperate/index.vue
@@ -18,22 +18,6 @@
               @deleteDataModel="deleteDataModel"
             />
           </el-tab-pane>
-          <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"
-              @deleteDataModel="deleteDataModel"
-            />
-          </el-tab-pane>
           <el-tab-pane label="消火栓报警按钮" name="fhaButton">
             <fire-hydran-alarm-button
               ref="fhaButton"
@@ -74,8 +58,6 @@
 <script>
 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';
@@ -85,8 +67,6 @@ export default {
     name: 'IscsOperate',
     components: {
         ManualAlarmButton,
-        Vidicon,
-        VidiconCloud,
         FireHydranAlarmButton,
         GasFireControl,
         SmokeDetector,