'202206091422'

src/api/index/index.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+//看板--查询
+export function getBulletinCruxConfigList(params) {
+    return request({
+        url: '/bulletinCruxConfig/getBulletinCruxConfigList',
+        method: 'GET',
+        params,
+    })
+}
+
+//看板--iconText新增修改
+export function editBulletinCruxConfig(params) {
+    return request({
+        url: '/bulletinCruxConfig/editBulletinCruxConfig',
+        method: 'POST',
+        data:params,
+    })
+}
+
+//看板--echarts新增修改
+export function editBulletinHistoricalConfig(params) {
+    return request({
+        url: '/bulletinCruxConfig/editBulletinHistoricalConfig',
+        method: 'POST',
+        data:params,
+    })
+}
+
+//看板--echarts新增修改
+export function editBulletinAlarmConfig(params) {
+    return request({
+        url: '/bulletinCruxConfig/editBulletinAlarmConfig',
+        method: 'POST',
+        data:params,
+    })
+}
+

src/layout/index.vue

@@ -239,7 +239,7 @@ export default {
     }
   }
   .vab-layout {
-    height: calc(100vh - 0);
+    height: calc(100vh - 0px);
     overflow: auto;
     padding-left: 220px;
     transition: all 0.2s;

src/layout/vab-logo/index.vue

@@ -11,7 +11,7 @@
   </div> -->
 
   <div class="vab-logo">
-    <router-link to="/" class="logo-url" style="margin-right:20px;" v-if="store.state.homeLogo">
+    <router-link to="/" class="logo-url" style="margin-right:20px;" v-if="store.state.homeLogo" event>
       <img  :src="`${store.state.homeLogo}`"  style="position: relative; top: -6px;height:31px"/>
     </router-link>
     <!-- <span class="anticon"></span> -->  

src/layout/vab-tabs/index.vue

@@ -65,7 +65,7 @@
       </a-tabs>
     </div>
 
-    <div class="version-header" v-if="this.$route.path === '/index/index'">
+    <div class="version-header" v-if="this.$route.path === '/index'">
       <div style="width: 50%">
         <el-select
           v-model="this.$store.state.siteId"

src/main.js

@@ -88,10 +88,6 @@ router.beforeEach((to) => {
         // console.log(store.state.authorities)
 
 
-
-
-
-
         // next()
 
 

src/views/index/components/VersionInformation.vue

@@ -6,7 +6,7 @@
         : [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
       </div>
     </div> -->
-    <div class="vueGridLayout">
+    <div class="vueGridLayout" v-if="!editModelBool">
       <div class="board" style="width: 100%">
         <div class="home">
           <grid-layout
@@ -21,40 +21,69 @@
             :use-css-transforms="true"
           >
             <grid-item
-              v-for="item in mainData"
+              v-for="(item, index) in mainData"
               :x="item.x"
               :y="item.y"
               :w="item.w"
               :h="item.h"
               :i="item.i"
               :key="item.i"
+              :style="{
+                background:
+                  item.backgroundColor === null
+                    ? '#FFFFFF'
+                    : item.backgroundColor,
+              }"
             >
+              <div
+                v-if="updateModelBool"
+                style="float: right; position: relative; z-index: 999"
+              >
+                <el-button
+                  type="text"
+                  text="primary"
+                  link
+                  style="margin-left: 0px; padding: 5px 6px"
+                  @click="modelEdit(index)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  type="text"
+                  text="primary"
+                  link
+                  style="margin-left: 0px; padding: 5px 6px"
+                  @click="modelDelete(index)"
+                >
+                  删除
+                </el-button>
+              </div>
               <div
                 v-if="item.colorType === 'iconText'"
-                :style="'display: flex; height:100%;'"
+                style="display: flex; height: 100%"
               >
                 <div
-                  :style="{
-                    padding: '0px 20px',
-                    'text-align': 'center',
-                    margin: 'auto 0',
-                  }"
+                  style="padding: 0px 20px; text-align: center; margin: auto 0"
                 >
-                  <img :src="item.img" alt="" />
+                  <img :src="item.iconPath" alt="" />
                 </div>
-                <div
-                  :style="{
-                    margin: 'auto 0',
-                  }"
-                >
-                  <div style="color: black">{{ item.name }}</div>
+                <div style="margin: auto 0">
                   <div
                     :style="{
-                      color: item.valueColor,
+                      color: item.dataNameColor,
+                      'font-size': item.dataNameFont + 'px',
+                    }"
+                  >
+                    {{ item.dataName }}
+                  </div>
+                  <div
+                    :style="{
+                      color: item.dataValueColor,
+                      'font-size': item.dataValueFont + 'px',
                       'font-weight': 800,
                     }"
                   >
-                    {{ item.value }}
+                    {{ item.textValue }}
                   </div>
                 </div>
               </div>
@@ -64,16 +93,16 @@
                     padding: '0px 5px',
                   }"
                 >
-                  <img :src="item.img" alt="" />
+                  <img :src="item.iconPath" alt="" />
                   <span
                     :style="{
-                      color: item.valueColor,
+                      color: item.dataValueColor,
                       'font-weight': 800,
                       'padding-top': '1px',
                       'padding-left': '5px',
                     }"
                   >
-                    {{ item.name }}
+                    {{ item.dataName }}
                   </span>
                 </div>
               </div>
@@ -83,16 +112,16 @@
                     padding: '0px 5px',
                   }"
                 >
-                  <img :src="item.img" alt="" />
+                  <img :src="item.iconPath" alt="" />
                   <span
                     :style="{
-                      color: item.valueColor,
+                      color: item.dataValueColor,
                       'font-weight': 800,
                       'padding-top': '1px',
                       'padding-left': '5px',
                     }"
                   >
-                    {{ item.name }}
+                    {{ item.dataName }}
                   </span>
                 </div>
               </div>
@@ -104,150 +133,228 @@
         {{ updateBtnName }}
       </el-button>
     </div>
+
+    <div v-if="editModelBool">
+      <el-button
+        type="primary"
+        @click="modelEditDefine()"
+        style="margin-bottom: 15px"
+      >
+        确定
+      </el-button>
+
+      <div v-if="editModelList.colorType === 'iconText'">
+        <iconText :editModellist="editModelList"></iconText>
+      </div>
+      <div v-if="editModelList.colorType === 'echarts'">
+        <echarts :editModellist="editModelList"></echarts>
+      </div>
+      <div v-if="editModelList.colorType === 'tabls'">
+        <!-- <a-tabls></a-tabls> -->
+        <atabls :editModellist="editModelList"></atabls>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { dependencies, devDependencies } from '*/package.json'
 import { GridLayout, GridItem } from 'vue-grid-layout'
+import iconText from './componentModel/iconText.vue'
+import Echarts from './componentModel/echarts.vue'
+import Atabls from './componentModel/Atabls.vue'
+import * as api from '@/api/index/index.js'
+
+import { useStore } from 'vuex'
+import { defineComponent, ref, onMounted } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
 
-export default {
+export default defineComponent({
   components: {
     GridLayout,
     GridItem,
+    iconText,
+    Echarts,
+    Atabls,
   },
-  data() {
+  setup() {
+    const store = useStore()
+
+    const updateBtnName = ref('编辑')
+    const updateModelBool = ref(false)
+    const mainData = ref([])
+    const editModelBool = ref(false)
+    const editModelList = ref([])
+
+    const modelSelect = () => {
+      api
+        .getBulletinCruxConfigList({
+          siteId: store.state.siteId,
+        })
+        .then((requset) => {
+          console.log(requset.data)
+          mainData.value = requset.data
+        })
+    }
+
+    const updateModel = () => {
+      if (updateModelBool.value === true) {
+        var bool = confirm('系统不会保存您所做的更改，确定离开吗？')
+        if (bool === false) {
+          modelSelect()
+        }
+      }
+      updateModelBool.value = !updateModelBool.value
+      if (updateModelBool.value === false) {
+        updateBtnName.value = '编辑'
+      } else {
+        updateBtnName.value = '取消'
+      }
+    }
+
+    const modelEdit = (i) => {
+      editModelBool.value = !editModelBool.value
+
+      editModelList.value = []
+      editModelList.value = mainData.value[i]
+    }
+    const modelDelete = (i) => {
+      console.log(mainData.value[i])
+      mainData.value.splice(i, 1)
+    }
+
+    const modelEditDefine = () => {
+      editModelBool.value = !editModelBool.value
+
+      if (editModelList.value.colorType === 'iconText') {
+        api
+          .editBulletinCruxConfig({
+            id: editModelList.value.id,
+            dataName: editModelList.value.dataName,
+            dataType: editModelList.value.dataType,
+            dataValue: editModelList.value.dataValue,
+            backgroundColor: editModelList.value.backgroundColor,
+            dataNameColor: editModelList.value.dataNameColor,
+            dataValueColor: editModelList.value.dataValueColor,
+            dataNameFont: editModelList.value.dataNameFont,
+            dataValueFont: editModelList.value.dataValueFont,
+            iconPath: editModelList.value.iconPath,
+            coordinatex: editModelList.value.x,
+            coordinatey: editModelList.value.y,
+            wide: editModelList.value.w,
+            high: editModelList.value.h,
+            siteId: store.state.siteId,
+          })
+          .then((requset) => {
+            modelSelect()
+            console.log(requset)
+          })
+      }
+
+      if (editModelList.value.colorType === 'echarts') {
+        api
+          .editBulletinHistoricalConfig({
+            id: editModelList.value.id,
+            dataTitle: editModelList.value.dataName,
+            iconPath: editModelList.value.iconPath,
+            siteId: store.state.siteId,
+            coordinatex: editModelList.value.x,
+            coordinatey: editModelList.value.y,
+            wide: editModelList.value.w,
+            high: editModelList.value.h,
+
+            queryCycle: 1, //查询周期 1本日 2本月
+            queryType: 1, //查询类型 1平均 2最大
+            maxDimension: 1, //最大值是否标注 0否 1是
+            minDimension: 1, //最小值是否标注 0否 1是
+            meanDimension: 0, //平均值是否标注 0否 1是
+            lonAdaptation: 0, //纵轴自适应 0否 1是
+            bulletinHistoricalRelationList: [
+              {
+                deviceId: 458, //监控设备id
+                variableId: 10870, //变量id
+                graphicColor: '#555', //统计图颜色
+                graphicType: 1, //1折线图 2柱形图
+                displayName: 'A相电流', //显示名称
+              },
+              {
+                deviceId: 458,
+                variableId: 10871,
+                graphicColor: '#555',
+                graphicType: 1,
+                displayName: 'B相电流',
+              },
+              {
+                deviceId: 458,
+                variableId: 10872,
+                graphicColor: '#555',
+                graphicType: 1,
+                displayName: 'C相电流',
+              },
+            ],
+          })
+          .then((requset) => {
+            modelSelect()
+            console.log(requset)
+          })
+      }
+
+      if (editModelList.value.colorType === 'tabls') {
+        api
+          .editBulletinAlarmConfig({
+            id: 1,
+            listTitle: editModelList.value.dataName,
+            iconPath: editModelList.value.iconPath,
+            siteId: store.state.siteId,
+            coordinatex: editModelList.value.x,
+            coordinatey: editModelList.value.y,
+            wide: editModelList.value.w,
+            high: editModelList.value.h,
+            alarmType: 'PhaseLoss',
+          })
+          .then((requset) => {
+            modelSelect()
+            console.log(requset)
+          })
+      }
+    }
+
+    onBeforeRouteLeave((to, from, next) => {
+      //离开当前的组件，触发
+      console.log(to, from)
+      if (updateModelBool.value == true) {
+        var bool = confirm('系统不会保存您所做的更改，确定离开吗？')
+        if (bool === false) {
+          next(false)
+          modelSelect()
+        }
+      }
+    })
+
+    onMounted(() => {
+      modelSelect()
+    })
+
     return {
       updateTime: process.env.VUE_APP_UPDATE_TIME,
       dependencies: dependencies,
       devDependencies: devDependencies,
 
-      ending: null,
-      dragging: null,
-      dom: null,
-
-      updateBtnName: '编辑',
-      updateModelBool: false,
+      updateBtnName,
+      updateModelBool,
       // 布局数据
-      mainData: [
-        {
-          x: 0,
-          y: 0,
-          w: 6,
-          h: 1,
-          i: '1',
-          color: '#3883a0',
-          name: '站点名称',
-          value: '上海永天科技股份有限公司',
-          valueColor: '#333333',
-          colorType: 'iconText',
-          img: require('@/assets/board_images/site.png'),
-        },
-        {
-          x: 6,
-          y: 0,
-          w: 4,
-          h: 1,
-          i: '2',
-          color: '#4883a0',
-          name: '运行天数',
-          value: '1000天',
-          valueColor: '#333333',
-          colorType: 'iconText',
-          img: require('@/assets/board_images/days.png'),
-        },
-        {
-          x: 10,
-          y: 0,
-          w: 4,
-          h: 1,
-          i: '3',
-          color: '#5883a0',
-          name: '今日最大负荷',
-          value: '1000.00kw',
-          valueColor: '#333333',
-          colorType: 'iconText',
-          img: require('@/assets/board_images/maxLoad.png'),
-        },
-        {
-          x: 14,
-          y: 0,
-          w: 4,
-          h: 1,
-          i: '4',
-          color: '#6883a0',
-          name: '站点通讯状态',
-          value: '在线',
-          valueColor: '#65D6A8',
-          colorType: 'iconText',
-          img: require('@/assets/board_images/siteAlarm.png'),
-        },
-        {
-          x: 18,
-          y: 0,
-          w: 4,
-          h: 1,
-          i: '5',
-          color: '#7883a0',
-          name: '站点告警状态',
-          value: '离线',
-          valueColor: '#f34a59',
-          colorType: 'iconText',
-          img: require('@/assets/board_images/siteState.png'),
-        },
-        {
-          x: 0,
-          y: 1,
-          w: 11,
-          h: 2,
-          i: '6',
-          color: '#8883a0',
-          name: '电流监控',
-          value: '',
-          valueColor: '#333333',
-          colorType: 'echarts',
-          img: require('@/assets/board_images/icons.png'),
-        },
-        {
-          x: 11,
-          y: 1,
-          w: 11,
-          h: 4,
-          i: '7',
-          color: '#9883a0',
-          name: '事件告警列表',
-          value: '',
-          valueColor: '#333333',
-          colorType: 'tabls',
-          img: require('@/assets/board_images/icons.png'),
-        },
-        {
-          x: 0,
-          y: 2,
-          w: 11,
-          h: 2,
-          i: '8',
-          color: '#8883a0',
-          name: '变化趋势',
-          value: '',
-          valueColor: '#333333',
-          colorType: 'echarts',
-          img: require('@/assets/board_images/icons.png'),
-        },
-      ],
+      mainData,
+
+      editModelBool,
+      editModelList,
+
+      modelSelect,
+      updateModel,
+      modelEdit,
+      modelDelete,
+      modelEditDefine,
     }
   },
-  mounted() {},
-  methods: {
-    updateModel() {
-      this.updateModelBool = !this.updateModelBool
-      if (this.updateModelBool === false) {
-        this.updateBtnName = '编辑'
-      } else {
-        this.updateBtnName = '取消'
-      }
-    },
-  },
-}
+})
 </script>
 <style lang="less" scoped>
 .version-information {
@@ -266,7 +373,6 @@ export default {
   margin: 5px;
   padding: 5px;
   background: #fff;
-
   border-radius: 5px;
   overflow: hidden;
   white-space: nowrap;
@@ -281,7 +387,6 @@ export default {
 }
 
 .vue-grid-item {
-  background: #ffffff;
   border-radius: 5px;
   overflow: hidden;
   white-space: nowrap;

src/views/index/components/componentModel/Atabls.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div style="border: 1px #939393 dashed; padding: 10px; margin-bottom: 5px">
+      <div
+        class="vue-grid-item"
+        :style="{
+          display: 'flex',
+          height: '100px',
+          background: editModelList.backgroundColor,
+        }"
+      >
+        <div style="padding: 0px 20px; text-align: center; margin: auto 0">
+          <img :src="editModelList.img" alt="" />
+        </div>
+        <div style="margin: auto 0">
+          <div
+            :style="{
+              color: editModelList.nameColor,
+              'font-size': editModelList.nameSize + 'px',
+            }"
+          >
+            {{ editModelList.name }}
+          </div>
+          <div
+            :style="{
+              color: editModelList.valueColor,
+              'font-size': editModelList.nameSize + 'px',
+              'font-weight': 800,
+            }"
+          >
+            {{ editModelList.value }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="border: 1px red dashed">
+      <div></div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from 'vue'
+export default defineComponent({
+  props: {
+    editModellist: Object,
+  },
+  setup(props, context) {
+    context
+
+    const editModelList = ref(props.editModellist)
+
+    onMounted(() => {
+      console.log('aaaaaaaaaaaaaa', editModelList)
+    })
+
+    return {
+      editModelList,
+    }
+  },
+})
+</script>
+<style lang="less" scoped>
+.vue-grid-item {
+  border-radius: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>

src/views/index/components/componentModel/echarts.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div style="border: 1px #939393 dashed; padding: 10px; margin-bottom: 5px">
+      <div
+        class="vue-grid-item"
+        :style="{
+          display: 'flex',
+          height: '100px',
+          background: editModelList.backgroundColor,
+        }"
+      >
+        <div style="padding: 0px 20px; text-align: center; margin: auto 0">
+          <img :src="editModelList.iconPath" alt="" />
+        </div>
+        <div style="margin: auto 0">
+          <div
+            :style="{
+              color: editModelList.dataNameColor,
+              'font-size': editModelList.dataNameFont + 'px',
+            }"
+          >
+            {{ editModelList.dataName }}
+          </div>
+          <div
+            :style="{
+              color: editModelList.dataValueColor,
+              'font-size': editModelList.dataValueFont + 'px',
+              'font-weight': 800,
+            }"
+          >
+            {{ editModelList.dataValue }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="border: 1px red dashed">
+      <div></div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from 'vue'
+export default defineComponent({
+  props: {
+    editModellist: Object,
+  },
+  setup(props, context) {
+    context
+
+    const editModelList = ref(props.editModellist)
+
+    onMounted(() => {
+      console.log('aaaaaaaaaaaaaa', editModelList)
+    })
+
+    return {
+      editModelList,
+    }
+  },
+})
+</script>
+<style lang="less" scoped>
+.vue-grid-item {
+  border-radius: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>

src/views/index/components/componentModel/iconText.vue

@@ -0,0 +1,384 @@
+<template>
+  <div>
+    <div style="border: 1px #939393 dashed; padding: 10px; margin-bottom: 5px">
+      <div
+        class="vue-grid-item"
+        :style="{
+          display: 'flex',
+          height: '100px',
+          background: editModelList.backgroundColor,
+        }"
+      >
+        <div style="padding: 0px 20px; text-align: center; margin: auto 0">
+          <img :src="editModelList.iconPath" alt="" />
+        </div>
+        <div style="margin: auto 0">
+          <div
+            :style="{
+              color: editModelList.dataNameColor,
+              'font-size': editModelList.dataNameFont + 'px',
+            }"
+          >
+            {{ editModelList.dataName }}
+          </div>
+          <div
+            :style="{
+              color: editModelList.dataValueColor,
+              'font-size': editModelList.dataValueFont + 'px',
+              'font-weight': 800,
+            }"
+          >
+            {{ editModelList.textValue }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="border: 1px red dashed; padding: 10px">
+      <div class="widget-form">
+        <div>
+          <div class="ant-row">
+            <div
+              class="ant-col"
+              style="display: flex; height: 32px; line-height: 32px"
+            >
+              <div class="ant-row ant-legacy-form-item">
+                <div class="ant-col ant-legacy-form-item-label">
+                  <label class="" style="margin-right: 10px" title="数据名称:">
+                    数据名称:
+                  </label>
+                </div>
+                <div class="ant-col ant-legacy-form-item-control-wrapper">
+                  <div class="ant-legacy-form-item-control">
+                    <span class="ant-legacy-form-item-children">
+                      <el-input
+                        v-model="editModelList.dataName"
+                        placeholder="Please input"
+                      />
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div class="ant-row ant-legacy-form-item">
+                <div class="ant-col ant-legacy-form-item-label">
+                  <label class="" style="margin: 0px 10px" title="数据类型">
+                    数据类型:
+                  </label>
+                </div>
+                <div class="ant-col ant-legacy-form-item-control-wrapper">
+                  <el-select
+                    v-model="dataTypeValue"
+                    filterable
+                    placeholder="Select"
+                  >
+                    <el-option
+                      v-for="item in dataTypeList"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </div>
+              </div>
+              <div class="ant-row ant-legacy-form-item">
+                <div class="ant-col ant-legacy-form-item-label">
+                  <label class="" style="margin: 0px 10px" title="数据取值">
+                    数据取值:
+                  </label>
+                </div>
+                <div class="ant-col ant-legacy-form-item-control-wrapper">
+                  <div class="ant-legacy-form-item-control">
+                    <el-select
+                      v-model="dataValue"
+                      filterable
+                      placeholder="Select"
+                    >
+                      <el-option
+                        v-for="item in dataValueList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style="margin: 20px 0px 10px">
+          <div class="ant-row">
+            <div class="ant-col ant-col-3">
+              <p>背景颜色</p>
+              <el-color-picker
+                v-model="editModelList.backgroundColor"
+                show-alpha
+              />
+            </div>
+            <div class="ant-col ant-col-3">
+              <p>数据名称颜色</p>
+              <el-color-picker
+                v-model="editModelList.dataNameColor"
+                show-alpha
+              />
+            </div>
+            <div class="ant-col ant-col-3">
+              <p>数据值颜色</p>
+              <el-color-picker
+                v-model="editModelList.dataValueColor"
+                show-alpha
+              />
+            </div>
+            <div class="ant-col ant-col-3">
+              <p>数据名称字体大小</p>
+              <el-input-number
+                v-model="editModelList.dataNameFont"
+                :min="1"
+                :max="100"
+                controls-position="right"
+                @change="nameSizeHandleChange"
+              />
+            </div>
+            <div class="ant-col ant-col-3">
+              <p>数据值字体大小</p>
+              <el-input-number
+                v-model="editModelList.dataValueFont"
+                :min="1"
+                :max="100"
+                label="px"
+                controls-position="right"
+                @change="nameSizeHandleChange"
+              />
+            </div>
+            <div class="ant-col ant-col-3">
+              <p>选择图标</p>
+              <div
+                class="ant-select ant-select-single ant-select-show-arrow"
+                style="width: 60px"
+              >
+                <el-select
+                  style="width: 100%"
+                  v-model="editModelList.iconPath"
+                  placeholder="请选择图标"
+                  @change="imgChangeSelection"
+                  ref="refSelect"
+                  popper-class="refSelectClass"
+                  class="refSelectClass"
+                >
+                  <el-option
+                    v-for="item in imgArray"
+                    :key="item.id"
+                    :value="item.value"
+                  >
+                    <div class="option_box">
+                      <el-image class="option_img" :src="item.value"></el-image>
+                    </div>
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from 'vue'
+
+export default defineComponent({
+  props: {
+    editModellist: Object,
+  },
+  setup(props, context) {
+    context
+    const refSelect = ref(null)
+
+    const editModelList = ref(props.editModellist)
+
+    const nameSizeHandleChange = (m) => {
+      console.log(m)
+    }
+
+    const imgChangeSelection = (val) => {
+      refSelect.value.$el.children[0].children[0].children[0].setAttribute(
+        'style',
+        `
+          background: url(${val}) no-repeat;
+          background-position: 10px center;
+          background-size: 20px 20px;
+          font-size: 0px;
+          `
+      )
+    }
+
+    onMounted(() => {
+      refSelect.value.$el.children[0].children[0].children[0].setAttribute(
+        'style',
+        `
+          background: url(${props.editModellist.iconPath}) no-repeat;
+          background-position: 10px center;
+          background-size: 20px 20px;
+          font-size: 0px;
+          `
+      )
+    })
+
+    return {
+      editModelList,
+      nameSizeHandleChange,
+      imgChangeSelection,
+      refSelect,
+      dataTypeValue: 2,
+      dataTypeList: [
+        {
+          value: 1,
+          label: '普通文本',
+        },
+        {
+          value: 2,
+          label: '站点管理信息',
+        },
+        {
+          value: 3,
+          label: '智能设备数据',
+        },
+        {
+          value: 4,
+          label: '站点告警状态',
+        },
+        {
+          value: 5,
+          label: '站点通讯状态',
+        },
+      ],
+      dataValue: 1,
+      dataValueList: [
+        {
+          value: 1,
+          label: '名称',
+        },
+        {
+          value: 2,
+          label: '地址',
+        },
+        {
+          value: 3,
+          label: '联系电话',
+        },
+        {
+          value: 4,
+          label: '额定容量',
+        },
+        {
+          value: 5,
+          label: '供电类型',
+        },
+        {
+          value: 6,
+          label: '电压等级',
+        },
+        {
+          value: 7,
+          label: '投运时间',
+        },
+        {
+          value: 8,
+          label: '运行天数',
+        },
+      ],
+      imgArray: [
+        {
+          id: 1,
+          value: 'static/assets/board_images/site.png',
+        },
+        {
+          id: 2,
+          value: 'static/assets/board_images/days.png',
+        },
+        {
+          id: 3,
+          value: 'static/assets/board_images/maxLoad.png',
+        },
+        {
+          id: 4,
+          value: 'static/assets/board_images/siteAlarm.png',
+        },
+        {
+          id: 5,
+          value: 'static/assets/board_images/siteState.png',
+        },
+      ],
+    }
+  },
+})
+</script>
+<style lang="less" scoped>
+.vue-grid-item {
+  border-radius: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>
+<style lang="less">
+// 颜色选择器样式 开始
+.el-color-picker__icon {
+  display: none;
+}
+.el-color-picker--small,
+.el-color-picker {
+  height: auto;
+}
+
+.el-color-picker--small .el-color-picker__trigger {
+  height: auto;
+  width: auto;
+  cursor: pointer;
+  padding: 5px;
+  background: rgb(255, 255, 255);
+  border-radius: 1px;
+  display: inline-block;
+}
+.el-color-picker__color {
+  border: none;
+}
+.el-color-picker__color.is-alpha {
+  width: 36px;
+  height: 14px;
+}
+// 颜色选择器样式 结束
+
+// input框样式 开始
+.el-input-number--small {
+  width: 100px;
+}
+// input框样式 结束
+
+// select框样式 开始
+.refSelectClass {
+  max-width: 60px;
+  padding: 0;
+  margin: -1px;
+  .el-select-dropdown__item {
+    padding: 0px;
+    .option_box {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+      margin: auto;
+      .option_img {
+        width: 25px;
+        height: 25px;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+// select框样式 结束
+</style>