|
@@ -6,13 +6,38 @@
|
|
|
<!-- <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{editStatus[type]}}</a-button> -->
|
|
|
</div>
|
|
|
<div class='row'>
|
|
|
- <a-input v-model='equipmentName' @change='changeEquipmentName' />
|
|
|
+ <a-input v-model='equipmentName' size='small' @change='changeEquipmentName' />
|
|
|
+ </div>
|
|
|
+ <div class='row'>
|
|
|
+ <div class='row-tit'>信息点</div>
|
|
|
+ </div>
|
|
|
+ <!-- 信息点 信息 -->
|
|
|
+ <div class='contain' v-for='(item,index) in info' :key='index'>
|
|
|
+ <div class='row'>
|
|
|
+ <div>信息点名称:</div>
|
|
|
+ <a-input v-model='info[index]' class='input' @change='changeInfoName(index)' />
|
|
|
+ </div>
|
|
|
+ <div class='row'>
|
|
|
+ <div class='row-tit'>字号</div>
|
|
|
+ <div class='grid-content'>
|
|
|
+ <a-input-number :min='1' style='width: 128px' />
|
|
|
+ </div>
|
|
|
+ <div class='color-choice'>
|
|
|
+ <swatches popover-x='left' />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 添加信息点 信息 -->
|
|
|
+ <div class="row">
|
|
|
+ <a-button @click="addInfo">添加信息点</a-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import bus from '@/bus'
|
|
|
import { log } from 'util'
|
|
|
+import Swatches from 'vue-swatches'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'equipmentAttr',
|
|
|
props: {
|
|
@@ -20,36 +45,102 @@ export default {
|
|
|
type: Object,
|
|
|
default() {
|
|
|
return {}
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
+ components: { Swatches },
|
|
|
data() {
|
|
|
return {
|
|
|
equipmentName: '',
|
|
|
- equipmentData: {}
|
|
|
+ equipmentData: {},
|
|
|
+ InfoList: [],
|
|
|
+ info: [],
|
|
|
}
|
|
|
},
|
|
|
- components: {},
|
|
|
+
|
|
|
beforeMount() {},
|
|
|
- created() {
|
|
|
- // 设置设备名称
|
|
|
- this.equipmentData = this.focusItemList.itemList[0]
|
|
|
- this.equipmentName = this.equipmentData.name
|
|
|
+ watch: {
|
|
|
+ focusItemList: {
|
|
|
+ handler(newV, oldV) {
|
|
|
+ if (newV !== oldV) {
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
},
|
|
|
- mounted() {
|
|
|
-
|
|
|
+ created() {
|
|
|
+ this.init()
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
methods: {
|
|
|
+ addInfo(){
|
|
|
+ this.info.push('')
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ // 设置设备名称
|
|
|
+ this.equipmentData = this.focusItemList.itemList[0]
|
|
|
+ this.equipmentName = this.equipmentData.name
|
|
|
+ this.InfoList = this.focusItemList.itemList[0]._epData.InfoList
|
|
|
+ this.info = []
|
|
|
+ this.InfoList.map((item) => {
|
|
|
+ this.info.push(item.Name)
|
|
|
+ })
|
|
|
+ console.log(this.focusItemList.itemList[0]._epData.InfoList)
|
|
|
+ },
|
|
|
changeEquipmentName() {
|
|
|
bus.$emit('changeEquipmentName', this.equipmentName)
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 更改信息点名称
|
|
|
+ changeInfoName(index) {
|
|
|
+ let name = this.info[index]
|
|
|
+ console.log(index,name)
|
|
|
+ bus.$emit('changeInfoName', { index, name })
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
.equipment-attr {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ padding: 12px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
// background-color: lightblue;
|
|
|
+ .contain {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 12px;
|
|
|
+ .color-choice {
|
|
|
+ & /deep/ .vue-swatches__trigger {
|
|
|
+ width: 26px !important;
|
|
|
+ height: 26px !important;
|
|
|
+ border-radius: 0px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row-tit {
|
|
|
+ color: #1f2429;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .grid {
|
|
|
+ margin: 10px 15px;
|
|
|
+ .grid-title {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #8d9399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .grid-content {
|
|
|
+ // margin-top: 10px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|