mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
feat(web): 新增设备管理功能
- 新增设备管理页面和相关功能
This commit is contained in:
zhoumengru
@@ -55,7 +55,7 @@ module.exports = {
|
|||||||
'no-this-before-super': 0, // 在调用super()之前不能使用this或super
|
'no-this-before-super': 0, // 在调用super()之前不能使用this或super
|
||||||
'no-undef': 2, // 不能有未定义的变量
|
'no-undef': 2, // 不能有未定义的变量
|
||||||
'no-use-before-define': 2, // 未定义前不能使用
|
'no-use-before-define': 2, // 未定义前不能使用
|
||||||
camelcase: 2, // 强制驼峰法命名
|
camelcase: 'off', // 关闭强制驼峰法命名
|
||||||
'vue/multi-word-component-names': 0,
|
'vue/multi-word-component-names': 0,
|
||||||
'jsx-quotes': [2, 'prefer-double'], // 强制在JSX属性（jsx-quotes）中一致使用双引号
|
'jsx-quotes': [2, 'prefer-double'], // 强制在JSX属性（jsx-quotes）中一致使用双引号
|
||||||
// 'react/sort-comp': 2, // 强制组件方法顺序
|
// 'react/sort-comp': 2, // 强制组件方法顺序
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -6,7 +6,7 @@
|
|||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_ev88efo2nou.css" />
|
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_6lxuclaoex9.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|||||||
BIN
web/src/assets/boxBottom.png
Normal file
BIN
web/src/assets/boxBottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
@@ -360,8 +360,6 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
|||||||
}
|
}
|
||||||
//表格样式
|
//表格样式
|
||||||
:deep(.ant-table-tbody) {
|
:deep(.ant-table-tbody) {
|
||||||
color: var(--theme-text-default) !important;
|
|
||||||
|
|
||||||
> tr {
|
> tr {
|
||||||
&:hover {
|
&:hover {
|
||||||
> .ant-table-cell {
|
> .ant-table-cell {
|
||||||
|
|||||||
711
web/src/components/DetailInfo.vue
Normal file
711
web/src/components/DetailInfo.vue
Normal file
@@ -0,0 +1,711 @@
|
|||||||
|
<!-- item.type:xxxx-unshow:表示不显示 items.displayFlag为false表示不展示卡片 -->
|
||||||
|
<template>
|
||||||
|
<div class="card-content">
|
||||||
|
<a-card style="margin: 0 0 15px 0; text-align: left">
|
||||||
|
<div :class="['info-title', items.title ? '' : 'title-none']">
|
||||||
|
<div class="box">
|
||||||
|
<div>
|
||||||
|
{{ items.title ? items.title : '基础信息' }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-tooltip
|
||||||
|
placement="bottomLeft"
|
||||||
|
trigger="['hover','click']"
|
||||||
|
:overlay-style="{ color: '#ccc' }"
|
||||||
|
v-if="items.tooltip && items.tooltip !== ''"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<!-- -->
|
||||||
|
<span v-html="items.tooltip"></span>
|
||||||
|
</template>
|
||||||
|
<ExclamationCircleOutlined
|
||||||
|
:style="{
|
||||||
|
fontSize: '18px',
|
||||||
|
color: 'var(--theme-text3)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
position: 'relative',
|
||||||
|
top: '0',
|
||||||
|
left: '15px'
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-content">
|
||||||
|
<a-form
|
||||||
|
layout="horizontal"
|
||||||
|
:wrap="true"
|
||||||
|
ref="formRef"
|
||||||
|
:rules="props.formRules"
|
||||||
|
name="info-form"
|
||||||
|
class="info-form"
|
||||||
|
label-align="left"
|
||||||
|
:model="propsInfo.ruleForm.value"
|
||||||
|
@submit="handleSubmit"
|
||||||
|
@onFieldsChange="onFieldsChange"
|
||||||
|
>
|
||||||
|
<template v-for="item in items.list">
|
||||||
|
<div
|
||||||
|
v-if="item.type !== 'unshow'"
|
||||||
|
:key="item.key"
|
||||||
|
:class="item.className ? [item.className, 'item-div'] : 'item-div'"
|
||||||
|
>
|
||||||
|
<a-form-item
|
||||||
|
:label="item.label"
|
||||||
|
:name="item.key"
|
||||||
|
:class="[item.colStatus || item.type === 'table' ? 'item-width' : 'form-item']"
|
||||||
|
:tooltip="item.tooltip ? item.tooltip : ''"
|
||||||
|
>
|
||||||
|
<a-input-password
|
||||||
|
v-if="item.type === 'input-password'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
:placeholder="'请输入' + item.label"
|
||||||
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
||||||
|
/>
|
||||||
|
<a-input
|
||||||
|
v-if="item.type === 'input'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
:type="item.inputType"
|
||||||
|
:placeholder="'请输入' + item.label"
|
||||||
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a-input-number
|
||||||
|
v-if="item.type == 'input-number'"
|
||||||
|
id="inputNumber"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
:min="item.min || 0"
|
||||||
|
:max="item.max || 10000000"
|
||||||
|
:formatter="item.formatter || null"
|
||||||
|
:addon-before="item.addonBefore"
|
||||||
|
:disabled="props.disabled"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a-date-picker
|
||||||
|
v-if="item.type === 'date-picker'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
:placeholder="'请输入' + item.label"
|
||||||
|
:disabled="props.disabled"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a-date-picker
|
||||||
|
show-time
|
||||||
|
v-if="item.type === 'time'"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
:disabled="props.disabled"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
:placeholder="'请输入' + item.label"
|
||||||
|
/>
|
||||||
|
<a-range-picker
|
||||||
|
v-if="item.type === 'date-time'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
:disabled="props.disabled"
|
||||||
|
show-time
|
||||||
|
/>
|
||||||
|
<a-time-range-picker
|
||||||
|
v-if="item.type === 'timeRangePicker'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
value-format="HH:mm"
|
||||||
|
format="HH:mm"
|
||||||
|
:disabled="props.disabled"
|
||||||
|
/>
|
||||||
|
<a-time-picker
|
||||||
|
v-if="item.type === 'timePicker'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
value-format="HH:mm"
|
||||||
|
format="HH:mm"
|
||||||
|
:disabled="props.disabled"
|
||||||
|
/>
|
||||||
|
<a-textarea
|
||||||
|
v-if="item.type === 'textarea'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
:placeholder="'请输入' + item.label"
|
||||||
|
allow-clear
|
||||||
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
||||||
|
:auto-size="item.autoSize ? item.autoSize : { minRows: 3, maxRows: 10 }"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a-select
|
||||||
|
:dropdown-match-select-width="false"
|
||||||
|
v-if="item.type === 'select'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
:placeholder="'请选择' + item.label"
|
||||||
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
||||||
|
allow-clear
|
||||||
|
>
|
||||||
|
<template v-if="item.options">
|
||||||
|
<a-select-option
|
||||||
|
:value="selectItem[item.options.value]"
|
||||||
|
v-for="selectItem in item.list"
|
||||||
|
:key="selectItem[item.options.value]"
|
||||||
|
>
|
||||||
|
{{ selectItem[item.options.label] }}
|
||||||
|
</a-select-option>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<a-select-option
|
||||||
|
:value="selectItem.value"
|
||||||
|
v-for="selectItem in item.list"
|
||||||
|
:key="selectItem.value"
|
||||||
|
>
|
||||||
|
{{ selectItem.label }}
|
||||||
|
</a-select-option>
|
||||||
|
</template>
|
||||||
|
</a-select>
|
||||||
|
<!-- 下拉多选 -->
|
||||||
|
<a-select
|
||||||
|
:dropdown-match-select-width="false"
|
||||||
|
v-if="item.type === 'selectMultiple'"
|
||||||
|
mode="multiple"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
:placeholder="'请选择' + item.label"
|
||||||
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
||||||
|
allow-clear
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
:value="selectItem.value"
|
||||||
|
v-for="selectItem in item.list"
|
||||||
|
:key="selectItem.value"
|
||||||
|
>
|
||||||
|
{{ selectItem.label }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<!-- 新增时disabled -->
|
||||||
|
<a-select
|
||||||
|
:dropdown-match-select-width="false"
|
||||||
|
v-if="item.type === 'select-disabled'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
:placeholder="'请选择' + item.label"
|
||||||
|
:disabled="!props.disabled ? item.disabled : props.disabled"
|
||||||
|
allow-clear
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
:value="selectItem.value"
|
||||||
|
v-for="selectItem in item.list"
|
||||||
|
:key="selectItem.value"
|
||||||
|
>
|
||||||
|
{{ selectItem.label }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<!-- 下拉展示icon -->
|
||||||
|
<a-select
|
||||||
|
v-if="item.type === 'icon-select'"
|
||||||
|
:get-popup-container="(triggerNode) => triggerNode.parentNode"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
allow-clear
|
||||||
|
option-label-prop="children"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="icon in iconList"
|
||||||
|
:key="icon.icon_id"
|
||||||
|
:value="`icon-${icon.font_class}`"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="iconfont"
|
||||||
|
:class="`icon-${icon.font_class}`"
|
||||||
|
style="margin-right: 8px"
|
||||||
|
></i>
|
||||||
|
<span> {{ icon.name }} </span>
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
|
||||||
|
<a-switch
|
||||||
|
v-if="item.type === 'switch'"
|
||||||
|
v-model:checked="propsInfo.ruleForm.value[item.key]"
|
||||||
|
style="margin-bottom: 5px"
|
||||||
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a-radio-group
|
||||||
|
name="radioGroup"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
v-if="item.type === 'radio'"
|
||||||
|
:disabled="props.disabled"
|
||||||
|
>
|
||||||
|
<a-radio
|
||||||
|
:value="radioItem.value"
|
||||||
|
v-for="radioItem in item.list"
|
||||||
|
:key="radioItem.value"
|
||||||
|
>
|
||||||
|
{{ radioItem.label }}
|
||||||
|
</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
|
||||||
|
<a-tree-select
|
||||||
|
:disabled="props.disabled"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
v-if="item.type === 'tree-radio'"
|
||||||
|
style="width: 100%"
|
||||||
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||||
|
:tree-data="item.list"
|
||||||
|
:placeholder="'请选择' + item.label"
|
||||||
|
:field-names="
|
||||||
|
item.replaceFields
|
||||||
|
? item.replaceFields
|
||||||
|
: {
|
||||||
|
children: 'children',
|
||||||
|
title: 'title',
|
||||||
|
key: 'key',
|
||||||
|
value: 'value'
|
||||||
|
}
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a-tree-select
|
||||||
|
:allow-clear="true"
|
||||||
|
:disabled="props.disabled"
|
||||||
|
v-if="item.type === 'tree-check'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
style="width: 100%"
|
||||||
|
:tree-data="item.list"
|
||||||
|
:tree-checkable="true"
|
||||||
|
:show-checked-strategy="SHOW_PARENT"
|
||||||
|
:placeholder="'请选择' + item.label"
|
||||||
|
:field-names="
|
||||||
|
item.replaceFields
|
||||||
|
? item.replaceFields
|
||||||
|
: {
|
||||||
|
children: 'children',
|
||||||
|
title: 'title',
|
||||||
|
key: 'key',
|
||||||
|
value: 'value'
|
||||||
|
}
|
||||||
|
"
|
||||||
|
:check="checkTree"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a-tree-select
|
||||||
|
:allow-clear="true"
|
||||||
|
:disabled="props.disabled"
|
||||||
|
v-if="item.type === 'tree-check-org'"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
style="width: 100%"
|
||||||
|
:tree-data="item.list"
|
||||||
|
allow-clear
|
||||||
|
multiple
|
||||||
|
tree-default-expand-all
|
||||||
|
:placeholder="'请选择' + item.label"
|
||||||
|
:field-names="
|
||||||
|
item.replaceFields
|
||||||
|
? item.replaceFields
|
||||||
|
: {
|
||||||
|
children: 'children',
|
||||||
|
title: 'title',
|
||||||
|
key: 'key',
|
||||||
|
value: 'value'
|
||||||
|
}
|
||||||
|
"
|
||||||
|
:check="checkTree"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a-cascader
|
||||||
|
:disabled="props.disabled"
|
||||||
|
v-if="item.type === 'cascader'"
|
||||||
|
:options="item.list"
|
||||||
|
:field-names="
|
||||||
|
item.fieldNames
|
||||||
|
? item.fieldNames
|
||||||
|
: { label: 'label', value: 'value', children: 'children' }
|
||||||
|
"
|
||||||
|
:show-search="{ filter }"
|
||||||
|
:placeholder="'请选择' + item.label"
|
||||||
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
||||||
|
change-on-select
|
||||||
|
>
|
||||||
|
</a-cascader>
|
||||||
|
|
||||||
|
<a-checkbox
|
||||||
|
v-if="item.type === 'checkbox'"
|
||||||
|
v-model:checked="propsInfo.ruleForm.value[item.key]"
|
||||||
|
>
|
||||||
|
</a-checkbox>
|
||||||
|
<div v-if="item.type === 'tag'" class="table-css">
|
||||||
|
<a-tag :color="propsInfo.ruleForm.value[item.key] ? 'green' : 'red'">
|
||||||
|
{{ item.list[propsInfo.ruleForm.value[item.key]] }}
|
||||||
|
</a-tag>
|
||||||
|
</div>
|
||||||
|
<!-- </a-col>-->
|
||||||
|
|
||||||
|
<!-- <a-button v-if="item.type === 'btn'" @click="btnClick(item)">{{ item.title }}</a-button> -->
|
||||||
|
<div v-if="item.type === 'table'" class="table-css">
|
||||||
|
<slot :name="item.type" v-bind="item"></slot>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="item.type === 'treetable'" class="table-css">
|
||||||
|
<slot :name="item.type" v-bind="item"></slot>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="item.type === 'slot'">
|
||||||
|
<slot
|
||||||
|
:name="item.slotName"
|
||||||
|
v-bind="{ ...item, ...propsInfo.ruleForm.value }"
|
||||||
|
></slot>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- <a-form-item
|
||||||
|
v-for="item in items.list"
|
||||||
|
:key="item.key"
|
||||||
|
:label="item.label"
|
||||||
|
:name="item.key"
|
||||||
|
:class="[item.colStatus ? 'item-width' : 'form-item']"
|
||||||
|
> -->
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { UserOutlined, InfoCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
defineProps,
|
||||||
|
defineEmits,
|
||||||
|
watch,
|
||||||
|
toRefs,
|
||||||
|
onMounted,
|
||||||
|
defineExpose
|
||||||
|
} from 'vue'
|
||||||
|
import { TreeSelect } from 'ant-design-vue'
|
||||||
|
import iconfonts from '../assets/iconfont/iconfont.json'
|
||||||
|
import validateRulesObj from '../utils/decorator'
|
||||||
|
|
||||||
|
const iconList = iconfonts.glyphs
|
||||||
|
const formRef = ref()
|
||||||
|
const props = defineProps({
|
||||||
|
items: {
|
||||||
|
type: Object,
|
||||||
|
required: () => []
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
ruleForm: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
disabled: {
|
||||||
|
type: Boolean
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const propsInfo = toRefs(props)
|
||||||
|
const exposeRuleForm = propsInfo.ruleForm.value
|
||||||
|
onMounted(() => {})
|
||||||
|
const emit = defineEmits(['handlerClick'])
|
||||||
|
const data = reactive({
|
||||||
|
validateRulesObj,
|
||||||
|
newRuleForm: {},
|
||||||
|
// : {},
|
||||||
|
key: 0,
|
||||||
|
tableIndex: null,
|
||||||
|
tableInfo: [],
|
||||||
|
// tableIndex: 0,
|
||||||
|
mockData: [{}],
|
||||||
|
targetKeys: [],
|
||||||
|
// 单选-树节点
|
||||||
|
treeRadioValue: null,
|
||||||
|
treeData: [
|
||||||
|
{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
|
||||||
|
{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
|
||||||
|
{ id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true }
|
||||||
|
],
|
||||||
|
|
||||||
|
treeCheckValue: null,
|
||||||
|
SHOW_PARENT: TreeSelect.SHOW_PARENT,
|
||||||
|
|
||||||
|
loading: false,
|
||||||
|
imageUrl: ''
|
||||||
|
})
|
||||||
|
const extraInformation = ref(
|
||||||
|
'Cron表达式由6个(或7个)字段组成，分别表示秒、分、小时、月中的日期、月份、星期中的日期(以及可选的年份)。每个字段可以包含以下字符:·星号(*):表示该字段可以接受任何值、·问号(?):通常用于"日”和"星期”字段，表示不指定值，即表示“无特定值”。·连字符(-):用于指定范围，如"10-12”表示10、11、12·逗号():用于指定多个值，如“MON,WED,FRI”表示星期一、星期三和星期五。·斜杠(/):用于指定增量，如“0/15”在秒字段中表示从0秒开始，每15秒一次。·L:在"日”字段中表示一个月的最后一天，在"星期”字段中表示一个星期的最后一天(通常是星期六)。W:用于指定最近的工作日(周一至周五)，如“15W”表示离15号最近的工作日。”#:用于指定一个月中的第几个星期几，如“6#3”表示一个月中的第三个星期五。个典型的Cron表达式示例是:"0012**?”，它表示每天中午12点触发'
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
() => props.formRules,
|
||||||
|
(nVal, o) => {
|
||||||
|
for (const key in nVal) {
|
||||||
|
nVal[key].forEach((item) => {
|
||||||
|
if (item.validatorType) {
|
||||||
|
item.validator = data.validateRulesObj[item.validatorType]?.rules[0].validator
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true, immediate: true }
|
||||||
|
)
|
||||||
|
function checkTree(checkedKeys, e) {}
|
||||||
|
// 按钮的点击事件
|
||||||
|
function btnClick(item) {
|
||||||
|
emit('handlerClick', item)
|
||||||
|
}
|
||||||
|
function confirm() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (formRef.value) {
|
||||||
|
formRef.value
|
||||||
|
.validate()
|
||||||
|
.then(() => {
|
||||||
|
resolve(true)
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log('error', error)
|
||||||
|
resolve(false)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function handleReset() {
|
||||||
|
if (formRef.value) {
|
||||||
|
formRef.value.resetFields()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function switchChange(checked, switchItem) {
|
||||||
|
propsInfo.ruleForm.value[switchItem.key] = checked
|
||||||
|
}
|
||||||
|
function RadioChange(e, radioItem) {
|
||||||
|
const { value } = e.target
|
||||||
|
propsInfo.ruleForm.value[radioItem.key] = value
|
||||||
|
}
|
||||||
|
function transferChange(targetKeys, transferItem) {
|
||||||
|
data.targetKeys = targetKeys
|
||||||
|
propsInfo.ruleForm.value[transferItem.key] = data.targetKeys
|
||||||
|
}
|
||||||
|
function transferSearch(dir, value) {}
|
||||||
|
|
||||||
|
// 单选-树节点
|
||||||
|
function genTreeNode(parentId, isLeaf = false) {
|
||||||
|
const random = Math.random().toString(36).substring(2, 6)
|
||||||
|
return {
|
||||||
|
id: random,
|
||||||
|
pId: parentId,
|
||||||
|
value: random,
|
||||||
|
title: isLeaf ? 'Tree Node' : 'Expand to load',
|
||||||
|
isLeaf
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onLoadTree(treeNode) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const { id } = treeNode.dataRef
|
||||||
|
setTimeout(() => {
|
||||||
|
data.treeData = data.treeData.concat([
|
||||||
|
data.genTreeNode(id, false),
|
||||||
|
data.genTreeNode(id, true)
|
||||||
|
])
|
||||||
|
resolve()
|
||||||
|
}, 300)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function treeChange(key, value, node, extra) {
|
||||||
|
propsInfo.ruleForm.value[key] = value
|
||||||
|
}
|
||||||
|
|
||||||
|
// 级联选择器
|
||||||
|
function cascaderChange(value, cascaderItem) {
|
||||||
|
propsInfo.ruleForm.value[cascaderItem.key] = value
|
||||||
|
}
|
||||||
|
|
||||||
|
function filter(inputValue, path) {
|
||||||
|
return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
|
||||||
|
}
|
||||||
|
|
||||||
|
function avatarUploadChange(info) {
|
||||||
|
if (info.file.status === 'uploading') {
|
||||||
|
data.loading = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (info.file.status === 'done') {
|
||||||
|
getBase64(info.file.originFileObj, (imageUrl) => {
|
||||||
|
data.imageUrl = imageUrl
|
||||||
|
data.loading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onFieldsChange() {}
|
||||||
|
function handleSubmit() {}
|
||||||
|
|
||||||
|
function getBase64(img, callback) {
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.addEventListener('load', () => callback(reader.result))
|
||||||
|
reader.readAsDataURL(img)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主动暴露方法
|
||||||
|
defineExpose({
|
||||||
|
confirm,
|
||||||
|
handleReset,
|
||||||
|
ruleForm: exposeRuleForm
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.allHeight {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.card-content:first-child {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
.card-content {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-timeline) {
|
||||||
|
color: var(--theme-text-default) !important;
|
||||||
|
|
||||||
|
.ant-timeline-item-tail {
|
||||||
|
border-inline-start: 2px solid var(--theme-text-default) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.ant-form-item .ant-form-item-label > label) {
|
||||||
|
color: var(--theme-text-default) !important;
|
||||||
|
}
|
||||||
|
.info-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 530;
|
||||||
|
color: var(--theme-text-default);
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1.5px solid var(--theme-bg);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.box {
|
||||||
|
color: #fff;
|
||||||
|
width: 230px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-bottom: 5px solid transparent;
|
||||||
|
border-image: url('../assets/boxBottom.png') 0 0 100% 0 stretch;
|
||||||
|
|
||||||
|
div:last-child {
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.a-tooltip) {
|
||||||
|
color: var(--theme-text3);
|
||||||
|
}
|
||||||
|
:deep(.ant-divider) {
|
||||||
|
color: var(--theme-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// :deep(.ant-table-wrapper) {
|
||||||
|
// :deep(.ant-input) {
|
||||||
|
// background: red !important;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
.title-none {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:deep(.ant-card) {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
:deep(.ant-card-body) {
|
||||||
|
padding: 15px;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
.ant-form {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
.item-l,
|
||||||
|
.item-div {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-card-bordered {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.info-content {
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
.info-form {
|
||||||
|
.item-div {
|
||||||
|
width: 45%;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.item-l {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
width: 320px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-form-item-label) {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px !important;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-form-item-control-wrapper) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-row-operations a {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
// 表格中的按钮
|
||||||
|
:deep(.ant-table-cell) {
|
||||||
|
.ant-btn {
|
||||||
|
height: 24px !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.ant-btn-dangerous {
|
||||||
|
background: var(--theme-btn2) !important;
|
||||||
|
}
|
||||||
|
.btn-del {
|
||||||
|
background: var(--theme-btn2);
|
||||||
|
}
|
||||||
|
.btn-add {
|
||||||
|
background: var(--theme-btn3);
|
||||||
|
}
|
||||||
|
.btn-upload,
|
||||||
|
.btn-downTemplate {
|
||||||
|
background: var(--theme-btn1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-calendar-picker) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
:deep(.ant-picker) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
:deep(.ant-input-number) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-form-item.form-item) {
|
||||||
|
padding: 0px !important;
|
||||||
|
padding-right: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-checkbox-disabled + span) {
|
||||||
|
color: var(--theme-text-default) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(textarea.ant-input) {
|
||||||
|
background-color: var(--theme-bg) !important;
|
||||||
|
border: none !important;
|
||||||
|
color: var(--theme-text-default) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-checkbox-wrapper) {
|
||||||
|
color: var(--theme-text-default);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
420
web/src/components/EditCom.vue
Normal file
420
web/src/components/EditCom.vue
Normal file
@@ -0,0 +1,420 @@
|
|||||||
|
<template>
|
||||||
|
<div class="editCom">
|
||||||
|
<template v-for="(detailInfo, index) in detailInfos" :key="index">
|
||||||
|
<DetailInfo
|
||||||
|
:items="detailInfo"
|
||||||
|
:rule-form="detailInfo.ruleForm"
|
||||||
|
:form-rules="formRules"
|
||||||
|
:ref="'detailInfo' + index"
|
||||||
|
:disabled="disabled"
|
||||||
|
>
|
||||||
|
<template #role_id="item">
|
||||||
|
<a-select
|
||||||
|
:dropdown-match-select-width="false"
|
||||||
|
v-model:value="detailInfo.ruleForm[item.key]"
|
||||||
|
:placeholder="'请选择' + item.label"
|
||||||
|
:disabled="disabled"
|
||||||
|
allow-clear
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
:value="selectItem.role_id"
|
||||||
|
v-for="selectItem in roleIdList"
|
||||||
|
:key="selectItem.role_id"
|
||||||
|
>
|
||||||
|
{{ selectItem.name }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</template>
|
||||||
|
<template #treetable="item">
|
||||||
|
<TreeTable
|
||||||
|
:columns="item.columns"
|
||||||
|
:table-data="item.tableData"
|
||||||
|
ref="treeTable"
|
||||||
|
:transfer-dialog="transferDialog"
|
||||||
|
@handleDetailPagesizeChange="handleDetailPagesizeChange"
|
||||||
|
:table-option="{
|
||||||
|
checkStrictly: false,
|
||||||
|
selectTableData: item.selectTableData,
|
||||||
|
scroll: { y: 500 }
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template #isQuery="record">
|
||||||
|
<a-tag :color="record.isQuery ? 'green' : 'red'">{{
|
||||||
|
record.isQuery ? '启用' : '禁用'
|
||||||
|
}}</a-tag>
|
||||||
|
</template>
|
||||||
|
<template #isEdit="record">
|
||||||
|
<a-tag :color="record.isEdit ? 'green' : 'red'">{{
|
||||||
|
record.isEdit ? '启用' : '禁用'
|
||||||
|
}}</a-tag>
|
||||||
|
</template>
|
||||||
|
<template #isControl="record">
|
||||||
|
<a-tag :color="record.isControl ? 'green' : 'red'">{{
|
||||||
|
record.isControl ? '启用' : '禁用'
|
||||||
|
}}</a-tag>
|
||||||
|
</template>
|
||||||
|
</TreeTable>
|
||||||
|
</template>
|
||||||
|
</DetailInfo>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: center; gap: 20px">
|
||||||
|
<a-button @click="handleback">取消</a-button>
|
||||||
|
<a-button @click="handleConfirm" type="primary" :disabled="disabled">确认</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
userOptions,
|
||||||
|
userFormRules,
|
||||||
|
roleOptions,
|
||||||
|
roleFormRules,
|
||||||
|
stationOptions,
|
||||||
|
stationFormRules,
|
||||||
|
deviceOptions,
|
||||||
|
deviceFormRules,
|
||||||
|
alarmlogOptions
|
||||||
|
} from '../../public/config/columnList'
|
||||||
|
import DetailInfo from './DetailInfo.vue'
|
||||||
|
import { postReq, getReq } from '@/request/api'
|
||||||
|
const dictionary = {
|
||||||
|
menu: '菜单',
|
||||||
|
file: '文件',
|
||||||
|
role: '角色',
|
||||||
|
permission: '权限',
|
||||||
|
account: '账户',
|
||||||
|
log: '日志',
|
||||||
|
server: '服务',
|
||||||
|
computer: '主机'
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
components: { DetailInfo },
|
||||||
|
props: {
|
||||||
|
action: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
record: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tip: '正在加载...',
|
||||||
|
roleIdList: [],
|
||||||
|
transferDialog: false,
|
||||||
|
detailInfos: [],
|
||||||
|
disabled: true,
|
||||||
|
formRules: {},
|
||||||
|
apiMethods: {
|
||||||
|
// menu: 'menuConfirm',
|
||||||
|
// permission: 'permissionConfirm',
|
||||||
|
user: 'userConfirm',
|
||||||
|
role: 'roleConfirm',
|
||||||
|
device: 'deviceConfirm'
|
||||||
|
},
|
||||||
|
form: {},
|
||||||
|
ObjInfo: {},
|
||||||
|
loading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {
|
||||||
|
action: {
|
||||||
|
handler(n) {
|
||||||
|
if (n === 'read') {
|
||||||
|
this.disabled = true
|
||||||
|
} else {
|
||||||
|
this.disabled = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
|
||||||
|
type: {
|
||||||
|
async handler(n) {
|
||||||
|
switch (n) {
|
||||||
|
case 'user':
|
||||||
|
this.detailInfos = userOptions
|
||||||
|
this.formRules = userFormRules
|
||||||
|
break
|
||||||
|
case 'menu':
|
||||||
|
// this.detailInfos = menuOptions
|
||||||
|
// this.formRules = menuFormRules
|
||||||
|
break
|
||||||
|
case 'permission':
|
||||||
|
// this.detailInfos = permissionOptions
|
||||||
|
// this.formRules = permissionFormRules
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'role':
|
||||||
|
this.detailInfos = roleOptions
|
||||||
|
this.formRules = roleFormRules
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'station':
|
||||||
|
this.detailInfos = stationOptions
|
||||||
|
this.formRules = stationFormRules
|
||||||
|
|
||||||
|
break
|
||||||
|
case 'device':
|
||||||
|
this.detailInfos = deviceOptions
|
||||||
|
this.formRules = deviceFormRules
|
||||||
|
break
|
||||||
|
case 'alarmLog':
|
||||||
|
this.detailInfos = alarmlogOptions
|
||||||
|
this.formRules = {}
|
||||||
|
|
||||||
|
break
|
||||||
|
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getRoleIdList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getRoleIdList() {
|
||||||
|
const params = {
|
||||||
|
page_size: 1000,
|
||||||
|
page: 1
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await getReq('/queryRoleList', params)
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.roleIdList = res.data
|
||||||
|
} else {
|
||||||
|
const err = { tip: res.errmsg }
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.roleIdList = []
|
||||||
|
//统一处理报错提示
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleChange(value) {
|
||||||
|
this.ip = ''
|
||||||
|
this.selectComputer = value.option
|
||||||
|
this.selectComputer.id = value.option.value
|
||||||
|
this.ipList = this.getIpOptions(this.selectComputer.id)
|
||||||
|
},
|
||||||
|
|
||||||
|
handleDetailPagesizeChange(val) {
|
||||||
|
this.detailInfos[val[1]].list[0].detailPaginationOption = {
|
||||||
|
...this.detailInfos[val[1]].list[0].detailPaginationOption,
|
||||||
|
...val[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.detailInfos[val[1]].list[0].key === 'servebiaoge') {
|
||||||
|
// 应用信息中消息模板需要通过接口调用数据
|
||||||
|
let arr = {
|
||||||
|
ids: this.clickId,
|
||||||
|
pageIndex: val[0].current,
|
||||||
|
pageSize: val[0].pageSize
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleRemove(file) {
|
||||||
|
const index = this.fileList.indexOf(file)
|
||||||
|
|
||||||
|
this.fileList.splice(index, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeUpload(file, fileList) {
|
||||||
|
this.fileList = [...this.fileList, file]
|
||||||
|
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
|
||||||
|
// 调用子组件的表单的方法
|
||||||
|
async handleConfirm() {
|
||||||
|
const result = []
|
||||||
|
const { length } = this.detailInfos
|
||||||
|
|
||||||
|
for (let index = 0; index < length; index++) {
|
||||||
|
// 校验规则
|
||||||
|
const res = await this.$refs[`detailInfo${index}`][0].confirm()
|
||||||
|
result.push(res)
|
||||||
|
if (!res) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (result.every((item) => item == true)) {
|
||||||
|
this.handleSubmit()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSubmit() {
|
||||||
|
const { length } = this.detailInfos
|
||||||
|
let form = {}
|
||||||
|
for (let index = 0; index < length; index++) {
|
||||||
|
if (this.$refs[`detailInfo${index}`][0].ruleForm) {
|
||||||
|
form = Object.assign(this.$refs[`detailInfo${index}`][0].ruleForm, form)
|
||||||
|
} else {
|
||||||
|
console.log('对象为空')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.form = form
|
||||||
|
eval('this.' + this.apiMethods[this.type] + '()')
|
||||||
|
},
|
||||||
|
|
||||||
|
async userConfirm() {
|
||||||
|
try {
|
||||||
|
const menuApi = {
|
||||||
|
add: '/insertUser',
|
||||||
|
edit: '/updateUser'
|
||||||
|
}
|
||||||
|
const paramsDate = {
|
||||||
|
...this.form
|
||||||
|
}
|
||||||
|
if (this.action == 'edit') {
|
||||||
|
paramsDate.user_id = this.record.user_id
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await postReq(menuApi[this.action], paramsDate)
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.handleback()
|
||||||
|
}, 1000)
|
||||||
|
} else {
|
||||||
|
throw res
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error, 'userConfirm')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async roleConfirm() {
|
||||||
|
try {
|
||||||
|
const menuApi = {
|
||||||
|
add: '/insertRole',
|
||||||
|
edit: '/deleteRole'
|
||||||
|
}
|
||||||
|
const paramsDate = {
|
||||||
|
...this.form
|
||||||
|
}
|
||||||
|
if (this.action == 'edit') {
|
||||||
|
paramsDate.role_id = this.record.role_id
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await postReq(menuApi[this.action], paramsDate)
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.handleback()
|
||||||
|
}, 1000)
|
||||||
|
} else {
|
||||||
|
throw res
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error, 'roleConfirm')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async stationConfirm() {
|
||||||
|
try {
|
||||||
|
const menuApi = {
|
||||||
|
add: '/insertStation',
|
||||||
|
edit: '/updateStation'
|
||||||
|
}
|
||||||
|
const paramsDate = {
|
||||||
|
...this.form
|
||||||
|
}
|
||||||
|
if (this.action == 'edit') {
|
||||||
|
paramsDate.station_id = this.record.station_id
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await postReq(menuApi[this.action], paramsDate)
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.handleback()
|
||||||
|
}, 1000)
|
||||||
|
} else {
|
||||||
|
throw res
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error, 'stationConfirm')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async deviceConfirm() {
|
||||||
|
try {
|
||||||
|
const menuApi = {
|
||||||
|
add: '/insertDevice',
|
||||||
|
edit: '/updateDevice'
|
||||||
|
}
|
||||||
|
const { is_open, rated_capacity, rated_current, rated_voltage, reted_power } = this.form
|
||||||
|
const paramsDate = {
|
||||||
|
...this.form,
|
||||||
|
is_open: Number(is_open),
|
||||||
|
attrs: JSON.stringify({rated_capacity, rated_current, rated_voltage, reted_power})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (this.action == 'edit') {
|
||||||
|
paramsDate.device_id = this.record.device_id
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await postReq(menuApi[this.action], paramsDate)
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$message.success('添加成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
this.handleback()
|
||||||
|
}, 1000)
|
||||||
|
} else {
|
||||||
|
throw res
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.$message.error('添加失败')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleback() {
|
||||||
|
this.$emit('operateForm', 'back')
|
||||||
|
},
|
||||||
|
getObjIds(selectKeys) {
|
||||||
|
const ids = []
|
||||||
|
for (let i = 0; i < selectKeys.length; i++) {
|
||||||
|
ids.push({ id: selectKeys[i] })
|
||||||
|
}
|
||||||
|
|
||||||
|
return ids
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.editCom {
|
||||||
|
// height:400px;
|
||||||
|
}
|
||||||
|
.ant-upload-select-picture-card i {
|
||||||
|
font-size: 32px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-upload-select-picture-card .ant-upload-text {
|
||||||
|
margin-top: 8px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
span,
|
||||||
|
div {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-picker) {
|
||||||
|
color: var(--theme-text-default) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -132,7 +132,7 @@ export default {
|
|||||||
station_id: this.stationId,
|
station_id: this.stationId,
|
||||||
category: 0
|
category: 0
|
||||||
}
|
}
|
||||||
const res = await getReq('/api/queryStatTotal', query)
|
const res = await getReq('/queryStatTotal', query)
|
||||||
if (res.errcode === 0) {
|
if (res.errcode === 0) {
|
||||||
this.modalInfo.allTotal = res.data
|
this.modalInfo.allTotal = res.data
|
||||||
this.modalInfo.allTotal.runDays = getRunDays(res.data.launch_date)
|
this.modalInfo.allTotal.runDays = getRunDays(res.data.launch_date)
|
||||||
@@ -153,7 +153,7 @@ export default {
|
|||||||
const query = {
|
const query = {
|
||||||
station_id: this.stationId,
|
station_id: this.stationId,
|
||||||
}
|
}
|
||||||
const res = await getReq('/api//queryStationInfo', query)
|
const res = await getReq('//queryStationInfo', query)
|
||||||
if (res.errcode === 0) {
|
if (res.errcode === 0) {
|
||||||
this.modalInfo.prefabTotal = res.data
|
this.modalInfo.prefabTotal = res.data
|
||||||
} else {
|
} else {
|
||||||
@@ -177,7 +177,7 @@ export default {
|
|||||||
end_date: getDateDaysAgo(0)
|
end_date: getDateDaysAgo(0)
|
||||||
}
|
}
|
||||||
const categoryObj = { 1: 'energy' }
|
const categoryObj = { 1: 'energy' }
|
||||||
const res = await getReq('/api/queryStatDayList', query)
|
const res = await getReq('/queryStatDayList', query)
|
||||||
if (res.errcode === 0) {
|
if (res.errcode === 0) {
|
||||||
this.modalInfo[categoryObj[category]] = res.data.map((item) => {
|
this.modalInfo[categoryObj[category]] = res.data.map((item) => {
|
||||||
const { income_charge: incomeCharge, income_elect: incomeElect } = item
|
const { income_charge: incomeCharge, income_elect: incomeElect } = item
|
||||||
|
|||||||
@@ -6,8 +6,9 @@
|
|||||||
v-for="item in operateList"
|
v-for="item in operateList"
|
||||||
:key="item.type"
|
:key="item.type"
|
||||||
type="primary"
|
type="primary"
|
||||||
style="margin-right: 5px"
|
size="small"
|
||||||
:class="['operateCol', item.type]"
|
style="margin-right: 10px"
|
||||||
|
:class="`btn-${item.type}`"
|
||||||
:disabled="item.disabled"
|
:disabled="item.disabled"
|
||||||
@click="munuClick(item.type)"
|
@click="munuClick(item.type)"
|
||||||
>{{ item.label }}
|
>{{ item.label }}
|
||||||
@@ -59,49 +60,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.moreIcon{
|
|
||||||
color:#fff !important
|
|
||||||
}
|
|
||||||
:deep(.ant-btn) {
|
|
||||||
padding: 0px 7px !important;
|
|
||||||
height: 24px !important;
|
|
||||||
font-size: 13px !important;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
border-radius: 4px;
|
|
||||||
& > span + .anticon {
|
|
||||||
margin-inline-start: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.ant-btn-primary) {
|
|
||||||
box-shadow: none !important;
|
|
||||||
background: var(--theme-btn3);
|
|
||||||
}
|
|
||||||
:deep(.ant-btn,.ant-btn-primary){
|
|
||||||
&:hover{
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
&:disabled{
|
|
||||||
color: rgba(255,255,255,0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.operate{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.operateCol {
|
|
||||||
background: var(--theme-btn3);
|
|
||||||
|
|
||||||
&.more {
|
|
||||||
background: var(--theme-btn1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.del {
|
|
||||||
background: var(--theme-btn2);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.ant-dropdown .ant-dropdown-menu{
|
|
||||||
background-color:var(--theme-opert-bg)!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -192,6 +192,7 @@ input:-internal-autofill-selected {
|
|||||||
color: var(--theme-text-default) !important;
|
color: var(--theme-text-default) !important;
|
||||||
}
|
}
|
||||||
.search {
|
.search {
|
||||||
|
height:70px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -1,58 +1,89 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="device">
|
<div class="device" ref="device">
|
||||||
<div class="device-item" v-for="item in deviceList" :key="item">
|
<div class="device-item" v-for="item in deviceList" :key="item">
|
||||||
<div class="item-header">
|
<div class="item-header">
|
||||||
<div style="display: flex; width: 50%">
|
<div style="display: flex; width: 50%">
|
||||||
<div class="icon-bg"></div>
|
<div class="icon-bg">
|
||||||
|
<span class="iconfont" :class="getIcongont(item)"></span>
|
||||||
|
</div>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span class="number">521245786665412</span>
|
<span class="number">{{ item.device_id }}</span>
|
||||||
<span class="name">逆变器1</span>
|
<span class="name">{{ item.name }}</span>
|
||||||
<span class="number type">逆变器</span>
|
<span class="number type">{{ item.typename }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="status">
|
<div class="status">
|
||||||
<div class="status-item">
|
<div class="status-item">
|
||||||
<span>在线</span>
|
<span>{{ ['离线', '在线'][item.is_online] }}</span>
|
||||||
<span class="text">在线状态</span>
|
<span class="text">在线状态</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="status-item">
|
<div class="status-item">
|
||||||
<span>在线</span>
|
<span>{{ ['正常', '错误'][item.is_error] }}</span>
|
||||||
<span class="text">故障状态</span>
|
<span class="text">故障状态</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="status-item">
|
<div class="status-item">
|
||||||
<span>在线</span>
|
<span>{{ ['空闲', '工作'][item.is_running] }}</span>
|
||||||
<span class="text">工作状态</span>
|
<span class="text">工作状态</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
<div v-for="info in chunengInfo" :key="info.key">
|
<div v-for="info in item.params" :key="info.k" class="item-info">
|
||||||
<span class="text">{{ info.label }}：</span>
|
<span class="text">{{ info.k }}：</span>
|
||||||
<a-button
|
|
||||||
v-if="info.key === 'realTimeData'"
|
<span class="value">{{ info.v }}</span>
|
||||||
type="primary"
|
</div>
|
||||||
size="small"
|
</div>
|
||||||
@click="openModal"
|
<div v-if="item.view == 1" class="item-button">
|
||||||
>查看</a-button
|
<span class="text">实时数据：</span>
|
||||||
|
<a-button type="primary" size="small" @click="openModal(item)">查看</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-modal
|
||||||
|
v-model:open="modalOpen"
|
||||||
|
@ok="handleOk"
|
||||||
|
width="90%"
|
||||||
|
class="modal-device"
|
||||||
|
:get-container="() => $refs.device"
|
||||||
>
|
>
|
||||||
<span v-else class="value">{{ info.value }}</span>
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<div>电流电压</div>
|
||||||
|
<img src="@/assets/images/titleLine.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="echarts">
|
||||||
|
<predictEcharts
|
||||||
|
:chart-options="chartOptions[0]"
|
||||||
|
:chart-data="chartData"
|
||||||
|
ref="chartRef1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<div>功率</div>
|
||||||
|
<img src="@/assets/images/titleLine.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="echarts">
|
||||||
|
<predictEcharts
|
||||||
|
:chart-options="chartOptions[1]"
|
||||||
|
:chart-data="chartData"
|
||||||
|
ref="chartRef2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a-modal v-model:open="modalOpen" @ok="handleOk" width="800px">
|
|
||||||
<!-- <p>Some contents...</p>
|
|
||||||
<p>Some contents...</p>
|
|
||||||
<p>Some contents...</p> -->
|
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import predictEcharts from '@/components/predict/predictEcharts.vue'
|
||||||
import { postReq, getReq } from '@/request/api'
|
import { postReq, getReq } from '@/request/api'
|
||||||
|
import { deviceTypeList } from '@/utils/config'
|
||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
components: {},
|
components: { predictEcharts },
|
||||||
props: {
|
props: {
|
||||||
stationId: {
|
stationId: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -79,7 +110,70 @@ export default {
|
|||||||
{ label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
|
{ label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
|
||||||
{ label: '额定功率', key: 'ratedPower', value: '0.01kW' },
|
{ label: '额定功率', key: 'ratedPower', value: '0.01kW' },
|
||||||
{ label: '冷却方式', key: 'coolingMethod', value: '风冷' }
|
{ label: '冷却方式', key: 'coolingMethod', value: '风冷' }
|
||||||
|
],
|
||||||
|
chartOptions: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
dataKey: 'chargeDischarge',
|
||||||
|
infoKeys: [
|
||||||
|
{
|
||||||
|
key: 'V',
|
||||||
|
label: '电压',
|
||||||
|
seriesOptions: {
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#00FDF9' // 充电电量线条颜色
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: '#00FDF9' // 充电电量线条颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'I',
|
||||||
|
label: '电流',
|
||||||
|
seriesOptions: {
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#3E7EEF' // 充电电量线条颜色
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: '#3E7EEF' // 充电电量线条颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
dataKey: 'chargeDischarge',
|
||||||
|
infoKeys: [
|
||||||
|
{
|
||||||
|
key: 'P',
|
||||||
|
label: '功率',
|
||||||
|
seriesOptions: {
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#00FDF9' // 充电电量线条颜色
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: '#00FDF9' // 充电电量线条颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
chartData: {
|
||||||
|
xdata: [],
|
||||||
|
ydata: {}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@@ -99,24 +193,65 @@ export default {
|
|||||||
this.getDeviceList()
|
this.getDeviceList()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async getDeviceList() {
|
getIcongont(ele) {
|
||||||
const data = {
|
return deviceTypeList.find((item) => item.value == ele.type).iconfont || ''
|
||||||
category: this.systemType,
|
},
|
||||||
'station_id': this.stationId,
|
generateTimePoints() {
|
||||||
page: 0,
|
const timePoints = []
|
||||||
'page_size': 1000
|
|
||||||
}
|
for (let hour = 0; hour <= 24; hour++) {
|
||||||
try {
|
for (let minute = 0; minute < 60; minute += 10) {
|
||||||
const res = await getReq('/queryDeviceList', data)
|
// 处理24:00的特殊情况
|
||||||
|
if (hour === 24 && minute === 0) {
|
||||||
|
timePoints.push('24:00')
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化小时和分钟，确保两位数
|
||||||
|
const formattedHour = hour.toString().padStart(2, '0')
|
||||||
|
const formattedMinute = minute.toString().padStart(2, '0')
|
||||||
|
|
||||||
|
timePoints.push(`${formattedHour}:${formattedMinute}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return timePoints
|
||||||
|
},
|
||||||
|
//查看实时数据
|
||||||
|
async getDevicCharts(item) {
|
||||||
|
try {
|
||||||
|
const res = await getReq('/queryDevicCharts', {
|
||||||
|
station_id: this.stationId,
|
||||||
|
device_id: item.device_id
|
||||||
|
})
|
||||||
|
this.chartData.ydata = res.data
|
||||||
|
this.chartData.xdata = this.generateTimePoints()
|
||||||
|
this.$refs.chartRef1.initCharts()
|
||||||
|
this.$refs.chartRef2.initCharts()
|
||||||
|
|
||||||
console.log(res)
|
|
||||||
this.deviceList = res.data
|
|
||||||
// this.selectStation=this.stations[0]['station_id']
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
openModal() {
|
|
||||||
|
//请求运行监控系统设备信息
|
||||||
|
async getDeviceList() {
|
||||||
|
try {
|
||||||
|
const res = await getReq('/queryDevicByCategory', {
|
||||||
|
station_id: this.stationId,
|
||||||
|
category: this.systemType
|
||||||
|
})
|
||||||
|
|
||||||
|
this.deviceList = res.data
|
||||||
|
} catch (error) {
|
||||||
|
this.deviceList = []
|
||||||
|
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async openModal(item) {
|
||||||
|
await this.getDevicCharts(item)
|
||||||
|
|
||||||
this.modalOpen = true
|
this.modalOpen = true
|
||||||
},
|
},
|
||||||
handleOk() {
|
handleOk() {
|
||||||
@@ -136,8 +271,6 @@ export default {
|
|||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
.device-item {
|
.device-item {
|
||||||
// width: 410px;
|
|
||||||
// height: 340px;
|
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
|
||||||
background: $bg2-color;
|
background: $bg2-color;
|
||||||
@@ -149,11 +282,16 @@ export default {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.icon-bg {
|
.icon-bg {
|
||||||
width: 76px;
|
width: 66px;
|
||||||
height: 72px;
|
height: 66px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 66px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: linear-gradient(90deg, #3dfefa 0%, #2a82e4 2.96%, #27a188 100%),
|
background: linear-gradient(90deg, #3dfefa 0%, #2a82e4 2.96%, #27a188 100%),
|
||||||
linear-gradient(90deg, #3dfefa 0%, #01dfef 2.96%, #08a5ff 100%);
|
linear-gradient(90deg, #3dfefa 0%, #01dfef 2.96%, #08a5ff 100%);
|
||||||
|
.iconfont {
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -194,12 +332,20 @@ export default {
|
|||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: grid;
|
display: grid;
|
||||||
line-height: 45px;
|
// line-height: 45px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
height: 120px;
|
||||||
|
overflow-y: auto;
|
||||||
.value {
|
.value {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
.item-info {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-button {
|
||||||
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
.text {
|
.text {
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
@@ -212,4 +358,22 @@ export default {
|
|||||||
.environment {
|
.environment {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
:deep(.modal-device) {
|
||||||
|
color: #fff;
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
font-weight: 700;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 232px;
|
||||||
|
height: 6px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echarts {
|
||||||
|
width: 100%;
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -32,13 +32,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="table-content">
|
<div class="table-content">
|
||||||
<ComTable
|
<ComTable
|
||||||
:columns="columns"
|
:columns="columns[activeTab]"
|
||||||
:table-data="tableData"
|
:table-data="tableDatas[activeTab]"
|
||||||
@handlePagesizeChange="handlePagesizeChange"
|
@handlePagesizeChange="handlePagesizeChange"
|
||||||
ref="comTable"
|
ref="comTable"
|
||||||
:table-option="tableOption"
|
:table-option="tableOption"
|
||||||
:page-option="pageOption"
|
:page-option="pageOption"
|
||||||
:table-h="tableH"
|
|
||||||
>
|
>
|
||||||
</ComTable>
|
</ComTable>
|
||||||
</div>
|
</div>
|
||||||
@@ -46,65 +45,143 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { postReq, getReq } from '@/request/api'
|
||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {
|
||||||
|
stationId: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
systemType: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeTab: '0',
|
activeTab: 'temp_hum',
|
||||||
tabList: [
|
columns: {
|
||||||
|
airc: [
|
||||||
{
|
{
|
||||||
key: '0',
|
title: '名称',
|
||||||
name: '环境温湿度信息'
|
dataIndex: 'pos',
|
||||||
|
key: 'pos',
|
||||||
|
ellipsis: true,
|
||||||
|
align: 'center'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: '1',
|
title: '状态',
|
||||||
name: '安防信息'
|
dataIndex: 'status',
|
||||||
},
|
key: 'status',
|
||||||
{
|
ellipsis: true,
|
||||||
key: '2',
|
align: 'center'
|
||||||
name: '空调信息'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '3',
|
|
||||||
name: '冷机信息'
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
columns: [
|
cooling: [
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'pos',
|
||||||
|
key: 'pos',
|
||||||
|
ellipsis: true,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
key: 'status',
|
||||||
|
ellipsis: true,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
fire40: [
|
||||||
{
|
{
|
||||||
title: '点位',
|
title: '点位',
|
||||||
dataIndex: 'policyId',
|
dataIndex: 'pos',
|
||||||
key: 'policyId',
|
key: 'pos',
|
||||||
ellipsis: true
|
ellipsis: true,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
key: 'status',
|
||||||
|
ellipsis: true,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'temp_hum': [
|
||||||
|
{
|
||||||
|
title: '点位',
|
||||||
|
dataIndex: 'pos',
|
||||||
|
key: 'pos',
|
||||||
|
ellipsis: true,
|
||||||
|
align: 'center'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '温度',
|
title: '温度',
|
||||||
dataIndex: 'name',
|
dataIndex: 'temp',
|
||||||
key: 'name',
|
key: 'temp',
|
||||||
ellipsis: true
|
ellipsis: true,
|
||||||
|
align: 'center'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '湿度',
|
title: '湿度',
|
||||||
dataIndex: 'type',
|
dataIndex: 'hum',
|
||||||
key: 'type',
|
key: 'hum',
|
||||||
ellipsis: true
|
ellipsis: true,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
tabList: [
|
||||||
|
{
|
||||||
|
key: 'temp_hum',
|
||||||
|
name: '环境温湿度信息'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'fire40',
|
||||||
|
name: '安防信息'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'airc',
|
||||||
|
name: '空调信息'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'cooling',
|
||||||
|
name: '冷机信息'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
tableDatas: {},
|
||||||
|
|
||||||
tableOption: {
|
tableOption: {
|
||||||
select: false,
|
select: false,
|
||||||
page: false
|
page: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {
|
||||||
methods: {}
|
this.getEnvironment()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getEnvironment() {
|
||||||
|
try {
|
||||||
|
const res = await getReq('/queryEnvironment', { station_id: this.stationId })
|
||||||
|
console.log(res, '==============')
|
||||||
|
this.tableDatas = res.data
|
||||||
|
// this.deviceList=res.data
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.videos {
|
.videos {
|
||||||
width: 60%;
|
width: calc(100% - 470px);
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 20px;
|
grid-gap: 20px;
|
||||||
@@ -130,7 +207,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.environment {
|
.environment {
|
||||||
width: calc(40% - 20px);
|
width: 430px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
@@ -187,6 +264,7 @@ export default {
|
|||||||
}
|
}
|
||||||
.table-content {
|
.table-content {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
height: calc(100% - 60px);
|
||||||
:deep(.ant-table) {
|
:deep(.ant-table) {
|
||||||
border-radius: 10px 10px 0 0 !important;
|
border-radius: 10px 10px 0 0 !important;
|
||||||
overflow: hidden; /* 确保圆角生效 */
|
overflow: hidden; /* 确保圆角生效 */
|
||||||
|
|||||||
@@ -1,16 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="echarts">
|
<div class="echarts">
|
||||||
<div class="chart-container" >
|
<div class="chart-container" >
|
||||||
<div class="content-header">
|
<div class="content-header" v-if="chartOptions.title">
|
||||||
<div class="verline"></div>
|
<div class="verline"></div>
|
||||||
<span>{{ chartOptions.title }}</span>
|
<span>{{ chartOptions.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- {{ chartData.ydata }} -->
|
||||||
|
|
||||||
<div ref="chartContainer" class="echarts-content"></div>
|
<div ref="chartContainer" class="echarts-content"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { postReq } from '@/request/api'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PredictEcharts',
|
name: 'PredictEcharts',
|
||||||
props: {
|
props: {
|
||||||
@@ -20,8 +21,8 @@ export default {
|
|||||||
required: false // 非必须
|
required: false // 非必须
|
||||||
},
|
},
|
||||||
chartData: {
|
chartData: {
|
||||||
type: Array,
|
type: Object,
|
||||||
default: () => ([]), // 默认空对象
|
default: () => ({}), // 默认空对象
|
||||||
required: false // 非必须
|
required: false // 非必须
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -32,12 +33,11 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
|
// this.$nextTick(() => {
|
||||||
this.$nextTick(() => {
|
// // 确保 DOM 完全渲染
|
||||||
// 确保 DOM 完全渲染
|
// this.initCharts()
|
||||||
this.initCharts()
|
// window.addEventListener('resize', this.handleResize)
|
||||||
window.addEventListener('resize', this.handleResize)
|
// })
|
||||||
})
|
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
window.removeEventListener('resize', this.handleResize)
|
window.removeEventListener('resize', this.handleResize)
|
||||||
@@ -45,8 +45,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initCharts() {
|
initCharts() {
|
||||||
// this.chartOptions.forEach((option, index) => {
|
const {infoKeys,dataKey,type,smooth}=this.chartOptions
|
||||||
const {title,infoKeys,dataKey,type,smooth}=this.chartOptions
|
|
||||||
|
|
||||||
const dom = this.$refs.chartContainer
|
const dom = this.$refs.chartContainer
|
||||||
if (!dom) return
|
if (!dom) return
|
||||||
@@ -73,12 +72,29 @@ export default {
|
|||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '3%',
|
||||||
right: '3%',
|
right: '3%',
|
||||||
bottom: '1%',
|
bottom: '15%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'slider', // 滑动条型
|
||||||
|
show: true,
|
||||||
|
xAxisIndex: 0, // 控制第一个X轴
|
||||||
|
start: 0, // 初始显示范围起点（百分比）
|
||||||
|
end: 20, // 初始显示范围终点（百分比）
|
||||||
|
height: 20, // 滑动条高度
|
||||||
|
bottom: 10 // 距离底部距离
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'inside', // 内置型（鼠标滚轮/拖拽交互）
|
||||||
|
xAxisIndex: 0,
|
||||||
|
start: 0,
|
||||||
|
end: 20
|
||||||
|
}
|
||||||
|
],
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: this.chartData.map((item) => item.date),
|
data: this.chartData.xdata,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
@@ -122,7 +138,7 @@ export default {
|
|||||||
name: info.label,
|
name: info.label,
|
||||||
smooth: smooth || false,
|
smooth: smooth || false,
|
||||||
type: type,
|
type: type,
|
||||||
data: this.chartData.map((item) => item[info.key]),
|
data: this.chartData.ydata[info.key],
|
||||||
...info.seriesOptions,
|
...info.seriesOptions,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -347,7 +347,11 @@ export default {
|
|||||||
changePolicy(e) {
|
changePolicy(e) {
|
||||||
const val = e.target.value
|
const val = e.target.value
|
||||||
if (val == 1) {
|
if (val == 1) {
|
||||||
this.formData.period5.splice(1,1)
|
// const {length} = this.formData.period5
|
||||||
|
|
||||||
|
// this.formData.period5.splice(1,1)
|
||||||
|
this.formData.period1=[]
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
this.formData.period5[1] =
|
this.formData.period5[1] =
|
||||||
{
|
{
|
||||||
@@ -477,11 +481,13 @@ export default {
|
|||||||
this.$refs.periodRef
|
this.$refs.periodRef
|
||||||
.validateFields()
|
.validateFields()
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log(this.formData.period1)
|
console.log(this.formData.period1,'=============')
|
||||||
const target = this.formData.period1.find((item) => item.month == this.periodForm.month)
|
const target = this.formData.period1.find((item) => item.month == this.periodForm.month)
|
||||||
|
|
||||||
if (target) {
|
if (target) {
|
||||||
target.children.push(this.periodForm) // 如果找到，放入 children
|
target.children.push(this.periodForm) // 如果找到，放入 children
|
||||||
|
}else{
|
||||||
|
this.formData.period1.push(this.periodForm)
|
||||||
}
|
}
|
||||||
|
|
||||||
// this.formData.period1.push(this.periodForm)
|
// this.formData.period1.push(this.periodForm)
|
||||||
@@ -636,6 +642,9 @@ export default {
|
|||||||
:deep(.no-hover-row:hover > td) {
|
:deep(.no-hover-row:hover > td) {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
:deep(.ant-table-wrapper .ant-table-cell){
|
||||||
|
background:none!important;
|
||||||
|
}
|
||||||
// /* 禁用行的 hover 过渡动画 */
|
// /* 禁用行的 hover 过渡动画 */
|
||||||
// .ant-table-tbody > tr.ant-table-row {
|
// .ant-table-tbody > tr.ant-table-row {
|
||||||
// transition: none !important;
|
// transition: none !important;
|
||||||
|
|||||||
@@ -10,17 +10,23 @@ import '@/style/index.scss'
|
|||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import { setWidth } from '@/utils/column'
|
import { setWidth } from '@/utils/column'
|
||||||
import { getBtns } from '@/utils/btnList'
|
import { getBtns } from '@/utils/btnList'
|
||||||
|
import { message, Modal } from 'ant-design-vue'
|
||||||
|
|
||||||
import VueTianditu from 'vue-tianditu'
|
import VueTianditu from 'vue-tianditu'
|
||||||
import SearchBox from '@/components/SearchBox.vue'
|
import SearchBox from '@/components/SearchBox.vue'
|
||||||
import ComTable from '@/components/ComTable.vue'
|
import ComTable from '@/components/ComTable.vue'
|
||||||
|
import OperateCom from '@/components/OperateCom'
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
app.component('SearchBox', SearchBox)
|
app.component('SearchBox', SearchBox)
|
||||||
app.component('ComTable', ComTable)
|
app.component('ComTable', ComTable)
|
||||||
|
app.component('OperateCom', OperateCom)
|
||||||
|
|
||||||
app.config.globalProperties.$echarts = echarts // 挂载到全局属性
|
app.config.globalProperties.$echarts = echarts // 挂载到全局属性
|
||||||
app.config.globalProperties.$setWidth = setWidth // 挂载到全局属性
|
app.config.globalProperties.$setWidth = setWidth // 挂载到全局属性
|
||||||
app.config.globalProperties.$getBtns = getBtns
|
app.config.globalProperties.$getBtns = getBtns
|
||||||
|
app.config.globalProperties.$message = message
|
||||||
|
app.config.globalProperties.$Modal = Modal
|
||||||
|
|
||||||
app.use(store).use(router).use(Antd).use(VueTianditu).mount('#app')
|
app.use(store).use(router).use(Antd).use(VueTianditu).mount('#app')
|
||||||
|
|||||||
@@ -1,53 +1,42 @@
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
// import openNotification from "../utils/notification";
|
import openNotification from '../utils/notification'
|
||||||
// let { config } = window;
|
import { message } from 'ant-design-vue'
|
||||||
// let { baseUrl } = config;
|
|
||||||
|
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
// baseURL: baseUrl,
|
|
||||||
baseURL: '/api',
|
baseURL: '/api',
|
||||||
timeout: 120000
|
timeout: 120000
|
||||||
})
|
})
|
||||||
|
|
||||||
service.interceptors.request.use((config) => {
|
service.interceptors.request.use((config) => {
|
||||||
const webConfig = config
|
const webConfig = config
|
||||||
// if (!['/login'].includes(config.url)) {
|
|
||||||
// if (localStorage.getItem('token')) {
|
|
||||||
// webConfig.headers = {
|
|
||||||
// token: localStorage.getItem('token')
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
return webConfig
|
return webConfig
|
||||||
})
|
})
|
||||||
service.interceptors.response.use(
|
service.interceptors.response.use(
|
||||||
(response) => {
|
(response) => {
|
||||||
// 排除以下接口的错误提示
|
|
||||||
const { url } = response.config
|
|
||||||
const urls = ['/light/', '/serve/delete', '/user/checkRandom']
|
|
||||||
const urlFlag = urls.map((item) => {
|
|
||||||
return url.includes(item)
|
|
||||||
})
|
|
||||||
|
|
||||||
const res = response.data
|
const res = response.data
|
||||||
|
|
||||||
if (res.code !== 200) {
|
if (res.errCode !== 0) {
|
||||||
if (res.code == 401 || res.tip == '校验token过期') {
|
if ((res.ERR_TOKEN = 2 || res.errmsg == '校验token过期')) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.$wujie?.props.jump({ path: '/login' })
|
// router.push({ path: '/login' })
|
||||||
}, 1000)
|
}, 1000)
|
||||||
} else if (urlFlag.every((item) => item === false)) {
|
} else {
|
||||||
|
console.log(res.errmsg, 'res.errmsg')
|
||||||
|
message.error(res.errmsg)
|
||||||
// openNotification({
|
// openNotification({
|
||||||
// status: "error",
|
// status: 'error',
|
||||||
// desc: res.tip,
|
// desc: res.tip
|
||||||
// });
|
// })
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
console.log(res.errmsg, 'res.errmsg')
|
||||||
|
|
||||||
|
message.error(res.errmsg)
|
||||||
}
|
}
|
||||||
return res
|
return res
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
// console.log(error, 'error 此处添加监控超时处理')
|
|
||||||
if (
|
if (
|
||||||
error.name === 'AxiosError' &&
|
error.name === 'AxiosError' &&
|
||||||
error.message === 'timeout of 120000ms exceeded' &&
|
error.message === 'timeout of 120000ms exceeded' &&
|
||||||
|
|||||||
@@ -54,8 +54,8 @@ export const routes = [
|
|||||||
{
|
{
|
||||||
name: 'role',
|
name: 'role',
|
||||||
path: 'role',
|
path: 'role',
|
||||||
title: '角色管理'
|
title: '角色管理',
|
||||||
// component: () => import(/* webpackChunkName: "system" */ '@/views/system/role.vue')s
|
component: () => import(/* webpackChunkName: "system" */ '@/views/system/role.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'permission',
|
name: 'permission',
|
||||||
@@ -65,12 +65,14 @@ export const routes = [
|
|||||||
{
|
{
|
||||||
name: 'station',
|
name: 'station',
|
||||||
path: 'station',
|
path: 'station',
|
||||||
title: '场站管理'
|
title: '场站管理',
|
||||||
|
component: () => import(/* webpackChunkName: "system" */ '@/views/system/station.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'service',
|
name: 'service',
|
||||||
path: 'service',
|
path: 'service',
|
||||||
title: '服务管理'
|
title: '服务管理',
|
||||||
|
component: () => import(/* webpackChunkName: "system" */ '@/views/system/service.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'policy',
|
path: 'policy',
|
||||||
@@ -81,17 +83,20 @@ export const routes = [
|
|||||||
{
|
{
|
||||||
name: 'device',
|
name: 'device',
|
||||||
path: 'device',
|
path: 'device',
|
||||||
title: '设备管理'
|
title: '设备管理',
|
||||||
|
component: () => import(/* webpackChunkName: "system" */ '@/views/system/device.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'log',
|
name: 'alarmLog',
|
||||||
path: 'log',
|
path: 'log',
|
||||||
title: '告警日志'
|
title: '告警日志',
|
||||||
|
component: () => import(/* webpackChunkName: "system" */ '@/views/system/alarmLog.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'syslog',
|
name: 'sylog',
|
||||||
path: 'syslog',
|
path: 'syslog',
|
||||||
title: '系统日志'
|
title: '系统日志',
|
||||||
|
component: () => import(/* webpackChunkName: "system" */ '@/views/system/log.vue')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,6 +15,13 @@ $table-border: #1c797a;
|
|||||||
$table-bg: #072e4a;
|
$table-bg: #072e4a;
|
||||||
$page-border: #cad2dd;
|
$page-border: #cad2dd;
|
||||||
//级联器样式,下拉选择器样式输入框等。。。
|
//级联器样式,下拉选择器样式输入框等。。。
|
||||||
|
.ant-switch {
|
||||||
|
background: #00fffb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-switch .ant-switch-handle::before {
|
||||||
|
background-color: #0a1b2f !important;
|
||||||
|
}
|
||||||
.ant-select,
|
.ant-select,
|
||||||
.ant-cascader {
|
.ant-cascader {
|
||||||
.ant-select-selector {
|
.ant-select-selector {
|
||||||
@@ -32,14 +39,17 @@ $page-border: #cad2dd;
|
|||||||
.ant-input,
|
.ant-input,
|
||||||
.ant-input-affix-wrapper,
|
.ant-input-affix-wrapper,
|
||||||
.ant-picker,
|
.ant-picker,
|
||||||
.ant-input-number
|
.ant-input-number {
|
||||||
{
|
|
||||||
background: none !important;
|
background: none !important;
|
||||||
border: 1px solid $border-color !important;
|
border: 1px solid $border-color !important;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
.ant-input::placeholder {
|
||||||
|
color: #ffffff3b !important;
|
||||||
|
}
|
||||||
:deep(.ant-picker) {
|
:deep(.ant-picker) {
|
||||||
.ant-picker-input >input,.ant-picker-separator{
|
.ant-picker-input > input,
|
||||||
|
.ant-picker-separator {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
.ant-picker-input::placeholder {
|
.ant-picker-input::placeholder {
|
||||||
@@ -77,6 +87,11 @@ $page-border: #cad2dd;
|
|||||||
&:active {
|
&:active {
|
||||||
background: #0f6f6a;
|
background: #0f6f6a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.btn-del {
|
.btn-del {
|
||||||
background: $btn-del;
|
background: $btn-del;
|
||||||
@@ -99,6 +114,14 @@ $page-border: #cad2dd;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
//modal样式
|
//modal样式
|
||||||
|
// 删除弹框
|
||||||
|
.ant-modal-confirm-title {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-modal .ant-modal-close {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
.ant-modal .ant-modal-content {
|
.ant-modal .ant-modal-content {
|
||||||
background-image: url('@/assets/images/modalBg.png');
|
background-image: url('@/assets/images/modalBg.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
@@ -124,7 +147,6 @@ $page-border: #cad2dd;
|
|||||||
background: $table-bg;
|
background: $table-bg;
|
||||||
border: 1px solid $table-border !important;
|
border: 1px solid $table-border !important;
|
||||||
border-radius: 0px 0px 20px 20px;
|
border-radius: 0px 0px 20px 20px;
|
||||||
|
|
||||||
}
|
}
|
||||||
:deep(.ant-table-wrapper .ant-table-tbody > tr.ant-table-placeholder:hover > td) {
|
:deep(.ant-table-wrapper .ant-table-tbody > tr.ant-table-placeholder:hover > td) {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
@@ -132,7 +154,4 @@ $page-border: #cad2dd;
|
|||||||
:deep(.ant-empty-description) {
|
:deep(.ant-empty-description) {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,36 +1,10 @@
|
|||||||
const btnList = [
|
const btnList = [
|
||||||
{ label: '', type: '', disFlag: '' },
|
{ label: '', type: '', disFlag: '' },
|
||||||
{ label: '新增', type: 'add', disFlag: 'isEdit', icon: 'icon-add' },
|
{ label: '新增', type: 'add', disFlag: 'isEdit', icon: 'icon-add' },
|
||||||
{ label: '更新', type: 'edit', disFlag: 'isEdit' },
|
{ label: '查看', type: 'read', disFlag: 'isQuery' },
|
||||||
{ label: '查看', type: 'detail', disFlag: 'isQuery' },
|
{ label: '修改', type: 'edit', disFlag: 'isEdit' },
|
||||||
{ label: '编辑', type: 'edit', disFlag: 'isEdit' },
|
{ label: '删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' }
|
||||||
{ label: '删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' },
|
// { label: '批量删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' }
|
||||||
{ label: '批量删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' },
|
|
||||||
{ label: '导入', type: 'upload', disFlag: 'isEdit', icon: 'icon-import' },
|
|
||||||
{ label: '导出', type: 'download', disFlag: 'isEdit', icon: 'icon-export' },
|
|
||||||
{ label: '上传', type: 'upload', disFlag: 'isEdit', icon: 'icon-upload' },
|
|
||||||
{ label: '下载', type: 'download', disFlag: 'isEdit', icon: 'icon-download' },
|
|
||||||
{ label: '下发', type: 'xf', disFlag: 'isControl' },
|
|
||||||
{ label: '批量下载', type: 'download', disFlag: 'isEdit', icon: 'icon-download' },
|
|
||||||
{ label: '下载模版', type: 'downTemplate', disFlag: 'isControl', icon: 'icon-download' },
|
|
||||||
{ label: '重置密码', type: 'reset', disFlag: 'isEdit' },
|
|
||||||
{ label: '派发', type: 'distribute', disFlag: 'isControl' },
|
|
||||||
{ label: '处理', type: 'dealWith', disFlag: 'isControl' },
|
|
||||||
{ label: '审核', type: 'audit', disFlag: 'isControl' },
|
|
||||||
{ label: '标记为已读', type: 'setTagR', disFlag: 'isControl', icon: 'icon-chulizhuangtai' },
|
|
||||||
{ label: '标记为已处理', type: 'setTagD', disFlag: 'isControl' },
|
|
||||||
{ label: '启动', type: 'start', disFlag: 'isControl' },
|
|
||||||
{ label: '停止', type: 'stop', disFlag: 'isControl' },
|
|
||||||
{ label: '重启', type: 'restart', disFlag: 'isControl' },
|
|
||||||
{ label: '批量启动', type: 'start', disFlag: 'isControl' },
|
|
||||||
{ label: '批量停止', type: 'stop', disFlag: 'isControl' },
|
|
||||||
{ label: '批量重启', type: 'restart', disFlag: 'isControl' },
|
|
||||||
{ label: '监控日志', type: 'log', disFlag: 'isControl' },
|
|
||||||
{ label: '新建备份', type: 'backups', disFlag: 'isEdit', icon: 'icon-add' },
|
|
||||||
{ label: '导入备份', type: 'importBackups', disFlag: 'isEdit', icon: 'icon-import' },
|
|
||||||
{ label: '还原', type: 'restore', disFlag: 'isEdit' },
|
|
||||||
{ label: '批量启用', type: 'enable', disFlag: 'isControl', icon: 'icon-a-qiyong' },
|
|
||||||
{ label: '批量禁用', type: 'disable', disFlag: 'isControl', icon: 'icon-a-jinyong' }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
// arr:按钮数组
|
// arr:按钮数组
|
||||||
@@ -40,12 +14,12 @@ const btnList = [
|
|||||||
// isQuery: true;
|
// isQuery: true;
|
||||||
// }
|
// }
|
||||||
function getBtns(arr) {
|
function getBtns(arr) {
|
||||||
const permissions =
|
// const permissions =
|
||||||
JSON.parse(localStorage.getItem('user')).userExtend.role.permissionList[0] || {}
|
// JSON.parse(localStorage.getItem('user')).userExtend.role.permissionList[0] || {}
|
||||||
const btns = []
|
const btns = []
|
||||||
btnList.forEach((item) => {
|
btnList.forEach((item) => {
|
||||||
if (arr.includes(item.label)) {
|
if (arr.includes(item.label)) {
|
||||||
item.disabled = !Boolean(permissions[item.disFlag])
|
// item.disabled = !Boolean(permissions[item.disFlag])
|
||||||
btns.push(item)
|
btns.push(item)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -69,7 +69,7 @@ const colWidth = [
|
|||||||
{
|
{
|
||||||
label: '操作',
|
label: '操作',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 130,
|
width: 200,
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
resizable: false
|
resizable: false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,3 +13,146 @@ export const policyTypes = [
|
|||||||
// label: '峰谷套利2'
|
// label: '峰谷套利2'
|
||||||
// }
|
// }
|
||||||
]
|
]
|
||||||
|
|
||||||
|
export const deviceTypeList = [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
label: '变压器',
|
||||||
|
iconfont: 'icon-transformer'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
label: '配电柜',
|
||||||
|
iconfont: 'icon-dianpingcai'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 3,
|
||||||
|
label: '电表',
|
||||||
|
iconfont: 'icon-dianbiao'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 4,
|
||||||
|
label: '门禁',
|
||||||
|
iconfont: 'icon-menjin'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 5,
|
||||||
|
label: '空调',
|
||||||
|
iconfont: 'icon-kongdiaogongcheng'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 6,
|
||||||
|
label: '照明',
|
||||||
|
iconfont: 'icon-zhaomingdeng'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 7,
|
||||||
|
label: '消防',
|
||||||
|
iconfont: 'icon-xiaofang'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 8,
|
||||||
|
label: '光照监测设备',
|
||||||
|
iconfont: 'icon-guangzhaojianceshebei'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 9,
|
||||||
|
label: '风速监测设备',
|
||||||
|
iconfont: 'icon-fengsujiance'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 10,
|
||||||
|
label: '温湿度监测设备',
|
||||||
|
iconfont: 'icon-wenshidujiance'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 11,
|
||||||
|
label: '烟感监测设备',
|
||||||
|
iconfont: 'icon-yanganjiance'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 12,
|
||||||
|
label: '水浸传感器',
|
||||||
|
iconfont: 'icon-shuijinchuanganqiicon'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 13,
|
||||||
|
label: '视频监控',
|
||||||
|
iconfont: 'icon-shipinjiankong'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
label: '储能预制舱',
|
||||||
|
iconfont: 'icon-jizhuangxiang'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 101,
|
||||||
|
label: 'EMS',
|
||||||
|
iconfont: 'icon-quexianguanli'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 102,
|
||||||
|
label: 'PCS',
|
||||||
|
iconfont: 'icon-nengyuanguanli'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 103,
|
||||||
|
label: 'PCU',
|
||||||
|
iconfont: 'icon-bianyaqi'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 104,
|
||||||
|
label: 'BMS',
|
||||||
|
iconfont: 'icon-BMSchunengdianchi'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 105,
|
||||||
|
label: 'BCU',
|
||||||
|
iconfont: 'icon-L-chunengdianchicu'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 106,
|
||||||
|
label: '充电桩',
|
||||||
|
iconfont: 'icon-charging-pile-line'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 107,
|
||||||
|
label: '充电枪',
|
||||||
|
iconfont: 'icon-chongdianqiang'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 108,
|
||||||
|
label: '集中器',
|
||||||
|
iconfont: 'icon-jizhongqi'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 109,
|
||||||
|
label: '光伏板',
|
||||||
|
iconfont: 'icon-guangfuban'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 110,
|
||||||
|
label: '风力发电机光感',
|
||||||
|
iconfont: 'icon-zhuangjirongliang'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
// 日志类型：0:其它; 1:系统日志; 2:操作日志; 3:设备日志
|
||||||
|
|
||||||
|
export const logTypes = [
|
||||||
|
{
|
||||||
|
value: '0',
|
||||||
|
label: '其它'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '1',
|
||||||
|
label: '系统日志'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '2',
|
||||||
|
label: '操作日志'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '3',
|
||||||
|
label: '设备日志'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|||||||
116
web/src/utils/decorator.js
Normal file
116
web/src/utils/decorator.js
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
let validateRulesObj = {
|
||||||
|
phone: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
|
||||||
|
if (value === '') {
|
||||||
|
return Promise.resolve()
|
||||||
|
} else if (!reg.test(value)) {
|
||||||
|
return Promise.reject(new Error('请输入正确的手机号码'))
|
||||||
|
}
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
const reg =
|
||||||
|
/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
|
||||||
|
if (!reg.test(value)) {
|
||||||
|
return Promise.reject(new Error('请输入正确的邮箱'))
|
||||||
|
}
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
pwd: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
const reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/
|
||||||
|
if (!reg.test(value)) {
|
||||||
|
return Promise.reject(new Error('请输入密码,密码由6-20位字母、字符或数字组成'))
|
||||||
|
}
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新密码与旧密码是否一致校验
|
||||||
|
checkOpwd: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
// 获取旧密码
|
||||||
|
let opwd = this.props.form.getFieldValue('oldPsd')
|
||||||
|
if (!(opwd && opwd !== value)) {
|
||||||
|
return Promise.reject(new Error('旧密码与新密码一致'))
|
||||||
|
} else {
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
gphone: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
const reg = /^([0-9]{3,4}-)?[0-9]{7,8}$/
|
||||||
|
if (!reg.test(value)) {
|
||||||
|
return Promise.reject(new Error('请输入正确的固定电话'))
|
||||||
|
} else {
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
lng: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
const reg =
|
||||||
|
/^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/
|
||||||
|
if (value !== '' && value !== null && value !== undefined) {
|
||||||
|
if (!reg.test(value)) {
|
||||||
|
return Promise.reject(new Error('经度整数部分为-180 至 180,小数部分为0到6位!'))
|
||||||
|
} else {
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
lat: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
const reg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/
|
||||||
|
if (value !== '' && value !== null && value !== undefined) {
|
||||||
|
if (!reg.test(value)) {
|
||||||
|
return Promise.reject(new Error('纬度整数部分为-90 至 90,小数部分为0到6位!'))
|
||||||
|
} else {
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default validateRulesObj
|
||||||
59
web/src/utils/notification.js
Normal file
59
web/src/utils/notification.js
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import { notification } from 'ant-design-vue'
|
||||||
|
import { h } from 'vue'
|
||||||
|
import {
|
||||||
|
CheckCircleFilled,
|
||||||
|
CloseCircleFilled,
|
||||||
|
ExclamationCircleFilled
|
||||||
|
} from '@ant-design/icons-vue'
|
||||||
|
|
||||||
|
// name:页面名称，角色、人员、系统等
|
||||||
|
// type：add，edit，del，detail
|
||||||
|
// status：success，error，warning
|
||||||
|
// desc: 描述
|
||||||
|
const option = {
|
||||||
|
names: {
|
||||||
|
user: '用户管理'
|
||||||
|
},
|
||||||
|
types: {
|
||||||
|
// isDealWith: '标记为已处理',
|
||||||
|
// isRead: '标记为已读'
|
||||||
|
},
|
||||||
|
status: { success: '成功', error: '失败', warning: '警告' }
|
||||||
|
}
|
||||||
|
const notiInfo = {
|
||||||
|
success: {
|
||||||
|
iconMessage: '成功通知',
|
||||||
|
icon: CheckCircleFilled,
|
||||||
|
iconColor: 'color:#065758',
|
||||||
|
iconClass: 'notification-success-class'
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
iconMessage: '失败通知',
|
||||||
|
icon: CloseCircleFilled,
|
||||||
|
iconColor: 'color:#ca4d2a',
|
||||||
|
iconClass: 'notification-error-class'
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
iconMessage: '警告通知',
|
||||||
|
icon: ExclamationCircleFilled,
|
||||||
|
iconColor: 'color:#FF921B',
|
||||||
|
iconClass: 'notification-warning-class'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const openNotification = ({ name, type, status, desc = '' }) => {
|
||||||
|
notification[status]({
|
||||||
|
placement: 'bottomRight',
|
||||||
|
message: notiInfo[status].iconMessage,
|
||||||
|
description: desc || option.names[name] + option.types[type] + option.status[status],
|
||||||
|
icon: () =>
|
||||||
|
h(notiInfo[status].icon, {
|
||||||
|
style: notiInfo[status].iconColor
|
||||||
|
}),
|
||||||
|
style: {
|
||||||
|
minWidth: '400px'
|
||||||
|
},
|
||||||
|
class: notiInfo[status].iconClass,
|
||||||
|
duration: 2
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export default openNotification
|
||||||
@@ -80,6 +80,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '场站管理',
|
name: '场站管理',
|
||||||
|
path: '/station',
|
||||||
icon: 'icon-caidanguanli'
|
icon: 'icon-caidanguanli'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -92,15 +93,15 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '设备管理',
|
name: '设备管理',
|
||||||
icon: 'icon-rizhiguanli'
|
path: '/device '
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '告警日志',
|
name: '告警日志',
|
||||||
icon: 'icon-rizhiguanli'
|
path: '/log'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '系统日志',
|
name: '系统日志',
|
||||||
icon: 'icon-rizhiguanli'
|
path: '/syslog'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -126,8 +127,9 @@ export default {
|
|||||||
this.$router.push(menu.path)
|
this.$router.push(menu.path)
|
||||||
},
|
},
|
||||||
subMenuClick(subMenu) {
|
subMenuClick(subMenu) {
|
||||||
|
debugger
|
||||||
this.subCurrentKey = subMenu.path
|
this.subCurrentKey = subMenu.path
|
||||||
this.$router.push(subMenu.path)
|
this.$router.push('/system'+subMenu.path)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -197,6 +199,7 @@ export default {
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
margin: 0 20px;
|
||||||
}
|
}
|
||||||
.active {
|
.active {
|
||||||
border: 1px solid $border-color;
|
border: 1px solid $border-color;
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="search-item">
|
<div class="search-item">
|
||||||
<span>场站切换</span>
|
<span>场站切换</span>
|
||||||
<a-select v-model:value="selectStation" style="width: 220px">
|
<a-select v-model:value="selectStationId" style="width: 220px" @change="getStationChange">
|
||||||
<a-select-option v-for="station in stations" :value="station['station_id']"
|
<a-select-option v-for="station in stations" :value="station['station_id']"
|
||||||
>{{ station.name }}
|
>{{ station.name }}
|
||||||
</a-select-option>
|
</a-select-option>
|
||||||
@@ -14,8 +14,8 @@
|
|||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="search-item">
|
<div class="search-item">
|
||||||
<span>运行模式</span>
|
<span>运行模式</span>
|
||||||
<a-select v-model:value="value" style="width: 220px">
|
<a-select v-model:value="workMode" style="width: 220px">
|
||||||
<a-select-option value="lucy">Lucy</a-select-option>
|
<a-select-option :value="item.value" v-for="item in workModes">{{ item.label }}</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="search-item">
|
<div class="search-item">
|
||||||
@@ -38,8 +38,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<videos v-if="systemType == 4" />
|
<videos v-if="systemType == 4" :station-id="selectStationId"/>
|
||||||
<device v-else :station-id="selectStation" :system-type="systemType"/>
|
<device v-else :station-id="selectStationId" :system-type="systemType"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -62,7 +62,7 @@ export default {
|
|||||||
systemType: 1,
|
systemType: 1,
|
||||||
value: [],
|
value: [],
|
||||||
stations: [],
|
stations: [],
|
||||||
selectStation:'',
|
selectStationId:'',
|
||||||
systems: [
|
systems: [
|
||||||
{
|
{
|
||||||
name: '储能系统',
|
name: '储能系统',
|
||||||
@@ -91,27 +91,80 @@ export default {
|
|||||||
// {
|
// {
|
||||||
// name: "储能系统4",
|
// name: "储能系统4",
|
||||||
// }
|
// }
|
||||||
]
|
],
|
||||||
|
workMode:'',
|
||||||
|
workModes:[
|
||||||
|
// 0：手动，1：峰谷套利，2：增网配容，3：应急供电，4：并网保电，5：自定时段
|
||||||
|
{
|
||||||
|
value:0,
|
||||||
|
label:'手动'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:1,
|
||||||
|
label:'峰谷套利'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:2,
|
||||||
|
label:'增网配容'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:3,
|
||||||
|
label:'应急供电'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:4,
|
||||||
|
label:'并网保电'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:5,
|
||||||
|
label:'自定时段'
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
deviceGroup:[]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getStations()
|
this.getStations()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
//场站切换
|
||||||
|
getStationChange(val){
|
||||||
|
console.log(val);
|
||||||
|
this.getStationAttr()
|
||||||
|
|
||||||
|
},
|
||||||
//查询场站列表
|
//查询场站列表
|
||||||
async getStations() {
|
async getStations() {
|
||||||
try {
|
try {
|
||||||
const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
|
const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
|
||||||
|
|
||||||
console.log(res)
|
|
||||||
this.stations = res.data
|
this.stations = res.data
|
||||||
this.selectStation=this.stations[0]['station_id']
|
this.selectStationId=this.stations[0]['station_id']
|
||||||
|
this.getStationAttr()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.stations = []
|
this.stations = []
|
||||||
this.selectStation=''
|
this.selectStationId=''
|
||||||
this.$message.error(error.message)
|
this.$message.error(error.message)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 查询场站的参数
|
||||||
|
async getStationAttr(){
|
||||||
|
try {
|
||||||
|
const res = await getReq('/queryStationOverview', { station_id: this.selectStationId })
|
||||||
|
|
||||||
|
res.data.device_group.forEach((Element,index) => {
|
||||||
|
this.systems[index].num=Element.count
|
||||||
|
this.systems[index].power=Element.power
|
||||||
|
});
|
||||||
|
this.workMode=res.data.work_mode
|
||||||
|
} catch (error) {
|
||||||
|
this.deviceGroup = []
|
||||||
|
this.workMode=''
|
||||||
|
// this.$message.error(error.errmsg)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
chooseStation(system) {
|
chooseStation(system) {
|
||||||
this.systemType = system.systemType
|
this.systemType = system.systemType
|
||||||
@@ -166,6 +219,7 @@ export default {
|
|||||||
width: calc(100% - 30px);
|
width: calc(100% - 30px);
|
||||||
margin: 0 15px 15px 15px;
|
margin: 0 15px 15px 15px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
min-width: 150px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -189,8 +243,9 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
width: 87%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="predict">
|
<div class="predict">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData"/>
|
<predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData" ref="chartRef1"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData"/>
|
<predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData" ref="chartRef2"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData"/>
|
<predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData" ref="chartRef3"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -24,7 +24,8 @@ export default {
|
|||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chartOptions:[ {
|
chartOptions:[
|
||||||
|
{
|
||||||
title: '储能充放电预测',
|
title: '储能充放电预测',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth:false,
|
smooth:false,
|
||||||
@@ -32,8 +33,8 @@ export default {
|
|||||||
infoKeys: [
|
infoKeys: [
|
||||||
|
|
||||||
{
|
{
|
||||||
key: 'key1',
|
key: 'W_store_in',
|
||||||
label: '电压',
|
label: '充电电量',
|
||||||
seriesOptions:{
|
seriesOptions:{
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
symbolSize: 8,
|
symbolSize: 8,
|
||||||
@@ -47,9 +48,8 @@ export default {
|
|||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'key2',
|
key: 'W_store_ou',
|
||||||
label: '电流',
|
label: '储能放电电量',
|
||||||
|
|
||||||
seriesOptions:{
|
seriesOptions:{
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
symbolSize: 8,
|
symbolSize: 8,
|
||||||
@@ -72,8 +72,8 @@ export default {
|
|||||||
infoKeys: [
|
infoKeys: [
|
||||||
|
|
||||||
{
|
{
|
||||||
key: 'key1',
|
key: 'W_charge',
|
||||||
label: '电压',
|
label: '运行负荷',
|
||||||
seriesOptions:{
|
seriesOptions:{
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
symbolSize: 8,
|
symbolSize: 8,
|
||||||
@@ -86,21 +86,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
|
||||||
key: 'key2',
|
|
||||||
label: '电流',
|
|
||||||
|
|
||||||
seriesOptions:{
|
|
||||||
symbol: 'circle',
|
|
||||||
symbolSize: 8,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#3E7EEF' // 充电电量线条颜色
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
color: '#3E7EEF' // 充电电量线条颜色
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -112,32 +98,32 @@ export default {
|
|||||||
infoKeys: [
|
infoKeys: [
|
||||||
|
|
||||||
{
|
{
|
||||||
key: 'key1',
|
key: 'P_solar',
|
||||||
label: '电压',
|
label: '发电功率',
|
||||||
seriesOptions:{
|
seriesOptions:{
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
symbolSize: 8,
|
symbolSize: 8,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#00FDF9' // 充电电量线条颜色
|
color: '#3F80F2' // 充电电量线条颜色
|
||||||
},
|
},
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#00FDF9' // 充电电量线条颜色
|
color: '#3F80F2' // 充电电量线条颜色
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'key2',
|
key: 'W_solar',
|
||||||
label: '电流',
|
label: '发电量',
|
||||||
|
|
||||||
seriesOptions:{
|
seriesOptions:{
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
symbolSize: 8,
|
symbolSize: 8,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#3E7EEF' // 充电电量线条颜色
|
color: '#7747E8' // 充电电量线条颜色
|
||||||
},
|
},
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#3E7EEF' // 充电电量线条颜色
|
color: '#7747E8' // 充电电量线条颜色
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -145,119 +131,51 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
chartData: [
|
chartData: {
|
||||||
{
|
xdata:[],
|
||||||
date: '2025-08-30',
|
ydata:{}
|
||||||
key1: 10,
|
|
||||||
key2: 10,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-29',
|
|
||||||
key1: 8,
|
|
||||||
key2: 5,
|
|
||||||
key3: 5,
|
|
||||||
key4: 7
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-28',
|
|
||||||
key1: 10,
|
|
||||||
key2: 10,
|
|
||||||
key3: 20,
|
|
||||||
key4: 4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-27',
|
|
||||||
key1: 10,
|
|
||||||
key2: 10,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-26',
|
|
||||||
key1: 10,
|
|
||||||
key2: 5,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-25',
|
|
||||||
key1: 10,
|
|
||||||
key2: 5,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-24',
|
|
||||||
key1: 10,
|
|
||||||
key2: 6,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-23',
|
|
||||||
key1: 10,
|
|
||||||
key2: 7,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-22',
|
|
||||||
key1: 10,
|
|
||||||
key2: 0,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-21',
|
|
||||||
key1: 10,
|
|
||||||
key2: 0,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-20',
|
|
||||||
key1: 10,
|
|
||||||
key2: 0,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-19',
|
|
||||||
key1: 10,
|
|
||||||
key2: 0,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-18',
|
|
||||||
key1: 10,
|
|
||||||
key2: 0,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-08-17',
|
|
||||||
key1: 10,
|
|
||||||
key2: 0,
|
|
||||||
key3: 15,
|
|
||||||
key4: 5
|
|
||||||
}
|
}
|
||||||
],
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
this.getData()
|
this.getData()
|
||||||
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
generateTimePoints() {
|
||||||
|
const timePoints = []
|
||||||
|
|
||||||
|
for (let hour = 0; hour <= 24; hour++) {
|
||||||
|
for (let minute = 0; minute < 60; minute += 10) {
|
||||||
|
// 处理24:00的特殊情况
|
||||||
|
if (hour === 24 && minute === 0) {
|
||||||
|
timePoints.push('24:00')
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化小时和分钟，确保两位数
|
||||||
|
const formattedHour = hour.toString().padStart(2, '0')
|
||||||
|
const formattedMinute = minute.toString().padStart(2, '0')
|
||||||
|
|
||||||
|
timePoints.push(`${formattedHour}:${formattedMinute}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return timePoints
|
||||||
|
},
|
||||||
async getData(){
|
async getData(){
|
||||||
const date={}
|
|
||||||
try {
|
try {
|
||||||
const res=await getReq('/queryPredictionDay',{date:'2025-09-04'})
|
const res=await getReq('/queryPredictionDetail')
|
||||||
console.log(res);
|
this.chartData.ydata=res.data
|
||||||
|
this.chartData.xdata = this.generateTimePoints()
|
||||||
|
|
||||||
|
this.$refs.chartRef1.initCharts()
|
||||||
|
this.$refs.chartRef2.initCharts()
|
||||||
|
this.$refs.chartRef3.initCharts()
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
|||||||
@@ -515,7 +515,7 @@ export default {
|
|||||||
// end_date: getDateDaysAgo(0)
|
// end_date: getDateDaysAgo(0)
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
const res = await getReq('/api/queryStatDayList', query)
|
const res = await getReq('/queryStatDayList', query)
|
||||||
if (res.errcode === 0) {
|
if (res.errcode === 0) {
|
||||||
this.echartsInfo[this.activeKey].chartData = res.data
|
this.echartsInfo[this.activeKey].chartData = res.data
|
||||||
console.log(
|
console.log(
|
||||||
@@ -539,7 +539,7 @@ export default {
|
|||||||
pageNumber: currentInfo.pageOption.page
|
pageNumber: currentInfo.pageOption.page
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
const res = await getReq('/api/queryStatDayList', query)
|
const res = await getReq('/queryStatDayList', query)
|
||||||
if (res.errcode === 0) {
|
if (res.errcode === 0) {
|
||||||
currentInfo.tableData = res.data
|
currentInfo.tableData = res.data
|
||||||
currentInfo.pageOption = {
|
currentInfo.pageOption = {
|
||||||
|
|||||||
@@ -130,7 +130,7 @@ export default {
|
|||||||
async getOnLineList() {
|
async getOnLineList() {
|
||||||
try {
|
try {
|
||||||
// token: 用户TOKEN
|
// token: 用户TOKEN
|
||||||
const res = await getReq('/api/queryStatSystem')
|
const res = await getReq('/queryStatSystem')
|
||||||
if (res.errcode === 0) {
|
if (res.errcode === 0) {
|
||||||
this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
|
this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
|
||||||
this.deviceInfo.onLine.runDays = getRunDays(res.data.launch_date)
|
this.deviceInfo.onLine.runDays = getRunDays(res.data.launch_date)
|
||||||
@@ -155,7 +155,7 @@ export default {
|
|||||||
stationId: this.stationId,
|
stationId: this.stationId,
|
||||||
category: 0
|
category: 0
|
||||||
}
|
}
|
||||||
const res = await getReq('/api/queryStatTotal', query)
|
const res = await getReq('/queryStatTotal', query)
|
||||||
if (res.errcode === 0) {
|
if (res.errcode === 0) {
|
||||||
this.deviceInfo.allTotal = res.data
|
this.deviceInfo.allTotal = res.data
|
||||||
const { income_charge: incomeCharge, income_elect: incomeElect } =
|
const { income_charge: incomeCharge, income_elect: incomeElect } =
|
||||||
@@ -201,7 +201,7 @@ export default {
|
|||||||
end_date: getDateDaysAgo(0)
|
end_date: getDateDaysAgo(0)
|
||||||
}
|
}
|
||||||
const arr = { 1: 'energy', 2: 'charge', 3: 'pv' }
|
const arr = { 1: 'energy', 2: 'charge', 3: 'pv' }
|
||||||
const res = await getReq('/api/queryStatDayList', query)
|
const res = await getReq('/queryStatDayList', query)
|
||||||
if (res.errcode === 0) {
|
if (res.errcode === 0) {
|
||||||
this.list.forEach((item) => {
|
this.list.forEach((item) => {
|
||||||
this.deviceInfo[arr[category]] = res.data
|
this.deviceInfo[arr[category]] = res.data
|
||||||
|
|||||||
209
web/src/views/system/alarmLog.vue
Normal file
209
web/src/views/system/alarmLog.vue
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
<template>
|
||||||
|
<div class="alarmLog">
|
||||||
|
<searchBox
|
||||||
|
:btn-option-list="btnOptionList"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
></searchBox>
|
||||||
|
|
||||||
|
<div class="content-table">
|
||||||
|
<ComTable
|
||||||
|
:columns="columns"
|
||||||
|
:table-data="tableData"
|
||||||
|
@handlePagesizeChange="handlePagesizeChange"
|
||||||
|
ref="comTable"
|
||||||
|
:table-option="tableOption"
|
||||||
|
:page-option="pageOption"
|
||||||
|
:table-h="tableH"
|
||||||
|
>
|
||||||
|
<template #type="record">
|
||||||
|
<span>{{ ['其它','系统日志','操作日志','设备日志'][record.type] }}</span>
|
||||||
|
</template>
|
||||||
|
<template #status="record">
|
||||||
|
<span><a-tag :color="record.status ? 'red' : 'green'">{{
|
||||||
|
record.status ? '异常' : '正常'
|
||||||
|
}}</a-tag></span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #action="record">
|
||||||
|
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||||
|
</template>
|
||||||
|
</ComTable>
|
||||||
|
</div>
|
||||||
|
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||||
|
<!-- action:edit add -->
|
||||||
|
<EditCom
|
||||||
|
:record="formState"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
type="alarmLog"
|
||||||
|
:action="formStatus"
|
||||||
|
></EditCom>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { columnList, alarmlogOptions } from '../../../public/config/columnList'
|
||||||
|
import { getReq, postReq } from '@/request/api.js'
|
||||||
|
import EditCom from '@/components/EditCom.vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { createVNode } from 'vue'
|
||||||
|
import { Modal } from 'ant-design-vue'
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
components: {
|
||||||
|
EditCom,
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formModal: false,
|
||||||
|
formState: {},
|
||||||
|
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||||
|
pageOption: {
|
||||||
|
pageSize: 10,
|
||||||
|
page: 1
|
||||||
|
},
|
||||||
|
btnOptionList: [],
|
||||||
|
paramsDate: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
let info = []
|
||||||
|
let col = columnList.find((i) => i.page == 'alarmLog').columns
|
||||||
|
if (col.length) {
|
||||||
|
col.forEach((item) => {
|
||||||
|
info.push(this.$setWidth(item))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.columns = info
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.operateList = this.$getBtns(['查看', '删除'])
|
||||||
|
// this.btnOptionList = this.$getBtns(['新增'])
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async getList() {
|
||||||
|
this.$refs.comTable.loading = true
|
||||||
|
|
||||||
|
const { page, pageSize } = this.pageOption
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
...this.paramsDate,
|
||||||
|
page_size: pageSize,
|
||||||
|
page
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await getReq('/querySystemLogList', params)
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$refs.comTable.loading = false
|
||||||
|
|
||||||
|
this.tableData = res.data
|
||||||
|
|
||||||
|
this.pageOption = {
|
||||||
|
page: res.page,
|
||||||
|
pageSize: res.page_size,
|
||||||
|
count: res.count
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const err = { tip: res.errmsg }
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
//统一处理报错提示
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async operateForm(type, record = {}) {
|
||||||
|
this.formStatus = type
|
||||||
|
|
||||||
|
if(type=='edit'||type=='read'){
|
||||||
|
await this.getRuleFormInfo(record)
|
||||||
|
|
||||||
|
this.formModal = true
|
||||||
|
this.formState = record
|
||||||
|
}else if(type=='del'){
|
||||||
|
this.handleDelete([record.device_id],this.getList)
|
||||||
|
}else if(type=='back'){
|
||||||
|
this.formModal = false
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
// 删除操作
|
||||||
|
async handleDelete(id,callback) {
|
||||||
|
const that = this
|
||||||
|
Modal.confirm({
|
||||||
|
title: '你确认删除数据吗?',
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
|
||||||
|
async onOk() {
|
||||||
|
try {
|
||||||
|
const res = await getReq('/deleteUser',{user_id:id})
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$message.success(res.errmsg)
|
||||||
|
this.pageOption.page=1
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
throw res
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
// console.log("Cancel");
|
||||||
|
},
|
||||||
|
class: 'test'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async getRuleFormInfo(record) {
|
||||||
|
|
||||||
|
|
||||||
|
const row = record || {}
|
||||||
|
|
||||||
|
for (let e of alarmlogOptions) {
|
||||||
|
for (let i of e.list) {
|
||||||
|
e.ruleForm[i.key] = row[i.key] || ''
|
||||||
|
// if (i.key === 'id') {
|
||||||
|
// e.ruleForm.id = row.id
|
||||||
|
// } else if (i.key === 'is_open') {
|
||||||
|
// e.ruleForm.is_open = Boolean(row.is_open)
|
||||||
|
// } else {
|
||||||
|
// e.ruleForm[i.key] = row[i.key] || ''
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (i.key === 'station_id') {
|
||||||
|
// i.list = this.stations
|
||||||
|
// }
|
||||||
|
// if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
|
||||||
|
// const attrs=JSON.parse(row.attrs||"{}")
|
||||||
|
// e.ruleForm[i.key] = attrs[i.key]
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handlePagesizeChange(pageOption) {
|
||||||
|
this.pageOption.pageSize = pageOption.pageSize
|
||||||
|
this.pageOption.page = pageOption.page
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.alarmLog {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.content-table {
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
241
web/src/views/system/device.vue
Normal file
241
web/src/views/system/device.vue
Normal file
@@ -0,0 +1,241 @@
|
|||||||
|
<template>
|
||||||
|
<div class="device">
|
||||||
|
<searchBox
|
||||||
|
:btn-option-list="btnOptionList"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
></searchBox>
|
||||||
|
|
||||||
|
<div class="content-table">
|
||||||
|
<ComTable
|
||||||
|
:columns="columns"
|
||||||
|
:table-data="tableData"
|
||||||
|
@handlePagesizeChange="handlePagesizeChange"
|
||||||
|
ref="comTable"
|
||||||
|
:table-option="tableOption"
|
||||||
|
:page-option="pageOption"
|
||||||
|
>
|
||||||
|
<template #type="record">
|
||||||
|
<span>{{ getType(record.type) }}</span>
|
||||||
|
</template>
|
||||||
|
<template #isEnable="record">
|
||||||
|
<span><a-tag :color="record.is_open ? 'green' : 'red'">{{
|
||||||
|
record.is_open ? '启用' : '禁用'
|
||||||
|
}}</a-tag></span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #action="record">
|
||||||
|
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||||
|
</template>
|
||||||
|
</ComTable>
|
||||||
|
</div>
|
||||||
|
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||||
|
<!-- action:edit add -->
|
||||||
|
<EditCom
|
||||||
|
:record="formState"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
type="device"
|
||||||
|
:action="formStatus"
|
||||||
|
></EditCom>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { columnList, deviceOptions } from '../../../public/config/columnList'
|
||||||
|
import { getReq, postReq } from '@/request/api.js'
|
||||||
|
import ComTable from '@/components/ComTable'
|
||||||
|
import OperateCom from '@/components/OperateCom'
|
||||||
|
import EditCom from '@/components/EditCom.vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { createVNode } from 'vue'
|
||||||
|
import { Modal } from 'ant-design-vue'
|
||||||
|
import searchBox from '@/components/SearchBox.vue'
|
||||||
|
import {deviceTypeList} from '@/utils/config'
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
components: {
|
||||||
|
searchBox,
|
||||||
|
EditCom,
|
||||||
|
ComTable,
|
||||||
|
OperateCom
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
deviceTypeList,
|
||||||
|
formModal: false,
|
||||||
|
formState: {},
|
||||||
|
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||||
|
pageOption: {
|
||||||
|
pageSize: 10,
|
||||||
|
page: 1
|
||||||
|
},
|
||||||
|
btnOptionList: [],
|
||||||
|
paramsDate: {},
|
||||||
|
tableData:[],
|
||||||
|
tableOption:{},
|
||||||
|
stations:[],//场站列表
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
let info = []
|
||||||
|
let col = columnList.find((i) => i.page == 'device').columns
|
||||||
|
if (col.length) {
|
||||||
|
col.forEach((item) => {
|
||||||
|
info.push(this.$setWidth(item))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.columns = info
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||||
|
this.btnOptionList = this.$getBtns(['新增'])
|
||||||
|
this.getList()
|
||||||
|
this.getStations()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
//查询场站列表
|
||||||
|
async getStations() {
|
||||||
|
this.stations=[]
|
||||||
|
try {
|
||||||
|
const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
|
||||||
|
|
||||||
|
this.stations = res.data
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
this.stations = []
|
||||||
|
|
||||||
|
}
|
||||||
|
return
|
||||||
|
},
|
||||||
|
//获取设备类型
|
||||||
|
getType(type){
|
||||||
|
const deviceType = this.deviceTypeList.find((item) => item.value == type).label||''
|
||||||
|
return deviceType
|
||||||
|
|
||||||
|
},
|
||||||
|
async getList() {
|
||||||
|
this.$refs.comTable.loading = true
|
||||||
|
|
||||||
|
const { page, pageSize } = this.pageOption
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
...this.paramsDate,
|
||||||
|
page_size: pageSize,
|
||||||
|
page
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await getReq('/queryDeviceList', params)
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$refs.comTable.loading = false
|
||||||
|
|
||||||
|
this.tableData = res.data
|
||||||
|
|
||||||
|
this.pageOption = {
|
||||||
|
page: res.page,
|
||||||
|
pageSize: res.page_size,
|
||||||
|
count: res.count
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const err = { tip: res.errmsg }
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
//统一处理报错提示
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async operateForm(type, record = {}) {
|
||||||
|
this.formStatus = type
|
||||||
|
if(type=='add'){
|
||||||
|
this.formModal = true
|
||||||
|
this.formState = {}
|
||||||
|
this.getRuleFormInfo()
|
||||||
|
}else if(type=='edit'||type=='read'){
|
||||||
|
await this.getRuleFormInfo(record)
|
||||||
|
|
||||||
|
this.formModal = true
|
||||||
|
this.formState = record
|
||||||
|
}else if(type=='del'){
|
||||||
|
this.handleDelete([record.device_id],this.getList)
|
||||||
|
}else if(type=='back'){
|
||||||
|
this.formModal = false
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
// 删除操作
|
||||||
|
async handleDelete(id,callback) {
|
||||||
|
const that = this
|
||||||
|
Modal.confirm({
|
||||||
|
title: '你确认删除数据吗?',
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
|
||||||
|
async onOk() {
|
||||||
|
try {
|
||||||
|
const res = await getReq('/deleteDevice',{device_id:id})
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$message.success(res.errmsg)
|
||||||
|
this.pageOption.page=1
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
throw res
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
},
|
||||||
|
class: 'test'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async getRuleFormInfo(record) {
|
||||||
|
|
||||||
|
|
||||||
|
const row = record || {}
|
||||||
|
|
||||||
|
for (let e of deviceOptions) {
|
||||||
|
for (let i of e.list) {
|
||||||
|
if (i.key === 'id') {
|
||||||
|
e.ruleForm.id = row.id
|
||||||
|
} else if (i.key === 'is_open') {
|
||||||
|
e.ruleForm.is_open = Boolean(row.is_open)
|
||||||
|
} else {
|
||||||
|
e.ruleForm[i.key] = row[i.key] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if (i.key === 'station_id') {
|
||||||
|
i.list = this.stations
|
||||||
|
}
|
||||||
|
if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
|
||||||
|
const attrs=JSON.parse(row.attrs||"{}")
|
||||||
|
e.ruleForm[i.key] = attrs[i.key]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handlePagesizeChange(pageOption) {
|
||||||
|
this.pageOption.pageSize = pageOption.pageSize
|
||||||
|
this.pageOption.page = pageOption.page
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.device {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.content-table {
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
216
web/src/views/system/log.vue
Normal file
216
web/src/views/system/log.vue
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<div class="alarmlog">
|
||||||
|
<searchBox
|
||||||
|
:btn-option-list="btnOptionList"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
></searchBox>
|
||||||
|
|
||||||
|
<div class="content-table">
|
||||||
|
<ComTable
|
||||||
|
:columns="columns"
|
||||||
|
:table-data="tableData"
|
||||||
|
@handlePagesizeChange="handlePagesizeChange"
|
||||||
|
ref="comTable"
|
||||||
|
:table-option="tableOption"
|
||||||
|
:page-option="pageOption"
|
||||||
|
:table-h="tableH"
|
||||||
|
>
|
||||||
|
<template #gender="record">
|
||||||
|
<!-- 0:女; 1:男 -->
|
||||||
|
<span>{{ ['女', '男'][record.gender] }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #action="record">
|
||||||
|
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||||
|
</template>
|
||||||
|
</ComTable>
|
||||||
|
</div>
|
||||||
|
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||||
|
<!-- action:edit add -->
|
||||||
|
<EditCom
|
||||||
|
:record="record"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
type="user"
|
||||||
|
:action="formStatus"
|
||||||
|
></EditCom>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { columnList, userOptions } from '../../../public/config/columnList'
|
||||||
|
import { getReq, postReq } from '@/request/api.js'
|
||||||
|
|
||||||
|
import EditCom from '@/components/EditCom.vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { createVNode } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
components: {
|
||||||
|
EditCom
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formModal: false,
|
||||||
|
formState: {},
|
||||||
|
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||||
|
pageOption: {
|
||||||
|
pageSize: 10,
|
||||||
|
page: 1
|
||||||
|
},
|
||||||
|
btnOptionList: [],
|
||||||
|
paramsDate: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
let info = []
|
||||||
|
let col = columnList.find((i) => i.page == 'alarmlog').columns
|
||||||
|
if (col.length) {
|
||||||
|
col.forEach((item) => {
|
||||||
|
info.push(this.$setWidth(item))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.columns = info
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||||
|
this.btnOptionList = this.$getBtns(['新增'])
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async getList() {
|
||||||
|
this.$refs.comTable.loading = true
|
||||||
|
|
||||||
|
const { page, pageSize } = this.pageOption
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
...this.paramsDate,
|
||||||
|
page_size: pageSize,
|
||||||
|
page
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await getReq('/queryUserList', params)
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$refs.comTable.loading = false
|
||||||
|
|
||||||
|
this.tableData = res.data
|
||||||
|
|
||||||
|
this.pageOption = {
|
||||||
|
page: res.page,
|
||||||
|
pageSize: res.page_size,
|
||||||
|
count: res.count
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const err = { tip: res.errmsg }
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
//统一处理报错提示
|
||||||
|
}
|
||||||
|
},
|
||||||
|
operateForm(type, record = {}) {
|
||||||
|
console.log(record, record.id, 'rrrrrrrrrr')
|
||||||
|
this.formStatus = type
|
||||||
|
switch (type) {
|
||||||
|
case 'add':
|
||||||
|
this.formModal = true
|
||||||
|
this.formState = {}
|
||||||
|
this.getRuleFormInfo()
|
||||||
|
|
||||||
|
break
|
||||||
|
case 'edit':
|
||||||
|
case 'read':
|
||||||
|
this.formModal = true
|
||||||
|
this.formState = record
|
||||||
|
this.getRuleFormInfo(record)
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'del':
|
||||||
|
this.handleDelete([record.user_id], this.getList)
|
||||||
|
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'back':
|
||||||
|
this.formModal = false
|
||||||
|
this.getList()
|
||||||
|
break
|
||||||
|
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除操作
|
||||||
|
async handleDelete(id, callback) {
|
||||||
|
const that = this
|
||||||
|
Modal.confirm({
|
||||||
|
title: '你确认删除数据吗?',
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
|
||||||
|
async onOk() {
|
||||||
|
try {
|
||||||
|
const res = await getReq('/deleteUser', { user_id: id })
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$message.success(res.errmsg)
|
||||||
|
this.pageOption.page = 1
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
throw res
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
// console.log("Cancel");
|
||||||
|
},
|
||||||
|
class: 'test'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async getRuleFormInfo(record) {
|
||||||
|
function getInfo(data, url) {
|
||||||
|
return new Promise((reslove, reject) => {
|
||||||
|
getReq(data, url).then((res) => {
|
||||||
|
reslove(res.data)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let row = {}
|
||||||
|
if (record && record.user_id) {
|
||||||
|
// row = await getInfo({ id: record.id },'/queryUserList')
|
||||||
|
this.record = record
|
||||||
|
row = record
|
||||||
|
// this.type='edit'
|
||||||
|
}
|
||||||
|
userOptions.forEach((e, index) => {
|
||||||
|
e.list.forEach((i) => {
|
||||||
|
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||||
|
e.ruleForm.id = row.id
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlePagesizeChange(pageOption) {
|
||||||
|
this.pageOption.pageSize = pageOption.pageSize
|
||||||
|
this.pageOption.page = pageOption.page
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.user {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.content-table {
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -20,32 +20,7 @@
|
|||||||
}}</a-tag>
|
}}</a-tag>
|
||||||
</template>
|
</template>
|
||||||
<template #action="record">
|
<template #action="record">
|
||||||
<a-button
|
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||||
type="primary"
|
|
||||||
size="small"
|
|
||||||
@click="operateForm('read', record)"
|
|
||||||
style="margin-left: 10px"
|
|
||||||
>查看</a-button
|
|
||||||
>
|
|
||||||
<a-button
|
|
||||||
type="primary"
|
|
||||||
size="small"
|
|
||||||
@click="operateForm('edit', record)"
|
|
||||||
class="btn-edit"
|
|
||||||
style="margin-left: 10px"
|
|
||||||
>修改</a-button
|
|
||||||
>
|
|
||||||
<a-popconfirm
|
|
||||||
title="确认要删除数据吗?"
|
|
||||||
ok-text="确认"
|
|
||||||
cancel-text="取消"
|
|
||||||
@confirm="operateForm('del', record)"
|
|
||||||
@cancel="() => {}"
|
|
||||||
>
|
|
||||||
<a-button type="primary" size="small" class="btn-del" style="margin-left: 10px"
|
|
||||||
>删除</a-button
|
|
||||||
>
|
|
||||||
</a-popconfirm>
|
|
||||||
</template>
|
</template>
|
||||||
</ComTable>
|
</ComTable>
|
||||||
</div>
|
</div>
|
||||||
@@ -67,6 +42,8 @@
|
|||||||
import policyForm from '@/components/system/policyForm.vue'
|
import policyForm from '@/components/system/policyForm.vue'
|
||||||
import { getReq } from '@/request/api'
|
import { getReq } from '@/request/api'
|
||||||
import { policyTypes } from '@/utils/config'
|
import { policyTypes } from '@/utils/config'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { createVNode } from 'vue'
|
||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
components: { policyForm },
|
components: { policyForm },
|
||||||
@@ -75,8 +52,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
formModal: false,
|
formModal: false,
|
||||||
btnOptionList: [
|
btnOptionList: [
|
||||||
{ label: '新增', icon: 'icon-tianjia', type: 'add' }
|
|
||||||
// { label: '删除', icon: 'icon-tianjia', type: 'del' }
|
|
||||||
],
|
],
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
@@ -144,10 +119,13 @@ export default {
|
|||||||
},
|
},
|
||||||
tableH: '',
|
tableH: '',
|
||||||
formState: {},
|
formState: {},
|
||||||
formStatus: 'add' //表单状态辑状态 add:新增 edit:编辑
|
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||||
|
operateList:[]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||||
|
this.btnOptionList = this.$getBtns(['新增'])
|
||||||
this.getTableList()
|
this.getTableList()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -185,7 +163,7 @@ export default {
|
|||||||
this.formState = record
|
this.formState = record
|
||||||
break
|
break
|
||||||
case 'del':
|
case 'del':
|
||||||
this.handleDelete(record)
|
this.handleDelete(record.policy_id)
|
||||||
break
|
break
|
||||||
case 'edit':
|
case 'edit':
|
||||||
this.formModal = true
|
this.formModal = true
|
||||||
@@ -195,19 +173,45 @@ export default {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async handleDelete(record) {
|
// async handleDelete(record) {
|
||||||
|
// try {
|
||||||
|
// const res = await getReq('/deletePolicy', {
|
||||||
|
// policy_id: record['policy_id']
|
||||||
|
// })
|
||||||
|
// if (res.errcode == 0) {
|
||||||
|
// this.$message.success('删除成功')
|
||||||
|
// this.getTableList()
|
||||||
|
// }
|
||||||
|
// } catch (error) {
|
||||||
|
// this.$message.success(error)
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// 删除操作
|
||||||
|
async handleDelete(id) {
|
||||||
|
const that = this
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: '你确认删除数据吗?',
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
|
||||||
|
async onOk() {
|
||||||
try {
|
try {
|
||||||
const res = await getReq('/deletePolicy', {
|
const res = await getReq('/deletePolicy', {
|
||||||
policy_id: record['policy_id']
|
policy_id: id
|
||||||
})
|
})
|
||||||
if (res.errcode == 0) {
|
if (res.errcode == 0) {
|
||||||
this.$message.success('删除成功')
|
that.$message.success('删除成功')
|
||||||
this.getTableList()
|
that.getTableList()
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.$message.success(error)
|
that.$message.success(error)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onCancel() {
|
||||||
|
// console.log("Cancel");
|
||||||
|
},
|
||||||
|
class: 'test'
|
||||||
|
})
|
||||||
|
},
|
||||||
closeModal(flag = false) {
|
closeModal(flag = false) {
|
||||||
this.formModal = false
|
this.formModal = false
|
||||||
if (flag) {
|
if (flag) {
|
||||||
@@ -235,7 +239,7 @@ export default {
|
|||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
.content-table {
|
.content-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 92px);
|
height: calc(100% - 90px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
228
web/src/views/system/role.vue
Normal file
228
web/src/views/system/role.vue
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
<template>
|
||||||
|
<div class="role">
|
||||||
|
<searchBox
|
||||||
|
:btn-option-list="btnOptionList"
|
||||||
|
@onSearch="onSearch"
|
||||||
|
:search-options="searchOptions"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
></searchBox>
|
||||||
|
|
||||||
|
<div class="content-table">
|
||||||
|
<ComTable
|
||||||
|
:columns="columns"
|
||||||
|
:table-data="tableData"
|
||||||
|
@handlePagesizeChange="handlePagesizeChange"
|
||||||
|
ref="comTable"
|
||||||
|
:table-option="tableOption"
|
||||||
|
:page-option="pageOption"
|
||||||
|
:table-h="tableH"
|
||||||
|
>
|
||||||
|
<template #is_open="record">
|
||||||
|
<!-- 0:禁用; 1:启用 -->
|
||||||
|
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
|
||||||
|
</template>
|
||||||
|
<template #permission="record">
|
||||||
|
<!-- 0:禁用; 1:启用 -->
|
||||||
|
<span>{{record.permission.map(item=>item.name).toString() }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #action="record">
|
||||||
|
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||||
|
</template>
|
||||||
|
</ComTable>
|
||||||
|
</div>
|
||||||
|
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||||
|
<!-- action:edit add -->
|
||||||
|
<EditCom
|
||||||
|
:record="record"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
type="role"
|
||||||
|
:action="formStatus"
|
||||||
|
></EditCom>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { columnList, roleOptions } from '../../../public/config/columnList'
|
||||||
|
import { getReq, postReq } from '@/request/api.js'
|
||||||
|
import ComTable from '@/components/ComTable'
|
||||||
|
import OperateCom from '@/components/OperateCom'
|
||||||
|
import EditCom from '@/components/EditCom.vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { createVNode } from 'vue'
|
||||||
|
import { Modal } from 'ant-design-vue'
|
||||||
|
import searchBox from '@/components/SearchBox.vue'
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
components: {
|
||||||
|
searchBox,
|
||||||
|
EditCom,
|
||||||
|
ComTable,
|
||||||
|
OperateCom
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formModal: false,
|
||||||
|
formState: {},
|
||||||
|
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||||
|
pageOption: {
|
||||||
|
pageSize: 10,
|
||||||
|
page: 1
|
||||||
|
},
|
||||||
|
btnOptionList: [],
|
||||||
|
paramsDate: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
let info = []
|
||||||
|
let col = columnList.find((i) => i.page == 'role').columns
|
||||||
|
if (col.length) {
|
||||||
|
col.forEach((item) => {
|
||||||
|
info.push(this.$setWidth(item))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.columns = info
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||||
|
this.btnOptionList = this.$getBtns(['新增'])
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async getList() {
|
||||||
|
this.$refs.comTable.loading = true
|
||||||
|
|
||||||
|
const { page, pageSize } = this.pageOption
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
...this.paramsDate,
|
||||||
|
page_size: pageSize,
|
||||||
|
page
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await getReq('/queryRoleList', params)
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$refs.comTable.loading = false
|
||||||
|
|
||||||
|
this.tableData = res.data
|
||||||
|
|
||||||
|
this.pageOption = {
|
||||||
|
page: res.page,
|
||||||
|
pageSize: res.page_size,
|
||||||
|
count: res.count
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const err = { tip: res.errmsg }
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
//统一处理报错提示
|
||||||
|
}
|
||||||
|
},
|
||||||
|
operateForm(type, record = {}) {
|
||||||
|
console.log(record,record.id,'rrrrrrrrrr')
|
||||||
|
this.formStatus = type
|
||||||
|
switch (type) {
|
||||||
|
case 'add':
|
||||||
|
this.formModal = true
|
||||||
|
this.formState = {}
|
||||||
|
this.getRuleFormInfo()
|
||||||
|
|
||||||
|
break
|
||||||
|
case 'edit':
|
||||||
|
case 'read':
|
||||||
|
this.formModal = true
|
||||||
|
this.formState = record
|
||||||
|
this.getRuleFormInfo(record)
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'del':
|
||||||
|
this.handleDelete([record.role_id],this.getList)
|
||||||
|
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'back':
|
||||||
|
this.formModal = false
|
||||||
|
this.getList()
|
||||||
|
break
|
||||||
|
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除操作
|
||||||
|
async handleDelete(id,callback) {
|
||||||
|
const that = this
|
||||||
|
Modal.confirm({
|
||||||
|
title: '你确认删除数据吗?',
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
|
||||||
|
async onOk() {
|
||||||
|
try {
|
||||||
|
const res = await getReq('/deleteRole',{role_id:id})
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$message.success(res.errmsg)
|
||||||
|
this.pageOption.page=1
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
throw res
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
// console.log("Cancel");
|
||||||
|
},
|
||||||
|
class: 'test'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async getRuleFormInfo(record) {
|
||||||
|
function getInfo(data, url) {
|
||||||
|
return new Promise((reslove, reject) => {
|
||||||
|
getReq(data, url).then((res) => {
|
||||||
|
reslove(res.data)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let row = {}
|
||||||
|
if (record && record.role_id) {
|
||||||
|
// row = await getInfo({ id: record.id },'/queryroleList')
|
||||||
|
this.record = record
|
||||||
|
row = record
|
||||||
|
// this.type='edit'
|
||||||
|
}
|
||||||
|
roleOptions.forEach((e, index) => {
|
||||||
|
e.list.forEach((i) => {
|
||||||
|
|
||||||
|
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||||
|
e.ruleForm.id = row.id
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlePagesizeChange(pageOption) {
|
||||||
|
this.pageOption.pageSize = pageOption.pageSize
|
||||||
|
this.pageOption.page = pageOption.page
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.role {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.content-table {
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
30
web/src/views/system/service.vue
Normal file
30
web/src/views/system/service.vue
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div >
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
228
web/src/views/system/station.vue
Normal file
228
web/src/views/system/station.vue
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
<template>
|
||||||
|
<div class="station">
|
||||||
|
<searchBox
|
||||||
|
:btn-option-list="btnOptionList"
|
||||||
|
@onSearch="onSearch"
|
||||||
|
:search-options="searchOptions"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
></searchBox>
|
||||||
|
|
||||||
|
<div class="content-table">
|
||||||
|
<ComTable
|
||||||
|
:columns="columns"
|
||||||
|
:table-data="tableData"
|
||||||
|
@handlePagesizeChange="handlePagesizeChange"
|
||||||
|
ref="comTable"
|
||||||
|
:table-option="tableOption"
|
||||||
|
:page-option="pageOption"
|
||||||
|
:table-h="tableH"
|
||||||
|
>
|
||||||
|
<template #is_open="record">
|
||||||
|
<!-- 0:禁用; 1:启用 -->
|
||||||
|
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
|
||||||
|
</template>
|
||||||
|
<template #permission="record">
|
||||||
|
<!-- 0:禁用; 1:启用 -->
|
||||||
|
<span>{{record.permission.map(item=>item.name).toString() }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #action="record">
|
||||||
|
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||||
|
</template>
|
||||||
|
</ComTable>
|
||||||
|
</div>
|
||||||
|
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||||
|
<!-- action:edit add -->
|
||||||
|
<EditCom
|
||||||
|
:record="record"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
type="station"
|
||||||
|
:action="formStatus"
|
||||||
|
></EditCom>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { columnList, stationOptions } from '../../../public/config/columnList'
|
||||||
|
import { getReq, postReq } from '@/request/api.js'
|
||||||
|
import ComTable from '@/components/ComTable'
|
||||||
|
import OperateCom from '@/components/OperateCom'
|
||||||
|
import EditCom from '@/components/EditCom.vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { createVNode } from 'vue'
|
||||||
|
import { Modal } from 'ant-design-vue'
|
||||||
|
import searchBox from '@/components/SearchBox.vue'
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
components: {
|
||||||
|
searchBox,
|
||||||
|
EditCom,
|
||||||
|
ComTable,
|
||||||
|
OperateCom
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formModal: false,
|
||||||
|
formState: {},
|
||||||
|
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||||
|
pageOption: {
|
||||||
|
pageSize: 10,
|
||||||
|
page: 1
|
||||||
|
},
|
||||||
|
btnOptionList: [],
|
||||||
|
paramsDate: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
let info = []
|
||||||
|
let col = columnList.find((i) => i.page == 'station').columns
|
||||||
|
if (col.length) {
|
||||||
|
col.forEach((item) => {
|
||||||
|
info.push(this.$setWidth(item))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.columns = info
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||||
|
this.btnOptionList = this.$getBtns(['新增'])
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async getList() {
|
||||||
|
this.$refs.comTable.loading = true
|
||||||
|
|
||||||
|
const { page, pageSize } = this.pageOption
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
...this.paramsDate,
|
||||||
|
page_size: pageSize,
|
||||||
|
page
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await getReq('/queryStationList', params)
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$refs.comTable.loading = false
|
||||||
|
|
||||||
|
this.tableData = res.data
|
||||||
|
|
||||||
|
this.pageOption = {
|
||||||
|
page: res.page,
|
||||||
|
pageSize: res.page_size,
|
||||||
|
count: res.count
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const err = { tip: res.errmsg }
|
||||||
|
throw err
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
//统一处理报错提示
|
||||||
|
}
|
||||||
|
},
|
||||||
|
operateForm(type, record = {}) {
|
||||||
|
console.log(record,record.id,'rrrrrrrrrr')
|
||||||
|
this.formStatus = type
|
||||||
|
switch (type) {
|
||||||
|
case 'add':
|
||||||
|
this.formModal = true
|
||||||
|
this.formState = {}
|
||||||
|
this.getRuleFormInfo()
|
||||||
|
|
||||||
|
break
|
||||||
|
case 'edit':
|
||||||
|
case 'read':
|
||||||
|
this.formModal = true
|
||||||
|
this.formState = record
|
||||||
|
this.getRuleFormInfo(record)
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'del':
|
||||||
|
this.handleDelete([record.station_id],this.getList)
|
||||||
|
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'back':
|
||||||
|
this.formModal = false
|
||||||
|
this.getList()
|
||||||
|
break
|
||||||
|
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除操作
|
||||||
|
async handleDelete(id,callback) {
|
||||||
|
const that = this
|
||||||
|
Modal.confirm({
|
||||||
|
title: '你确认删除数据吗?',
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
|
||||||
|
async onOk() {
|
||||||
|
try {
|
||||||
|
const res = await getReq('/deleteStation',{station_id:id})
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$message.success(res.errmsg)
|
||||||
|
this.pageOption.page=1
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
throw res
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
// console.log("Cancel");
|
||||||
|
},
|
||||||
|
class: 'test'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async getRuleFormInfo(record) {
|
||||||
|
function getInfo(data, url) {
|
||||||
|
return new Promise((reslove, reject) => {
|
||||||
|
getReq(data, url).then((res) => {
|
||||||
|
reslove(res.data)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let row = {}
|
||||||
|
if (record && record.station_id) {
|
||||||
|
row = await getInfo({ station_id: record.station_id},'/queryStationInfo')
|
||||||
|
this.record = record
|
||||||
|
row = record
|
||||||
|
// this.type='edit'
|
||||||
|
}
|
||||||
|
stationOptions.forEach((e, index) => {
|
||||||
|
e.list.forEach((i) => {
|
||||||
|
|
||||||
|
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||||
|
e.ruleForm.id = row.id
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlePagesizeChange(pageOption) {
|
||||||
|
this.pageOption.pageSize = pageOption.pageSize
|
||||||
|
this.pageOption.page = pageOption.page
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.station {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.content-table {
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -27,38 +27,51 @@
|
|||||||
</template>
|
</template>
|
||||||
</ComTable>
|
</ComTable>
|
||||||
</div>
|
</div>
|
||||||
|
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||||
|
<!-- action:edit add -->
|
||||||
|
<EditCom
|
||||||
|
:record="record"
|
||||||
|
@operateForm="operateForm"
|
||||||
|
type="user"
|
||||||
|
:action="formStatus"
|
||||||
|
></EditCom>
|
||||||
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { columnList } from '../../../public/config/columnList'
|
import { columnList, userOptions } from '../../../public/config/columnList'
|
||||||
import { mapState } from 'vuex'
|
|
||||||
import { getReq, postReq } from '@/request/api.js'
|
import { getReq, postReq } from '@/request/api.js'
|
||||||
import ComTable from '@/components/ComTable'
|
import ComTable from '@/components/ComTable'
|
||||||
import OperateCom from '@/components/OperateCom'
|
import OperateCom from '@/components/OperateCom'
|
||||||
|
import EditCom from '@/components/EditCom.vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { createVNode } from 'vue'
|
||||||
|
import { Modal } from 'ant-design-vue'
|
||||||
import searchBox from '@/components/SearchBox.vue'
|
import searchBox from '@/components/SearchBox.vue'
|
||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
components: {
|
components: {
|
||||||
searchBox,
|
searchBox,
|
||||||
|
EditCom,
|
||||||
ComTable,
|
ComTable,
|
||||||
OperateCom
|
OperateCom
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pageOption:{},
|
formModal: false,
|
||||||
|
formState: {},
|
||||||
|
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||||
|
pageOption: {
|
||||||
|
pageSize: 10,
|
||||||
|
page: 1
|
||||||
|
},
|
||||||
btnOptionList: [],
|
btnOptionList: [],
|
||||||
paramsDate:{
|
paramsDate: {}
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {},
|
||||||
...mapState(['page', 'detailType', 'type'])
|
|
||||||
},
|
|
||||||
created() {
|
created() {
|
||||||
let info = []
|
let info = []
|
||||||
let col = columnList.find((i) => i.page == 'user').columns
|
let col = columnList.find((i) => i.page == 'user').columns
|
||||||
@@ -71,8 +84,8 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.operateList = this.$getBtns(['查看', '编辑', '删除'])
|
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||||
this.btnOptionList = this.$getBtns(['新增', '批量删除'])
|
this.btnOptionList = this.$getBtns(['新增'])
|
||||||
this.getList()
|
this.getList()
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -89,7 +102,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await getReq('/api/queryUserList',params)
|
const res = await getReq('/queryUserList', params)
|
||||||
if (res.errcode === 0) {
|
if (res.errcode === 0) {
|
||||||
this.$refs.comTable.loading = false
|
this.$refs.comTable.loading = false
|
||||||
|
|
||||||
@@ -109,25 +122,29 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
operateForm(type, record = {}) {
|
operateForm(type, record = {}) {
|
||||||
|
console.log(record,record.id,'rrrrrrrrrr')
|
||||||
|
this.formStatus = type
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'detail':
|
case 'add':
|
||||||
this.$store.commit('updateState', {
|
this.formModal = true
|
||||||
detailType: 'edit', //edit or view
|
this.formState = {}
|
||||||
page: 'detail',
|
this.getRuleFormInfo()
|
||||||
title: '查看',
|
|
||||||
type: 'user'
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
break
|
||||||
|
case 'edit':
|
||||||
|
case 'read':
|
||||||
|
this.formModal = true
|
||||||
|
this.formState = record
|
||||||
this.getRuleFormInfo(record)
|
this.getRuleFormInfo(record)
|
||||||
break
|
break
|
||||||
|
|
||||||
|
case 'del':
|
||||||
|
this.handleDelete([record.user_id],this.getList)
|
||||||
|
|
||||||
|
break
|
||||||
|
|
||||||
case 'back':
|
case 'back':
|
||||||
this.$store.commit('updateState', {
|
this.formModal = false
|
||||||
page: 'main'
|
|
||||||
})
|
|
||||||
this.isShowFlag = false
|
|
||||||
this.getList()
|
this.getList()
|
||||||
break
|
break
|
||||||
|
|
||||||
@@ -135,6 +152,33 @@ export default {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 删除操作
|
||||||
|
async handleDelete(id,callback) {
|
||||||
|
const that = this
|
||||||
|
Modal.confirm({
|
||||||
|
title: '你确认删除数据吗?',
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
|
||||||
|
async onOk() {
|
||||||
|
try {
|
||||||
|
const res = await getReq('/deleteUser',{user_id:id})
|
||||||
|
if (res.errcode === 0) {
|
||||||
|
this.$message.success(res.errmsg)
|
||||||
|
this.pageOption.page=1
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
throw res
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
// console.log("Cancel");
|
||||||
|
},
|
||||||
|
class: 'test'
|
||||||
|
})
|
||||||
|
},
|
||||||
async getRuleFormInfo(record) {
|
async getRuleFormInfo(record) {
|
||||||
function getInfo(data, url) {
|
function getInfo(data, url) {
|
||||||
return new Promise((reslove, reject) => {
|
return new Promise((reslove, reject) => {
|
||||||
@@ -145,52 +189,36 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let row = {}
|
let row = {}
|
||||||
if (record.id) {
|
if (record && record.user_id) {
|
||||||
row = await getInfo({ id: record.id }, this.apiMethods[0].get)
|
// row = await getInfo({ id: record.id },'/queryUserList')
|
||||||
this.record = row
|
this.record = record
|
||||||
this.$store.commit('updateState', {
|
row = record
|
||||||
// 配电柜-集中器-查看
|
// this.type='edit'
|
||||||
title:
|
|
||||||
(row.cabinetName ? row.cabinetName + '-' : '') +
|
|
||||||
(row.name.split('集中器')[0] ? row.name.split('集中器')[0] : '') +
|
|
||||||
'集中器-查看'
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
let connectorType
|
userOptions.forEach((e, index) => {
|
||||||
cabinetOptions.forEach((e, index) => {
|
|
||||||
e.list.forEach((i) => {
|
e.list.forEach((i) => {
|
||||||
if (index == 1) {
|
|
||||||
// 集中器状态
|
|
||||||
if (i.key == 'ctrMode' || i.key == 'powerStatus') {
|
|
||||||
e.ruleForm[i.key] = row.deviceStatus.lightStatus[i.key]
|
|
||||||
} else {
|
|
||||||
e.ruleForm[i.key] = row.deviceStatus[i.key]
|
|
||||||
}
|
|
||||||
} else if (i.key == 'connectorType') {
|
|
||||||
connectorType = row.deviceExtend[i.key]
|
|
||||||
e.ruleForm[i.key] = row.deviceExtend[i.key]
|
|
||||||
} else {
|
|
||||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||||
e.ruleForm.id = row.id
|
e.ruleForm.id = row.id
|
||||||
}
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
// C型控制器，手自动状态和故障状态显示为“无”
|
|
||||||
if (connectorType == 1) {
|
|
||||||
cabinetOptions[1].ruleForm.status = 5
|
|
||||||
cabinetOptions[1].ruleForm.ctrMode = 5
|
|
||||||
}
|
|
||||||
this.isShowFlag = true
|
|
||||||
},
|
},
|
||||||
handlePagesizeChange(pageOption) {
|
handlePagesizeChange(pageOption) {
|
||||||
this.pageOption.pageSize = pageOption.pageSize
|
this.pageOption.pageSize = pageOption.pageSize
|
||||||
this.pageOption.page = pageOption.page
|
this.pageOption.page = pageOption.page
|
||||||
|
|
||||||
this.getList()
|
this.getList()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
.user {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.content-table {
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user