Skip to content

W
web-project
Commit 80ee880d authored by xuke's avatar xuke
Browse files
Options

Merge branch 'master' of ssh://gitlab.91isoft.com:10022/hikvision/web-project

parents a89502af 60f70b9c
Hide whitespace changes
Inline Side-by-side
Showing with 1084 additions and 1036 deletions
src/api/scheduling.js
View file @ 80ee880d
...@@ -55,12 +55,12 @@ export const getWeatherMagData = () => { // 获取气象干预数据 ...@@ -55,12 +55,12 @@ export const getWeatherMagData = () => { // 获取气象干预数据
return http.get(`/api/cusweather/getData`) return http.get(`/api/cusweather/getData`)
} }
export const alterWeatherMagData = params => { // 更新气象干预数据 export const alterWeatherMagData = params => { // 添加或修改气象干预数据/重新绑定换热站
return http.post(`/api/cusweather/SaveAll`, params) return http.post(`/api/cusweather/SaveAll`, params)
} }
export const getTransfer = param =>{ // 获取换热站列表 export const getTransfer = param =>{ // 获取换热站列表
return http.post(`\`/api/cusweather/getTransferIdsid=?${param}\``,param) return http.post(`/api/cusweather/getTransferIds?id=${param}`,param)
} }
export const getAnnualParam = ()=>{ // 获取年度参数列表 export const getAnnualParam = ()=>{ // 获取年度参数列表
...@@ -80,3 +80,14 @@ export const deleteAnnualParam = params =>{ // 删除年度参数 ...@@ -80,3 +80,14 @@ export const deleteAnnualParam = params =>{ // 删除年度参数
return http.post(`/api/Scheduling/BizHeatSet/Delete?Id=${params}`) return http.post(`/api/Scheduling/BizHeatSet/Delete?Id=${params}`)
} }
export const getPhenomenon = ()=>{ // 获取数据列表————天气工况
return http.post('/api/Scheduling/WeatherCondition/Get')
}
export const alterPhenomenon = params => { // 修改数据————天气工况
return http.post('/api/Scheduling/WeatherCondition/Update', params)
}
export const deletePhenomenon = params =>{ // 删除数据————天气工况
return http.post(`/api/Scheduling/WeatherCondition/Delete?Id=${params}`)
}
src/directive/dataSource.js 0 → 100644
View file @ 80ee880d
import { ref } from "vue";
import http from "@/api/http";
let api = ref("");
let source = ref([]);
let total = ref(0);
const getData = (params = {}) => {
http.get(api.value, params).then((res) => {
source.value = res.data;
console.log(source.value);
});
};
export default {
install(app) {
app.directive("dataSource", {
mounted(el, binding) {
api.value = binding.value;
getData();
},
updated(el, binding) {
console.log("updated");
},
});
},
};
export { source, total, getData };
src/views/SchedulingPage/AnnualParamPage.vue
View file @ 80ee880d
...@@ -48,7 +48,7 @@ function handleDelete(val) { ...@@ -48,7 +48,7 @@ function handleDelete(val) {
{ {
confirmButtonText:'确定', confirmButtonText:'确定',
cancelButtonText:'取消', cancelButtonText:'取消',
type:'Warning' type:'warning'
} }
).then(()=>{ ).then(()=>{
deleteAnnualParam(val.paramId).then(res=>{ deleteAnnualParam(val.paramId).then(res=>{
...@@ -158,7 +158,7 @@ function resetInput(){ ...@@ -158,7 +158,7 @@ function resetInput(){
<el-row first> <el-row first>
<el-col :span="8" col-label class="energy-type-class">节能等级：</el-col> <el-col :span="8" col-label class="energy-type-class">节能等级：</el-col>
<el-col :span="16" col-value> <el-col :span="16" col-value>
<el-select placeholder="" size="small" v-model="addForm.energyType" style="width: 370px"> <el-select placeholder="" size="small" v-model="reviseForm.energyType" style="width: 370px">
<el-option <el-option
v-for="item in energyTypeList" v-for="item in energyTypeList"
:key="item" :key="item"
......
src/views/SchedulingPage/PhenomenonPage.vue
View file @ 80ee880d
<template> <script setup>
<!-- 条件筛选卡片 --> import {onMounted, ref} from "vue";
<el-card class="card-contianer"> import {ElMessageBox} from "element-plus";
<div class="div-header"> import {getPhenomenon,alterPhenomenon,deletePhenomenon} from "@/api/scheduling.js"
<el-form-item>
<div>名称</div> const data = ref()
</el-form-item> const searchKey = ref('') // 查询参数
<el-form-item > const reviseWindowOpen = ref(false)
<el-input></el-input> const reviseForm = ref({}) // 修改表单
</el-form-item> const tableHeaderClass = data => { // 表头样式
<el-form-item> return 'table-header-class'
<el-button type="primary" @click="getdata" style="min-width: 70px;">查询</el-button> }
</el-form-item> const tableBodyClass = data => { // 表体样式
return 'table-body-class'
</div> }
</el-card>
<el-card class="moduleCard" :height="tableHeight" style="padding: 4px"> function revise(val){
<el-table :data="tableData" :height="tableHeight" :cell-style="setCellStyle" id="out-table" reviseForm.value = {...val}
border highlight-current-row :header-cell-style="setHeaderCellStyle" :header-cell-class-name="handleHeadAddClass" > reviseWindowOpen.value = true
<el-table-column prop="index" label="序号" fixed /> } // 修改按钮单击事件
<el-table-column prop="name" label="名称" fixed /> function omit(val){
<el-table-column prop="temperature" label="对应温度" fixed /> let id = val.phenomenonId
<el-table-column prop="desc" label="描述" fixed /> ElMessageBox.confirm(
<el-table-column prop="alarmMessage" label="操作" fixed > '点击确定后，该条数据将删除，是否继续？',
'Warning',
<el-button link type="primary" size="small" @click="dialogFormVisible = true"> {
修改 confirmButtonText:'确定',
</el-button> cancelButtonText:'取消',
<el-button link type="primary" size="small" @click="del">删除</el-button> type:'warning'
}
).then(()=>{
deletePhenomenon(id).then(res=>{
getData()
})
}).catch(err=>{})
} // 删除按钮单击事件
function handleClose(){
reviseWindowOpen.value = false
} // 关闭弹窗
function onReviseSubmit(){
alterPhenomenon(reviseForm.value).then(res=>{
getData()
reviseWindowOpen.value = false
})
} // 修改表单提交
onMounted(()=>{
getData()
})
function getData(){
getPhenomenon().then(res => {
data.value = res.data
})
}
</script>
<template>
<div class="phenomenon-container">
<div class="search-wrapper">
<el-row>
<el-col :span="8" label>名称：</el-col>
<el-col :span="16">
<el-input v-model="searchKey"/>
</el-col>
</el-row>
<el-button type="primary" class="add-search-btn">查询</el-button>
</div>
<div class="table-wrapper">
<el-table
:data="data"
stripe
border
style="width: 100%"
:header-cell-class-name="tableHeaderClass"
:row-class-name="tableBodyClass">
<el-table-column type="index" label="序号" align="center" width="100"/>
<el-table-column prop="phenomenonName" label="名称"/>
<el-table-column prop="phenomenonTemp" label="对应温度"/>
<el-table-column prop="phenomenonDesc" label="描述"/>
<el-table-column label="操作" width="190">
<template #default="scope">
<div class="table-operate-column">
<el-button link @click="revise(scope.row)" type="primary">修改</el-button>
<el-button link @click="omit(scope.row)" type="primary">删除</el-button>
</div>
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-card>
<el-footer style="height: 8px;">
<el-config-provider :locale="zhCn">
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
:page-sizes="[30, 40, 50, 100, 200, 300]" :small="true" :disabled="disabled" :background="background"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getdata" @current-change="getdata"
class="pagination" />
</el-config-provider>
</el-footer>
<div class="ams-dialog">
<el-dialog v-model="dialogFormVisible" title="天气工况设置修改" width="500">
<el-card>
<table
cellpadding="0"
cellspacing="1"
style="background-color: #99bbe8"
>
<tr>
<th style="width: 25%">名称</th>
<td style="width: 60%; margin:0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left">
<el-select v-model="form.region" placeholder="选择天气名称">
<el-option label="阴天" value="阴天" />
<el-option label="晴天" value="晴天" />
<el-option label="多云" value="多云" />
</el-select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th style="width: 25%">对应温度</th>
<td style="width: 60%; margin:0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left">
<el-input></el-input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th style="width: 25%">描述</th>
<td style="width: 60%; margin:0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left">
<el-input></el-input>
</td>
</tr>
</table>
</td>
</tr>
</table>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="dialogFormVisible = false">
保存
</el-button>
<el-button @click="dialogFormVisible = false">关闭</el-button>
</div>
</template>
</el-card>
</el-dialog>
</div> </div>
<div class="dialog-window">
<el-dialog
title="天气工况设置修改"
v-model="reviseWindowOpen"
width="700px"
:before-close="handleClose">
<template #default>
<el-row first>
<el-col :span="8" col-label class="energy-type-class">名称：</el-col>
<el-col :span="16" col-value>
<el-select placeholder="" size="small" v-model="reviseForm.phenomenonName" style="width: 370px">
<el-option value="晴天" label="晴天"/>
<el-option value="多云" label="多云"/>
<el-option value="阴天" label="阴天"/>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col :span="8" col-label>对应温度：</el-col>
<el-col :span="16" col-value>
<el-input v-model="reviseForm.phenomenonTemp" placeholder="" style="width: 370px"/>
</el-col>
</el-row>
<el-row>
<el-col :span="8" col-label>描述：</el-col>
<el-col :span="16" col-value>
<el-input v-model="reviseForm.phenomenonDesc" placeholder="" style="width: 370px"/>
</el-col>
</el-row>
</template>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onReviseSubmit">保存</el-button>
<el-button type="primary" @click="handleClose">关闭</el-button>
</div>
</template>
</el-dialog> <!-- 修改弹窗 -->
</div>
</div>
</template> </template>
<style lang="less" scoped>
<script lang="ts" setup> .phenomenon-container{
import {ref, reactive, onMounted, onUnmounted} from 'vue'; width: 100%;
import { ElMessage, ElMessageBox } from 'element-plus' margin: 4px;
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {useFloating} from "element-plus";
//分页设置
const currentPage = ref(1)
var pageSize = ref(30)
const disabled = ref(false)
const background = ref(false)
const total = ref(1)
const tableData = ref([
{
index:1,
name:'晴天',
temperature:1.00.toFixed(2),
desc:'晴天1'
},
{
index:2,
name:'阴天',
temperature:-3.00.toFixed(2),
desc:'阴天'
},
{
index:3,
name:'多云',
temperature:-1.00.toFixed(2),
desc:'多云'
}
]);
const tableHeight = ref(500);
const sortField = reactive({});
function setCellStyle({ row, column, rowIndex, columnIndex }) {
let css_color = {};
css_color['padding-left'] = '0px';
css_color['padding-right'] = '0px';
css_color['borderColor'] = '#97d5fd';
css_color['padding'] = '0px';
return css_color;
} }
function setHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
let css_color;
var backcolor = 'd9f1ff';
css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' };
var backcolor = 'd9f1ff';
css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' };
return css_color; .search-wrapper {
} width: 100%;
function handleHeadAddClass({ column }) { display: flex;
if (sortField[column.property]) { justify-content: start;
column.order = sortField[column.property]
}
} }
.search-wrapper .el-row {
function setContentHeight() { width: 50%;
tableHeight.value = window.innerHeight - 240; border: none;
display: flex;
align-items: center;
margin: 5px 10px 5px 5px;
} }
onMounted(() => {
window.addEventListener('resize', setContentHeight); .el-col[label] {
}) display: flex;
onUnmounted(() => { justify-content: end;
window.removeEventListener('resize', setContentHeight); align-items: center;
})
const dialogFormVisible = ref(false)
const form = reactive({
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
})
const del = ()=>{
ElMessageBox.confirm(
'您确定要删除此条数据吗？',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
ElMessage({
type: 'success',
message: '删除成功',
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '删除取消',
})
})
} }
</script>
<style lang="less" scoped>
.moduleCard {
width: auto;
overflow: auto;
//max-height: 540px;
padding: 0px;
::v-deep .el-card__body { .add-search-btn {
padding: 0px; margin: 5px 10px 5px 0;
}
} }
.pagination { :deep(.table-header-class) {
padding: 4px; text-align: center;
margin-left: 20px; font-size: 12px;
height: 30px; background-color: #c4d8f1 !important;
//background-color: #8939cf; color: #124c6a;
vertical-align: middle;
} }
:deep(.table-body-class) {
//鼠标所在行的颜色 font-size: 12px;
::v-deep .el-table__body tr:hover>td { color: black;
background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
} }
::v-deep .el-table__body tr.current-row>td { .table-operate-column {
background-color: #92cbf1 !important; display: flex;
justify-content: center;
align-items: center;
} }
.card-contianer { .table-operate-column .el-button {
width: auto; font-size: 12px;
height: 70px;
.div-header {
width: 100%;
display: flex;
margin: 20px;
}
} }
.el-form-item { ::v-deep .el-table__body tr:hover > td {
margin-top: -20px; background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
margin-right: 30px;
}
.el-tag--mini {
height: 21px !important
}
.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner{
height: 33px; //这里高度根据需求自己设定
}
.el-cascader__tags {
display: inline-flex;
margin-right: 10px;
flex-wrap: nowrap;
}
.contentBlock {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
overflow: auto;
}
table {
width: 100%;
} }
table,
tr, .el-row[first]{
th, border-top: 1px solid #a6c3e9;
td {
font-size: 14px;
margin: 0;
padding: 0;
} }
table { .el-row{
border-left: 1px solid #a6c3e9;
border-right: 1px solid #a6c3e9;
border-bottom: 1px solid #a6c3e9;
width: 100%; width: 100%;
} height: 35px;
table th { color: #124362;
}
.el-col[col-label]{
display: flex;
justify-content: end;
align-items: center;
border-right: 1px solid #a6c3e9;
background-color: #dfe8f6; background-color: #dfe8f6;
text-align: center; padding-right: 5px;
padding: 5px 10px;
}
table td {
text-align: center;
background-color: #ffffff;
padding: 5px 10px;
} }
.btngrounp { .el-col[col-value]{
width: 300px; display: flex;
justify-content: start;
align-items: center;
padding-left: 5px;
} }
.gc td { .el-input{
background-color: #a6ffa6; color: black;
height: 24px;
} }
.gc td:first-child {
background-color: #ffffff;
}
table.botList td {
width: 33%;
text-align: left;
font-weight: bolder;
}
</style> </style>
\ No newline at end of file
src/views/SchedulingPage/WeatherManagePage.vue
View file @ 80ee880d
<script setup> <script setup>
import {computed, isRef, onMounted, reactive, ref, shallowRef} from "vue"; import {computed, isRef, onMounted, reactive, ref, shallowRef} from "vue";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import ReviseWindow from "./weatherManageSub/ReviseWindow.vue"; import ReviseWindow from "./weatherManageSub/ReviseWindow.vue";
import BindWindow from "./weatherManageSub/BindWindow.vue"; import BindWindow from "./weatherManageSub/BindWindow.vue";
import {getWeatherMagData, alterWeatherMagData, getTransfer} from '@/api/scheduling.js' import {getWeatherMagData, alterWeatherMagData, getTransfer} from '@/api/scheduling.js'
...@@ -9,64 +8,52 @@ import AddWindow from "./weatherManageSub/AddWindow.vue"; ...@@ -9,64 +8,52 @@ import AddWindow from "./weatherManageSub/AddWindow.vue";
const data = ref() const data = ref()
const reviseWindowOpen = ref(false) // 修改按钮弹窗状态 const reviseWindowOpen = ref(false) // 修改按钮弹窗状态
const bindWindowOpen = ref(false) // 绑定按钮弹窗状态 const bindWindowOpen = ref(false) // 绑定按钮弹窗状态
const addWindowOpen = ref(false) const addWindowOpen = ref(false) // 新增按钮弹窗状态
const dependentSub = ref({}) // 弹窗数据 const dependentSub = ref({}) // 修改和绑定弹窗数据依赖
const tableHeaderClass = data => { // 表头样式 const tableHeaderClass = data => { // 表头样式
return 'table-header-class' return 'table-header-class'
} }
const tableBodyClass = data => { // 表体样式 const tableBodyClass = data => { // 表体样式
return 'table-body-class' return 'table-body-class'
} }
const revise = (row) => { // 修改按钮单击事件 const revise = (row) => { // 修改按钮单击事件
dependentSub.value = row dependentSub.value = row
reviseWindowOpen.value = true reviseWindowOpen.value = true
} }
const bind = (row) => { // 绑定按钮单击事件 const bind = (row) => { // 绑定按钮单击事件
getTransfer(row.customizeId).then(res => { // getTransfer(id).then(res=>{
console.log(res) // // console.log(res)
}) // })
dependentSub.value = row dependentSub.value = row
bindWindowOpen.value = true bindWindowOpen.value = true
} }
const confirmRevise = val => { // 修改弹窗确认按钮事件 const confirmRevise = val => { // 修改弹窗确认按钮事件
for (let i = 0; i < data.value.length; i++) { alterWeatherMagData(val).then(res=>{
if (data.value[i].customizeId === val.customizeId) { getData()
// data.value[i] = {...val} reviseWindowOpen.value = false
console.log(val) })
// alterWeatherMagData(val).then(res => {
// console.log(res)
// console.log("操作结果")
// }).catch(err=>{
// console.log("错误信息",err)
// })
break
}
}
reviseWindowOpen.value = false
} }
const confirmBind = val => { const confirmBind = val => {
console.log("处理换热站绑定")
bindWindowOpen.value = false bindWindowOpen.value = false
} }
onMounted(() => { onMounted(() => {
getData() getData()
}) })
function getData() { function getData() {
getWeatherMagData().then(res => { getWeatherMagData().then(res => {
data.value = res.data data.value = res.data
}) })
} }
function handleAddWinOpenClose(){ function handleAddWinOpenClose(){
addWindowOpen.value = false addWindowOpen.value = false
} }
function handleAdd(val){ function handleAdd(val){
addWindowOpen.value = false alterWeatherMagData(val).then(res=>{
} getData()
addWindowOpen.value = false
})
} // 新增数据提交
</script> </script>
<template> <template>
......
src/views/SchedulingPage/weatherManageSub/AddWindow.vue
View file @ 80ee880d
...@@ -10,38 +10,26 @@ const props = defineProps({ ...@@ -10,38 +10,26 @@ const props = defineProps({
}) })
const emit = defineEmits(['onCancel','onConfirm']) const emit = defineEmits(['onCancel','onConfirm'])
const addData = ref({ const addData = ref({
transfers:[], // 换热站
customizeName: '', // 自定义名称 customizeName: '', // 自定义名称
isFixed: false, // 干预模式：true 固定模式，false 气象仪模式 diffPercentage: '', // 自动偏差百分比
temperature: '', // 温度
wind: '', // 风速
illumination: '', // 光照 illumination: '', // 光照
sort: '', // 排序
isAuto: false, // 是否自动模式 isAuto: false, // 是否自动模式
diffPercentage: '', // 自动偏差百分比 isFixed: false, // 干预模式：true 固定模式，false 气象仪模式
timeoutMin: '', // 自动验证循环时间
tempRegulation: '', // 自动调节温度
operateTime:"", // 操作时间 operateTime:"", // 操作时间
sort: '', // 排序
tempRegulation: '', // 自动调节温度
temperature: '', // 温度
timeoutMin: '', // 自动验证循环时间
wind: '', // 风速
description: null, // 排序字段，全为Null description: null, // 排序字段，全为Null
updateNullField:"", // 无用，但不为空 updateNullFields:"", // 无用，但不为空
isActive:false, // 是否启用 isActive:false, // 是否启用
supplyId:'', // 供热站编号
}) })
const inputStyle = { const inputStyle = {
color: 'black', color: 'black',
height: '24px' height: '24px'
} }
const switchingisAuto = computed({
get() {
return addData.value.isAuto === '自动模式'
},
set(newValue) {
if (newValue) {
addData.value.isAuto = '自动模式'
} else {
addData.value.isAuto = '手动模式'
}
}
}) // 可写计算属性,手动、自动模式切换
function handleClose() { function handleClose() {
addData.value = { addData.value = {
customizeName: '', // 自定义名称 customizeName: '', // 自定义名称
...@@ -63,6 +51,7 @@ function handleClose() { ...@@ -63,6 +51,7 @@ function handleClose() {
emit('onCancel') emit('onCancel')
} }
function handleConfirm() { function handleConfirm() {
addData.value.operateTime = getCurrentDateTime()
emit('onConfirm',addData.value) emit('onConfirm',addData.value)
addData.value = { addData.value = {
customizeName: '', // 自定义名称 customizeName: '', // 自定义名称
...@@ -82,6 +71,17 @@ function handleConfirm() { ...@@ -82,6 +71,17 @@ function handleConfirm() {
supplyId:'', // 供热站编号 supplyId:'', // 供热站编号
} }
} }
function getCurrentDateTime() {
const now = new Date();
const year = now.getFullYear();
const month = ('0' + (now.getMonth() + 1)).slice(-2); // 月份从0开始，所以加1
const day = ('0' + now.getDate()).slice(-2);
const hours = ('0' + now.getHours()).slice(-2);
const minutes = ('0' + now.getMinutes()).slice(-2);
const seconds = ('0' + now.getSeconds()).slice(-2);
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} // 生成时间
</script> </script>
<template> <template>
...@@ -102,8 +102,8 @@ function handleConfirm() { ...@@ -102,8 +102,8 @@ function handleConfirm() {
<el-col :span="8" class="content-col-label">干预模式：</el-col> <el-col :span="8" class="content-col-label">干预模式：</el-col>
<el-col :span="16" class="content-col-value"> <el-col :span="16" class="content-col-value">
<el-radio-group v-model="addData.isFixed"> <el-radio-group v-model="addData.isFixed">
<el-radio value="固定模式" :style="{marginLeft:'10px'}">固定模式</el-radio> <el-radio :value="true" :style="{marginLeft:'10px'}">固定模式</el-radio>
<el-radio value="气象仪模式" :style="{marginLeft:'-15px'}">气象仪模式</el-radio> <el-radio :value="false" :style="{marginLeft:'-15px'}">气象仪模式</el-radio>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
</el-row> </el-row>
...@@ -134,7 +134,7 @@ function handleConfirm() { ...@@ -134,7 +134,7 @@ function handleConfirm() {
<el-row> <el-row>
<el-col :span="5" class="content-col-label">切换自动模式：</el-col> <el-col :span="5" class="content-col-label">切换自动模式：</el-col>
<el-col :span="7" class="content-col-value"> <el-col :span="7" class="content-col-value">
<el-checkbox :style="{marginLeft:'10px'}" v-model="switchingisAuto" label="自动模式"/> <el-checkbox :style="{marginLeft:'10px'}" v-model="addData.isAuto" label="自动模式"/>
</el-col> </el-col>
<el-col :span="5" class="content-col-label">自动偏差百分比（%d）：</el-col> <el-col :span="5" class="content-col-label">自动偏差百分比（%d）：</el-col>
<el-col :span="7" class="content-col-value"> <el-col :span="7" class="content-col-value">
......
src/views/home.vue
View file @ 80ee880d
<template> <template>
<div id="ams-container"> <div id="ams-container">
<div class="ams-aside" :style="{ width: menuWidth + 'px' }"> <div class="ams-aside" :style="{ width: menuWidth + 'px' }">
<div class="header" :style="{ width: menuWidth - 1 + 'px' }"> <div class="header" :style="{ width: menuWidth - 1 + 'px' }">
<img :style="{ height: amslogo_style.height + 'px', width: amslogo_style.width + 'px', paddingTop: 10 + 'px' }" <img
v-show="!$store.state.iscollapse" v-bind:src="amslogo" /> :style="{
<i @click="toggleLeft" class="collapse-menu" :style="{ width: 38 + 'px' }"> height: amslogo_style.height + 'px',
<el-icon v-if="!$store.state.iscollapse" size="20" style="vertical-align: middle"> width: amslogo_style.width + 'px',
<Fold /> paddingTop: 10 + 'px',
</el-icon> }"
<el-icon v-if="$store.state.iscollapse" size="20" style="vertical-align: middle"> v-show="!$store.state.iscollapse"
<Expand /> v-bind:src="amslogo"
</el-icon> />
</i> <i
</div> @click="toggleLeft"
<div class="ams-menu"> class="collapse-menu"
<DataMenu @mouseenter="enterMenu" @mouseleave="leaveMenu"></DataMenu> :style="{ width: 38 + 'px' }"
</div> >
<el-icon
v-if="!$store.state.iscollapse"
size="20"
style="vertical-align: middle"
>
<Fold />
</el-icon>
<el-icon
v-if="$store.state.iscollapse"
size="20"
style="vertical-align: middle"
>
<Expand />
</el-icon>
</i>
</div>
<div class="ams-menu">
<DataMenu @mouseenter="enterMenu" @mouseleave="leaveMenu"></DataMenu>
</div>
</div>
<div class="ams-container" :style="{ left: menuWidth - 2 + 'px' }">
<div class="ams-header" style="background-color: rgb(31, 63, 141)">
<div class="enterprise-name">
<el-dropdown
size="'large'"
style="margin-left: 10px; margin-top: 5px; color: blue; width: 100%"
@command="handleCommand"
:trigger="roleId > 2 ? 'contextmenu' : 'hover'"
>
<span class="el-dropdown-link">
<el-image
style="padding-top: 10px; height: 40px"
:src="currLogoUrl"
:fit="'full'"
/>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
style="font-size: 20px"
v-for="item in enterpriseList"
:key="item.enterpriseName"
:command="item.enterpriseName"
>{{ item.enterpriseName }}</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</div> </div>
<div class="ams-container" :style="{ left: menuWidth - 2 + 'px' }"> <div class="header-weather" id="">
<div class="ams-header" style=" background-color: rgb(31, 63, 141);"> <el-row style="left: 20%; widows: 60px; width: 80%">
<div class="enterprise-name"> <el-col :span="4" style="">
<el-dropdown size="'large'" style=" margin-left: 10px;margin-top: 5px;color:blue; width: 100%;" <div class="div-contain-titleAndText">
@command="handleCommand" :trigger="(roleId > 2) ? 'contextmenu' : 'hover'"> <el-image
<span class="el-dropdown-link"> style="
<el-image style="padding-top:10px ; height: 40px " :src="currLogoUrl" :fit="'full'" /> padding-top: 20px;
</span> width: 30px;
<template #dropdown> height: 30px;
<el-dropdown-menu> margin-right: 3px;
<el-dropdown-item style="font-size: 20px;" v-for="item in enterpriseList" "
:key="item.enterpriseName" :command="item.enterpriseName">{{ item.enterpriseName src="/imgs/home/wendu.png"
}}</el-dropdown-item> :fit="'fill'"
</el-dropdown-menu> />
</template> <div>
</el-dropdown> <div class="div-contain-title">室外温度</div>
<div class="div-contain-text-big">
{{
showWeatherData.weatherData
? showWeatherData.weatherData.temperature + "℃"
: "-"
}}
</div>
</div> </div>
<div class="header-weather" id=""> </div>
<el-row style="left: 20%;widows: 60px;width: 80%;"> </el-col>
<el-col :span="4" style=""> <el-col :span="5">
<div class="div-contain-titleAndText" style="padding-left: 15px">
<div class="div-contain-titleAndText"> <el-image
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" style="
src="/imgs/home/wendu.png" :fit="'fill'" /> padding-top: 20px;
<div> width: 30px;
<div class="div-contain-title"> 室外温度</div> height: 30px;
<div class="div-contain-text-big">{{ showWeatherData.weatherData.temperature + '℃' }} margin-right: 3px;
</div> "
</div> src="/imgs/home/guang.png"
</div> :fit="'fill'"
</el-col> />
<el-col :span="5"> <div>
<div class="div-contain-titleAndText" style="padding-left: 15px;"> <div class="div-contain-title">光照强度</div>
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" <div class="div-contain-text-big">
src="/imgs/home/guang.png" :fit="'fill'" /> {{
<div> showWeatherData.weatherData
<div class="div-contain-title">光照强度</div> ? showWeatherData.weatherData.illumination
<div class="div-contain-text-big">{{ showWeatherData.weatherData.illumination }} : ""
</div> }}
</div> </div>
</div>
</el-col>
<el-col :span="5">
<div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;"
src="/imgs/home/feng.png" :fit="'fill'" />
<div>
<div class="div-contain-title">风力等级</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.wind }}</div>
</div>
</div>
</el-col>
<el-col :span="5">
<div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;"
src="/imgs/home/fengxiang.png" :fit="'fill'" />
<div>
<div class="div-contain-title">风向</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.windDirection }}
</div>
</div>
</div>
</el-col>
<el-col :span="5">
<div class="div-contain-titleAndText">
<el-image
style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px; min-width: 30px;min-height: 30px;"
src="/imgs/home/time.png" :fit="'scale-down'" />
<div>
<div class="div-contain-title" style="">气象时间</div>
<div class="div-contain-text-small" style="line-height: 15px;">{{showWeatherData.weatherData.gatherTime}}</div>
</div>
</div>
</el-col>
</el-row>
</div> </div>
<div class="header-info"> </div>
<div class="h-link"> </el-col>
<a href="javascript:void(0)" @click="openMap" title="可视化界面"> <el-col :span="5">
<el-icon style="fontSize:30px;"> <div class="div-contain-titleAndText">
<MapLocation color="rgb(255,255,255)"/> <el-image
</el-icon> style="
</a> padding-top: 20px;
</div> width: 30px;
<div class="h-link" > height: 30px;
<a href="javascript:void(0)" :title="realName"> margin-right: 3px;
<el-icon style="fontSize:25px;"> "
<UserFilled color="rgb(161,187,214)"/> src="/imgs/home/feng.png"
</el-icon> :fit="'fill'"
/>
</a> <div>
</div> <div class="div-contain-title">风力等级</div>
<div class="h-link" > <div class="div-contain-text-big">
<a href="javascript:void(0)" title="系统设置"> {{
<el-icon style="fontSize:25px;"> showWeatherData.weatherData
<!-- <el-image src="/imgs/home/Sys.png" :fit="'fill'" /> --> ? showWeatherData.weatherData.wind
<Setting color="rgb(255,255,255)" /> : ""
</el-icon> }}
</a> </div>
</div>
<div class="h-link">
<a href="javascript:void(0)" @click="logout" title="退出系统">
<el-icon style="fontSize:25px;">
<!-- <el-image src="/imgs/home/exit.png" :fit="'fill'" /> -->
<SwitchButton color="rgb(255,255,255)" />
</el-icon>
</a>
</div>
</div> </div>
</div> </div>
<div class="ams-main"> </el-col>
<el-col :span="5">
<div class="div-contain-titleAndText">
<el-image
style="
padding-top: 20px;
width: 30px;
height: 30px;
margin-right: 3px;
"
src="/imgs/home/fengxiang.png"
:fit="'fill'"
/>
<div> <div>
<el-tabs v-model="activeTable" type="border-card" class="demo-tabs mytab" @tab-remove="removeTab" <div class="div-contain-title">风向</div>
@tab-change="changeTabsHandle"> <div class="div-contain-text-big">
<el-tab-pane :closable="item.path !== '/RealSupply'" v-for="item in editableTabs" {{
:key="item.path" :label="item.title" :name="item.path"> showWeatherData.weatherData
</el-tab-pane> ? showWeatherData.weatherData.windDirection
</el-tabs> : ""
}}
</div>
</div> </div>
<div :style="{ height: mainHeight + 'px' }"> <!--, width: mainWidth +'px' --> </div>
<el-scrollbar style="height: 100%"> </el-col>
<loading v-show="$store.getters.isLoading()"></loading> <el-col :span="5">
<!-- 主体内容 --> <div class="div-contain-titleAndText">
<router-view v-slot="{Component}"> <el-image
<!-- 页面缓存 --> style="
<keep-alive> padding-top: 20px;
<component ref="componentView" :is="Component"></component> width: 30px;
</keep-alive> height: 30px;
</router-view> margin-right: 3px;
</el-scrollbar> min-width: 30px;
min-height: 30px;
"
src="/imgs/home/time.png"
:fit="'scale-down'"
/>
<div>
<div class="div-contain-title" style="">气象时间</div>
<div class="div-contain-text-small" style="line-height: 15px">
{{
showWeatherData.weatherData
? showWeatherData.weatherData.gatherTime
: ""
}}
</div>
</div> </div>
</div> </div>
</el-col>
</el-row>
</div>
<div class="header-info">
<div class="h-link">
<a href="javascript:void(0)" @click="openMap" title="可视化界面">
<el-icon style="fontsize: 30px">
<MapLocation color="rgb(255,255,255)" />
</el-icon>
</a>
</div>
<div class="h-link">
<a href="javascript:void(0)" :title="realName">
<el-icon style="fontsize: 25px">
<UserFilled color="rgb(161,187,214)" />
</el-icon>
</a>
</div>
<div class="h-link">
<a href="javascript:void(0)" title="系统设置">
<el-icon style="fontsize: 25px">
<!-- <el-image src="/imgs/home/Sys.png" :fit="'fill'" /> -->
<Setting color="rgb(255,255,255)" />
</el-icon>
</a>
</div>
<div class="h-link">
<a href="javascript:void(0)" @click="logout" title="退出系统">
<el-icon style="fontsize: 25px">
<!-- <el-image src="/imgs/home/exit.png" :fit="'fill'" /> -->
<SwitchButton color="rgb(255,255,255)" />
</el-icon>
</a>
</div>
</div> </div>
</div>
<div class="ams-main">
<div>
<el-tabs
v-model="activeTable"
type="border-card"
class="demo-tabs mytab"
@tab-remove="removeTab"
@tab-change="changeTabsHandle"
>
<el-tab-pane
:closable="item.path !== '/RealSupply'"
v-for="item in editableTabs"
:key="item.path"
:label="item.title"
:name="item.path"
>
</el-tab-pane>
</el-tabs>
</div>
<div :style="{ height: mainHeight + 'px' }">
<!--, width: mainWidth +'px' -->
<el-scrollbar style="height: 100%">
<loading v-show="$store.getters.isLoading()"></loading>
<!-- 主体内容 -->
<router-view v-slot="{ Component }">
<!-- 页面缓存 -->
<keep-alive>
<component ref="componentView" :is="Component"></component>
</keep-alive>
</router-view>
</el-scrollbar>
</div>
</div>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped>
@import "../style/index.less"; @import "../style/index.less";
::v-deep .el-tabs--border-card { ::v-deep .el-tabs--border-card {
background: transparent; background: transparent;
border: none; border: none;
box-shadow: none; box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
height: 46px; height: 46px;
} }
::v-deep .el-tabs--border-card>.el-tabs__header { ::v-deep .el-tabs--border-card > .el-tabs__header {
background-color: transparent; background-color: transparent;
border-bottom: none; border-bottom: none;
} }
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item { ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
margin-left: 8px; margin-left: 8px;
margin-top: 5px; margin-top: 5px;
border: none; border: none;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
background-color: #F3F7FE; background-color: #f3f7fe;
padding: 4px 20px; padding: 4px 20px;
color: #0065D5; color: #0065d5;
line-height: 22px; line-height: 22px;
height: 40px; height: 40px;
} }
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active { ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
background-color: #0065D5; background-color: #0065d5;
color: #ffffff; color: #ffffff;
} }
</style> </style>
<script lang="ts"> <script lang="ts">
import loading from "../components/basic/RouterLoading.vue"; import loading from "../components/basic/RouterLoading.vue";
//import message from "./Message.vue"; //import message from "./Message.vue";
import { ElMessage, ElMessageBox, scrollbarEmits } from "element-plus"; import { ElMessage, ElMessageBox, scrollbarEmits } from "element-plus";
import { import {
defineComponent, defineComponent,
ref, ref,
reactive, reactive,
toRefs, toRefs,
getCurrentInstance, getCurrentInstance,
onBeforeMount onBeforeMount,
} from 'vue'; } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'; import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import store from "../store/index"; import store from "../store/index";
import http from '../api/http'; import http from "../api/http";
import { import {
Menu as IconMenu, Menu as IconMenu,
Location, Location,
Setting, Setting,
SwitchButton, SwitchButton,
UserFilled UserFilled,
} from '@element-plus/icons-vue'; } from "@element-plus/icons-vue";
import DataMenu from '../components/DataMenu.vue'; import DataMenu from "../components/DataMenu.vue";
import EventBus from '../utils/event-bus.js'; import EventBus from "../utils/event-bus.js";
import { ElNotification } from 'element-plus' import { ElNotification } from "element-plus";
//import {RoleEnum} from '../utils/enumData'; //import {RoleEnum} from '../utils/enumData';
var $this; var $this;
...@@ -222,356 +328,375 @@ var $interval; ...@@ -222,356 +328,375 @@ var $interval;
const enterpriseId = ref(); const enterpriseId = ref();
const componentView = ref(null); const componentView = ref(null);
localStorage.setItem('tabWidth',''); localStorage.setItem("tabWidth", "");
export default defineComponent({ export default defineComponent({
components: { components: {
DataMenu, DataMenu,
loading, loading,
//message, //message,
}, },
data() { data() {
return { return {
allTabs: true, allTabs: true,
leftTabs: true, leftTabs: true,
rightTabs: true, rightTabs: true,
otherTabs: true, otherTabs: true,
menuLeft: 0, menuLeft: 0,
menuTop: 0, menuTop: 0,
// contextMenuVisible: false, // 右键关闭显/隐 // contextMenuVisible: false, // 右键关闭显/隐
}; };
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer); clearInterval(this.timer);
}, },
/** /**
* 挂载钩子函数 * 挂载钩子函数
*/ */
mounted() { mounted() {
this.bindRightClickMenu(true); this.bindRightClickMenu(true);
}, },
setup(props, { emit }) { setup(props, { emit }) {
// 获取全局属性和方法 // 获取全局属性和方法
const { proxy } = getCurrentInstance()!; const { proxy } = getCurrentInstance()!;
// 菜单导航默认宽度 // 菜单导航默认宽度
const menuWidth = ref(200); const menuWidth = ref(200);
const contextMenuVisible = ref(false); const contextMenuVisible = ref(false);
const drawer_model = ref(false); const drawer_model = ref(false);
const messageModel = ref(false); const messageModel = ref(false);
const mainHeight = ref(800); const mainHeight = ref(800);
const mainWidth = ref(800); const mainWidth = ref(800);
const selectId = ref("1"); const selectId = ref("1");
// 【首页】标签序号(当前右键选中的菜单) // 【首页】标签序号(当前右键选中的菜单)
const selectMenuIndex = ref("0"); const selectMenuIndex = ref("0");
//tab选项与菜单联动功能 //tab选项与菜单联动功能
const currentMenuId = ref(0); const currentMenuId = ref(0);
let roleId = 8; let roleId = 8;
let realName = ref("--"); let realName = ref("--");
const userInfo = ref({}); const userInfo = ref({});
const visibleItem = reactive({ const visibleItem = reactive({
left: false, left: false,
right: false, right: false,
all: false, all: false,
other: false, other: false,
}); });
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
let _config = getCurrentInstance()!.appContext.config.globalProperties; let _config = getCurrentInstance()!.appContext.config.globalProperties;
var amslogo_url = new URL('/imgs/home/LOGO_index.png', import.meta.url).href; var amslogo_url = new URL("/imgs/home/LOGO_index.png", import.meta.url)
const amslogo = ref(amslogo_url); .href;
var currLogoUrl = new URL('/imgs/home/PLATFORM.png', import.meta.url).href; const amslogo = ref(amslogo_url);
//var backgroundImageUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href; var currLogoUrl = new URL("/imgs/home/PLATFORM.png", import.meta.url).href;
var amslogo_style = reactive({ height: 40, width: 150 }); //var backgroundImageUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href;
var amslogo_style = reactive({ height: 40, width: 150 });
//控制左侧导航菜单的展开和隐藏
const toggleLeft = async () => { //控制左侧导航菜单的展开和隐藏
store.commit('setAsideWidth'); const toggleLeft = async () => {
menuWidth.value = store.state.iscollapse ? 63 : 200; store.commit("setAsideWidth");
amslogo_style.height = store.state.iscollapse ? 12 : 40; menuWidth.value = store.state.iscollapse ? 63 : 200;
amslogo_style.width = store.state.iscollapse ? 40 : 150; amslogo_style.height = store.state.iscollapse ? 12 : 40;
mainWidth.value = window.innerWidth - menuWidth.value; amslogo_style.width = store.state.iscollapse ? 40 : 150;
await EventBus.emit('changeValue', mainWidth.value); mainWidth.value = window.innerWidth - menuWidth.value;
localStorage.setItem('tabWidth',menuWidth.value); await EventBus.emit("changeValue", mainWidth.value);
console.log('触发') localStorage.setItem("tabWidth", menuWidth.value);
// console.log(proxy.$refs.componentView); console.log("触发");
// console.log(proxy.$refs.componentView.resizeVideo); // console.log(proxy.$refs.componentView);
if(proxy.$refs.componentView && proxy.$refs.componentView.showPlay){ // console.log(proxy.$refs.componentView.resizeVideo);
proxy.$refs.componentView.showPlay(); if (proxy.$refs.componentView && proxy.$refs.componentView.showPlay) {
} proxy.$refs.componentView.showPlay();
} }
};
//开放手动折叠菜单方法
_config.menu = { //开放手动折叠菜单方法
show() { _config.menu = {
toggleLeft(); show() {
}, toggleLeft();
hide() { },
toggleLeft(); hide() {
}, toggleLeft();
}; },
};
const created = () => {
mainHeight.value = window.innerHeight - 120; const created = () => {
mainWidth.value = store.state.iscollapse ? window.innerWidth - 63 : window.innerWidth - 200; mainHeight.value = window.innerHeight - 120;
mainWidth.value = store.state.iscollapse
? window.innerWidth - 63
: window.innerWidth - 200;
let _userInfo = store.getters.getUserInfo();
if (_userInfo) {
realName.value = _userInfo.realName;
roleId = _userInfo.roleId;
}
setInterval(() => {
//气象信息更新计时器
getWeather();
}, 60000); // 每分钟执行一次
};
created();
onBeforeMount(async () => {
// 在组件即将挂载之前加载数据
await getData();
});
const getWeather = async () => {
var result = await http.post(
"/api/weather/Real/",
showWeatherData.supplyData.supplyId
);
var temp = result.data;
var tempWeatherData = toRefs(showWeatherData);
tempWeatherData.weatherData.value = temp;
};
//企业选择函数
const handleCommand = (command: string | number | object) => {
showenterpriseName.value = command.toString();
};
//const enterpriseId = ref("");
var enterpriseList = ref([
{
enterpriseId: "",
enterpriseName: "",
logo: "",
orderNum: 0,
supplyList: [
{
supplyId: "",
supplyName: "",
orderNum: 0,
},
],
},
]);
//展示的企业名称
var showenterpriseName = ref("天津市爱默森电气科技有限公司");
//展示的气象的信息
var showWeatherData = reactive({
supplyData: {
supplyId: "",
supplyName: "",
},
weatherData: {
weatherId: "",
temperature: "-",
wind: "-",
illumination: "-",
windDirection: "-",
humidity: "-",
gatherTime: "-",
},
});
//标签
// const editableTabsValue = ref('1')
//当前激活的菜单选项
const activeTable = ref(route.path);
const editableTabs = ref([
{
title: "首页-实时热源",
path: "/RealSupply",
},
]);
//初始化标签导航
//初始化标签导航列表
function initTabList() {
let istabList = JSON.parse(window.sessionStorage.getItem("tabList"));
if (!Array.isArray(istabList)) {
istabList = null;
}
if (istabList) {
editableTabs.value = istabList;
}
activeTable.value = localStorage.getItem("activeTab")!;
if (activeTable.value) {
router.push(activeTable.value);
} else {
router.push("/RealSupply");
activeTable.value = "/RealSupply";
}
}
initTabList();
//todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中
//标签添加函数
function addTab(item) {
const notTab =
editableTabs.value.findIndex((obj) => obj.path == item.path) == -1;
if (notTab) {
editableTabs.value.push(item);
//本地存储
window.sessionStorage.setItem(
"tabList",
JSON.stringify(editableTabs.value)
);
}
}
let _userInfo = store.getters.getUserInfo(); //标签删除函数
if (_userInfo) { const removeTab = (path) => {
realName.value = _userInfo.realName; console.log(path);
roleId = _userInfo.roleId; let isTabs = activeTable.value;
const tabs = editableTabs.value;
//删除的是 激活菜单,将激活选项设为 上一个或下一个标签的 path
if (path == isTabs) {
tabs.forEach((item, index) => {
if (item.path == path) {
//找到了需要删除的菜单
//获取上一个或下一个标签
const nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
isTabs = nextTab.path;
} }
}
setInterval(() => {
//气象信息更新计时器
getWeather();
}, 60000); // 每分钟执行一次
}
created();
onBeforeMount(async () => {
// 在组件即将挂载之前加载数据
await getData();
}); });
}
activeTable.value = isTabs;
localStorage.setItem("activeTab", isTabs);
//从editableTabs数组删除选中的菜单
//filter是过滤，生成新数组
editableTabs.value = editableTabs.value.filter(
(item) => item.path != path
);
//重新设定本地存储
window.sessionStorage.setItem(
"tabList",
JSON.stringify(activeTable.value)
);
//路由跳转
router.push(isTabs);
};
const changeTabsHandle = (path) => {
console.log("changeTabsHandle:" + path);
//path 是标签name所设定的值，也就是需要跳转的路由地址 item.path
//设置激活选项
activeTable.value = path;
localStorage.setItem("activeTab", path);
//路由跳转
router.push(path);
};
//监听当前路由发生变化
onBeforeRouteUpdate((to, from) => {
// if(to.path === '/TransferArtwork'){
// window.open('/TransferArt', '_blank')
// }
//激活选中项
activeTable.value = to.path;
localStorage.setItem("activeTab", activeTable.value);
addTab({
title: to.meta.title,
path: to.path,
});
});
const getEnterprises = async () => {
enterpriseList.value = store.getters.getEnterprise();
//console.log('setEnterpriseId: ' + enterpriseList.value[0].enterpriseId);
showenterpriseName.value = enterpriseList.value[0].enterpriseName;
if (
enterpriseList.value[0].enterpriseName == "天津港益供热有限责任公司"
) {
showWeatherData.supplyData.supplyId =
enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName =
enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyName;
} else {
showWeatherData.supplyData.supplyId =
enterpriseList.value[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName =
enterpriseList.value[0].supplyList[0].supplyName;
}
currLogoUrl = new URL(
"/imgs/home/" + enterpriseList.value[0].logo,
import.meta.url
).href;
//console.log(currLogoUrl);
await getWeather();
};
const getMenus = async () => {
//function getMenus() {
await http.post("/api/menu/GetCurrentMenu/").then((response) => {
var jobj = response.data;
store.commit("setMenus", jobj);
});
};
async function getData() {
await getEnterprises();
await getMenus();
}
const getWeather = async () => { const logout = async () => {
var result = await http.post("/api/weather/Real/", showWeatherData.supplyData.supplyId); //隐藏视频插件
var temp = result.data if (proxy.$refs.componentView && proxy.$refs.componentView.hidePlay) {
var tempWeatherData = toRefs(showWeatherData); proxy.$refs.componentView.hidePlay();
tempWeatherData.weatherData.value = temp; }
} //console.log('logout');
const res = await ElMessageBox.confirm("是否退出登录？", "提示", {
//企业选择函数 confirmButtonText: "确定",
const handleCommand = (command: string | number | object) => { cancelButtonText: "取消",
showenterpriseName.value = command.toString(); type: "warning",
} }).catch((err) => {
return err;
//const enterpriseId = ref(""); });
var enterpriseList = ref([{ if (res == "confirm") {
"enterpriseId": "", store.commit("clearUserInfo", "");
"enterpriseName": "", router.push({ path: "/login" });
"logo": "", } else {
"orderNum": 0, //重置视频插件位置
"supplyList": [{ if (proxy.$refs.componentView && proxy.$refs.componentView.showPlay) {
"supplyId": "", proxy.$refs.componentView.showPlay();
"supplyName": "",
"orderNum": 0
}
]
}]);
//展示的企业名称
var showenterpriseName = ref('天津市爱默森电气科技有限公司');
//展示的气象的信息
var showWeatherData = reactive({
supplyData: {
supplyId: "",
supplyName: ""
},
weatherData: {
"weatherId": "",
"temperature": '-',
"wind": '-',
"illumination": '-',
"windDirection": "-",
"humidity": '-',
"gatherTime": "-"
}
})
//标签
// const editableTabsValue = ref('1')
//当前激活的菜单选项
const activeTable = ref(route.path);
const editableTabs = ref([
{
title: '首页-实时热源',
path: '/RealSupply',
}
])
//初始化标签导航
//初始化标签导航列表
function initTabList() {
let istabList = JSON.parse(window.sessionStorage.getItem("tabList"));
if (!Array.isArray(istabList)) {
istabList = null;
}
if (istabList) {
editableTabs.value = istabList
}
activeTable.value = localStorage.getItem("activeTab")!;
if (activeTable.value) {
router.push(activeTable.value)
} else {
router.push("/RealSupply")
activeTable.value = "/RealSupply"
}
}
initTabList();
//todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中
//标签添加函数
function addTab(item) {
const notTab = editableTabs.value.findIndex(obj => obj.path == item.path) == -1;
if (notTab) {
editableTabs.value.push(item)
//本地存储
window.sessionStorage.setItem("tabList", JSON.stringify(editableTabs.value))
}
}
//标签删除函数
const removeTab = (path) => {
console.log(path);
let isTabs = activeTable.value;
const tabs = editableTabs.value;
//删除的是 激活菜单,将激活选项设为 上一个或下一个标签的 path
if (path == isTabs) {
tabs.forEach((item, index) => {
if (item.path == path) {
//找到了需要删除的菜单
//获取上一个或下一个标签
const nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
isTabs = nextTab.path
}
}
})
}
activeTable.value = isTabs
localStorage.setItem("activeTab", isTabs);
//从editableTabs数组删除选中的菜单
//filter是过滤，生成新数组
editableTabs.value = editableTabs.value.filter(item => item.path != path)
//重新设定本地存储
window.sessionStorage.setItem("tabList", JSON.stringify(activeTable.value))
//路由跳转
router.push(isTabs)
}
const changeTabsHandle = (path) => {
console.log("changeTabsHandle:" + path)
//path 是标签name所设定的值，也就是需要跳转的路由地址 item.path
//设置激活选项
activeTable.value = path
localStorage.setItem("activeTab", path);
//路由跳转
router.push(path)
}
//监听当前路由发生变化
onBeforeRouteUpdate((to, from) => {
// if(to.path === '/TransferArtwork'){
// window.open('/TransferArt', '_blank')
// }
//激活选中项
activeTable.value = to.path
localStorage.setItem("activeTab", activeTable.value);
addTab({
title: to.meta.title,
path: to.path
})
})
const getEnterprises = async () => {
enterpriseList.value = store.getters.getEnterprise();
//console.log('setEnterpriseId: ' + enterpriseList.value[0].enterpriseId);
showenterpriseName.value = enterpriseList.value[0].enterpriseName;
if (enterpriseList.value[0].enterpriseName == "天津港益供热有限责任公司") {
showWeatherData.supplyData.supplyId = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyName;
} else {
showWeatherData.supplyData.supplyId = enterpriseList.value[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName = enterpriseList.value[0].supplyList[0].supplyName;
}
currLogoUrl = new URL('/imgs/home/' + enterpriseList.value[0].logo, import.meta.url).href;
//console.log(currLogoUrl);
await getWeather();
}
const getMenus = async () => {
//function getMenus() {
await http.post("/api/menu/GetCurrentMenu/").then((response) => {
var jobj = response.data;
store.commit('setMenus', jobj);
});
}
async function getData() {
await getEnterprises();
await getMenus();
}
const logout = async () => {
//隐藏视频插件
if (proxy.$refs.componentView && proxy.$refs.componentView.hidePlay) {
proxy.$refs.componentView.hidePlay();
}
//console.log('logout');
const res = await ElMessageBox.confirm(
'是否退出登录？',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => {
return err;
})
if (res == 'confirm') {
store.commit("clearUserInfo", "");
router.push({ path: "/login" });
} else {
//重置视频插件位置
if (proxy.$refs.componentView && proxy.$refs.componentView.showPlay) {
proxy.$refs.componentView.showPlay();
}
}
} }
}
};
function enterMenu(){
var menuWidth=localStorage.getItem("tabWidth"); function enterMenu() {
if(menuWidth && menuWidth === '63'){ var menuWidth = localStorage.getItem("tabWidth");
// console.log('e'); if (menuWidth && menuWidth === "63") {
//隐藏视频插件 // console.log('e');
if (proxy.$refs.componentView && proxy.$refs.componentView.hidePlay) { //隐藏视频插件
proxy.$refs.componentView.hidePlay(); if (proxy.$refs.componentView && proxy.$refs.componentView.hidePlay) {
} proxy.$refs.componentView.hidePlay();
} }
}
} }
function leaveMenu(){ function leaveMenu() {
var menuWidth=localStorage.getItem("tabWidth"); var menuWidth = localStorage.getItem("tabWidth");
if(menuWidth && menuWidth === '63'){ if (menuWidth && menuWidth === "63") {
// console.log('l'); // console.log('l');
//重置视频插件位置 //重置视频插件位置
if (proxy.$refs.componentView && proxy.$refs.componentView.showPlay) { if (proxy.$refs.componentView && proxy.$refs.componentView.showPlay) {
proxy.$refs.componentView.showPlay(); proxy.$refs.componentView.showPlay();
}
} }
}
} }
function openMap(){ function openMap() {
const routePath = '/GisHome'; // 要导航到的路由路径 const routePath = "/GisHome"; // 要导航到的路由路径
router.push({ path: routePath}); router.push({ path: routePath });
// // 打开新窗口并导航到指定路由 // // 打开新窗口并导航到指定路由
// window.open( // window.open(
// `${routePath}`, // `${routePath}`,
// '_blank', // '_blank',
// 'toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes' // 'toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes'
// ); // );
} }
//报警弹窗 //报警弹窗
...@@ -586,218 +711,223 @@ export default defineComponent({ ...@@ -586,218 +711,223 @@ export default defineComponent({
const sta = ref(0); const sta = ref(0);
const consta = ref(0); const consta = ref(0);
//获取用户信息 //获取用户信息
function getuser(){ function getuser() {
var user = store.getters.getUserInfo(); var user = store.getters.getUserInfo();
if(user){ if (user) {
enterpriseId.value = user.enterpriseId; enterpriseId.value = user.enterpriseId;
userId.value = user.userId; userId.value = user.userId;
roleIds.value = user.roleId; roleIds.value = user.roleId;
} }
} }
const AlarmInfo = ref({}); const AlarmInfo = ref({});
function getinfo(){ function getinfo() {
AlarmInfo.value = { AlarmInfo.value = {
"enterpriseId": enterpriseId.value, enterpriseId: enterpriseId.value,
"UserId": userId.value, UserId: userId.value,
"RoleId": roleIds.value RoleId: roleIds.value,
}; };
} }
function alarm(){ function alarm() {
http.post("/api/alarm/GetAlarmMsg", AlarmInfo.value).then((result) => { http
if(result.data !== null && sta.value === 0){ .post("/api/alarm/GetAlarmMsg", AlarmInfo.value, false)
console.log(result) .then((result) => {
sta.value = 1; if (result.data !== null && sta.value === 0) {
title.value = result.data[0].title; console.log(result);
msg.value = result.data[0].msg; sta.value = 1;
id.value = result.data[0].id; title.value = result.data[0].title;
ElNotification({ msg.value = result.data[0].msg;
title: title.value, id.value = result.data[0].id;
dangerouslyUseHTMLString: true, ElNotification({
message: msg.value.replace('\n','<br />'), title: title.value,
position: 'bottom-right', dangerouslyUseHTMLString: true,
type: 'error', message: msg.value.replace("\n", "<br />"),
duration: 0, position: "bottom-right",
onClick() { type: "error",
activeTable.value = '/Video' duration: 0,
localStorage.setItem("activeTab", '/Video'); onClick() {
//路由跳转 activeTable.value = "/Video";
this.$router.push({ //如果要是用 name 传参 就直接 携带一个 query 对象中包含参数 localStorage.setItem("activeTab", "/Video");
path: "/Video", //路由跳转
query:{ this.$router.push({
id:id.value //如果要是用 name 传参 就直接 携带一个 query 对象中包含参数
} path: "/Video",
}); query: {
}, id: id.value,
onClose() { },
sta.value = 0; });
}, },
}) onClose() {
} sta.value = 0;
},
});
}
}); });
} }
function countalarm(){ function countalarm() {
http.post("/api/alarm/GetAlarmMsg", AlarmInfo.value).then((result) => { http.post("/api/alarm/GetAlarmMsg", AlarmInfo.value).then((result) => {
if(result.data !== null && consta.value === 0){ if (result.data !== null && consta.value === 0) {
console.log(result) console.log(result);
consta.value = 1; consta.value = 1;
counttitle.value = result.data[1].title; counttitle.value = result.data[1].title;
countmsg.value = result.data[1].msg; countmsg.value = result.data[1].msg;
countid.value = result.data[1].id; countid.value = result.data[1].id;
ElNotification({ ElNotification({
title: counttitle.value, title: counttitle.value,
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
message: countmsg.value.replace('\n','<br />'), message: countmsg.value.replace("\n", "<br />"),
position: 'bottom-right', position: "bottom-right",
type: 'error', type: "error",
duration: 0, duration: 0,
onClick() { onClick() {
activeTable.value = '/Video' activeTable.value = "/Video";
localStorage.setItem("activeTab", '/Video'); localStorage.setItem("activeTab", "/Video");
//路由跳转 //路由跳转
this.$router.push({ //如果要是用 name 传参 就直接 携带一个 query 对象中包含参数 this.$router.push({
path: "/Video", //如果要是用 name 传参 就直接 携带一个 query 对象中包含参数
query:{ path: "/Video",
id:countid.value query: {
} id: countid.value,
}); },
}, });
onClose() { },
consta.value = 0; onClose() {
}, consta.value = 0;
}) },
} });
}); }
});
} }
setInterval(() => { setInterval(() => {
getuser() getuser();
getinfo(); getinfo();
alarm(); alarm();
countalarm(); countalarm();
}, 10 * 1000); // 每分钟执行一次 }, 10 * 1000); // 每分钟执行一次
return {
return { menuWidth,
menuWidth, mainHeight,
mainHeight, mainWidth,
mainWidth, drawer_model,
drawer_model, userInfo,
userInfo, roleId,
roleId, realName,
realName, selectId,
selectId, selectMenuIndex,
selectMenuIndex, toggleLeft,
toggleLeft, messageModel,
messageModel, contextMenuVisible,
contextMenuVisible, visibleItem,
visibleItem, currentMenuId,
currentMenuId, amslogo,
amslogo, amslogo_style,
amslogo_style, addTab,
addTab, //menuRoot,
//menuRoot, handleCommand,
handleCommand, currLogoUrl,
currLogoUrl, enterpriseList,
enterpriseList, showWeatherData,
showWeatherData, removeTab,
removeTab, editableTabs,
editableTabs, changeTabsHandle,
changeTabsHandle, activeTable,
activeTable, logout,
logout, openMap,
openMap, enterMenu,
enterMenu, leaveMenu,
leaveMenu //enterpriseId
//enterpriseId };
}; },
}, methods: {
methods: {
/**
* 绑定右键事件
* @param {*} enable 是否启用右键事件[true:启用;false:禁用;]
* @param {*} $event 事件
*/
bindRightClickMenu(enable) {
if (!enable) return;
let that = this;
// 使用原生js 为单个dom绑定鼠标右击事件
that.$nextTick(() => {
let tab_top_dom = Object.assign(
[],
document.getElementsByClassName("el-tabs__item is-top")
);
tab_top_dom.forEach((item, index) => {
//item.oncontextmenu = that.openTabsMenu;
});
});
},
},
/** /**
* 销毁钩子函数 * 绑定右键事件
* @param {*} enable 是否启用右键事件[true:启用;false:禁用;]
* @param {*} $event 事件
*/ */
destroyed() { bindRightClickMenu(enable) {
$this = null; if (!enable) return;
clearInterval($interval); let that = this;
// 使用原生js 为单个dom绑定鼠标右击事件
that.$nextTick(() => {
let tab_top_dom = Object.assign(
[],
document.getElementsByClassName("el-tabs__item is-top")
);
tab_top_dom.forEach((item, index) => {
//item.oncontextmenu = that.openTabsMenu;
});
});
}, },
}); },
/**
* 销毁钩子函数
*/
destroyed() {
$this = null;
clearInterval($interval);
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.vol-container .vol-path ::v-deep(.el-tabs__content) { .vol-container .vol-path ::v-deep(.el-tabs__content) {
padding: 0; padding: 0;
} }
.contextMenu { .contextMenu {
width: 120px; width: 120px;
margin: 0; margin: 0;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
background: #fff; background: #fff;
z-index: 30000; z-index: 30000;
position: absolute; position: absolute;
list-style-type: none; list-style-type: none;
padding: 5px 0; padding: 5px 0;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%); box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%);
i, i,
button { button {
font-size: 14px !important; font-size: 14px !important;
} }
} }
.contextMenu li { .contextMenu li {
margin: 0; margin: 0;
padding: 5px 17px; padding: 5px 17px;
} }
.contextMenu li:hover { .contextMenu li:hover {
background: #fafafa; background: #fafafa;
cursor: pointer; cursor: pointer;
} }
.contextMenu li button { .contextMenu li button {
color: #626060; color: #626060;
font-size: 14px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child, .el-tabs.el-tabs--top.el-tabs--border-card.header-navigation
.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) { > .el-tabs__header
padding: 0; .el-tabs__item:last-child,
.el-tabs--top.el-tabs--border-card.header-navigation
> .el-tabs__header
.el-tabs__item:nth-child(2) {
padding: 0;
} }
.header-navigation ::v-deep(.el-tabs__item.is-top) { .header-navigation ::v-deep(.el-tabs__item.is-top) {
padding: 0 15px; padding: 0 15px;
} }
</style> </style>
<style> <style>
.horizontal-collapse-transition { .horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out; 0s padding-right ease-in-out;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment