修改测试bug 优化页面

2026-01-04 14:55:31 +08:00
parent cc0f8bc8b6
commit a765cdf9ee
68 changed files with 5396 additions and 3096 deletions
--- a/src/views/pqs/cockpit/realTimeData/bind.vue
+++ b/src/views/pqs/cockpit/realTimeData/bind.vue
@@ -0,0 +1,146 @@
+<template>
+    <el-dialog
+        class="cn-operate-dialog"
+        width="1200px"
+        append-to-body
+        v-model.trim="dialogVisible"
+        title="绑定"
+    >
+        <el-form ref="formRef" label-width="80px" class="form">
+            <el-form-item label="项目名称">
+                <el-input
+                    maxlength="32"
+                    show-word-limit
+                    clearable
+                    style="width: 240px"
+                    v-model.trim="searchValue"
+                    placeholder="请输入项目名称"
+                ></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="info" icon="el-icon-Search">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div style="height: calc(60vh - 120px); overflow-y: auto" v-loading="loading">
+            <el-row :gutter="10" style="width: 100%; margin: auto">
+                <el-col :span="6" v-for="item in list" :key="item.id" class="mt10">
+                    <el-card class="box-card" shadow="hover">
+                        <div slot="header" class="clearfix mb10">
+                            <span style="display: flex; align-items: center;justify-content: space-between;">
+                                {{ item.name }}
+
+                                <!-- <el-tooltip
+                                    class="item"
+                                    effect="dark"
+                                    content="绑定实时数据"
+                                    placement="top"
+                                    v-if="bindId != item.id"
+                                >
+                                    <Sort
+                                        style="margin-left: 5px; width: 16px"
+                                        class="xiaoshou color"
+                                        @click="activate(item)"
+                                    />
+                                </el-tooltip> -->
+                                <el-button type="primary"   v-if="bindId != item.id" @click="activate(item)" icon="el-icon-Sort" link>绑定</el-button>
+                            </span>
+                        </div>
+                        <img v-if="item.fileContent" :src="item.fileContent" class="image" />
+                        <el-empty v-else description="暂无设计" style="height: 220px" />
+                    </el-card>
+                </el-col>
+            </el-row>
+        </div>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import { coFqueryPage, getByUserId, savePageIdWithUser } from '@/api/cs-harmonic-boot/mxgraph'
+import { useAdminInfo } from '@/stores/adminInfo'
+import { Sort } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+const adminInfo = useAdminInfo()
+const emit = defineEmits(['bindClick'])
+const dialogVisible = ref(false)
+const searchValue = ref('')
+const bindId = ref('')
+const list = ref([])
+const loading = ref(false)
+const open = (text: string, data: anyObj) => {
+    searchValue.value = ''
+    list.value = []
+    info()
+    dialogVisible.value = true
+}
+const info = () => {
+    loading.value = true
+    getBindId()
+    coFqueryPage({
+        currentUserId: adminInfo.id,
+        roleCode: adminInfo.roleCode.join(','),
+        searchValue: searchValue.value,
+        pageNum: 1,
+        pageSize: 1000
+    })
+        .then(res => {
+            list.value = res.data.records
+            loading.value = false
+        })
+        .catch(err => {
+            loading.value = false
+        })
+}
+const getBindId = () => {
+    getByUserId({ userId: adminInfo.id }).then(res => {
+        bindId.value = res.data.pageId
+    })
+}
+const activate = (e: any) => {
+    ElMessageBox.confirm('是否绑定页面?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    })
+        .then(() => {
+            savePageIdWithUser({ pageId: e.id, userId: adminInfo.id }).then(res => {
+                if (res.code == 'A0000') {
+                    ElMessage({
+                        type: 'success',
+                        message: '操作成功'
+                    })
+                    bindId.value = e.id
+                    emit('bindClick', bindId.value)
+                }
+            })
+        })
+        .catch(() => {})
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.form {
+    display: flex;
+    justify-content: space-between;
+    height: 35px;
+}
+.image {
+    display: block;
+    width: 100%;
+    height: 220px;
+}
+.xiaoshou {
+    cursor: pointer;
+}
+.color {
+    color: var(--el-color-primary);
+}
+.box-card {
+    width: 100%;
+    // border: 1px solid #000;
+    box-shadow: var(--el-box-shadow-light);
+}
+:deep(.el-card__body) {
+    padding: 10px;
+}
+</style>
--- a/src/views/pqs/cockpit/realTimeData/index.vue
+++ b/src/views/pqs/cockpit/realTimeData/index.vue
@@ -12,6 +12,8 @@
                style="position: relative"
            >
                <iframe
+                    v-if="bindId"
+                    :key="bindId"
                    :src="iframeSrc"
                    width="100%"
                    height="100%"
@@ -20,6 +22,7 @@
                    id="iframeLeft"
                    @load="onIframeLoad"
                ></iframe>
+                <el-empty v-else description="暂无绑定页面" style="height: 100%" />
            </div>
        </div>
        <div class="bottom-container">
@@ -28,13 +31,15 @@
                :icon="show ? 'el-icon-ArrowDownBold' : 'el-icon-ArrowUpBold'"
                @click="show = !show"
                style="width: 100%"
+                v-if="bindId"
            >
                事件列表
            </el-button>
+            <el-button class="bindBut" type="primary" icon="el-icon-Sort" @click="bindClick">绑定</el-button>
            <!-- <div class="buttonBox">
                    <el-button type="primary" icon="el-icon-Aim" @click="reset">复位</el-button>
                </div> -->
-           
+
            <transition name="table-fade">
                <div class="tableBox" v-if="show">
                    <vxe-table border auto-resize height="230px" :data="tableData" ref="tableRef">
@@ -46,6 +51,8 @@
                </div>
            </transition>
        </div>
+        <!--绑定实时数据 -->
+        <Bind ref="bindRef" @bindClick="info" />
    </div>
 </template>
 <script setup lang="ts">
@@ -53,11 +60,16 @@ import { ref, watch, onMounted, onUnmounted, provide } from 'vue'
 import Table from '@/components/table/index.vue'
 import TableStore from '@/utils/tableStore'
 import { mainHeight } from '@/utils/layout'
+
+import { useAdminInfo } from '@/stores/adminInfo'
+import { audit, add, coFqueryPage, getByUserId } from '@/api/cs-harmonic-boot/mxgraph'
+import Bind from './bind.vue'
 // import { getActive } from "@/api/manage_wx/index";

 // const props = defineProps<{
 //     project: { id: string; name: string } | null
 // }>()
+const adminInfo = useAdminInfo()
 const show = ref(false)
 const prop = defineProps({
    width: { type: [String, Number] },
@@ -65,10 +77,9 @@ const prop = defineProps({
    timeKey: { type: Array as () => string[] },
    timeValue: { type: Object }
 })
-
-const tableData = ref([
-   
-])
+const bindRef = ref()
+const tableData = ref([])
+const bindId = ref('')

 // 在父页面中添加事件监听器
 window.addEventListener('message', function (event) {
@@ -83,6 +94,9 @@ window.addEventListener('message', function (event) {
 const tableRef = ref()

 const pageHeight = mainHeight(40)
+const bindClick = () => {
+    bindRef.value.open()
+}

 const reset = () => {
    // 向 iframe 发送复位事件
@@ -128,15 +142,10 @@ const iframeSrc = ref('')
 //     { immediate: true, deep: true }
 // )

-onMounted(() => {
-    iframeSrc.value =
-        window.location.origin + `/zutai/?id=4b4f7f4260198776594f5f9d93a532e8&&name=stt&&preview=true#/preview_YPT`
-
+onMounted(async () => {
+    info()
    // tableStore.index()
-
    // 监听来自 eventStatistics 组件的消息
-    window.addEventListener('message', handleMessage)
-
    //   getActive({}).then((res: any) => {
    //     if (res.code == "A0000") {
    //       //   window.location.origin
@@ -148,7 +157,31 @@ onMounted(() => {
    //     }
    //   });
 })
-
+const info = async () => {
+    iframeSrc.value = ''
+    await getByUserId({ userId: adminInfo.id })
+        .then(res => {
+            bindId.value = res.data.pageId
+        })
+        .catch(async err => {
+            // bindId.value = '4b4f7f4260198776594f5f9d93a532e8'
+            await coFqueryPage({
+                currentUserId: adminInfo.id,
+                roleCode: adminInfo.roleCode.join(','),
+                searchValue: '',
+                pageNum: 1,
+                pageSize: 1000
+            }).then(res => {
+                bindId.value = res.data.records.filter(item => item.scope == 1)[0]?.id || null
+          
+            })
+        })
+    await setTimeout(() => {
+        iframeSrc.value = window.location.origin + `/zutai/?id=${bindId.value}&&name=stt&&preview=true#/preview_YPT`
+        // iframeSrc.value =  `http://192.168.2.128:4001/zutai/?id=${bindId.value}&&name=stt&&preview=true#/preview_YPT`
+        window.addEventListener('message', handleMessage)
+    }, 0)
+}
 onUnmounted(() => {
    // 清理事件监听器
    window.removeEventListener('message', handleMessage)
@@ -258,4 +291,9 @@ const sendKeysToIframe = (keyList: string[]) => {
 .table-fade-enter-active {
    transition-delay: 0.05s;
 }
+.bindBut {
+    position: absolute;
+    right: 0px;
+    top: -35px;
+}
 </style>