feat: 调整功率容量

src/packages/components/CustomComponents/CustomComponents/ComprehensivePUEV4/configData.vue

@@ -32,13 +32,13 @@
     <setting-item name="标题1">
       <n-input v-model:value="props.customData.right.title1" size="small" placeholder="请输入"/>
     </setting-item>
-    <setting-item name="公式1">
+    <setting-item name="测点计算公式1">
       <n-input v-model:value="props.customData.right.calculation1" size="small" placeholder="请输入"/>
     </setting-item>
     <setting-item name="标题2">
       <n-input v-model:value="props.customData.right.title2" size="small" placeholder="请输入"/>
     </setting-item>
-    <setting-item name="公式2">
+    <setting-item name="测点计算公式2">
       <n-input v-model:value="props.customData.right.calculation2" size="small" placeholder="请输入"/>
     </setting-item>
     <setting-item name="标题3">

src/packages/components/CustomComponents/CustomComponents/PowerCapacity/config.ts

@@ -8,23 +8,24 @@ export const option = {}
 export const customData = {
   title: '功率容量',
   enable: false,
-  topBox: {
+  arr: [
-    name: '一号楼', label: '设计容量', value: 20000, label1: '已使用', calculation: '', name1: '', upper_limit: 0, floor: [
+    {
-      {label: '1F', calculation: '', name: '', upper_limit: 0},
+      name: '一号楼', show: true, label: '设计容量', value: 20000, label1: '已使用', calculation: '', floor: [
-      {label: '2F', calculation: '', name: '', upper_limit: 0},
+        { label: '1F', calculation: '' },
-      {label: '3F', calculation: '', name: '', upper_limit: 0},
+        { label: '2F', calculation: '' },
-      {label: '4F', calculation: '', name: '', upper_limit: 0},
+        { label: '3F', calculation: '' },
-    ]
+        { label: '4F', calculation: '' },
-  },
+      ]
-  bottomBox: {
+    },
-    name: '二号楼', label: '设计容量', value: 20000, label1: '已使用', calculation: '', name1: '', upper_limit: 0, floor: [
+    {
-      {label: '1F', calculation: '', name: '', upper_limit: 0},
+      name: '二号楼', show: true, label: '设计容量', value: 20000, label1: '已使用', calculation: '', floor: [
-      {label: '2F', calculation: '', name: '', upper_limit: 0},
+        { label: '1F', calculation: '' },
-      {label: '3F', calculation: '', name: '', upper_limit: 0},
+        { label: '2F', calculation: '' },
-      {label: '4F', calculation: '', name: '', upper_limit: 0},
+        { label: '3F', calculation: '' },
-      {label: '5F', calculation: '', name: '', upper_limit: 0},
+        { label: '4F', calculation: '' },
-    ]
+      ]
-  },
+    }
+  ],
   showInterval: true,
 }
 

src/packages/components/CustomComponents/CustomComponents/PowerCapacity/config.vue

@@ -1,46 +1,4 @@
 <template>
-<!--  <CollapseItem :name="`仪表盘`" :expanded="true">-->
-<!--    <SettingItemBox name="数据">-->
-<!--      <SettingItem>-->
-<!--        <n-space>-->
-<!--          <n-switch v-model:value="config.showUnit" size="small" />-->
-<!--          <n-text>展示单位</n-text>-->
-<!--        </n-space>-->
-<!--      </SettingItem>-->
-<!--      <SettingItem name="最大值">-->
-<!--        <n-input-number v-model:value="config.max" placeholder="请输入最大值" size="small" clearable/>-->
-<!--      </SettingItem>-->
-<!--      <SettingItem name="最小值">-->
-<!--        <n-input-number v-model:value="config.min" placeholder="请输入最小值" size="small" clearable/>-->
-<!--      </SettingItem>-->
-<!--      <SettingItem name="字体大小">-->
-<!--        <n-input-number v-model:value="config.titleFontSize" placeholder="请输入字体大小" size="small" clearable/>-->
-<!--      </SettingItem>-->
-<!--      <SettingItem name="颜色">-->
-<!--        <n-color-picker size="small" :modes="['hex']" v-model:value="config.titleColor"></n-color-picker>-->
-<!--      </SettingItem>-->
-<!--    </SettingItemBox>-->
-<!--    <SettingItemBox name="副标题">-->
-<!--      <SettingItem>-->
-<!--        <n-space>-->
-<!--          <n-switch v-model:value="config.showSubtext" size="small" />-->
-<!--          <n-text>展示副标题</n-text>-->
-<!--        </n-space>-->
-<!--      </SettingItem>-->
-<!--      <SettingItem>-->
-<!--        <n-space>-->
-<!--          <n-switch v-model:value="config.showSubtextUnit" size="small" />-->
-<!--          <n-text>展示单位</n-text>-->
-<!--        </n-space>-->
-<!--      </SettingItem>-->
-<!--      <SettingItem name="字体大小">-->
-<!--        <n-input-number v-model:value="config.subtextFontSize" placeholder="请输入字体大小" size="small" clearable/>-->
-<!--      </SettingItem>-->
-<!--      <SettingItem name="颜色">-->
-<!--        <n-color-picker size="small" :modes="['hex']" v-model:value="config.subtextColor"></n-color-picker>-->
-<!--      </SettingItem>-->
-<!--    </SettingItemBox>-->
-<!--  </CollapseItem>-->
 </template>
 
 <script setup lang="ts">

src/packages/components/CustomComponents/CustomComponents/PowerCapacity/configData.vue

@@ -4,91 +4,129 @@
   </setting-item-box>
   <setting-item-box name="启用数据">
     <n-space>
-      <n-switch v-model:value="props.customData.enable" />
+      <n-switch v-model:value="props.customData.enable" size="small"/>
     </n-space>
   </setting-item-box>
-  <setting-item-box name="上半部分">
+  <setting-item-box :name="`第${i + 1}部分`" v-for="(it, i) in props.customData.arr" :key="i">
+    <setting-item name="启用">
+      <n-space>
+        <n-switch v-model:value="it.show" size="small"/>
+      </n-space>
+    </setting-item>
     <setting-item name="名称">
-      <n-input v-model:value="props.customData.topBox.name" size="small" placeholder="请输入"/>
+      <n-input v-model:value="it.name" size="small" placeholder="请输入"/>
     </setting-item>
     <setting-item name="设计容量名称">
-      <n-input v-model:value="props.customData.topBox.label" size="small" placeholder="请输入"/>
+      <n-input v-model:value="it.label" size="small" placeholder="请输入"/>
     </setting-item>
     <setting-item name="设计容量值">
-      <n-input-number v-model:value="props.customData.topBox.value" size="small" placeholder="请输入"/>
+      <n-input-number v-model:value="it.value" size="small" placeholder="请输入"/>
     </setting-item>
     <setting-item name="总功率名称">
-      <n-input v-model:value="props.customData.topBox.label1" size="small" placeholder="请输入"/>
+      <n-input v-model:value="it.label1" size="small" placeholder="请输入"/>
     </setting-item>
-    <setting-item name="总功率公式">
+    <setting-item name="总功率测点计算公式">
-      <n-input v-model:value="props.customData.topBox.calculation" size="small" placeholder="请输入"/>
+      <n-input v-model:value="it.calculation" size="small" placeholder="请输入"/>
     </setting-item>
-    <setting-item name="总功率公式名">
+    <!--    <setting-item name=""/>-->
-      <n-input v-model:value="props.customData.topBox.name1" size="small" placeholder="请输入"/>
+    <template v-for="(it, i) in it.floor" :key="i">
-    </setting-item>
-    <setting-item name="总功率upper_limit 为0忽略">
-      <n-input v-model:value="props.customData.topBox.upper_limit" size="small" placeholder="请输入"/>
-    </setting-item>
-    <setting-item name=""/>
-    <template v-for="(it, i) in props.customData.topBox.floor" :key="i">
       <setting-item :name="`楼层名字-${i + 1}`">
         <n-input v-model:value="it.label" size="small" placeholder="请输入"/>
       </setting-item>
-      <setting-item :name="`计算公式-${i + 1}`">
+      <setting-item :name="`测点计算公式-${i + 1}`">
         <n-input v-model:value="it.calculation" size="small" placeholder="请输入"/>
       </setting-item>
-      <setting-item :name="`计算公式名-${i + 1}`">
-        <n-input v-model:value="it.name" size="small" placeholder="请输入"/>
-      </setting-item>
-      <setting-item :name="`upper_limit-${i + 1} 为0忽略`">
-        <n-input-number v-model:value="it.upper_limit" size="small" placeholder="请输入"/>
-      </setting-item>
     </template>
   </setting-item-box>
-  <setting-item-box name="下半部分">
+  <setting-item-box name="增加楼栋" :alone="true">
-    <setting-item name="名称">
+    <n-space vertical>
-      <n-input v-model:value="props.customData.bottomBox.name" size="small" placeholder="请输入"/>
+      <div v-for="(item, i) in computeArr" :key="i" style="margin-top: 2px;">
-    </setting-item>
+        <div style="display: flex;">
-    <setting-item name="设计容量名称">
+          <n-text style="flex: 1;margin-right: 10px;">{{ item.label }}</n-text>
-      <n-input v-model:value="props.customData.bottomBox.label" size="small" placeholder="请输入"/>
+          <n-button v-if="computeArr.length !== 1" style="flex: none;margin-right: 10px;" @click="handleDelete(i)" circle size="tiny">
-    </setting-item>
+            <template #icon>
-    <setting-item name="设计容量值">
+              <n-icon>
-      <n-input-number v-model:value="props.customData.bottomBox.value" size="small" placeholder="请输入"/>
+                <CloseIcon/>
-    </setting-item>
+              </n-icon>
-    <setting-item name="总功率名称">
+            </template>
-      <n-input v-model:value="props.customData.bottomBox.label1" size="small" placeholder="请输入"/>
+          </n-button>
-    </setting-item>
+          <n-button v-if="i === computeArr.length - 1" @click="handleAdd" circle size="tiny">
-    <setting-item name="总功率公式">
+            <template #icon>
-      <n-input v-model:value="props.customData.bottomBox.calculation" size="small" placeholder="请输入"/>
+              <n-icon>
-    </setting-item>
+                <AddIcon/>
-    <setting-item name="总功率公式名">
+              </n-icon>
-      <n-input v-model:value="props.customData.bottomBox.name1" size="small" placeholder="请输入"/>
+            </template>
-    </setting-item>
+          </n-button>
-    <setting-item name="总功率upper_limit 为0忽略">
+          <div v-else style="width: 22px"></div>
-      <n-input v-model:value="props.customData.bottomBox.upper_limit" size="small" placeholder="请输入"/>
+        </div>
-    </setting-item>
+        <div style="display: flex;margin-top: 5px;" v-for="(cIt, ci) in item.children" :key="`${i}-${ci}`">
-    <setting-item name=""/>
+          <n-text style="flex: 1;margin-right: 10px;">&nbsp;&nbsp;{{ cIt }}</n-text>
-    <template v-for="(it, i) in props.customData.bottomBox.floor" :key="i">
+          <n-button v-if="item.children.length !== 1" style="flex: none;margin-right: 10px;" @click="handleDeleteFloor(i, ci)" circle size="tiny">
-      <setting-item :name="`楼层名字-${i + 1}`">
+            <template #icon>
-        <n-input v-model:value="it.label" size="small" placeholder="请输入"/>
+              <n-icon>
-      </setting-item>
+                <CloseIcon/>
-      <setting-item :name="`计算公式-${i + 1}`">
+              </n-icon>
-        <n-input v-model:value="it.calculation" size="small" placeholder="请输入"/>
+            </template>
-      </setting-item>
+          </n-button>
-      <setting-item :name="`计算公式名-${i + 1}`">
+          <n-button v-if="ci === item.children.length - 1" @click="handleAddFloor(i)" circle size="tiny">
-        <n-input v-model:value="it.name" size="small" placeholder="请输入"/>
+            <template #icon>
-      </setting-item>
+              <n-icon>
-      <setting-item :name="`upper_limit-${i + 1} 为0忽略`">
+                <AddIcon/>
-        <n-input-number v-model:value="it.upper_limit" size="small" placeholder="请输入"/>
+              </n-icon>
-      </setting-item>
+            </template>
-    </template>
+          </n-button>
+          <div v-else style="width: 22px"></div>
+        </div>
+      </div>
+    </n-space>
   </setting-item-box>
 </template>
 
 <script lang="ts" setup>
-import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import {SettingItemBox, SettingItem} from '@/components/Pages/ChartItemSetting'
+import {computed} from 'vue'
+import {cloneDeep} from 'lodash'
+import {icon} from "@/plugins";
+const { CloseIcon, AddIcon } = icon.ionicons5
 
 const props = defineProps(['customData', 'request'])
+
+const computeArr = computed(() => {
+  return props.customData.arr.map((item: any, index: number) => {
+    return {
+      label: `第${index + 1}部分`,
+      children: item.floor.map((_: any, i: number) => `楼层名字-${i + 1}`)
+    }
+  })
+})
+
+const handleDelete = (i: number) => {
+  props.customData.arr.splice(i, 1)
+}
+
+const handleAdd = () => {
+  let obj = {
+    name: '', show: true, label: '设计容量', value: 20000, label1: '已使用', calculation: '', floor: [
+      {label: '1F', calculation: ''},
+      {label: '2F', calculation: ''},
+      {label: '3F', calculation: ''},
+      {label: '4F', calculation: ''},
+    ]
+  }
+  props.customData.arr.push(cloneDeep(obj))
+}
+
+const handleDeleteFloor = (i: number, ci: number) => {
+  props.customData.arr[i].floor.splice(ci, 1)
+}
+
+const handleAddFloor = (i: number) => {
+  let obj = {label: '', calculation: ''}
+  props.customData.arr[i].floor.push(cloneDeep(obj))
+}
+
+
+
 </script>
 
 <style lang="scss" scoped>

src/packages/components/CustomComponents/CustomComponents/PowerCapacity/index.vue

@@ -2,26 +2,28 @@
   <div style="overflow: visible;">
     <BorderBox :title="customData?.title">
       <div class="box">
-        <div class="item" v-for="(it, i) in data" :key="i">
+        <template v-for="(it, i) in data" :key="i">
-          <div class="row1">
+          <div class="item" v-if="it.show">
-            <div class="name">{{it.name}}</div>
+            <div class="row1">
-            <div style="flex: 1;"></div>
+              <div class="name">{{it.name}}</div>
-            <div class="label">{{it.label}}</div>
+              <div style="flex: 1;"></div>
-            <div class="value">{{it.value}}</div>
+              <div class="label">{{it.label}}</div>
-          </div>
+              <div class="value">{{it.value}}</div>
-          <div class="row2">
+            </div>
-            <div class="rect1"></div>
+            <div class="row2">
-            <div class="rect" :style="{width: toPercent(it.value1, it.value)}"></div>
+              <div class="rect1"></div>
-            <div class="label">{{it.label1}}</div>
+              <div class="rect" :style="{width: toPercent(it.value1, it.value)}"></div>
-            <div class="value">{{toPercent(it.value1, it.value)}}({{typeof it.value1 === 'number' ? it.value1 : '--'}})</div>
+              <div class="label">{{it.label1}}</div>
-          </div>
+              <div class="value">{{toPercent(it.value1, it.value)}}({{typeof it.value1 === 'number' ? it.value1 : '--'}})</div>
-          <div class="row3">
+            </div>
-            <div class="col" v-for="(c, ci) in it.floor" :key="ci">
+            <div class="row3">
-              <div class="label">{{c.label}}</div>
+              <div class="col" v-for="(c, ci) in it.floor" :key="ci">
-              <div class="value">{{typeof c.value === 'number' ? c.value : '--'}}</div>
+                <div class="label">{{c.label}}</div>
+                <div class="value">{{typeof c.value === 'number' ? c.value : '--'}}</div>
+              </div>
             </div>
           </div>
-        </div>
+        </template>
       </div>
     </BorderBox>
   </div>
@@ -56,14 +58,14 @@ onMounted(() => {
 })
 
 const resetData = () => {
-  let obj1 = cloneDeep(customData.value.topBox) as any
+  let arr = customData.value.arr.map((it: any, index: number) => {
-  obj1.value1 = null
+    let o = cloneDeep(it)
-  obj1.floor = obj1.floor.map((_: any) => ({..._, value: null}))
+    o.value1 = null
-
+    o.name1 = `${index}_0`
-  let obj2 = cloneDeep(customData.value.bottomBox) as any
+    o.floor = o.floor.map((_: any, i: number) => ({..._, name: `${index}_${i + 1}`, value: null}))
-  obj2.value1 = null
+    return o
-  obj2.floor = obj2.floor.map((_: any) => ({..._, value: null}))
+  })
-  return [obj1, obj2]
+  return arr
 }
 
 const getData = () => {
@@ -75,18 +77,17 @@ const getData = () => {
     abs: true
   }
   data.value.forEach((item, i) => {
+    if(!item.show) return
     let o = {...obj} as any
     o.calculation = item.calculation
-    if(item.name1) o.name = item.name1
+    o.name = item.name1
-    if(item.upper_limit !== 0) o.upper_limit = item.upper_limit
     paramsMap[params.length] = {dataIndex: i, floorIndex: null}
     params.push(o)
 
     item.floor.forEach((cIt: any, ci: number) => {
       let a = {...obj} as any
       a.calculation = cIt.calculation
-      if(cIt.name) a.name = cIt.name
+      a.name = cIt.name
-      if(cIt.upper_limit !== 0) a.upper_limit = cIt.upper_limit
       paramsMap[params.length] = {dataIndex: i, floorIndex: ci}
       params.push(a)
     })
@@ -104,8 +105,9 @@ const getData = () => {
   })
 }
 
-watch([() => customData.value.topBox, () => customData.value.bottomBox, () => customData.value.enable], () => {
+watch([() => customData.value.arr, () => customData.value.enable], () => {
   data.value = resetData()
+  console.log(data.value)
   if(customData.value.enable) getData()
 }, {
   deep: true

src/packages/components/CustomComponents/CustomComponents/TemperatureTop10/index.vue

@@ -80,7 +80,6 @@ const getData = () => {
   publicInterface('/dcim/dems/device_point', 'temp_list_dashboard', params).then((res: any) => {
     if (res.data && res.data.length) {
       data.value = res.data.slice(0, 10)
-      console.log(data.value, 777)
     }
   })
 }