完善

package-lock.json

@@ -4079,6 +4079,11 @@
       "dev": true,
       "optional": true
     },
+    "clamp": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/clamp/-/clamp-1.0.1.tgz",
+      "integrity": "sha512-kgMuFyE78OC6Dyu3Dy7vcx4uy97EIbVxJB/B0eJ3bUNAkwdNcxYzgKltnyADiYwsR7SEqkkUPsEUT//OVS6XMA=="
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -11056,6 +11061,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmmirror.com/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
@@ -16969,6 +16979,17 @@
         "clipboard": "^2.0.0"
       }
     },
+    "vue-color": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/vue-color/-/vue-color-2.8.1.tgz",
+      "integrity": "sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==",
+      "requires": {
+        "clamp": "^1.0.1",
+        "lodash.throttle": "^4.0.0",
+        "material-colors": "^1.0.0",
+        "tinycolor2": "^1.1.2"
+      }
+    },
     "vue-cookie": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/vue-cookie/-/vue-cookie-1.1.4.tgz",

package.json

@@ -34,6 +34,7 @@
     "viser-vue": "^2.4.6",
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.2.1",
+    "vue-color": "^2.8.1",
     "vue-cookie": "^1.1.4",
     "vue-cropper": "0.4.9",
     "vue-drag-resize": "^1.5.4",

src/views/opc/Opc.vue

@@ -5,30 +5,50 @@
       <a-button type="primary" icon="appstore" size="large" @click="visibleRight=true" />
     </div>
     <div v-if="dotList !=null && dotList.length>0">
-      <VueDragResize
-        v-for="item in dotList"
-        :key="item.id"
-        v-show="item.positionFlag"
-        :isActive="item.isActive"
-        :w="item.width"
-        :h="item.height"
-        :minh="20"
-        :x="item.xposition"
-        :y="item.yposition"
-        :isDraggable="item.isActive"
-        :isResizable="item.isActive"
-        :stickSize="5"
-        @resizing="handleOpt(item)"
-        @dragging="handleOpt(item)"
-        @resizestop="resize"
-        @dragstop="resize">
-        <a-tooltip>
-          <template slot="title">
-            {{ item.description }}
-          </template>
-          <div class="info" @click.right.prevent="handleEdit(item)"> {{ item.description }}</div>
-        </a-tooltip>
-      </VueDragResize>
+      <div v-for="item in dotList" :key="item.id">
+        <VueDragResize
+          v-show="item.positionFlag"
+          :isActive="item.isActive"
+          :w="item.width"
+          :h="item.height"
+          :minh="20"
+          :x="item.xposition"
+          :y="item.yposition"
+          :isDraggable="item.isActive"
+          :isResizable="item.isActive"
+          :stickSize="5"
+          @resizing="handleOpt(item)"
+          @dragging="handleOpt(item)"
+          @resizestop="resize"
+          @dragstop="resize">
+          <a-tooltip>
+            <template slot="title">
+              {{ item.description }}
+            </template>
+            <div class="info" @click.right.prevent="handleEdit(item)"> {{ item.description }}</div>
+          </a-tooltip>
+        </VueDragResize>
+        <VueDragResize
+          v-if="item.type===2"
+          :isActive="item.isActive"
+          :w="40"
+          :h="40"
+          :minh="20"
+          :x="item.imgXPosition"
+          :y="item.imgYPosition"
+          :isDraggable="item.isActive"
+          :isResizable="item.isActive"
+          :stickSize="5"
+          @dragging="handleOpt(item)"
+          @dragstop="resizeImg">
+          <a-tooltip>
+            <template slot="title">
+              {{ item.description }}
+            </template>
+            <img src="@/assets/pandian.png" alt="" width="40px" height="40px">
+          </a-tooltip>
+        </VueDragResize>
+      </div>
     </div>
     <a-drawer
       title="点位配置"
@@ -59,7 +79,7 @@
         :pagination="{ pageSize: 100 }"
         :scroll="{ y: 650 }"
       >
-        <span slot="action" slot-scope="text, record,index">
+        <span slot="action" slot-scope="text, record">
           <a @click="disposition(record)">配置</a>
           <a-button style="color:#ccc" v-show="record.positionFlag" type="link" icon="eye-invisible" @click="handleShow(record,0)" />
           <a-button v-show="!record.positionFlag" type="link" icon="eye" @click="handleShow(record,1)" />
@@ -131,6 +151,20 @@ export default {
         })
       }
     },
+    resizeImg (newRect) {
+      console.log(newRect)
+      const params = {
+        ...this.optDot,
+        imgXPosition: newRect.left,
+        imgYPosition: newRect.top
+      }
+      if (params.id != null) {
+        updateRemoteOpc(params).then(res => {
+          console.log(res)
+          this.optDot = null
+        })
+      }
+    },
     onCloseRight () {
       this.visibleRight = false
     },
@@ -181,7 +215,9 @@ export default {
       }
       , {
         xposition: e.x,
-        yposition: e.y
+        yposition: e.y,
+        imgXPosition: e.x,
+        imgYposition: e.y + 50
       })
     },
     handleOk () {

src/views/opc/OpcInfo.vue

@@ -5,27 +5,52 @@
       <a-button type="primary" icon="appstore" size="large" @click="visibleRight=true" />
     </div>
     <div v-if="dotList !=null && dotList.length>0">
-      <VueDragResize
-        v-for="item in dotList"
-        :key="item.id"
-        v-show="item.positionFlag"
-        :isActive="item.isActive"
-        :w="item.width"
-        :h="item.height"
-        :minh="20"
-        :x="item.xposition"
-        :y="item.yposition"
-        :isDraggable="item.isActive"
-        :isResizable="item.isActive"
-        :stickSize="5"
-        @dragstop="resize">
-        <a-tooltip>
-          <template slot="title">
-            {{ item.description }}
-          </template>
-          <div class="info" @click="handleInfo(item)" @click.right.prevent="handleView(item)"> {{ item.result }}</div>
-        </a-tooltip>
-      </VueDragResize>
+      <div v-for="item in dotList" :key="item.id">
+        <VueDragResize
+          v-show="item.positionFlag"
+          :isActive="item.isActive"
+          :w="item.width"
+          :h="item.height"
+          :minh="20"
+          :x="item.xposition"
+          :y="item.yposition"
+          :isDraggable="item.isActive"
+          :isResizable="item.isActive"
+          :stickSize="5"
+        >
+          <a-tooltip>
+            <template slot="title">
+              {{ item.description }}
+            </template>
+            <div class="info" @click="handleInfo(item)" @click.right.prevent="handleView(item)">
+              <span :style="{'color':item.warnFirstColor}" v-if="item.result<=item.warnFirst&&item.warnFirst!==null">{{ item.result }}</span>
+              <span :style="{'color':item.warnSecondColor}" v-else-if="item.warnFirst<item.result<item.warnSecond">{{ item.result }}</span>
+              <span :style="{'color':item.warnThirdColor}" v-else-if="item.warnThirdColor<item.result<item.warnFourColor">{{ item.result }}</span>
+              <span :style="{'color':item.warnFourColor}" v-else-if="item.result>=item.warnFourColor&&item.warnFirst!==null">{{ item.result }}</span>
+              <span v-else>{{ item.result }}</span>
+            </div>
+          </a-tooltip>
+        </VueDragResize>
+        <VueDragResize
+          v-if="item.type===2"
+          :isActive="item.isActive"
+          :w="40"
+          :h="40"
+          :minh="20"
+          :x="item.imgXPosition"
+          :y="item.imgYPosition"
+          :isDraggable="item.isActive"
+          :isResizable="item.isActive"
+          :stickSize="5"
+        >
+          <a-tooltip>
+            <template slot="title">
+              {{ item.description }}
+            </template>
+            <img src="@/assets/pandian.png" alt="" width="40px" height="40px">
+          </a-tooltip>
+        </VueDragResize>
+      </div>
     </div>
     <a-drawer
       title="点位列表"
@@ -190,6 +215,7 @@ export default {
   font-size: 12px;
   font-weight: bold;
   color: blue;
+  padding:0 10px;
   // transform: scale(0.5);
 }
 .icon{

src/views/remote/opc/modules/BaseForm.vue

@@ -225,7 +225,7 @@
             :wrapperCol="BaseTool.Constant.wrapperCol"
           >
             <a-input
-              v-decorator="['imgXposition', {initialValue:50, rules: [{required: true, message: '图片x轴位置不能为空'}]}]"/>
+              v-decorator="['imgXPosition', {initialValue:50, rules: [{required: true, message: '图片x轴位置不能为空'}]}]"/>
           </a-form-item>
         </row-item>
         <row-item>
@@ -236,7 +236,7 @@
             :wrapperCol="BaseTool.Constant.wrapperCol"
           >
             <a-input
-              v-decorator="['imgYposition', {initialValue:50, rules: [{required: true, message: '图片y轴位置不能为空'}]}]"/>
+              v-decorator="['imgYPosition', {initialValue:100, rules: [{required: true, message: '图片y轴位置不能为空'}]}]"/>
           </a-form-item>
         </row-item>
         <row-item>
@@ -247,12 +247,14 @@
             :wrapperCol="BaseTool.Constant.wrapperCol"
           >
             <a-input-number
-              style="width: 70%"
+              style="width: 73%"
               :min="0.01"
               :formatter="BaseTool.Amount.formatter"
               :parser="BaseTool.Amount.parser"
-              v-decorator="['warnFirst', {initialValue:'red',rules: [{required: false, message: '最低阈值不能为空'}]}]"/>
-            <a-button type="primary" style="width: 30%" @click="handleSelectColor(1)">选择颜色</a-button>
+              v-decorator="['warnFirst', {rules: [{required: false, message: '最低阈值不能为空'}]}]"/>
+            <a-tag style="line-height:30px;margin-left: 10px;" :color="colors.warnFirstColor" @click="handleSelectColor('warnFirstColor')">
+              选择颜色
+            </a-tag>
           </a-form-item>
         </row-item>
         <row-item>
@@ -263,12 +265,14 @@
             :wrapperCol="BaseTool.Constant.wrapperCol"
           >
             <a-input-number
-              style="width: 70%"
+              style="width: 73%"
               :min="0.01"
               :formatter="BaseTool.Amount.formatter"
               :parser="BaseTool.Amount.parser"
-              v-decorator="['warnSecond', {initialValue:'red',rules: [{required: false, message: '低阈值不能为空'}]}]"/>
-            <a-button type="primary" style="width: 30%" @click="handleSelectColor(2)">选择颜色</a-button>
+              v-decorator="['warnSecond', {rules: [{required: false, message: '低阈值不能为空'}]}]"/>
+            <a-tag style="line-height:30px;margin-left: 10px;" :color="colors.warnSecondColor" @click="handleSelectColor('warnSecondColor')">
+              选择颜色
+            </a-tag>
           </a-form-item>
         </row-item>
         <row-item>
@@ -279,12 +283,14 @@
             :wrapperCol="BaseTool.Constant.wrapperCol"
           >
             <a-input-number
-              style="width: 70%"
+              style="width: 73%"
               :min="0.01"
               :formatter="BaseTool.Amount.formatter"
               :parser="BaseTool.Amount.parser"
-              v-decorator="['warnThird', {initialValue:'red',rules: [{required: false, message: '高阈值不能为空'}]}]"/>
-            <a-button type="primary" style="width: 30%" @click="handleSelectColor(3)">选择颜色</a-button>
+              v-decorator="['warnThird', {rules: [{required: false, message: '高阈值不能为空'}]}]"/>
+            <a-tag style="line-height:30px;margin-left: 10px;" :color="colors.warnThirdColor" @click="handleSelectColor('warnThirdColor')">
+              选择颜色
+            </a-tag>
           </a-form-item>
         </row-item>
         <row-item>
@@ -295,12 +301,14 @@
             :wrapperCol="BaseTool.Constant.wrapperCol"
           >
             <a-input-number
-              style="width: 70%"
+              style="width: 73%"
               :min="0.01"
               :formatter="BaseTool.Amount.formatter"
               :parser="BaseTool.Amount.parser"
-              v-decorator="['warnFour', {initialValue:'red',rules: [{required: false, message: '最高阈值不能为空'}]}]"/>
-            <a-button type="primary" style="width: 30%" @click="handleSelectColor(4)">选择颜色</a-button>
+              v-decorator="['warnFour', {rules: [{required: false, message: '最高阈值不能为空'}]}]"/>
+            <a-tag style="line-height:30px;margin-left: 10px;" :color="colors.warnFourColor" @click="handleSelectColor('warnFourColor')">
+              选择颜色
+            </a-tag>
           </a-form-item>
         </row-item>
         <row-item>
@@ -373,6 +381,7 @@
       </row-list>
     </a-form>
     <sb-info-select-modal ref="sbInfoSelectModal" @selected="handleSbSelectd"/>
+    <ColorModal ref="colorModal" @selected="handleColor"/>
   </a-modal>
 </template>
 
@@ -381,10 +390,12 @@ import pick from 'lodash.pick'
 import { addRemoteOpc, updateRemoteOpc, fetchRemoteOpcByPositionNumAndLine } from '@/api/remote/opc'
 import SbInfoSelectModal from '@/views/sb/info/modules/SbInfoSelectModal'
 import { getSbPositionTree } from '@/api/sb/position'
+import ColorModal from './ColorModal'
 export default {
   name: 'BaseRemoteOpc',
   components: {
-    SbInfoSelectModal
+    SbInfoSelectModal,
+    ColorModal
   },
   data () {
     return {
@@ -396,8 +407,14 @@ export default {
       form: this.$form.createForm(this),
       visible: false,
       isExisting: false,
-      position: {}
-      // 下拉框map
+      position: {},
+      color: '',
+      colors: {
+        warnFourColor: '#B71C1C',
+        warnThirdColor: '#F57F17',
+        warnSecondColor: '#F57F17',
+        warnFirstColor: '#B71C1C'
+      }
     }
   },
   props: {},
@@ -424,7 +441,9 @@ export default {
           ]),
           pick(position, [
             'xposition',
-            'yposition'
+            'yposition',
+            'imgXPosition',
+            'imgYPosition'
           ])
           ))
         })
@@ -477,18 +496,22 @@ export default {
           return
         }
         // 日期处理
-        if (this.BaseTool.String.isBlank(values.id)) {
-          addRemoteOpc(values)
+        const params = {
+          ...values,
+          ...this.colors
+        }
+        if (this.BaseTool.String.isBlank(params.id)) {
+          addRemoteOpc(params)
             .then(() => {
-              this.handleCancel(values)
+              this.handleCancel(params)
             }).catch(() => {
               this.confirmLoading = false
             })
         } else {
           console.log('..........................')
-          updateRemoteOpc(values)
+          updateRemoteOpc(params)
             .then(() => {
-              this.handleCancel(values)
+              this.handleCancel(params)
             }).catch(() => {
               this.confirmLoading = false
             })
@@ -524,7 +547,12 @@ export default {
       }
     },
     handleSelectColor (type) {
-      this.$message.info(type)
+      this.color = type
+      this.$refs.colorModal.base(this.colors[this.color])
+    },
+    handleColor (value) {
+      console.log(value)
+      this.colors[this.color] = value
     },
     checkPoint (e) {
       const { form: { setFieldsValue, getFieldValue } } = this

src/views/remote/opc/modules/ColorModal.vue

@@ -0,0 +1,50 @@
+<template>
+  <a-modal
+    title="选择颜色"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <Swatches v-model="colors"/>
+  </a-modal>
+</template>
+
+<script>
+import { Swatches } from 'vue-color'
+export default {
+  components: {
+    Swatches
+  },
+  data () {
+    return {
+      visible: false,
+      confirmLoading: false,
+      colors: ''
+    }
+  },
+  methods: {
+    base (color) {
+      this.visible = true
+      this.colors = color
+    },
+    handleOk () {
+      this.confirmLoading = true
+      this.visible = false
+      console.log(this.colors.hex)
+      this.$emit('selected', this.colors.hex)
+      this.confirmLoading = false
+    },
+    handleCancel (e) {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+ /deep/ .vc-swatches{
+  width: 476px;
+  height: 285px;
+}
+</style>