修改组态展示
This commit is contained in:
43
src/api/cs-harmonic-boot/mxgraph.ts
Normal file
43
src/api/cs-harmonic-boot/mxgraph.ts
Normal file
@@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -221,47 +221,45 @@ const init = async () => {
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0,
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0,
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
|
||||
formatter: function (params: any) {
|
||||
let list = params.filter((item, index, self) => {
|
||||
return index === self.findIndex(t => t.seriesName === item.seriesName)
|
||||
})
|
||||
var res =
|
||||
'<span style="margin-right:18px;"></span>' +
|
||||
list[0].value[0] +
|
||||
list[0].name +
|
||||
'<br/>'
|
||||
for (var i = 0, l = list.length; i < l; i++) {
|
||||
list[i].unit =
|
||||
echartsData.value.options.yAxis[
|
||||
echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
|
||||
]?.name
|
||||
res +=
|
||||
list[i].seriesName +
|
||||
' ' +
|
||||
`<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[
|
||||
i
|
||||
].value[1].toFixed(2)} ${list[i].unit||''} </div><br/>`
|
||||
formatter: function (params: any) {
|
||||
let list = params.filter((item, index, self) => {
|
||||
return index === self.findIndex(t => t.seriesName === item.seriesName)
|
||||
})
|
||||
var res =
|
||||
'<span style="margin-right:18px;"></span>' +
|
||||
list[0].value[0] +
|
||||
list[0].name +
|
||||
'<br/>'
|
||||
for (var i = 0, l = list.length; i < l; i++) {
|
||||
list[i].unit =
|
||||
echartsData.value.options.yAxis[
|
||||
echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
|
||||
]?.name
|
||||
res +=
|
||||
list[i].seriesName +
|
||||
' ' +
|
||||
`<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[i].value[1]==null?'':list[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: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}',
|
||||
}
|
||||
},},
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
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
|
||||
@@ -408,7 +408,7 @@ const init = async () => {
|
||||
} else {
|
||||
vv.yAxisIndex = 0
|
||||
}
|
||||
|
||||
|
||||
|
||||
//series数据
|
||||
echartsData.value.options.series.push({
|
||||
@@ -424,7 +424,7 @@ const init = async () => {
|
||||
data: historyDataList.value
|
||||
.map((kk: any) => {
|
||||
if (kk.statisticalName == vv.name) {
|
||||
|
||||
|
||||
return [kk.time, kk.statisticalData]
|
||||
} else {
|
||||
return ''
|
||||
@@ -677,7 +677,7 @@ watch(
|
||||
// immediate: true
|
||||
// }
|
||||
// )
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
datePickerRef.value.setInterval(5)
|
||||
})
|
||||
defineExpose({ getTrendRequest })
|
||||
|
||||
124
src/views/govern/mxgraph/graphList/components/popup.vue
Normal file
124
src/views/govern/mxgraph/graphList/components/popup.vue
Normal file
@@ -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>
|
||||
260
src/views/govern/mxgraph/graphList/index.vue
Normal file
260
src/views/govern/mxgraph/graphList/index.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user