feat: 新增组件

src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/BorderBoxV2.vue

@@ -3,13 +3,15 @@
     <template #title>
       <div class="titleBox">
         <div class="mr10">{{title}}</div>
-        <n-checkbox v-model:checked="checkAll" size="small" class="mr10">全选</n-checkbox>
+        <n-checkbox :checked="checkAll" @update:checked="v => emit('update:checkAll', v)" size="small" class="mr10">全选</n-checkbox>
-        <n-button strong size="tiny" color="rgba(36,197,231,.5)" text-color="#fff" class="button">
+        <n-button strong size="tiny" color="rgba(36,197,231,.5)" text-color="#fff" class="button" @click="clickBatch">
-          <template #icon><AssignmentTurnedInRoundIcon/></template>
+          <template #icon>
+            <AssignmentTurnedInRoundIcon/>
+          </template>
           批量确认
         </n-button>
         <div style="flex: 1"></div>
-        <n-checkbox-group v-model:value="select1.value" class="mr10" size="small">
+        <n-checkbox-group :value="select1.value" @update:value="v => changeSelect1(v)" class="mr10" size="small">
           <n-space item-style="display: flex;" size="small">
             <n-checkbox :value="item.value" :label="item.label" v-for="(item, i) in select1.options" :key="i">
               <div :style="{color: item.color}" style="display: inline-block">{{item.label}}</div>
@@ -17,7 +19,7 @@
             </n-checkbox>
           </n-space>
         </n-checkbox-group>
-        <n-checkbox-group v-model:value="select2.value" class="mr10" size="small">
+        <n-checkbox-group :value="select2.value" @update:value="v => changeSelect2(v)"  class="mr10" size="small">
           <n-space item-style="display: flex;">
             <n-checkbox :value="item.value" :label="item.label" v-for="(item, i) in select2.options" :key="i">
               <div :style="{color: item.color}" style="display: inline-block">{{item.label}}</div>
@@ -25,7 +27,7 @@
             </n-checkbox>
           </n-space>
         </n-checkbox-group>
-        <div class="more">更多>></div>
+        <div class="more" @click="jumpMore">更多>></div>
       </div>
     </template>
     <template #default>
@@ -35,19 +37,33 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, toRefs } from 'vue'
+import { ref, reactive, toRefs, defineEmits } from 'vue'
-import BorderBox from './BorderBox.vue'
+import BorderBox from '../components/BorderBox.vue'
 import { icon } from '@/plugins/icon'
+import VModal from './VModalV1.vue'
 
 const { AssignmentTurnedInRoundIcon } = icon.material
 
 
-const props = defineProps(['title', 'select1', 'select2'])
+const props = defineProps(['title', 'select1', 'select2', 'checkAll'])
 
 const { select1, select2 } = toRefs(props)
 
-const checkAll = ref(false)
 
+const emit = defineEmits(['clickBatch', 'update:select1Value', 'update:select2Value', 'update:checkAll', 'jumpMore'])
+const clickBatch = () => {
+  emit('clickBatch')
+}
+
+const changeSelect1 = (v:number[]) => {
+  emit('update:select1Value', v)
+}
+const changeSelect2 = (v:number[]) => {
+  emit('update:select2Value', v)
+}
+const jumpMore = () => {
+  emit('jumpMore')
+}
 // const select1 = reactive({
 //   value: [1, 2],
 //   options: [
@@ -81,6 +97,7 @@ const checkAll = ref(false)
   display: flex;
   align-items: center;
   .more{
+    font-size: 14px;
     color: #409eff;
     cursor: pointer;
   }

src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/VModal.vue

@@ -0,0 +1,146 @@
+<template>
+  <n-modal
+    :show="show"
+    preset="dialog"
+    class="modal"
+    title=""
+    :show-icon="false"
+    @close="close"
+    @esc="close"
+    style="width: 500px"
+  >
+    <div class="header">
+      <div>告警详情</div>
+    </div>
+    <div class="box">
+      <div class="label">告警时间</div>
+      <div class="value">{{data.generate_time && moment(data.generate_time).format('yyyy-MM-DD HH:mm:ss')}}</div>
+      <div class="label">告警级别</div>
+      <div class="value">
+        <n-tag size="small" :color="{textColor: data.color1, borderColor: data.color1}">
+          {{select1Options[data.level - 1].label}}
+        </n-tag>
+      </div>
+      <div class="label">告警位置</div>
+      <div class="value cv">{{data.position}}</div>
+      <div class="label">设备名称</div>
+      <div class="value">{{data.device_name}}</div>
+      <div class="label">告警测点</div>
+      <div class="value">{{data.node_name}}</div>
+      <div class="label">告警内容</div>
+      <div class="value fv">{{data.content}}</div>
+      <div class="label">是否确认</div>
+      <div class="value">{{data.confirm_status}}</div>
+      <div class="label">确认人</div>
+      <div class="value">{{data.confirm_people}}</div>
+      <div class="label">确认时间</div>
+      <div class="value iv">{{data.confirm_time && moment(data.confirm_time).format('yyyy-MM-DD HH:mm:ss')}}</div>
+      <div class="label">重新确认</div>
+      <div class="value">{{data.reconfirmation_time_str}}</div>
+      <div class="label">告警序列号</div>
+      <div class="value">{{data.serial_no}}</div>
+      <div class="label">备注</div>
+      <div class="value lv">{{data.remark}}</div>
+    </div>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineEmits, computed } from 'vue'
+import { icon } from '@/plugins/icon'
+import { cloneDeep } from 'lodash'
+import moment from 'moment'
+
+const { CloseIcon } = icon.ionicons5
+
+const props = defineProps(['show', 'data', 'select1Options'])
+
+const emit = defineEmits(['close', 'update:show'])
+const close = () => {
+  emit('close')
+  updateShow(false)
+}
+
+const updateShow = (flag:boolean) => {
+  emit('update:show', flag)
+}
+
+// const computerData = computed(() => {
+//   let obj = cloneDeep(props.data)
+//   return obj
+// })
+</script>
+
+<style>
+.modal{
+  padding: 0;
+  background: #121922;
+  box-sizing: border-box;
+}
+.modal .n-dialog__content{
+  margin-top: 0;
+}
+.modal .n-dialog__close{
+  margin-top: 7px;
+  margin-right: 10px;
+}
+</style>
+<style lang="scss" scoped>
+.header{
+  display: flex;
+  align-items: center;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 10px;;
+  box-sizing: border-box;
+  border-left: 1px solid #2f3a49;
+  border-top: 1px solid #2f3a49;
+  border-right: 1px solid #2f3a49;
+}
+.cv{
+  grid-area: cv;
+}
+.fv{
+  grid-area: fv;
+}
+.iv{
+  grid-area: iv;
+}
+.lv{
+  grid-area: lv;
+}
+.box{
+  height: 240px;
+  display: grid;
+  grid-template-rows: repeat(8, 1fr);
+  grid-template-columns: repeat(2, 2fr 3fr);
+  grid-template-areas: 'a av b bv' 'c cv cv cv' 'd dv e ev' 'f fv fv fv' 'g gv h hv' 'i iv iv iv' 'j jv k kv' 'l lv lv lv';
+  border-left: 1px solid #2f3a49;
+  border-top: 1px solid #2f3a49;
+  box-sizing: border-box;
+  .label{
+    padding-left: 10px;
+    height: 36px;
+    width: 100%;
+    background: #242e3b;
+    line-height: 36px;
+    font-size: 12px;
+    border-right: 1px solid #2f3a49;
+    border-bottom: 1px solid #2f3a49;
+    box-sizing: border-box;
+  }
+  .value{
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    height: 36px;
+    width: 100%;
+    background: #121922;
+    line-height: 14px;
+    font-size: 12px;
+    border-right: 1px solid #2f3a49;
+    border-bottom: 1px solid #2f3a49;
+    box-sizing: border-box;
+  }
+}
+</style>

src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/VModalV1.vue

@@ -0,0 +1,143 @@
+<template>
+  <n-modal
+    :show="show"
+    preset="dialog"
+    class="modal"
+    title=""
+    :show-icon="false"
+    @close="close"
+    @esc="close"
+    style="width: 500px"
+  >
+    <div class="header">
+      <div>批量确认</div>
+    </div>
+    <div class="content">
+      <n-form
+        ref="formRef"
+        :model="data"
+        :rules="rules"
+        label-placement="left"
+        label-width="110px"
+        label-align="left"
+        require-mark-placement="right-hanging"
+        size="small"
+        :style="{
+          maxWidth: '640px'
+        }"
+      >
+        <n-form-item label="确认人" path="confirm_people">
+          <n-input v-model:value="data.confirm_people" readonly placeholder="请输入确认人" />
+        </n-form-item>
+        <n-form-item label="是否误报" path="is_misreport">
+          <n-radio-group v-model:value="data.is_misreport">
+            <n-radio :value="true">是</n-radio>
+            <n-radio :value="false">否</n-radio>
+          </n-radio-group>
+        </n-form-item>
+        <n-form-item label="备注" path="remark">
+          <n-input
+            v-model:value="data.remark"
+            type="textarea"
+            maxlength="120"
+            :autosize="{
+              minRows: 3,
+              maxRows: 3
+            }"
+            placeholder="请输入备注"
+          />
+        </n-form-item>
+        <n-form-item label="重新确认" path="reconfirmation_time_str">
+          <n-date-picker v-model:formatted-value="data.reconfirmation_time_str" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" type="datetime" clearable />
+        </n-form-item>
+      </n-form>
+    </div>
+    <div class="footer">
+      <div style="flex: 1;"></div>
+      <n-button @click="submitCallback" type="info" size="small" style="margin-right: 5px;color: #fff;">确认</n-button>
+      <n-button size="small" @click="close">取消</n-button>
+    </div>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { defineEmits, ref, reactive, watch } from 'vue'
+
+const props = defineProps(['show', 'data'])
+const emit = defineEmits(['confirm', 'update:show'])
+
+const submitCallback = () => {
+  formRef.value.validate((errors:string) => {
+    if (!errors) {
+      emit('confirm')
+      updateShow(false)
+    }
+  })
+}
+
+const close = () => {
+  updateShow(false)
+}
+const formRef:any = ref(null)
+const updateShow = (flag:boolean) => {
+  emit('update:show', flag)
+}
+console.log(props.data)
+
+const rules = {
+  confirm_people: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入确认人'
+  },
+  is_misreport: {
+    type: 'boolean',
+    required: true,
+    trigger: 'change',
+    message: '请选择'
+  }
+}
+
+</script>
+
+<style>
+.modal{
+  padding: 0;
+  background: #121922;
+  box-sizing: border-box;
+}
+.modal .n-dialog__content{
+  margin-top: 0;
+}
+.modal .n-dialog__close{
+  margin-top: 7px;
+  margin-right: 10px;
+}
+</style>
+<style lang="scss" scoped>
+.header{
+  display: flex;
+  align-items: center;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 10px;;
+  box-sizing: border-box;
+  border-left: 1px solid #2f3a49;
+  border-top: 1px solid #2f3a49;
+  border-right: 1px solid #2f3a49;
+}
+.content{
+  padding: 10px;
+  box-sizing: border-box;
+  border: 1px solid #2f3a49;
+}
+.footer{
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  box-sizing: border-box;
+  border-left: 1px solid #2f3a49;
+  border-bottom: 1px solid #2f3a49;
+  border-right: 1px solid #2f3a49;
+}
+</style>

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

@@ -1,18 +1,35 @@
 <template>
-  <BorderBox ref="refBorderBox" :title="props.chartConfig.customData.title" :select1="select1" :select2="select2" :style="getStyle(borderRadius)" style="overflow: visible">
+  <BorderBox
+    :title="props.chartConfig.customData.title"
+    :select1="select1"
+    @update:select1Value="v => select1.value = v"
+    :select2="select2"
+    @update:select2Value="v => select2.value = v"
+    :style="getStyle(borderRadius)"
+    @clickBatch="clickBatch"
+    v-model:checkAll="checkAll"
+    @jumpMore="jumpMore"
+    style="overflow: visible"
+  >
     <div class="itemBox">
-      <div class="item" v-for="(item, i) in tableData" :key="i">
+      <div class="item" v-for="(item, i) in tableData" :key="i" @click="clickItem(i)">
-        <n-checkbox class="mr10" size="small"/>
+        <n-checkbox :disabled="item.checked" v-model:checked="item.checked" class="mr10" size="small" @click.stop/>
-        <n-tag class="mr5" size="small" strong :color="{textColor: '#000', color: item.confirm_status === 'ok' ? '#4DCA59' : '#f5b442'}">{{ item.confirm_status === 'ok'?'已确认':'未确认' }}</n-tag>
+        <n-tag class="mr5" size="small" strong :color="{textColor: '#000', color: item.confirm_status === 'ok' ? '#4DCA59' : '#f5b442'}">
-        <n-tag class="mr5" size="small" :color="{textColor: item.color1, borderColor: item.color1}">{{select1.options[item.level - 1].label}}</n-tag>
+          {{ item.confirm_status === 'ok'?'已确认':'未确认' }}
+        </n-tag>
+        <n-tag class="mr5" size="small" :color="{textColor: item.color1, borderColor: item.color1}">
+          {{select1.options[item.level - 1].label}}
+        </n-tag>
         <div style="color: rgba(255, 255, 255, 0.82);">{{ item.content }}</div>
         <div style="flex: 1"></div>
         <div class="mr10" style="color: #B5BAC3;">{{ moment(item.generate_time).format('yyyy-MM-DD HH:mm:ss') }}</div>
-        <LocationIcon class="mr10" style="width: 20px;height: 20px;color: #4196ff;"/>
+        <LocationIcon @click.stop="jumpTo(item)" class="mr10" style="width: 20px;height: 20px;color: #4196ff;"/>
-        <CheckCircleOutlinedIcon v-if="item.confirm_status === 'not'" style="width: 20px;height: 20px;color: #4196ff;"/>
+        <CheckCircleOutlinedIcon @click.stop="clickSingle(item.id)" v-if="item.confirm_status === 'not'" style="width: 20px;height: 20px;color: #4196ff;"/>
         <div v-else style="width: 20px"></div>
       </div>
     </div>
+    <VModal v-model:show="modalObj.show" :data="modalObj.data" :select1Options="select1.options"/>
+    <VModalV1 v-model:show="modalV1Obj.show" :data="modalV1Obj.data" @confirm="confirm"/>
   </BorderBox>
 </template>
 
@@ -22,15 +39,18 @@ import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { publicInterface } from '@/api/path/business.api'
-import BorderBox from '../components/BorderBoxV2.vue'
+import BorderBox from './BorderBoxV2.vue'
 import VChart from 'vue-echarts'
-import {isPreview} from '@/utils'
+import {isPreview, postMessageToParent} from '@/utils'
 import {graphic} from "echarts";
 import {cloneDeep} from 'lodash'
 import moment from "moment"
 import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
 import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
 import {icon} from '@/plugins/icon'
+import VModal from './VModal.vue'
+import VModalV1 from './VModalV1.vue'
+import { useOriginStore } from '@/store/modules/originStore/originStore'
 
 const { LocationIcon } = icon.carbon
 const { CheckCircleOutlinedIcon } = icon.material
@@ -72,7 +92,12 @@ const select2 = reactive({
     { label: '未确认', value: 'not', number: 0, color: '#f5b442' },
   ]
 })
-type tableDataType = {
+
+watch(() => select1.value.join('&&') + select2.value.join('&&'), (v) => {
+  getData()
+})
+
+type tableDataItemType = {
   id: number,
   content: string,
   generate_time: string,
@@ -81,12 +106,55 @@ type tableDataType = {
   level: number,
   color1: string,
   color2: string,
-}[]
+  position: string,
-let tableData:tableDataType = reactive([])
+  device_name: string,
+  node_name: string,
+  confirm_people: string,
+  confirm_time: string,
+  reconfirmation_time_str: string,
+  serial_no: string,
+  remark: string,
+  [k:string]: any,
+}
+let tableData:tableDataItemType[] = reactive([])
+watch(() => tableData.map(_ => _.checked), (v:boolean[]) => {
+  if(!v.length) checkAll.value = false
+  else if(v.every(_ => _)) checkAll.value = true
+  else if(v.every(_ => !_)) checkAll.value = false
+})
+
 let checkAll = ref(false)
-const refBorderBox = ref(null)
+watch(() => checkAll.value, (v) => {
+  tableData.forEach(_ => _.checked = v)
+})
+
+const getNumber = () => {
+  publicInterface('/dcim/dems/devie_active_alarm', 'count_by_level', {}).then(res => {
+    if (res && JSON.stringify(res.data) !== '{}') {
+      select1.options.forEach((item, i) => {
+        item.number = res.data[`level${i+1}`]
+      })
+    }
+  })
+  const param = {
+    condition: {
+      id: null,
+      levels: select1.value,
+      space_complete_id: '',
+      append_space_to_content: 'complete',
+      recovery_statuss: ['not'],
+    }
+  }
+  publicInterface('/dcim/dems/devie_active_alarm', 'get_app_alarm_num_by_condition', param).then(res => {
+    if (res && res.data) {
+      select2.options[0].number = res.data['confrim_num']
+      select2.options[1].number = res.data['not_confirm_num']
+    }
+  })
+}
+
 const getData = () => {
-  console.log(refBorderBox.value)
+  getNumber()
   const queryModel = {
     condition: {
       id: null,
@@ -107,8 +175,10 @@ const getData = () => {
       return
     }
     if(res && res.data) {
+      res.data.item = res.data.item.filter((_: tableDataItemType) => _.level)
       const lastTableData = [...tableData]
-      let arr = res.data['item'].map((e:any) => ({
+      let arr:tableDataItemType[] = res.data['item'].map((e:any) => ({
+        ...e,
         id: e.id,
         content: e.content,
         generate_time: e.generate_time,
@@ -117,6 +187,14 @@ const getData = () => {
         confirm_status: e.confirm_status,
         color1: select1.options.find(_ => _.value === e.level)!.color,
         color2: select2.options.find(_ => _.value === e.confirm_status)!.color,
+        position: e.position,
+        device_name: e.device_name,
+        node_name: e?.point?.node_name,
+        confirm_people: e.confirm_people,
+        confirm_time: e.confirm_time,
+        reconfirmation_time_str: e.reconfirmation_time_str,
+        serial_no: e.serial_no,
+        remark: e.remark,
       }))
       if (checkAll.value) {
         arr = arr.map((e:any) => ({ ...e, checked: e.confirm_status !== 'ok' }))
@@ -128,22 +206,112 @@ const getData = () => {
           }
         })
       }
-      arr = arr.concat(Array(10).fill({}).map(_ => ({
-        id: 1234,
-        content: '1234',
-        generate_time: moment().format('x'),
-        level: 2,
-        checked: false,
-        confirm_status: 'ok',
-        color1: 'green',
-        color2: 'green',
-      })))
       tableData.splice(0, tableData.length, ...arr)
-      console.log(tableData)
     }
   })
 }
 
+const modalObj = reactive({
+  show: false,
+  data: {}
+})
+const clickItem = (i:number) => {
+  const obj = tableData[i]
+  modalObj.show = true
+  Object.assign(modalObj, {
+    show: true,
+    data: obj
+  })
+}
+
+const originStore = useOriginStore()
+const user = originStore.getOriginStore.user.user
+const modalV1Obj = reactive({
+  show: false,
+  data: {
+    // confirm_people_id: user.id,
+    confirm_people: user.name,
+    is_misreport: false,
+    remark: '',
+    reconfirmation_time_str: null,
+  },
+  // batch 批量 single 单个
+  type: 'batch',
+  singleIds: [],
+})
+const clickBatch = () => {
+  if(!tableData.filter(_ => _.checked).length) {
+    window['$message'].warning('请先选择数据')
+    return
+  }
+  Object.assign(modalV1Obj, {
+    show: true,
+    data: {
+      // confirm_people_id: user.id,
+      confirm_people: user.name,
+      is_misreport: false,
+      remark: '',
+      reconfirmation_time_str: null,
+    },
+    type: 'batch',
+    singleIds: []
+  })
+}
+const clickSingle = (id: number) => {
+  Object.assign(modalV1Obj, {
+    show: true,
+    data: {
+      // confirm_people_id: user.id,
+      confirm_people: user.name,
+      is_misreport: false,
+      remark: '',
+      reconfirmation_time_str: null,
+    },
+    type: 'single',
+    singleIds: [id]
+  })
+}
+
+const confirm = () => {
+  const obj = {
+    id: null,
+    ids: modalV1Obj.type === 'batch' ? tableData.filter(_ => _.checked).map(_ => _.id) : modalV1Obj.singleIds,
+    confirm_status: "not",
+    ...modalV1Obj.data
+  }
+  publicInterface('/dcim/dems/devie_active_alarm', 'confirms', obj).then(res => {
+    window['$message'].success('操作成功')
+    checkAll.value = false
+    getData()
+  })
+}
+
+const jumpTo = (row:any) => {
+  if (row.space && row.space.space_type !== 'device') {
+    publicInterface('/dcim/space_page', 'get', { space_id: row.space_id, order: 'sort,id asc' }).then(res => {
+      if (res && res.data && res.data.length) {
+        postMessageToParent({
+          type: 'changeRouterV1',
+          url: `/dynamicRing/schematicDiagram/${res.data[0].id}`
+        })
+      }
+      else {
+        window['$message'].warning('所选节点没有配置页面')
+      }
+    })
+  }
+  else {
+    window['$message'].warning('所选节点没有配置页面')
+  }
+}
+
+const jumpMore = () => {
+  postMessageToParent({
+    type: 'changeRouterV1',
+    url: `/alarmManage/monitorAlarm`
+  })
+}
+
 let timer:unknown
 watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
   if(!isPreview()) return
@@ -198,6 +366,7 @@ onUnmounted(() => {
   flex-direction: column;
   overflow-y: auto;
   .item{
+    flex: none;
     height: 30px;
     display: flex;
     align-items: center;
@@ -205,6 +374,7 @@ onUnmounted(() => {
     padding: 0 10px;
     margin: 3px 0;
     background: rgba(65,150,255,.05);
+    cursor: pointer;
   }
 }
 </style>

src/utils/utils.ts

@@ -356,22 +356,13 @@ export const addWindowUnload = () => {
 /**
  * 向父页面发送消息
  */
-// export const postMessageToParent = (obj = {}) => {
+export const postMessageToParent = (obj = {}) => {
-//   const routerStore:any = useRouterStore()
+  const message = {
-//   if (routerStore && routerStore.getCallByParent) {
+    page: 'customLargeScreen',
-//     // 获取父页面的 window 对象
+    ...obj
-//     var parentWindow = window.parent;
+  }
-//     const message = {
+  window.parent.postMessage(JSON.stringify(message), '*');
-//       // 属于哪个页面
+}
-//       page: 'customLargeScreen',
-//       // 属于什么类型
-//       // type: 'goHome',
-//       ...obj
-//     }
-//     parentWindow.postMessage(JSON.stringify(message), '*');
-//     return
-//   }
-// }
 
 /**
  * 从父页面发送并接收消息