修改组态展示

src/api/cs-harmonic-boot/mxgraph.ts

@@ -0,0 +1,43 @@
+import createAxios from '@/utils/request'
+
+//新增组态项目
+export  function add(data:any) {
+    return createAxios({
+      url: "/cs-harmonic-boot/csconfiguration/add",
+      method: "post",
+      data,
+    });
+  }
+  //组态项目分页查询
+  export  function coFqueryPage(data:any) {
+    return createAxios({
+      url: "/cs-harmonic-boot/csconfiguration/queryPage",
+      method: "post",
+      data,
+    });
+  }
+  //修改组态项目
+  export  function audit(data:any) {
+    return createAxios({
+      url: "/cs-harmonic-boot/csconfiguration/audit",
+      method: "post",
+      data,
+    });
+  }
+  //组态页面分页查询
+  export  function queryPageData(data:any) {
+    return createAxios({
+      url: "/cs-harmonic-boot/cspage/queryPage",
+      method: "post",
+      data,
+    });
+  }
+  //查询工程列表
+  export  function deviceTree(data:any) {
+    return createAxios({
+      url: "/cs-device-boot/csLedger/deviceTree",
+      method: "post",
+      data,
+    });
+  }
+  

src/views/govern/device/control/tabs/trend.vue

@@ -221,47 +221,45 @@ const init = async () => {
                                     }
                                 },
                                 tooltip: {
-                                trigger: 'axis',
+                                    trigger: 'axis',
-                                textStyle: {
+                                    textStyle: {
-                                    color: '#fff',
+                                        color: '#fff',
-                                    fontStyle: 'normal',
+                                        fontStyle: 'normal',
-                                    opacity: 0.35,
+                                        opacity: 0.35,
-                                    fontSize: 14
+                                        fontSize: 14
-                                },
+                                    },
-                                backgroundColor: 'rgba(0,0,0,0.35)',
+                                    backgroundColor: 'rgba(0,0,0,0.35)',
-                                borderWidth: 0,
+                                    borderWidth: 0,
-                                axisPointer: {
+                                    axisPointer: {
-                                    type: 'cross',
+                                        type: 'cross',
-                                    crossStyle: {
+                                        crossStyle: {
-                                        color: '#999'
+                                            color: '#999'
-                                    }
+                                        }
-                                },
+                                    },
 
-                                formatter: function (params: any) {
+                                    formatter: function (params: any) {
-                                    let list = params.filter((item, index, self) => {
+                                        let list = params.filter((item, index, self) => {
-                                        return index === self.findIndex(t => t.seriesName === item.seriesName)
+                                            return index === self.findIndex(t => t.seriesName === item.seriesName)
-                                    })
+                                        })
-                                    var res =
+                                        var res =
-                                        '<span style="margin-right:18px;"></span>' +
+                                            '<span style="margin-right:18px;"></span>' +
-                                        list[0].value[0] +
+                                            list[0].value[0] +
-                                        list[0].name +
+                                            list[0].name +
-                                        '<br/>'
+                                            '<br/>'
-                                    for (var i = 0, l = list.length; i < l; i++) {
+                                        for (var i = 0, l = list.length; i < l; i++) {
-                                        list[i].unit =
+                                            list[i].unit =
-                                            echartsData.value.options.yAxis[
+                                                echartsData.value.options.yAxis[
-                                                echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
+                                                    echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
-                                            ]?.name
+                                                ]?.name
-                                        res +=
+                                            res +=
-                                            list[i].seriesName +
+                                                list[i].seriesName +
-                                            '   ' +
+                                                '   ' +
-                                            `<div style="width:16px;height:16px;float:left;background:${list[i].color};border-radius:50%;margin:0 15px"></div>` +
+                                                `<div style="width:16px;height:16px;float:left;background:${list[i].color};border-radius:50%;margin:0 15px"></div>` +
-                                            `<div style='float:right;padding-left:20px;'>${list[
+                                                `<div style='float:right;padding-left:20px;'>${list[i].value[1]==null?'':list[i].value[1].toFixed(2)} ${list[i].unit || ''} </div><br/>`
-                                                i
+                                        }
-                                            ].value[1].toFixed(2)} ${list[i].unit||''} </div><br/>`
+                                        return res
                                     }
-                                    return res
+                                },
-                                }
-                            },
 
                                 legend: {
                                     //legend使用iconfont图标
@@ -278,15 +276,17 @@ const init = async () => {
                                     height: 50
                                 },
 
-                                xAxis:{
+                                xAxis: {
                                     type: 'time',
-                                axisLabel: {
+                                    axisLabel: {
-                                    formatter: {
+                                        formatter: {
-                                        day: '{MM}-{dd}',
+                                            day: '{MM}-{dd}',
-                                        month: '{MM}',
+                                            month: '{MM}',
-                                        year: '{yyyy}',
+                                            year: '{yyyy}',
-                                    }
+                                        }
-                                },},
+                                    },
+                                },
+                               
                                 //  [
                                 //     {
                                 //         type: 'category',
@@ -318,7 +318,7 @@ const init = async () => {
                                             color: '#000',
                                             fontSize: 14
                                         },
-                                        splitNumber:5,
+                                        splitNumber: 5,
                                         minInterval: 1,
                                         axisTick: {
                                             show: true
@@ -360,7 +360,7 @@ const init = async () => {
                                             color: '#000',
                                             fontSize: 14
                                         },
-                                        splitNumber:5,
+                                        splitNumber: 5,
                                         minInterval: 1,
                                         axisTick: {
                                             show: true

src/views/govern/mxgraph/graphList/components/popup.vue

@@ -0,0 +1,124 @@
+<template>
+
+
+    <el-dialog draggable :title="title" v-model="dialogVisible" width="500px" :before-close="handleClose"
+        :close-on-click-modal="false">
+        <el-form ref="formRef" :rules="rules" :model="form" label-width="90px" class="form">
+            <el-form-item label="项目名称:" prop="name">
+                <el-input v-model.trim="form.name" placeholder="请输入项目名称"></el-input>
+            </el-form-item>
+            <el-form-item label="工程项目:" class="top" prop="projectIds">
+
+                <el-tree-select v-model="form.projectIds" default-expand-all show-checkbox node-key="id"
+                    :props="defaultProps" multiple :data="Engineering" collapse-tags style="width: 100%" />
+                <!-- <el-cascader v-model="form.projectIds" :options="Engineering" :props="defaultProps"
+                    :show-all-levels="false" collapse-tags collapse-tags-tooltip clearable  style="width: 100%;"/> -->
+
+            </el-form-item>
+            <el-form-item label="项目排序:" prop="orderBy">
+                <el-input-number v-model="form.orderBy" :min="0" :step="1" step-strictly style="width: 100%" />
+            </el-form-item>
+
+
+            <el-form-item label="备注:" class="top">
+                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model.trim="form.remark">
+                </el-input>
+            </el-form-item>
+        </el-form>
+
+        <template #footer>
+            <span class="dialog-footer">
+               
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="addFn">确定</el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+
+
+</template>
+<script setup lang='ts'>
+import { ref, reactive } from 'vue'
+import { deviceTree, add, audit } from '@/api/cs-harmonic-boot/mxgraph';
+import { ElMessage, ElMessageBox } from 'element-plus'
+const title = ref('')
+const formRef = ref()
+const Engineering = ref([])
+const dialogVisible = ref(false)
+const emit = defineEmits(['submit'])
+const defaultProps = {
+    children: 'children',
+    value: 'id',
+    label: 'name',
+    multiple: true,
+    expandTrigger: 'hover' as const,
+}
+const form: any = reactive({
+    name: "",
+    projectIds: [],
+    orderBy: '100',
+    remark: "",
+})
+const rules = {
+    name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
+    projectIds: [
+        { required: true, message: "请选择工程项目", trigger: "change" },
+    ],
+    orderBy: [{ required: true, message: "请输入排序", trigger: "blur" }],
+}
+const addFn = () => {
+    formRef.value.validate((valid: boolean) => {
+        if (valid) {
+            if (title.value == '新增项目') {
+                add(form).then((res: any) => {
+                    ElMessage.success('新增项目成功!')
+                    dialogVisible.value = false
+                   emit('submit')
+                })
+
+            } else {
+                audit(form).then((res: any) => {
+                    ElMessage.success('修改项目成功!')
+                    dialogVisible.value = false
+                    emit('submit')
+                })
+
+            }
+        }
+    })
+
+
+
+
+}
+const open = ref((row: any) => {
+    formRef.value?.resetFields()
+    deviceTree({}).then((res: any) => {
+        res.data.forEach((item: any) => {
+            item.children.forEach((child: any) => {
+                child.children = []
+            })
+        })
+        Engineering.value = res.data
+    })
+    title.value = row.title
+    dialogVisible.value = true
+    if (row.title == '新增项目') {
+        form.name = ''
+        form.projectIds = ['71e570df7e1cd3e37635c505deb19ee2']
+        form.orderBy = '100'
+        form.remark = ''
+    } else {
+        for (let key in form) {
+            form[key] = row.row[key] || ''
+        }
+        form.id = row.row.id
+    }
+})
+const handleClose = () => {
+    dialogVisible.value = false
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

src/views/govern/mxgraph/graphList/index.vue

@@ -0,0 +1,260 @@
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template v-slot:select>
+                <el-form-item label="项目名称">
+                    <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入项目名称"></el-input>
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button type="primary" @click="onSubmitadd" icon="el-icon-Plus">新增</el-button>
+            </template>
+        </TableHeader>
+        <!-- <Table ref="tableRef" /> -->
+        <div style="overflow-x: hidden; overflow-y: scroll;padding: 0 10px;" v-loading="tableStore.table.loading"
+            :style="{ height: tableStore.table.height }">
+            <el-row :gutter="12">
+                <el-col :span="6" v-for="item in tableStore.table.data" :key="item.id" class="mt10">
+                    <el-card class="box-card" @click="querdata(item)" shadow="hover">
+                        <div slot="header" class="clearfix">
+                            <span style="display: flex;align-items: center">{{ item.name }}
+
+                                <el-tooltip class="item" effect="dark" content="修改项目" placement="top">
+                                    <Edit style="margin-left: 5px;width: 16px;" class=" xiaoshou color"
+                                        @click="editd(item)" />
+                                </el-tooltip></span>
+                            <div style="display: flex;justify-content: end;">
+                                <el-button class="color" icon="el-icon-Share" style="padding: 3px 0" type="text"
+                                    @click="Aclick(item)">设计</el-button>
+                                <!-- <el-button icon="el-icon-share" style="padding: 3px 0; color: green"
+                                    type="text" @click="shejid(item)">设计</el-button> -->
+                                <!-- <el-button icon="el-icon-edit" style="padding: 3px 0; color: blue" type="text"
+                                    @click="shejid(item)">编辑</el-button> -->
+                                <el-button icon="el-icon-Delete" style="padding: 3px 0; color: red" type="text"
+                                    @click="deleted(item)">删除</el-button>
+                            </div>
+                        </div>
+                        <img :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
+                    </el-card>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="table-pagination">
+            <el-pagination :currentPage="tableStore.table.params!.pageNum"
+                :page-size="tableStore.table.params!.pageSize" :page-sizes="[10, 20, 50, 100]" background
+                :layout="'sizes,total, ->, prev, pager, next, jumper'" :total="tableStore.table.total"
+                @size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination>
+        </div>
+
+        <popup ref="popupRef" @submit="tableStore.index()" />
+
+
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+// import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { deleteTopoTemplate, uploadTopo } from '@/api/cs-device-boot/topologyTemplate'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { audit, add } from '@/api/cs-harmonic-boot/mxgraph';
+import { Edit } from '@element-plus/icons-vue'
+import popup from './components/popup.vue'
+defineOptions({
+    name: 'govern/manage/gplot'
+})
+const tableRef = ref()
+const popupRef = ref()
+let DOMIN = window.location.origin
+console.log("🚀 ~ DOMIN:", DOMIN)
+let STATIC_URL = DOMIN + '/api/system-boot/image/toStream?bgImage='
+localStorage.setItem('STATIC_URL', STATIC_URL)
+const tableStore = new TableStore({
+    showPage: false,
+    url: '/cs-harmonic-boot/csconfiguration/queryPage',
+    method: 'POST',
+    publicHeight: 60,
+    column: [
+    ],
+    loadCallback: () => {
+
+    }
+})
+provide('tableStore', tableStore)
+tableStore.table.params.searchValue = ''
+onMounted(() => {
+    tableStore.table.ref = tableRef.value
+    tableStore.index()
+    tableStore.table.loading = false
+})
+// 查询
+const onSubmitadd = () => {
+
+    popupRef.value.open({
+        title: '新增项目'
+    })
+}
+const querdata = (e: any) => { }
+const editd = (e: any) => {
+    popupRef.value.open({
+        title: '修改项目',
+        row: e
+    })
+}
+// 设计
+const Aclick = (e: any) => {
+    // window.open(window.location.origin + `/zutai/?id=${e.id}&&name=decodeURI(${e.name})&&flag=false`)
+    const link = document.createElement("a"); //创建下载a标签
+    link.target = `_blank`;
+    link.href = `http://192.168.1.128:3001/zutai/?id=${e.id}&&name=decodeURI(${e.name})&&flag=false`;
+    link.style.display = "none"; //默认隐藏元素
+    document.body.appendChild(link); // body中添加元素
+    link.click(); // 执行点击事件
+}
+const shejid = (e: any) => { }
+// 删除
+const deleted = (e: any) => {
+    ElMessageBox.confirm("此操作将永久删除该项目, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+    })
+        .then(() => {
+            let data = {
+                id: e.id,
+                name: e.name,
+                status: "0",
+            };
+            audit(data).then((res: any) => {
+                if (res.code == "A0000") {
+                    ElMessage({
+                        type: "success",
+                        message: "删除项目成功!",
+                    });
+                }
+                tableStore.index()
+            });
+        })
+        .catch(() => {
+            ElMessage({
+                type: "info",
+                message: "已取消删除",
+            });
+        });
+}
+
+const imgData = (e: any) => {
+    // window.open(window.location.origin + `/zutai/?id=${e.id}&&name=decodeURI(${e.name})&&flag=true`)
+    const link = document.createElement("a"); //创建下载a标签
+    link.target = `_blank`;
+    link.href = `http://192.168.1.128:3001/zutai/#/?id=${e.id}&&name=decodeURI(${e.name})&&flag=true`;
+    link.style.display = "none"; //默认隐藏元素
+    document.body.appendChild(link); // body中添加元素
+    link.click(); // 执行点击事件
+}
+
+const onTableSizeChange = (val: number) => {
+    tableStore.onTableAction('page-size-change', { size: val })
+}
+
+const onTableCurrentChange = (val: number) => {
+    tableStore.onTableAction('current-page-change', { page: val })
+}
+
+</script>
+<style lang="scss" scoped>
+.text {
+    font-size: 14px;
+}
+
+span {
+    font-size: 16px;
+}
+
+.item {
+    margin-bottom: 18px;
+}
+
+.image {
+    display: block;
+    width: 100%;
+    height: 220px;
+}
+
+.clearfix::before,
+.clearfix::after {
+    display: table;
+    content: "";
+}
+
+.clearfix::after {
+    clear: both;
+}
+
+.box-card {
+    width: 100%;
+    // border: 1px solid #000;
+    box-shadow: var(--el-box-shadow-light)
+}
+
+.xiaoshou {
+    cursor: pointer;
+}
+
+.setstyle {
+    min-height: 200px;
+    padding: 0 !important;
+    margin: 0;
+    overflow: auto;
+    cursor: default !important;
+}
+
+.color {
+    color: var(--el-color-primary);
+}
+
+:deep(.el-select-dropdown__wrap) {
+    max-height: 300px;
+}
+
+:deep(.el-tree) {
+    padding-top: 15px;
+    padding-left: 10px;
+
+    // 不可全选样式
+    .el-tree-node {
+        .is-leaf+.el-checkbox .el-checkbox__inner {
+            display: inline-block;
+        }
+
+        .el-checkbox .el-checkbox__inner {
+            display: none;
+        }
+    }
+}
+
+:deep(.el-card__header) {
+    padding: 13px 20px;
+    height: 44px;
+}
+
+.table-pagination {
+    height: 58px;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    padding: 13px 15px;
+    border-left: 1px solid #e4e7e9;
+    border-right: 1px solid #e4e7e9;
+    border-bottom: 1px solid #e4e7e9;
+}
+
+:deep(.el-pagination__sizes) {
+    .el-select {
+        min-width: 128px;
+    }
+}
+</style>