Skip to content

W
web-project
Commit aa61b149 authored by 王亚晖's avatar 王亚晖
Browse files
Options

Merge branch 'master' of https://gitee.com/tj-wang-yahui/AMS_HeatSys_Vue_V10

parents 61d73dbc 91888d13
Show whitespace changes
Inline Side-by-side
Showing with 663 additions and 369 deletions
src/style/index.less
View file @ aa61b149
......@@ -30,7 +30,8 @@ html {
height: 60px;
position: relative;
line-height: 70px;
background-color: rgb(82,107,171);
//background-color: rgb(82,107,171);
background-color: rgb(31, 63, 141);
}
.ams-aside .ams-menu {
......@@ -169,18 +170,29 @@ html {
// padding-top: 1vh;
/* padding-left: 2vw; */
text-align: center;
// text-align: center;
color: white;
}
.div-contain-title{
margin-top: 5px;
height: 25px;
}
.div-contain-titleAndText{
display: flex;
}
/* 气象信息文本--小文本 */
.div-contain-text-small {
font-size: 8pt;
text-align:center;
// text-align:center;
vertical-align: top;
width: 100px;
}
/* 气象信息文本--大文本 */
.div-contain-text-big {
font-size: 14px;
......
src/views/RemotePage/TransferPumpPage.vue
View file @ aa61b149
<template>
换热站机组循环泵压差远程控制
<el-card style="max-width: 100%">
<template #header>
<div class="card-header">
<el-row>
<el-col :span="12">
<div class="grid-content">
请选择换热机组：
<el-cascader :options="options" :props="props" v-model="option" collapse-tags clearable
:show-all-levels="false" placeholder="请选择" style="min-width: 210px;" />
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-checkbox v-model="checked" label="循环泵自控功能启用" size="large" border />
</div>
</el-col>
</el-row>
</div>
</template>
<el-row>
<el-col :span="4">
<div class="grid-content">近N小时室外平均温度（℃）</div>
</el-col>
<el-col :span="3">
<div class="grid-content">室外平均T比较设定值（℃）</div>
</el-col>
<el-col :span="3">
<div class="grid-content">压差系数1</div>
</el-col>
<el-col :span="3">
<div class="grid-content">压差系数2</div>
</el-col>
<el-col :span="3">
<div class="grid-content">压差系数2是否投入</div>
</el-col>
<el-col :span="4">
<div class="grid-content">起始时间</div>
</el-col>
<el-col :span="4">
<div class="grid-content">结束时间</div>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content">30</div>
</el-col>
<el-col :span="3">
<div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
</el-card>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import store from "../../store/index";
const options = reactive([]);
const option = reactive([]);
const enterpriseId = ref();
const checked = ref(true);
const num = ref(20);
getEnterprise();
function getEnterprise() {
var result = store.getters.getEnterprise();
if (result) {
enterpriseId.value = result[0].enterpriseId;
}
}
const props = { multiple: true, emitPath: false }
//获取换热机组列表
getSupplys();
function getSupplys() {
var result = store.getters.getEnterprise();
if (result) {
result.forEach(element => {
if (element.enterpriseId === enterpriseId.value) {
if (element.enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()) {
element.serviceCenterList.forEach(center => {
let c = [];
center.supplyList.forEach(supply => {
let chi = [];
supply.transferList.forEach(unit => {
chi.push({ value: unit.unitId, label: unit.unitName });
});
c.push({ children: chi, label: supply.supplyName });
});
options.push({ children: c, label: center.serviceCenterName });
})
} else {
element.supplyList.forEach(element => {
let chi = [];
element.transferList.forEach(unit => {
chi.push({ value: unit.unitId, label: unit.unitName });
})
options.push({ children: chi, label: element.supplyName });
})
}
}
});
}
option.push(options[0].children[0].children[0].value);
}
</script>
<style lang="scss">
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
\ No newline at end of file
src/views/Video/VideoViewPage.vue
View file @ aa61b149
<template>
海康视频
</template>
\ No newline at end of file
</template>
\ No newline at end of file
src/views/home.vue
View file @ aa61b149
<template>
<div id="ams-container" >
<div class="ams-aside" :style="{ width: menuWidth + 'px'}">
<div class="header" :style="{ width: menuWidth - 1 + 'px'}">
<img :style="{height:amslogo_style.height+'px',width: amslogo_style.width+'px'}" v-show="!$store.state.iscollapse" v-bind:src="amslogo" />
<i @click="toggleLeft" class="collapse-menu" :style="{width:38+ 'px'}">
<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>
<div id="ams-container">
<div class="ams-aside" :style="{ width: menuWidth + 'px' }">
<div class="header" :style="{ width: menuWidth - 1 + 'px' }">
<img :style="{ height: amslogo_style.height + 'px', width: amslogo_style.width + 'px' }"
v-show="!$store.state.iscollapse" v-bind:src="amslogo" />
<i @click="toggleLeft" class="collapse-menu" :style="{ width: 38 + 'px' }">
<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 ></DataMenu>
<DataMenu></DataMenu>
</div>
</div>
<div class="ams-container" :style="{ left: menuWidth-2 + 'px' }">
<div class="ams-header" style=" background-color: #526bab;">
<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'">
......@@ -30,31 +35,61 @@
</el-dropdown>
</div>
<div class="header-weather" id="">
<el-row style="left: 2.5%;widows: 60px;" >
<el-col :span="4">
<div>温度 ℃
<div class="div-contain-text-big">{{ showWeatherData.weatherData.temperature }}</div>
<el-row style="left: 37%;widows: 60px;width: 63%;">
<el-col :span="4" style="">
<div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/wendu.png"
:fit="'fill'" />
<div>
<div class="div-contain-title"> 温度 ℃</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.temperature }}
</div>
</div>
</div>
</el-col>
<el-col :span="5">
<div>光照
<div class="div-contain-text-big">{{ showWeatherData.weatherData.illumination }}</div>
<div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/guang.png"
:fit="'fill'" />
<div>
<div class="div-contain-title">光照强度</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.illumination }}
</div>
</div>
</div>
</el-col>
<el-col :span="4">
<div>风力
<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="6">
<div>风向
<div class="div-contain-text-big">{{ showWeatherData.weatherData.windDirection }}</div>
<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" >
<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/time.png"
:fit="'scale-down'" />
<div>
<div style="width: 100px; text-align: center;">采集时间</div>
<div class="div-contain-text-small" style="line-height: 15px;">{{ showWeatherData.weatherData.gatherTime }}</div>
<div class="div-contain-title" style="width: 100px;">气象时间</div>
<div class="div-contain-text-small" style="line-height: 15px;">{{
showWeatherData.weatherData.gatherTime
}}</div>
</div>
</div>
</el-col>
</el-row>
......@@ -64,25 +99,26 @@
<a href="javascript:void(0)" @click="openMap"><i>可视化界面</i></a>
</div>
<div class="h-link">
<a href="javascript:void(0)" >
<a href="javascript:void(0)">
<el-icon>
<UserFilled color="rgb(161,187,214)"/>
<UserFilled color="rgb(161,187,214)" />
</el-icon>
{{ realName }}
</a>
</div>
<div class="h-link" style="padding-left: 20px; ">
<a href="javascript:void(0)" >
<el-icon >
<Setting color="rgb(0,0,0)" />
<div class="h-link" style="padding-left: 15px; ">
<a href="javascript:void(0)">
<el-icon>
<Setting color="rgb(255,255,255)" />
</el-icon>
系统设置
</a>
</div>
<div class="h-link" style="padding-left: 1px;" >
<div class="h-link" style="padding-left: 1px;">
<a href="javascript:void(0)" @click="logout">
<el-icon>
<SwitchButton color="rgb(0,0,0)"/>
<el-image src="/imgs/home/exit.png" :fit="'fill'" />
</el-icon>
退出系统
</a>
......@@ -93,12 +129,12 @@
<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 :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' -->
<div :style="{ height: mainHeight + 'px' }"> <!--, width: mainWidth +'px' -->
<el-scrollbar style="height: 100%">
<loading v-show="$store.getters.isLoading()"></loading>
<!-- 主体内容 -->
......@@ -118,29 +154,32 @@
<style scoped>
@import "../style/index.less";
::v-deep .el-tabs--border-card{
::v-deep .el-tabs--border-card {
background: transparent;
border: none;
box-shadow: none;
-webkit-box-shadow:none;
-webkit-box-shadow: none;
height: 46px;
}
::v-deep .el-tabs--border-card > .el-tabs__header{
::v-deep .el-tabs--border-card>.el-tabs__header {
background-color: transparent;
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-top: 5px;
border: none;
border-radius: 8px 8px 0 0;
background-color: #F3F7FE;
padding: 4px 20px;
color:#0065D5;
color: #0065D5;
line-height: 22px;
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;
color: #ffffff;
}
......@@ -206,7 +245,7 @@ export default defineComponent({
this.bindRightClickMenu(true);
},
setup(props, {emit}){
setup(props, { emit }) {
// 获取全局属性和方法
const { proxy } = getCurrentInstance()!;
......@@ -237,20 +276,20 @@ export default defineComponent({
const router = useRouter();
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).href;
const amslogo = ref(amslogo_url);
var currLogoUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href;
var currLogoUrl = new URL('/imgs/home/PLATFORM.png', import.meta.url).href;
//var backgroundImageUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href;
var amslogo_style=reactive({height:50,width:150});
var amslogo_style = reactive({ height: 50, width: 150 });
//控制左侧导航菜单的展开和隐藏
const toggleLeft=()=>{
const toggleLeft = () => {
store.commit('setAsideWidth');
menuWidth.value =store.state.iscollapse ? 63 : 200;
amslogo_style.height=store.state.iscollapse ? 12 : 50;
amslogo_style.width=store.state.iscollapse ? 40 : 150;
mainWidth.value = window.innerWidth-menuWidth.value;
EventBus.emit('changeValue', mainWidth.value );
menuWidth.value = store.state.iscollapse ? 63 : 200;
amslogo_style.height = store.state.iscollapse ? 12 : 50;
amslogo_style.width = store.state.iscollapse ? 40 : 150;
mainWidth.value = window.innerWidth - menuWidth.value;
EventBus.emit('changeValue', mainWidth.value);
}
//开放手动折叠菜单方法
......@@ -265,7 +304,7 @@ export default defineComponent({
const created = () => {
mainHeight.value = window.innerHeight - 120;
mainWidth.value = store.state.iscollapse ? window.innerWidth- 63 : window.innerWidth-200;
mainWidth.value = store.state.iscollapse ? window.innerWidth - 63 : window.innerWidth - 200;
let _userInfo = store.getters.getUserInfo();
if (_userInfo) {
......@@ -280,14 +319,14 @@ export default defineComponent({
}
created();
onBeforeMount(async() => {
onBeforeMount(async () => {
// 在组件即将挂载之前加载数据
await getData();
});
const getWeather = async () =>{
var result = await http.post("/api/weather/Real/",showWeatherData.supplyData.supplyId);
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;
......@@ -302,7 +341,7 @@ export default defineComponent({
var enterpriseList = ref([{
"enterpriseId": "",
"enterpriseName": "",
"logo":"",
"logo": "",
"orderNum": 0,
"supplyList": [{
"supplyId": "",
......@@ -345,7 +384,7 @@ export default defineComponent({
//初始化标签导航列表
function initTabList() {
let istabList = JSON.parse(window.sessionStorage.getItem("tabList"));
if(!Array.isArray(istabList)){
if (!Array.isArray(istabList)) {
istabList = null;
}
if (istabList) {
......@@ -353,9 +392,9 @@ export default defineComponent({
}
activeTable.value = localStorage.getItem("activeTab")!;
if(activeTable.value){
if (activeTable.value) {
router.push(activeTable.value)
}else{
} else {
router.push("/RealSupply")
activeTable.value = "/RealSupply"
}
......@@ -365,8 +404,8 @@ export default defineComponent({
//todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中
//标签添加函数
function addTab(item){
const notTab = editableTabs.value.findIndex(obj=> obj.path == item.path) == -1;
function addTab(item) {
const notTab = editableTabs.value.findIndex(obj => obj.path == item.path) == -1;
if (notTab) {
editableTabs.value.push(item)
//本地存储
......@@ -403,8 +442,8 @@ export default defineComponent({
router.push(isTabs)
}
const changeTabsHandle=(path)=>{
console.log("changeTabsHandle:"+ path)
const changeTabsHandle = (path) => {
console.log("changeTabsHandle:" + path)
//path 是标签name所设定的值，也就是需要跳转的路由地址 item.path
//设置激活选项
activeTable.value = path
......@@ -428,25 +467,25 @@ export default defineComponent({
})
})
const getEnterprises = async () =>{
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 == "天津港益供热有限责任公司"){
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{
} else {
showWeatherData.supplyData.supplyId = enterpriseList.value[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName = enterpriseList.value[0].supplyList[0].supplyName;
}
currLogoUrl =new URL('../assets/imgs/home/' + enterpriseList.value[0].logo, import.meta.url).href;
currLogoUrl = new URL('../assets/imgs/home/' + enterpriseList.value[0].logo, import.meta.url).href;
//console.log(currLogoUrl);
await getWeather();
}
const getMenus = async () =>{
const getMenus = async () => {
//function getMenus() {
await http.post("/api/menu/GetCurrentMenu/").then((response) => {
var jobj = response.data;
......@@ -571,7 +610,9 @@ export default defineComponent({
font-size: 14px;
color: #333;
box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%);
i,button{
i,
button {
font-size: 14px !important;
}
}
......@@ -592,12 +633,8 @@ export default defineComponent({
letter-spacing: 1px;
}
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation
> .el-tabs__header
.el-tabs__item:last-child,
.el-tabs--top.el-tabs--border-card.header-navigation
> .el-tabs__header
.el-tabs__item:nth-child(2) {
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .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;
}
......
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