integrated resulotion list into FE and BE

chameleon-client/src/components/InputTab.vue

@@ -4,13 +4,14 @@
         <chslider class="spacing" title="exposure" Xkey="exposure"></chslider>
         <chslider class="spacing" title="Brightness" Xkey="brightness"></chslider>
         <chselect class="spacing" title="Orientation" Xkey="orientation" :list="['Normal','Inverted']"></chselect>
-        <chselect class="spacing" title="Resolution" Xkey="resolution"  :list="resolutionList"></chselect>
+        <ch-index-select class="spacing" title="Resolution" Xkey="resolution"  :list="resolutionList"></ch-index-select>
         </div>
 </template>
     
 <script> 
 import chslider from './ch-slider.vue'
 import chselect from './ch-select.vue'
+import chIndexSelect from './ch-IndexSelect.vue'
     export default {
         name: 'InputTab',
         data () {
@@ -19,14 +20,15 @@ import chselect from './ch-select.vue'
         },
         components: {
             chslider,
-            chselect
+            chselect,
+            chIndexSelect
         },
         methods: {
         },
         computed:{
             resolutionList:{
                 get:function(){
-                    return this.$store.state.resolution;
+                    return this.$store.state.resolutionList;
                 }
             }
         }

chameleon-client/src/components/Vision.vue

@@ -20,7 +20,7 @@
                     <TabPane label="Normal"></TabPane>    
                     <TabPane label="Threshold"></TabPane>
                     </Tabs>
-                    <img :src="steamAdress" style="">
+                    <img class="imageSize" :src="steamAdress" style="">
                     </Col>
                 </Col>
             </row>
@@ -77,4 +77,8 @@
 .ivu-tabs-nav .ivu-tabs-tab:hover{
     color: #0cdfc3 !important;
 }
+.imageSize{
+    width: 75%;
+    height: 75%;
+}
 </style>

chameleon-client/src/components/ch-IndexSelect.vue

@@ -0,0 +1,57 @@
+<template>
+    <Row type="flex" justify="start" align="middle" :gutter="1" >
+        <Col span="4">
+            <h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
+        </Col>
+        <Col span="4">
+            <i-select v-model="value" size="small" @on-change="handleInput">
+                <i-option v-for="(item,index) in list" :value="index" :key="index">{{item}}</i-option>
+            </i-select>
+        </Col>
+    </Row>
+</template>
+
+<script>
+    export default {
+        name: 'ch-select',
+        props:{
+            title: String,
+            list: Array,
+            Xkey: String
+        },
+        data() {
+            return {
+            
+            }
+        },
+        methods: {
+            handleInput() {
+                this.$socket.sendObj({[this.Xkey]:this.value});
+            }
+        },
+        computed:{
+            value:{
+                get: function(){
+                    return this.$store.state[this.Xkey];
+                },
+                set: function(value){
+                    this.$store.commit(this.Xkey,value);
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+h4 {
+     color: #e6ebf1;
+      text-align: left;
+ }
+ /* .ivu-select-selection{
+     background-color: #2c3e50 !important;
+ } */
+ /* .ivu-select-selected-value{
+     color: #fff !important;
+ } */
+
+</style>