系统参数静态页面
This commit is contained in:
fengrong
parent
c09b99131b
commit
3f40fc1e91
BIN
ui/dasadmin/src/assets/SystemParam/style01.png
Normal file
BIN
ui/dasadmin/src/assets/SystemParam/style01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
ui/dasadmin/src/assets/SystemParam/style02.png
Normal file
BIN
ui/dasadmin/src/assets/SystemParam/style02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
ui/dasadmin/src/assets/SystemParam/style03.png
Normal file
BIN
ui/dasadmin/src/assets/SystemParam/style03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
298
ui/dasadmin/src/views/backend/SystemParam/index.vue
Normal file
298
ui/dasadmin/src/views/backend/SystemParam/index.vue
Normal file
@ -0,0 +1,298 @@
|
|||||||
|
<template>
|
||||||
|
<div class="SystemParam">
|
||||||
|
<el-container class="mainContainer">
|
||||||
|
<div class="mainHeader">
|
||||||
|
<el-text class="mx-1 title">风机矩阵设置</el-text>
|
||||||
|
</div>
|
||||||
|
<el-main class="defaultMain">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="tablePart">
|
||||||
|
<el-table :data="paramData" style="width: 100%">
|
||||||
|
<el-table-column prop="paramNmae" label="参数名称" />
|
||||||
|
<el-table-column prop="namedes" label="中文" />
|
||||||
|
<!-- <el-table-column prop="paramValue" label="参数值" />-->
|
||||||
|
<el-table-column label="操作" width="100">
|
||||||
|
<template #default="scope">
|
||||||
|
<span style="color: #0064aa; cursor: pointer"
|
||||||
|
v-if="scope.row.paramNmae=='ParamColor'"
|
||||||
|
@click="Editcolor(scope)"
|
||||||
|
>编辑</span>
|
||||||
|
<span style="color: #0064aa; cursor: pointer"
|
||||||
|
v-else
|
||||||
|
@click="EditLayout(scope)"
|
||||||
|
>编辑</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
<el-dialog v-model="visibleColor" title="状态颜色" width="1000" :before-close="handleClose" class="ColorPart">
|
||||||
|
<div class="tablePart">
|
||||||
|
<el-table :data="tableData" style="width: 100%">
|
||||||
|
<el-table-column prop="porder" label="状态" />
|
||||||
|
<el-table-column prop="attributeCode" label="颜色">
|
||||||
|
<template #default="scope">
|
||||||
|
<div class="color-box" :style="{ backgroundColor: scope.row.attributeCode }"></div>
|
||||||
|
<!-- <el-color-picker v-model="scope.row.attributeCode" show-alpha></el-color-picker>-->
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="100">
|
||||||
|
<template #default="scope">
|
||||||
|
<span style="color: #0064aa; cursor: pointer" @click="selectColor(scope)">选择颜色</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="onSubmitType">保存</el-button>
|
||||||
|
<el-button @click="visibleColor = false">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
<el-dialog v-model="visibleselectColor" title="颜色选择" width="500" :before-close="handleCloselayout" class="selectColorPart">
|
||||||
|
<div class="layoutmain">
|
||||||
|
<el-row :gutter="10">
|
||||||
|
<el-col :span="4">
|
||||||
|
<div class="demo-color-box" style="background: rgb(2, 119, 179);">
|
||||||
|
<div class="value" text="xs">#0277B3</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<div class="demo-color-box" style="background: rgb(255, 126, 0)">
|
||||||
|
<div class="value" text="xs">#FF7E00</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<div class="demo-color-box" style="background: rgb(6, 180, 41)">
|
||||||
|
<div class="value" text="xs">#FE3731</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<div class="demo-color-box" style="background: rgb(0, 160, 150);">
|
||||||
|
<div class="value" text="xs">#00A096</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<div class="demo-color-box" style="background: rgb(153, 153, 153);">
|
||||||
|
<div class="value" text="xs">#999999</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<div class="demo-color-box" style="background: rgb(48, 89, 236);">
|
||||||
|
<div class="value" text="xs">#67C23A</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<div class="demo-color-box" style="background: rgb(254, 55, 49);">
|
||||||
|
<div class="value" text="xs">#67C23A</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<div class="demo-color-box" style="background: rgb(48, 89, 236);">
|
||||||
|
<div class="value" text="xs">#67C23A</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<div class="demo-color-box" style="background: rgb(48, 89, 236);">
|
||||||
|
<div class="value" text="xs">#67C23A</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="onSubmitType">确定</el-button>
|
||||||
|
<el-button @click="visibleselectColor = false">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
<el-dialog v-model="visibleLayout" title="选择布局" width="765" :before-close="handleCloselayout" class="LayoutPart">
|
||||||
|
<div class="layoutmain">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="demo-color-box">
|
||||||
|
<div class="style01 selected"><img src="~assets/SystemParam/style01.png" alt="" /></div>
|
||||||
|
<div>风格1</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="demo-color-box">
|
||||||
|
<div class="style01"><img src="~assets/SystemParam/style02.png" alt="" /></div>
|
||||||
|
<div>风格2</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="demo-color-box">
|
||||||
|
<div class="style01"><img src="~assets/SystemParam/style03.png" alt="" /></div>
|
||||||
|
<div>风格3</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="onSubmitType">保存</el-button>
|
||||||
|
<el-button @click="visibleLayout = false">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref} from 'vue'
|
||||||
|
const paramData=ref([
|
||||||
|
{paramNmae:'ParamColor',namedes:'颜色',paramValue:'0.5'},
|
||||||
|
{paramNmae:'ParamLayout',namedes:'布局',paramValue:'0.5'}
|
||||||
|
])
|
||||||
|
const tableData = ref([
|
||||||
|
{ porder: '并网', attributeCode: 'rgb(2, 119, 179)' },
|
||||||
|
{ porder: '待机', attributeCode: 'rgb(255, 126, 0)' },
|
||||||
|
{ porder: '启动', attributeCode: 'rgb(6, 180, 41)' },
|
||||||
|
{ porder: '维护', attributeCode: 'rgb(0, 160, 150)' },
|
||||||
|
{ porder: '离线', attributeCode: 'rgb(153, 153, 153)' },
|
||||||
|
{ porder: '限功率运行', attributeCode: 'rgb(48, 89, 236)' },
|
||||||
|
{ porder: '正常停机', attributeCode: 'rgb(254, 55, 49)' },
|
||||||
|
{ porder: '通讯中断', attributeCode: 'rgb(153, 153, 153)' },
|
||||||
|
{ porder: '停机', attributeCode: 'rgb(153, 153, 153)' },
|
||||||
|
{ porder: '解缆状态', attributeCode: 'rgb(48, 89, 236)' },
|
||||||
|
{ porder: '电网故障停机', attributeCode: 'rgb(254, 55, 49)' },
|
||||||
|
{ porder: '安全链停机', attributeCode: 'rgb(254, 55, 49)' },
|
||||||
|
])
|
||||||
|
|
||||||
|
const selectLayout=ref([
|
||||||
|
{value:'0',label:'风格1'},
|
||||||
|
{value:'1',label:'风格2'},
|
||||||
|
{value:'2',label:'风格3'},
|
||||||
|
])
|
||||||
|
const visibleColor=ref(false)
|
||||||
|
const Editcolor = (data: any) => {
|
||||||
|
debugger
|
||||||
|
visibleColor.value=true
|
||||||
|
}
|
||||||
|
const handleClose = () => {
|
||||||
|
debugger
|
||||||
|
visibleColor.value=false
|
||||||
|
}
|
||||||
|
const visibleLayout=ref(false)
|
||||||
|
const EditLayout = (data: any) => {
|
||||||
|
debugger
|
||||||
|
visibleLayout.value=true
|
||||||
|
}
|
||||||
|
const handleCloselayout = () => {
|
||||||
|
debugger
|
||||||
|
visibleLayout.value=false
|
||||||
|
}
|
||||||
|
const visibleselectColor=ref(false)
|
||||||
|
const selectColor = () => {
|
||||||
|
visibleselectColor.value=true
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$headerHeight: 60px;
|
||||||
|
.SystemParam{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.mainContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
.mainHeader {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: $headerHeight;
|
||||||
|
.title {
|
||||||
|
border-left: 4px solid rgb(77, 147, 196);
|
||||||
|
border-bottom: 4px solid transparent;
|
||||||
|
border-right: 4px solid transparent;
|
||||||
|
border-top: 4px solid transparent;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.defaultMain{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ColorPart{
|
||||||
|
.header{
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
.color-box{
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.selectColorPart{
|
||||||
|
.demo-color-box{
|
||||||
|
div{
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-top: 10px;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.LayoutPart{
|
||||||
|
.demo-color-box{
|
||||||
|
text-align: center;
|
||||||
|
.style01.selected:before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.style01.selected img {
|
||||||
|
box-shadow: 0 0 0 4px #00c09e;
|
||||||
|
animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
|
||||||
|
-o-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
|
||||||
|
-ms-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
|
||||||
|
-moz-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
|
||||||
|
-webkit-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
|
||||||
|
}
|
||||||
|
.style01.selected:before {
|
||||||
|
content: "2714";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0; left: 0; bottom: 0; right: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
background: #00c09e;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
z-index: 10;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 0.3s linear;
|
||||||
|
-o-transition: 0.3s linear;
|
||||||
|
-ms-transition: 0.3s linear;
|
||||||
|
-moz-transition: 0.3s linear;
|
||||||
|
-webkit-transition: 0.3s linear;
|
||||||
|
-o-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes selected {
|
||||||
|
0% { border-color: #fff; }
|
||||||
|
50% { transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
|
||||||
|
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -23,7 +23,7 @@
|
|||||||
<el-tag v-if="item.attributeMap.processedoperationmode === 10" class="tag-panel is-maintenance" type="primary"
|
<el-tag v-if="item.attributeMap.processedoperationmode === 10" class="tag-panel is-maintenance" type="primary"
|
||||||
>维护</el-tag>
|
>维护</el-tag>
|
||||||
<el-tag v-if="item.attributeMap.processedoperationmode === 0" class="tag-panel is-offline" type="primary">离线</el-tag>
|
<el-tag v-if="item.attributeMap.processedoperationmode === 0" class="tag-panel is-offline" type="primary">离线</el-tag>
|
||||||
<el-tag v-if="item.attributeMap.processedoperationmode === 8" class="tag-panel info" type="primary">限功率运行</el-tag>
|
<el-tag v-if="item.attributeMap.processedoperationmode === 8" class="tag-panel is-info" type="primary">限功率运行</el-tag>
|
||||||
<el-tag v-if="item.attributeMap.processedoperationmode === 6" class="tag-panel is-danger" type="primary">正常停机</el-tag>
|
<el-tag v-if="item.attributeMap.processedoperationmode === 6" class="tag-panel is-danger" type="primary">正常停机</el-tag>
|
||||||
<el-tag v-if="item.attributeMap.processedoperationmode === 1" class="tag-panel is-danger" type="primary"
|
<el-tag v-if="item.attributeMap.processedoperationmode === 1" class="tag-panel is-danger" type="primary"
|
||||||
>外部因素导致停机</el-tag>
|
>外部因素导致停机</el-tag>
|
||||||
@ -114,7 +114,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {defineProps, defineEmits, onMounted, onUnmounted, ref} from 'vue'
|
import {defineProps, ref} from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { adminBaseRoutePath } from '/@/router/static/adminBase'
|
import { adminBaseRoutePath } from '/@/router/static/adminBase'
|
||||||
import ContextMenu from '/@/views/backend/auth/model/contextMenu.vue'
|
import ContextMenu from '/@/views/backend/auth/model/contextMenu.vue'
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user