Browse Source

增加部分新功能

develop
fuguobin 1 year ago
parent
commit
69fa6e6dd3
  1. 4
      src/api/device/index.ts
  2. 3
      src/api/device/types.ts
  3. 20
      src/api/waring/index.ts
  4. BIN
      src/assets/images/device/liangfaliangqu.gif
  5. BIN
      src/assets/images/device/liangfaliangquyibeng.gif
  6. BIN
      src/assets/images/device/sanfasanqu.gif
  7. BIN
      src/assets/images/device/sanfasanquyibeng.gif
  8. BIN
      src/assets/images/device/yifaliangqu.gif
  9. BIN
      src/assets/images/device/yifaliangquyibeng.gif
  10. BIN
      src/assets/images/device/yifasanqu.gif
  11. BIN
      src/assets/images/device/yifayiqu.gif
  12. BIN
      src/assets/images/device/yifayiquyibeng.gif
  13. BIN
      src/assets/images/device/yifaysanquyibeng.gif
  14. 4
      src/main.ts
  15. 2
      src/types/auto-imports.d.ts
  16. 4
      src/types/components.d.ts
  17. 19
      src/views/details/index.scss
  18. 64
      src/views/details/index.vue
  19. 88
      src/views/monitoring/components/header.vue
  20. 180
      src/views/monitoring/devicemanage/components/main.vue
  21. 1344
      src/views/monitoring/devicemanage/index.scss
  22. 2
      src/views/monitoring/screen/components/main.vue
  23. 17
      vite.config.ts

4
src/api/device/index.ts

@ -62,9 +62,9 @@ export function editConfig(data: any) {
/** /**
* *
*/ */
export function getDevices(): AxiosPromise<[]> { export function getDevices(params: number): AxiosPromise<[]> {
return request({ return request({
url: '/dc/dcDeviceEcharts/getDevices', url: '/dc/dcDeviceEcharts/getDevices/' + params,
method: 'get' method: 'get'
}); });
} }

3
src/api/device/types.ts

@ -37,8 +37,9 @@ export interface headerVo {
label: string; label: string;
value: string; value: string;
type: string; type: string;
ctrlFlag: string; ctrlFlag: number;
paramUnit: string; paramUnit: string;
ctrlpro: any;
} }
export interface deetsVo { export interface deetsVo {
centerDeviceCode: string; centerDeviceCode: string;

20
src/api/waring/index.ts

@ -7,10 +7,22 @@ import { waringVo } from './types';
* *
* @param params status状态 * @param params status状态
*/ */
export function getWarList(params: number): AxiosPromise<waringVo> { // export function getWarList(params: number): AxiosPromise<waringVo> {
// return request({
// url: '/dc/dcBusiAlertJob/list/'+params,
// method: 'get'
// });
// }
/**
*
*
* @param data
*/
export function getWarList(data: any) {
return request({ return request({
url: '/dc/dcBusiAlertJob/list/'+params, url: '/dc/dcBusiAlertJob/list/vo',
method: 'get' method: 'post',
data: data
}); });
} }
@ -22,6 +34,6 @@ export function getWarList(params: number): AxiosPromise<waringVo> {
export function process(id: string) { export function process(id: string) {
return request({ return request({
url: '/dc/dcBusiAlertJob/process/' + id, url: '/dc/dcBusiAlertJob/process/' + id,
method: 'post', method: 'post'
}); });
} }

BIN
src/assets/images/device/liangfaliangqu.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
src/assets/images/device/liangfaliangquyibeng.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 MiB

BIN
src/assets/images/device/sanfasanqu.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 MiB

BIN
src/assets/images/device/sanfasanquyibeng.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 MiB

BIN
src/assets/images/device/yifaliangqu.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 MiB

BIN
src/assets/images/device/yifaliangquyibeng.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 MiB

BIN
src/assets/images/device/yifasanqu.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 MiB

BIN
src/assets/images/device/yifayiqu.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 947 KiB

BIN
src/assets/images/device/yifayiquyibeng.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 948 KiB

BIN
src/assets/images/device/yifaysanquyibeng.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 MiB

4
src/main.ts

@ -12,7 +12,7 @@ import '@/permission';
import i18n from '@/lang/index'; import i18n from '@/lang/index';
//本地模拟数据 //本地模拟数据
import '@/mock/mockServer' import '@/mock/mockServer';
// 本地SVG图标 // 本地SVG图标
import 'virtual:svg-icons-register'; import 'virtual:svg-icons-register';
@ -20,7 +20,7 @@ import 'virtual:svg-icons-register';
// 样式 // 样式
import '@/styles/index.scss'; import '@/styles/index.scss';
import 'element-plus/theme-chalk/dark/css-vars.css'; import 'element-plus/theme-chalk/dark/css-vars.css';
import '@/assets/iconfont/iconfont.css' import '@/assets/iconfont/iconfont.css';
import 'vxe-table/lib/style.css'; import 'vxe-table/lib/style.css';
import 'animate.css/animate.min.css'; import 'animate.css/animate.min.css';

2
src/types/auto-imports.d.ts

@ -2,6 +2,7 @@
export {} export {}
declare global { declare global {
const EffectScope: typeof import('vue')['EffectScope'] const EffectScope: typeof import('vue')['EffectScope']
const ElForm: typeof import('element-plus/es')['ElForm']
const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const ElNotification: typeof import('element-plus/es')['ElNotification'] const ElNotification: typeof import('element-plus/es')['ElNotification']
@ -272,6 +273,7 @@ import { UnwrapRef } from 'vue'
declare module 'vue' { declare module 'vue' {
interface ComponentCustomProperties { interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']> readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>

4
src/types/components.d.ts

@ -25,6 +25,7 @@ declare module '@vue/runtime-core' {
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
@ -45,10 +46,13 @@ declare module '@vue/runtime-core' {
NDrawer: typeof import('naive-ui')['NDrawer'] NDrawer: typeof import('naive-ui')['NDrawer']
NDrawerContent: typeof import('naive-ui')['NDrawerContent'] NDrawerContent: typeof import('naive-ui')['NDrawerContent']
NIcon: typeof import('naive-ui')['NIcon'] NIcon: typeof import('naive-ui')['NIcon']
NInput: typeof import('naive-ui')['NInput']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NMenu: typeof import('naive-ui')['NMenu'] NMenu: typeof import('naive-ui')['NMenu']
NModal: typeof import('naive-ui')['NModal'] NModal: typeof import('naive-ui')['NModal']
NScrollbar: typeof import('naive-ui')['NScrollbar'] NScrollbar: typeof import('naive-ui')['NScrollbar']
NSpin: typeof import('naive-ui')['NSpin'] NSpin: typeof import('naive-ui')['NSpin']
NSwitch: typeof import('naive-ui')['NSwitch']
NTooltip: typeof import('naive-ui')['NTooltip'] NTooltip: typeof import('naive-ui')['NTooltip']
Pagination: typeof import('./../components/Pagination/index.vue')['default'] Pagination: typeof import('./../components/Pagination/index.vue')['default']
RightPanel: typeof import('./../components/RightPanel/index.vue')['default'] RightPanel: typeof import('./../components/RightPanel/index.vue')['default']

19
src/views/details/index.scss

@ -1,10 +1,27 @@
.details { .details {
padding: 1.5rem; padding: 1.5rem;
.header {
margin-bottom: 1.5rem;
}
.search { .search {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
:deep(.el-card__body) {
padding: 20px 20px 0 20px;
}
.cardHeader {
display: flex;
justify-content: space-between;
align-items: center;
.tooltips {
width: 36px;
height: 36px;
border-radius: 0px 0px 0px 0px;
opacity: 1;
}
}
.searchForm { .searchForm {
.item { .item {
margin-bottom: 0; margin-bottom: 20px;
} }
} }
} }

64
src/views/details/index.vue

@ -1,6 +1,23 @@
<template> <template>
<div class="details"> <div class="details">
<el-card class="search" shadow="always"> <el-card class="search" shadow="always">
<template #header>
<div class="cardHeader">
<span>搜索筛选项</span>
<n-tooltip trigger="hover">
<template #trigger>
<n-button class="tooltips" circle quaternary @click="lineClick">
<template #icon>
<n-icon>
<ReturnDownBack />
</n-icon>
</template>
</n-button>
</template>
返回上一页
</n-tooltip>
</div>
</template>
<el-form class="searchForm" ref="searchRef" :rules="rules" :inline="true" :model="searchForm" label-width="100px"> <el-form class="searchForm" ref="searchRef" :rules="rules" :inline="true" :model="searchForm" label-width="100px">
<el-form-item class="item" label="时间" prop="time"> <el-form-item class="item" label="时间" prop="time">
<el-date-picker <el-date-picker
@ -72,7 +89,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item class="item"> <el-form-item class="item">
<el-button type="primary" @click="submitForm(searchRef)">确认</el-button> <el-button type="primary" @click="submitForm(searchRef)">搜索</el-button>
<el-button @click="resetForm(searchRef)">重置</el-button> <el-button @click="resetForm(searchRef)">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -87,16 +104,23 @@
<script lang="ts" setup> <script lang="ts" setup>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { Ref } from 'vue'; import { Ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { randomColor } from '@/utils/index';
const stackedRef: Ref<HTMLElement | any> = ref(null); const stackedRef: Ref<HTMLElement | any> = ref(null);
import type { FormInstance, FormRules } from 'element-plus'; import type { FormInstance, FormRules } from 'element-plus';
import { ReturnDownBack } from '@vicons/ionicons5';
import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index'; import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
import { deetsVo, partitionVo, parameterVo, seriesVo } from '@/api/device/types'; import { deetsVo, partitionVo, parameterVo, seriesVo } from '@/api/device/types';
const router = useRouter();
const route = useRoute();
const searchRef = ref<FormInstance>(); const searchRef = ref<FormInstance>();
const defaultTime = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00' const defaultTime = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
const multipleLimit = ref(0); const multipleLimit = ref(0);
const parameterLimit = ref(0); const parameterLimit = ref(0);
const deptId = ref(0);
// const seriesData = ref<seriesVo[]>(); // const seriesData = ref<seriesVo[]>();
const searchForm = reactive({ const searchForm = reactive({
time: '', time: '',
@ -177,11 +201,18 @@ const options = {
bottom: '50', bottom: '50',
containLabel: true containLabel: true
}, },
// toolbox: { toolbox: {
// feature: { show: true,
// restore: {} feature: {
// } dataZoom: {
// }, yAxisIndex: 'none'
},
// dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
dataZoom: [ dataZoom: [
{ {
type: 'inside', type: 'inside',
@ -1046,6 +1077,7 @@ const options2 = {
}; };
onMounted(() => { onMounted(() => {
deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
getDevice(); getDevice();
getParam(); getParam();
getPortion(); getPortion();
@ -1053,10 +1085,15 @@ onMounted(() => {
// chart.setOption(options2); // chart.setOption(options2);
}); });
function lineClick() {
//
router.go(-1);
}
function getDevice() { function getDevice() {
// //
const params = {}; const params = deptId.value;
getDevices().then((res: any) => { getDevices(params).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
deviceData.value = res.data; deviceData.value = res.data;
} }
@ -1068,6 +1105,10 @@ function getParam() {
getParams().then((res: any) => { getParams().then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
parameterData.value = res.data; parameterData.value = res.data;
for (let i = 0; i < res.data.length - 6; i++) {
colors.push(randomColor());
}
console.log('colors--', colors);
} }
}); });
} }
@ -1097,6 +1138,13 @@ function init(data: any) {
options.series = []; options.series = [];
if (data.mainInfos.length === 0) { if (data.mainInfos.length === 0) {
options.title.text = '暂无数据'; options.title.text = '暂无数据';
options.title.x = 'center';
options.title.y = 'center';
const chart = echarts.init(stackedRef.value);
chart.clear();
chart.resize();
console.log('options--', options);
chart.setOption(options);
return; return;
} }
options.title.text = data.additionalInfo.name; options.title.text = data.additionalInfo.name;

88
src/views/monitoring/components/header.vue

@ -14,39 +14,39 @@
<div class="seeting"> <div class="seeting">
<n-tooltip trigger="hover"> <n-tooltip trigger="hover">
<template #trigger> <template #trigger>
<n-button class="tooltips" circle quaternary @click="lineClick"> <n-button class="tooltips" circle quaternary @click="returnBack">
<template #icon> <template #icon>
<n-icon> <n-icon>
<ChartLine /> <ReturnDownBack />
</n-icon> </n-icon>
</template> </template>
</n-button> </n-button>
</template> </template>
图表 返回上一页
</n-tooltip> </n-tooltip>
<n-tooltip trigger="hover" v-if="settingShow"> <n-tooltip trigger="hover">
<template #trigger> <template #trigger>
<n-button class="tooltips" circle quaternary @click="showClick"> <n-button class="tooltips" circle quaternary @click="lineClick">
<template #icon> <template #icon>
<n-icon> <n-icon>
<Settings /> <ChartLine />
</n-icon> </n-icon>
</template> </template>
</n-button> </n-button>
</template> </template>
显示项 图表
</n-tooltip> </n-tooltip>
<n-tooltip trigger="hover"> <n-tooltip trigger="hover" v-if="settingShow">
<template #trigger> <template #trigger>
<n-button class="tooltips" circle quaternary @click="returnBack"> <n-button class="tooltips" circle quaternary @click="showClick">
<template #icon> <template #icon>
<n-icon> <n-icon>
<Power /> <Settings />
</n-icon> </n-icon>
</template> </template>
</n-button> </n-button>
</template> </template>
返回上一页 显示项
</n-tooltip> </n-tooltip>
<n-tooltip trigger="hover" v-if="warningShow"> <n-tooltip trigger="hover" v-if="warningShow">
<template #trigger> <template #trigger>
@ -115,6 +115,14 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination
class="waringPagination"
layout="prev, pager, next"
:current-page.sync="params.pageNum"
:page-size="params.pageSize"
:total="params.total"
@current-change="handleCurrentChange"
/>
<div class="warClose" @click="warClose"> <div class="warClose" @click="warClose">
<CloseCircleOutline /> <CloseCircleOutline />
</div> </div>
@ -127,7 +135,7 @@ import { getWeather } from '@/api/user/index';
import { getWarList, process } from '@/api/waring/index'; import { getWarList, process } from '@/api/waring/index';
import { waringVo } from '@/api/waring/types'; import { waringVo } from '@/api/waring/types';
import { Filter, Maximize, Settings, Power, Bell, ChartLine } from '@vicons/tabler'; import { Filter, Maximize, Settings, Power, Bell, ChartLine } from '@vicons/tabler';
import { CloseCircleOutline } from '@vicons/ionicons5'; import { CloseCircleOutline, ReturnDownBack } from '@vicons/ionicons5';
import { useDateFormat, useNow } from '@vueuse/core'; import { useDateFormat, useNow } from '@vueuse/core';
import { uniqueArrayObject } from '@/utils/index'; import { uniqueArrayObject } from '@/utils/index';
import mitt from '@/plugins/bus'; import mitt from '@/plugins/bus';
@ -145,6 +153,12 @@ const waringModal = ref(false);
const waringData = ref<waringVo[]>([]); const waringData = ref<waringVo[]>([]);
const waringList = ref<waringVo[]>([]); const waringList = ref<waringVo[]>([]);
const routerType = ref(''); const routerType = ref('');
const deptId = ref(0);
const params = reactive({
total: 10,
pageSize: 10,
pageNum: 1
});
const weatherData = ref({ city: '', weather: '', temperature: '', weatherImg: '' }); const weatherData = ref({ city: '', weather: '', temperature: '', weatherImg: '' });
@ -169,6 +183,7 @@ const props = defineProps({
}); });
onMounted(() => { onMounted(() => {
deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
routerType.value = route.query?.id === undefined ? '0' : '1'; routerType.value = route.query?.id === undefined ? '0' : '1';
getWeatherData(); getWeatherData();
}); });
@ -213,20 +228,17 @@ function waringClick() {
} }
function lineClick() { function lineClick() {
// //
router.push({ router.push({
path: '/details' path: '/details'
}); });
} }
// function getWeatherData() { function handleCurrentChange(val: any) {
// // //
// getWeather().then((res: any) => { params.pageNum = val;
// if (res.code === 200) { getwaringList();
// weatherData.value = res.data; }
// }
// });
// }
function getWeatherData() { function getWeatherData() {
// //
@ -252,10 +264,19 @@ function waringMore() {
getwaringList(); getwaringList();
} }
function getwaringList() { function getwaringList() {
const params = 0; //
getWarList(params).then((res: any) => { const paramsr = {
beginTime: '',
endTime: '',
orgCode: deptId.value,
params
};
getWarList(paramsr).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
waringList.value = res.rows; waringList.value = res.rows;
params.total = res.total;
// page.pageSize = res.size;
// page.pageSize = res.current;
} }
}); });
} }
@ -377,4 +398,25 @@ function warClose() {
margin-left: 10px; margin-left: 10px;
} }
} }
.waringModal {
.waringPagination {
justify-content: right;
margin-top: 5px;
:deep(button) {
color: #b1e3ff;
background: transparent;
}
:deep(.el-pager) {
.number,
.more {
color: #b1e3ff;
background: transparent;
}
.number.is-active {
color: #409eff;
}
}
}
}
</style> </style>

180
src/views/monitoring/devicemanage/components/main.vue

@ -24,7 +24,10 @@
<div class="card card_f"> <div class="card card_f">
<div class="dataInfo" v-html="doubleCount('015', 0)"></div> <div class="dataInfo" v-html="doubleCount('015', 0)"></div>
</div> </div>
<img class="deviceImg" src="@/assets/images/device01.gif" /> <!-- <div class="switch switch_a" @click="switchClick('001', 0)"></div> -->
<!-- <div class="switch switch_b" @click="switchClick('065', 0)"></div> -->
<img class="deviceImg" :src="deviceImg" />
<!-- <img class="deviceImg" src="@/assets/images/device01.gif" /> -->
</div> </div>
<div class="deviceImg deviceImgB" v-if="zoneType === 2"> <div class="deviceImg deviceImgB" v-if="zoneType === 2">
<div class="card card_a"> <div class="card card_a">
@ -60,7 +63,8 @@
<div class="card card_f"> <div class="card card_f">
<div class="dataInfo" v-html="doubleCount('015', 0)"></div> <div class="dataInfo" v-html="doubleCount('015', 0)"></div>
</div> </div>
<img class="deviceImg" src="@/assets/images/device02.gif" /> <img class="deviceImg" :src="deviceImg" />
<!-- <img class="deviceImg" src="@/assets/images/device02.gif" /> -->
</div> </div>
<div class="deviceImg deviceImgC" v-if="zoneType === 3"> <div class="deviceImg deviceImgC" v-if="zoneType === 3">
<div class="card card_a"> <div class="card card_a">
@ -106,47 +110,9 @@
<div class="card card_f"> <div class="card card_f">
<div class="dataInfo" v-html="doubleCount('015', 0)"></div> <div class="dataInfo" v-html="doubleCount('015', 0)"></div>
</div> </div>
<img class="deviceImg" src="@/assets/images/device03.gif" /> <img class="deviceImg" :src="deviceImg" />
<!-- <img class="deviceImg" src="@/assets/images/device03.gif" /> -->
</div> </div>
<!-- <div class="deviceImg deviceImgA" v-if="zoneType===1">
<div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
<div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
<div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
<div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
<div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
<div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
<div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
<div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
<img class="deviceImg" src="@/assets/images/device01.gif" />
</div>
<div class="deviceImg deviceImgB" v-if="zoneType===2">
<div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
<div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
<div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
<div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
<div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
<div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
<div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
<div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
<div class="dataInfo dataInfo8" v-html="doubleCount('047',1)"></div>
<div class="dataInfo dataInfo9" v-html="doubleCount('045',1)"></div>
<img class="deviceImg" src="@/assets/images/device02.jpg" />
</div>
<div class="deviceImg deviceImgC" v-if="zoneType===3">
<div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
<div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
<div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
<div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
<div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
<div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
<div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
<div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
<div class="dataInfo dataInfo8" v-html="doubleCount('047',1)"></div>
<div class="dataInfo dataInfo9" v-html="doubleCount('045',1)"></div>
<div class="dataInfo dataInfo10" v-html="doubleCount('047',2)"></div>
<div class="dataInfo dataInfo11" v-html="doubleCount('045',2)"></div>
<img class="deviceImg" src="@/assets/images/device03.jpg" />
</div> -->
<div class="devicInfo" v-if="infoData?.length != 0"> <div class="devicInfo" v-if="infoData?.length != 0">
<div class="title"> <div class="title">
<i /> <i />
@ -158,11 +124,40 @@
<template #arrow> <template #arrow>
<img src="@/assets/images/col_icon.png" /> <img src="@/assets/images/col_icon.png" />
</template> </template>
<n-collapse-item class="colItem" :title="item.label" :name="index" v-for="(item, index) in infoData" <n-collapse-item
:key="index"> class="colItem"
:title="item.label"
:name="index"
v-for="(item, index) in infoData"
:key="index"
>
<div class="content"> <div class="content">
<span v-for="(res, index) in item.header_valve" :key="index">{{ res.label }}: {{ res.value }}{{ <span v-for="(res, index) in item.header_valve" :key="index">
res.paramUnit }}</span> <i>{{ res.label }} </i>
<i v-if="res.ctrlFlag === 0">{{ res.value }}{{ res.paramUnit }}</i>
<i v-if="res.ctrlFlag === 1">
<n-switch
class="switch"
size="small"
v-model:value="res.value"
style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949"
@update:value="handleBlur(res)"
v-if="res.ctrlpro.valueType === 'bool'"
>
<template #checked>Y</template>
<template #unchecked>N</template>
</n-switch>
<n-input-number
size="tiny"
v-model:value="res.value"
style="width: 100px; opacity: 0.9"
button-placement="both"
placeholder=""
@blur="handleBlur(res)"
v-if="res.ctrlpro.valueType != 'bool'"
/>
</i>
</span>
</div> </div>
</n-collapse-item> </n-collapse-item>
</n-collapse> </n-collapse>
@ -172,11 +167,39 @@
<template #arrow> <template #arrow>
<img src="@/assets/images/col_icon.png" /> <img src="@/assets/images/col_icon.png" />
</template> </template>
<n-collapse-item class="colItem" :title="item.label" :name="index" v-for="(item, index) in infoData" <n-collapse-item
:key="index"> class="colItem"
:title="item.label"
:name="index"
v-for="(item, index) in infoData"
:key="index"
>
<div class="content pump"> <div class="content pump">
<span v-for="(res, index) in item.header_pump" :key="index">{{ res.label }}: {{ res.value }}{{ <span v-for="(res, index) in item.header_pump" :key="index">
res.paramUnit }}</span> <i>{{ res.label }} </i>
<i v-if="res.ctrlFlag === 0">{{ res.value }}{{ res.paramUnit }}</i>
<i v-if="res.ctrlFlag === 1">
<n-switch
class="switch"
size="small"
v-model:value="res.value"
style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949"
@update:value="handleBlur(res)"
v-if="res.ctrlpro.valueType === 'bool'"
>
<template #checked>Y</template>
<template #unchecked>N</template>
</n-switch>
<n-input-number
size="tiny"
v-model:value="res.value"
style="width: 100px; opacity: 0.9"
button-placement="both"
placeholder=""
v-if="res.ctrlpro.valueType != 'bool'"
/>
</i>
</span>
</div> </div>
</n-collapse-item> </n-collapse-item>
</n-collapse> </n-collapse>
@ -213,23 +236,38 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { getViewInfo } from '@/api/device/index'; import { getViewInfo } from '@/api/device/index';
import { sendCtrl } from '@/api/table/list';
import { deviceVo } from '@/api/device/types'; import { deviceVo } from '@/api/device/types';
import mitt from '@/plugins/bus'; import mitt from '@/plugins/bus';
const value = ref(0)
// const active = ref(true) // const active = ref(true)
const deviceMenuKey = ref(); const deviceMenuKey = ref();
const infoData = ref<deviceVo[]>(); const infoData = ref<deviceVo[]>();
const zoneType = ref()//1:,2:2,3:3:,4: const zoneType = ref(); //1:,2:2,3:3:,4:
const timer = ref() const deviceImg = ref();
const isCurrentRoute = ref(true) const timer = ref();
const isCurrentRoute = ref(true);
// const collapseDefault = ref<any[]>(); // const collapseDefault = ref<any[]>();
interface FormDataVO {
//url: string;
deviceName: string;
paramCode: string;
value: string;
}
const formData = ref<FormDataVO>({
//url: '',
deviceName: '',
paramCode: '',
value: ''
});
defineProps({ defineProps({
sidebarHeight: { sidebarHeight: {
type: Number, type: Number,
default: 0, default: 0
}, }
}); });
mitt.on('deviceMenuKey', (res: any) => { mitt.on('deviceMenuKey', (res: any) => {
// //
@ -246,10 +284,13 @@ function gitDevice() {
timer.value = setTimeout(async () => { timer.value = setTimeout(async () => {
await (timer.value && clearTimeout(timer.value)); await (timer.value && clearTimeout(timer.value));
await gitDevice(); await gitDevice();
}, 20000) }, 20000);
} }
infoData.value = Object.keys(res.data).length === 0 ? [] : res.data.datas; infoData.value = Object.keys(res.data).length === 0 ? [] : res.data.datas;
zoneType.value = Object.keys(res.data).length === 0 ? 0 : res.data.pCounts; zoneType.value = Object.keys(res.data).length === 0 ? 0 : res.data.pCounts;
deviceImg.value =
Object.keys(res.data).length === 0 ? '' : 'src/assets/images/device/' + res.data.imgIndex + '.gif';
console.log(deviceImg.value);
} else { } else {
clearTimeout(timer.value); clearTimeout(timer.value);
} }
@ -261,7 +302,7 @@ onUnmounted(() => {
if (timer.value !== null || timer.value !== undefined) { if (timer.value !== null || timer.value !== undefined) {
clearTimeout(timer.value); clearTimeout(timer.value);
} }
}) });
// function doubleCount (id:string) { // function doubleCount (id:string) {
// const arr = infoData.value[0].header_main // const arr = infoData.value[0].header_main
@ -281,12 +322,25 @@ onUnmounted(() => {
// }; // };
// }); // });
const doubleCount = (id: string, index: number) => { const doubleCount = (id: string, index: number) => {
const arr = infoData.value[index].header_main const arr = infoData.value[index].header_main;
const obj = arr.find((item: any) => item.id === id) const obj = arr.find((item: any) => item.id === id);
const lable = obj != undefined ? `<span>${obj.label}</span><span>${obj.value} ${obj.paramUnit}</span>` : '' const lable = obj != undefined ? `<span>${obj.label}</span><span>${obj.value} ${obj.paramUnit}</span>` : '';
// const lable = obj != undefined ? `${obj.label}` : '' // const lable = obj != undefined ? `${obj.label}` : ''
// const value = obj != undefined ? `${obj.value}` : '0.0' // const value = obj != undefined ? `${obj.value}` : '0.0'
return lable; return lable;
};
console.log('doubleCount-', doubleCount);
function handleBlur(data: any) {
///
const submitData = data.ctrlpro;
submitData.value = data.value;
console.log(submitData);
sendCtrl(submitData).then((res: any) => {
if (res.code === 200) {
console.log(res.data);
ElMessage(res.data.msg);
}
});
} }
console.log("doubleCount-", doubleCount) </script>
</script>

1344
src/views/monitoring/devicemanage/index.scss

File diff suppressed because it is too large

2
src/views/monitoring/screen/components/main.vue

@ -162,7 +162,7 @@ const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
//const baseApi = import.meta.env.VITE_APP_BASE_API //const baseApi = import.meta.env.VITE_APP_BASE_API
//const apiUrl = baseApi.replace(/https?:/, ''); //const apiUrl = baseApi.replace(/https?:/, '');
const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket
// const wsUrl = `ws://172.1.2.158:9010/websocket/${userInfo.userName}`; //websocket // const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket
const emit = defineEmits(['tableHeaderData']); const emit = defineEmits(['tableHeaderData']);
// const listData = ref([ // const listData = ref([

17
vite.config.ts

@ -44,14 +44,23 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
force: false, //是否强制依赖预构建 force: false, //是否强制依赖预构建
hmr: true, //配置HMR hmr: true, //配置HMR
proxy: { proxy: {
[env.VITE_APP_BASE_API]: { '/dev-api': {
// target: 'http://172.1.2.196:9010/', //本地接口地址 target: 'http://172.1.2.196:9010/', //本地接口地址
// target: 'http://172.1.2.158:9010/', //本地接口地址 // target: 'http://172.1.2.158:9010/', //本地接口地址
target: 'http://10.10.10.56:9010/', //线上测试接口地址 // target: 'http://10.10.10.56:9010/', //线上测试接口地址
changeOrigin: true, changeOrigin: true,
rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '') rewrite: path => path.replace(/^\/dev-api/, '')
} }
} }
// proxy: {
// [env.VITE_APP_BASE_API]: {
// // target: 'http://172.1.2.196:9010/', //本地接口地址
// target: 'http://172.1.2.158:9010/', //本地接口地址
// // target: 'http://10.10.10.56:9010/', //线上测试接口地址
// changeOrigin: true,
// rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
// }
// }
}, },
plugins: [ plugins: [
vue(), vue(),

Loading…
Cancel
Save