高支模大屏模块基础接口调试完成
This commit is contained in:
BianLzhaoMin
parent
a9654112b1
commit
bf3e089a7f
|
|
@ -0,0 +1,33 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 高支模监测 ---- 设备列表接口 左一
|
||||
export function getModelListAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/screen/devModel/getModelList',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 高支模监测 ---- 获取高支模分组
|
||||
export function getModeGroupAPI() {
|
||||
return request({
|
||||
url: '/smart-site/screen/devModel/getModeGroup',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
// 高支模监测 ---- 设备统计接口 右二
|
||||
export function getDevStatisticsAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/screen/devModel/getDevStatistics',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 高支模监测 ---- 报警信息接口 右三
|
||||
export function getWarnInfoAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/screen/devModel/getWarnInfo',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 项目全览 ---- 环境监测接口 右一
|
||||
export function getEnvironmentalDetectionAPI() {
|
||||
return request({
|
||||
url: '/smart-site/projectOverview/environmentalDetection',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
// 项目全览 ---- 感知设备接口 右二
|
||||
export function getTtSysUserCheckListAPI() {
|
||||
return request({
|
||||
url: '/smart-site/projectOverview/getTtSysUserCheckList',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
// 项目全览 ---- 报警信息接口 右三
|
||||
export function getDeviceAlarmListAPI() {
|
||||
return request({
|
||||
url: '/smart-site/projectOverview/deviceAlarmList',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="empty-box">
|
||||
<img :src="url" alt="" />
|
||||
暂无{{ emptyTitle }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
emptyTitle: {
|
||||
type: String,
|
||||
default: () => '数据',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABpCAYAAACqCriYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYzOUJFRDg3MURCMzExRUJBQjE5QjZBNzRCNEYxRTY4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYzOUJFRDg4MURCMzExRUJBQjE5QjZBNzRCNEYxRTY4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjM5QkVEODUxREIzMTFFQkFCMTlCNkE3NEI0RjFFNjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjM5QkVEODYxREIzMTFFQkFCMTlCNkE3NEI0RjFFNjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6LooW1AAAKmElEQVR42uxd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',
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.empty-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -97,7 +97,8 @@ service.interceptors.response.use(
|
|||
// 未设置状态码则默认成功状态
|
||||
const code = res.data.code || 200
|
||||
// 获取错误信息
|
||||
const msg = errorCode[code] || res.data.msg || errorCode['default']
|
||||
const msg =
|
||||
errorCode[code] || res.data.msg || res.msg || errorCode['default']
|
||||
// 二进制数据则直接返回
|
||||
if (
|
||||
res.request.responseType === 'blob' ||
|
||||
|
|
|
|||
|
|
@ -2,28 +2,38 @@
|
|||
<!-- 设备列表 -->
|
||||
<div style="height: 100%; position: relative">
|
||||
<ChartsBox :boxTitle="`设备列表`">
|
||||
<div class="container">
|
||||
<div
|
||||
class="device-item"
|
||||
v-for="(item, index) in deviceList"
|
||||
:key="index"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
item.onLine
|
||||
? `${require('@/assets/image/env-img/line_big.png')}`
|
||||
: `${require('@/assets/image/env-img/offline_big.png')}`
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
<span :style="item.onLine ? 'color:#71C4FF' : ''">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
<span :style="item.onLine ? 'color:#71C4FF' : ''">
|
||||
{{ item.code }}
|
||||
</span>
|
||||
<div class="container" v-if="deviceList.length > 0">
|
||||
<div class="scroll-container">
|
||||
<div
|
||||
class="device-item"
|
||||
v-for="(item, index) in deviceList"
|
||||
:key="index"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
item.isOnline == 1
|
||||
? `${require('@/assets/image/env-img/line_big.png')}`
|
||||
: `${require('@/assets/image/env-img/offline_big.png')}`
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
<span
|
||||
:style="item.isOnline == 1 ? 'color:#71C4FF' : ''"
|
||||
>
|
||||
{{ item.devName }}
|
||||
</span>
|
||||
<span
|
||||
:style="item.isOnline == 1 ? 'color:#71C4FF' : ''"
|
||||
>
|
||||
{{ item.devCode }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" v-else>
|
||||
<EmptyModel />
|
||||
</div>
|
||||
</ChartsBox>
|
||||
|
||||
<div class="case">
|
||||
|
|
@ -36,19 +46,43 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import ChartsBox from '@/components/ChartsBox/index.vue'
|
||||
import EmptyModel from '@/components/EmptyModel/index.vue'
|
||||
import { getModelListAPI } from '@/api/home-high-formwork.js'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
components: { ChartsBox, EmptyModel },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceList: [
|
||||
{ name: '1号设备', code: 'YKD-231', onLine: true },
|
||||
{ name: '2号设备', code: 'YKD-233', onLine: true },
|
||||
{ name: '3号设备', code: 'YKD-232', onLine: false },
|
||||
{ name: '4号设备', code: 'YKD-236', onLine: true },
|
||||
],
|
||||
deviceList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getModelListData(id) {
|
||||
const { data: res } = await getModelListAPI({ id })
|
||||
console.log(
|
||||
`%c🔍 高支模监测 ----> 设备列表(左一) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
this.deviceList = res
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.getModelListData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -62,7 +96,50 @@ export default {
|
|||
font-size: 12px;
|
||||
transform: translateY(10px);
|
||||
|
||||
// .device-item {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
|
||||
// img {
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.scroll-container {
|
||||
flex: 1; // 占据剩余空间
|
||||
overflow-y: auto; // 垂直滚动
|
||||
scrollbar-width: thin; // Firefox滚动条样式
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent; // Firefox滚动条颜色
|
||||
z-index: 9;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
|
||||
/* Webkit浏览器滚动条样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// transform: translateY(10px);
|
||||
|
||||
.device-item {
|
||||
width: calc((100% - 20px) / 4);
|
||||
margin-right: 4px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -73,6 +150,10 @@ export default {
|
|||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
& .device-item:nth-child(6n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.case {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
/>
|
||||
<div>
|
||||
<span>设备总数</span>
|
||||
<span>9999</span>
|
||||
<span>{{ allNum || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-box">
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
/>
|
||||
<div>
|
||||
<span>设备在线率</span>
|
||||
<span>50%</span>
|
||||
<span>{{ onLineRate || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -30,10 +30,47 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import { getDevStatisticsAPI } from '@/api/home-high-formwork.js'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
allNum: 0,
|
||||
onLineRate: 0,
|
||||
online: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getDevStatisticsData(id) {
|
||||
const { data: res } = await getDevStatisticsAPI({ id })
|
||||
console.log(
|
||||
`%c🔍 高支模监测 ----> 设备统计(右二) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
const { allNum, online } = res
|
||||
this.allNum = allNum
|
||||
this.online = online
|
||||
this.onLineRate = isNaN(online / allNum)
|
||||
? 0
|
||||
: ((online / allNum) * 100).toFixed(2)
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.getDevStatisticsData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,196 @@
|
|||
<template>
|
||||
<!-- 天气预报 -->
|
||||
<div style="height: 100%">
|
||||
<ChartsBox :boxTitle="`支护详情`">
|
||||
<div class="container">
|
||||
<div>
|
||||
<span>支护名称：</span>
|
||||
<span>{{ groupInfo.modelName || '暂无' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>支护状态：</span>
|
||||
<span>{{
|
||||
(groupInfo.modelState == 1 ? '在建' : '已拆除') ||
|
||||
'暂无'
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>安全等级：</span>
|
||||
<span>{{ levelInfo[groupInfo.modeLevel] || '暂无' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>施工开始时间：</span>
|
||||
<span>{{ groupInfo.updateTime || '暂无' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>备注：</span>
|
||||
<span>{{ groupInfo.remark || '暂无' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="floating-box" @click="drawer = true" />
|
||||
</div>
|
||||
</ChartsBox>
|
||||
|
||||
<el-drawer
|
||||
:with-header="false"
|
||||
append-to-body
|
||||
direction="rtl"
|
||||
:visible.sync="drawer"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<div
|
||||
class="group-item"
|
||||
v-for="(item, index) in groupList"
|
||||
:key="index"
|
||||
@click="onHandleGroup(item, index)"
|
||||
:class="index === activeIndex ? 'active' : ''"
|
||||
>
|
||||
<div> {{ item.modelName }} </div>
|
||||
<div
|
||||
:style="
|
||||
item.modelState == 1
|
||||
? 'color:rgb(8, 202, 86)'
|
||||
: 'color:rgb(255, 50, 30)'
|
||||
"
|
||||
>
|
||||
{{ item.modelState == 1 ? '在建' : '已拆除' }}
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import { getModeGroupAPI } from '@/api/home-high-formwork.js'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
groupList: [],
|
||||
activeIndex: 0,
|
||||
groupInfo: {
|
||||
modelName: '',
|
||||
modelState: '',
|
||||
modeLevel: '',
|
||||
updateTime: '',
|
||||
remark: '',
|
||||
},
|
||||
|
||||
levelInfo: {
|
||||
1: '一级',
|
||||
2: '二级',
|
||||
3: '三级',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.drawer = false
|
||||
},
|
||||
async getModeGroupData() {
|
||||
const { data: res } = await getModeGroupAPI()
|
||||
console.log(
|
||||
`%c🔍 高支模分组 ---- 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
if (res.length > 0) {
|
||||
this.groupInfo = res[0]
|
||||
this.$emit('handleQueryById', res[0].id)
|
||||
}
|
||||
|
||||
this.groupList = res
|
||||
},
|
||||
|
||||
onHandleGroup(item, index) {
|
||||
this.groupInfo = item
|
||||
this.activeIndex = index
|
||||
|
||||
// 触发自定义事件传递id
|
||||
this.$emit('handleQueryById', item.id)
|
||||
this.drawer = false
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getModeGroupData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 14px;
|
||||
text-align: left;
|
||||
|
||||
box-shadow: inset 0 0 10px -1px rgba(4, 211, 255, 0.5);
|
||||
|
||||
& span:first-child {
|
||||
margin-right: 4px;
|
||||
color: #04d3ff;
|
||||
}
|
||||
}
|
||||
|
||||
.floating-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
height: 70px;
|
||||
background: url('@/assets/image/home/close_icon.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-drawer.rtl {
|
||||
// height: 80%;
|
||||
width: 22% !important;
|
||||
padding: 12px;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
background: rgba(26, 79, 104, 0.8);
|
||||
color: #fff;
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
box-shadow: inset 0 0 10px 6px rgba(4, 211, 255, 0.5);
|
||||
overflow-y: auto; // 垂直滚动
|
||||
scrollbar-width: thin; // Firefox滚动条样式
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent; // Firefox滚动条颜色
|
||||
}
|
||||
|
||||
.group-item {
|
||||
width: 96%;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #3089b9;
|
||||
cursor: pointer;
|
||||
|
||||
div {
|
||||
padding: 6px 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid #0ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,257 +11,20 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
|
||||
import { getWarnInfoAPI } from '@/api/home-high-formwork.js'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
data: [
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件1',
|
||||
'dev-1',
|
||||
"<span class='colorGrass'>↑75%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件2',
|
||||
'dev-2',
|
||||
"<span class='colorRed'>↓33%</span>",
|
||||
],
|
||||
[
|
||||
"<div class='img-box'><img src='" +
|
||||
require('@/assets/image/pro-view/red.png') +
|
||||
"' class='table-img red-img'><img src='" +
|
||||
require('@/assets/image/pro-view/three.png') +
|
||||
"' class='three-img'></div>",
|
||||
'组件3',
|
||||
'dev-3',
|
||||
"<span class='colorGrass'>↑100%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件4',
|
||||
'rea-1',
|
||||
"<span class='colorGrass'>↑94%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件5',
|
||||
'rea-2',
|
||||
"<span class='colorGrass'>↑95%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
],
|
||||
rowNum: 10, //表格行数
|
||||
data: [],
|
||||
rowNum: 5, //表格行数
|
||||
headerHeight: 35,
|
||||
headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
|
||||
oddRowBGC: '', //奇数行
|
||||
|
|
@ -270,10 +33,46 @@ export default {
|
|||
columnWidth: [80],
|
||||
align: ['center'],
|
||||
hoverPause: true,
|
||||
waitTime: 2000,
|
||||
waitTime: 3000,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getWarnInfoData(id) {
|
||||
const { data: res } = await getWarnInfoAPI({ id })
|
||||
console.log(
|
||||
`%c🔍 报警信息 ----> 设备列表(右三) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
if (res.length > 0) {
|
||||
console.log('996')
|
||||
|
||||
const newData = res.map((e) => [
|
||||
`<img src="${require('@/assets/image/pro-view/blue.png')}" class="table-img">`,
|
||||
`<span class="colorBlue">${e.remark}</span>`,
|
||||
`<span class="colorBlue">${e.devName}</span>`,
|
||||
`<span class="time-box colorBlue">${e.createTime}</span>`,
|
||||
])
|
||||
|
||||
// 替换整个 config 对象，触发组件更新
|
||||
this.config = {
|
||||
...this.config, // 保留原有配置
|
||||
data: newData, // 更新数据
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.getWarnInfoData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -308,4 +107,28 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
::v-deep .colorBlue {
|
||||
color: #6aaef3 !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
::v-deep.colorRed {
|
||||
color: #ff5534;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
::v-deep .time-box {
|
||||
font-family: 'DS-TITle';
|
||||
display: block;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
::v-deep .dv-scroll-board .rows .ceil {
|
||||
width: auto !important;
|
||||
min-width: 80px; /* 最小宽度 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<!-- 高支模监测-->
|
||||
<div class="home-high-formwork">
|
||||
<div class="env-1">
|
||||
<LeftOneModel />
|
||||
<LeftOneModel :queryId="queryId" />
|
||||
</div>
|
||||
<div class="env-2">
|
||||
<CenterOneModel />
|
||||
</div>
|
||||
<div class="env-3">
|
||||
<RightOneModel />
|
||||
<RightThreeModel @handleQueryById="handleQueryById" />
|
||||
</div>
|
||||
<div class="env-4">
|
||||
<LeftTwoModel />
|
||||
|
|
@ -17,11 +17,14 @@
|
|||
<CenterTwoModel />
|
||||
</div>
|
||||
<div class="env-6">
|
||||
<RightTwoModel />
|
||||
<RightOneModel :queryId="queryId" />
|
||||
</div>
|
||||
<div class="env-7">
|
||||
<CenterThreeModel />
|
||||
</div>
|
||||
<div class="env-8">
|
||||
<RightTwoModel :queryId="queryId" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -35,6 +38,7 @@ import CenterThreeModel from './components/center-three-model.vue' // 中3
|
|||
|
||||
import RightOneModel from './components/right-one-model.vue' // 右1
|
||||
import RightTwoModel from './components/right-two-model.vue' // 右2
|
||||
import RightThreeModel from './components/right-three-model.vue' // 右2
|
||||
export default {
|
||||
components: {
|
||||
LeftOneModel,
|
||||
|
|
@ -44,6 +48,17 @@ export default {
|
|||
CenterThreeModel,
|
||||
RightOneModel,
|
||||
RightTwoModel,
|
||||
RightThreeModel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryId: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleQueryById(id) {
|
||||
this.queryId = id
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -69,7 +84,7 @@ export default {
|
|||
}
|
||||
.env-3 {
|
||||
grid-column: 9 / 12;
|
||||
grid-row: 1 / 4;
|
||||
grid-row: 1 / 5;
|
||||
}
|
||||
.env-4 {
|
||||
grid-column: 1 / 4;
|
||||
|
|
@ -81,11 +96,15 @@ export default {
|
|||
}
|
||||
.env-6 {
|
||||
grid-column: 9 / 12;
|
||||
grid-row: 4 / 13;
|
||||
grid-row: 5 / 8;
|
||||
}
|
||||
.env-7 {
|
||||
grid-column: 4 / 9;
|
||||
grid-row: 9/ 13;
|
||||
}
|
||||
.env-8 {
|
||||
grid-column: 9 / 12;
|
||||
grid-row: 8/ 13;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
</div>
|
||||
<div class="env-bg">
|
||||
<div class="count">
|
||||
<span> 50 </span>
|
||||
<span>% </span>
|
||||
<span> {{ item.count }} </span>
|
||||
<span>{{ item.unit }}</span>
|
||||
</div>
|
||||
<div class="title">
|
||||
{{ item.title }}
|
||||
|
|
@ -28,6 +28,7 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import { getEnvironmentalDetectionAPI } from '@/api/project-overview.js'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
data() {
|
||||
|
|
@ -36,31 +37,60 @@ export default {
|
|||
{
|
||||
title: '温度',
|
||||
icon: require('@/assets/image/pro-view/env1.png'),
|
||||
count: 50,
|
||||
count: 0,
|
||||
unit: '℃',
|
||||
},
|
||||
{
|
||||
title: '风速',
|
||||
icon: require('@/assets/image/pro-view/env2.png'),
|
||||
count: 50,
|
||||
count: 0,
|
||||
unit: 'm/s',
|
||||
},
|
||||
{
|
||||
title: '湿度',
|
||||
icon: require('@/assets/image/pro-view/env3.png'),
|
||||
count: 50,
|
||||
count: 0,
|
||||
unit: '%',
|
||||
},
|
||||
{
|
||||
title: 'PM2.5',
|
||||
icon: require('@/assets/image/pro-view/env4.png'),
|
||||
count: 50,
|
||||
count: 0,
|
||||
unit: 'ug/m³',
|
||||
},
|
||||
{
|
||||
title: '噪音',
|
||||
icon: require('@/assets/image/pro-view/env5.png'),
|
||||
count: 50,
|
||||
count: 0,
|
||||
unit: 'DB',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getEnvironmentalDetectionData() {
|
||||
const { data: res } = await getEnvironmentalDetectionAPI()
|
||||
|
||||
console.log(
|
||||
`%c🔍 项目全览 ----> 环境监测(右一) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
const { temperature, windSpeed, humidity, pm, noise } = res
|
||||
this.envList[0].count = temperature
|
||||
this.envList[1].count = windSpeed
|
||||
this.envList[2].count = humidity
|
||||
this.envList[3].count = pm
|
||||
this.envList[4].count = noise
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getEnvironmentalDetectionData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -104,6 +134,7 @@ export default {
|
|||
|
||||
.count {
|
||||
margin: 14px 0 6px 0;
|
||||
font-family: 'DS-TITle';
|
||||
& span:first-child {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -11,77 +11,57 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import { getDeviceAlarmListAPI } from '@/api/project-overview.js'
|
||||
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
data: [
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件1',
|
||||
'dev-1',
|
||||
"<span class='colorGrass'>↑75%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件2',
|
||||
'dev-2',
|
||||
"<span class='colorRed'>↓33%</span>",
|
||||
],
|
||||
[
|
||||
"<div class='img-box'><img src='" +
|
||||
require('@/assets/image/pro-view/red.png') +
|
||||
"' class='table-img red-img'><img src='" +
|
||||
require('@/assets/image/pro-view/three.png') +
|
||||
"' class='three-img'></div>",
|
||||
'组件3',
|
||||
'dev-3',
|
||||
"<span class='colorGrass'>↑100%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件4',
|
||||
'rea-1',
|
||||
"<span class='colorGrass'>↑94%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件5',
|
||||
'rea-2',
|
||||
"<span class='colorGrass'>↑95%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
],
|
||||
data: [],
|
||||
rowNum: 5, //表格行数
|
||||
headerHeight: 35,
|
||||
headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
|
||||
oddRowBGC: '', //奇数行
|
||||
evenRowBGC: '', //偶数行
|
||||
|
||||
columnWidth: [80],
|
||||
columnWidth: [],
|
||||
align: ['center'],
|
||||
hoverPause: true,
|
||||
waitTime: 5000,
|
||||
waitTime: 3000,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getDeviceAlarmListData() {
|
||||
const { data: res } = await getDeviceAlarmListAPI()
|
||||
console.log(
|
||||
`%c🔍 项目全览 ----> 报警信息(右三) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
if (res.length > 0) {
|
||||
const newData = res.map((e) => [
|
||||
`<img src="${require('@/assets/image/pro-view/blue.png')}" class="table-img">`,
|
||||
`<span class="colorBlue">${e.remark}</span>`,
|
||||
`<span class="colorBlue">${e.devName}</span>`,
|
||||
`<span class="time-box colorBlue">${e.createTime}</span>`,
|
||||
])
|
||||
|
||||
// 替换整个 config 对象，触发组件更新
|
||||
this.config = {
|
||||
...this.config, // 保留原有配置
|
||||
data: newData, // 更新数据
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getDeviceAlarmListData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -116,4 +96,28 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
::v-deep .colorBlue {
|
||||
color: #6aaef3 !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
::v-deep.colorRed {
|
||||
color: #ff5534;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
::v-deep .time-box {
|
||||
font-family: 'DS-TITle';
|
||||
display: block;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
::v-deep .dv-scroll-board .rows .ceil {
|
||||
width: auto !important;
|
||||
min-width: 80px; /* 最小宽度 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,24 +5,27 @@
|
|||
<div class="feel-box">
|
||||
<div class="total item-box">
|
||||
<div> 感知设备总数 </div>
|
||||
<div> 999 </div>
|
||||
<div> {{ totalQuantity }} </div>
|
||||
</div>
|
||||
<div class="total-2 item-box">
|
||||
<div> 感知设备总数 </div>
|
||||
<div> 999 </div>
|
||||
<div> 设备总在线数 </div>
|
||||
<div> {{ onlineQuantity }} </div>
|
||||
</div>
|
||||
<div class="err-total item-box">
|
||||
<div> 感知设备总数 </div>
|
||||
<div> 999 </div>
|
||||
<div> 设备异常总数 </div>
|
||||
<div> {{ totalExceptionCount }} </div>
|
||||
</div>
|
||||
<div class="warn-total item-box">
|
||||
<div> 感知设备总数 </div>
|
||||
<div> 999 </div>
|
||||
<div> 设备报警次数 </div>
|
||||
<div> {{ deviceAlarms }} </div>
|
||||
</div>
|
||||
|
||||
<div class="line-total item-box">
|
||||
<div> 设备在线率 </div>
|
||||
<div> 99<span style="font-size: 13px">%</span> </div>
|
||||
<div>
|
||||
{{ deviceOnLineRatio }}
|
||||
<span style="font-size: 13px">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -32,8 +35,69 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import { getTtSysUserCheckListAPI } from '@/api/project-overview.js'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
data() {
|
||||
return {
|
||||
/**
|
||||
* 感知设备总数
|
||||
*/
|
||||
totalQuantity: 0,
|
||||
|
||||
/**
|
||||
* 设备在线总数
|
||||
*/
|
||||
onlineQuantity: 0,
|
||||
|
||||
/**
|
||||
* 设备异常总数
|
||||
*/
|
||||
totalExceptionCount: 0,
|
||||
|
||||
/**
|
||||
* 设备报警次数
|
||||
*/
|
||||
deviceAlarms: 0,
|
||||
|
||||
/**
|
||||
* 设备在线率
|
||||
*/
|
||||
deviceOnLineRatio: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTtSysUserCheckListData() {
|
||||
const { data: res } = await getTtSysUserCheckListAPI()
|
||||
console.log(
|
||||
`%c🔍 项目全览 ----> 感知设备(右二) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
const {
|
||||
totalQuantity,
|
||||
onlineQuantity,
|
||||
totalExceptionCount,
|
||||
deviceAlarms,
|
||||
} = res
|
||||
this.totalQuantity = totalQuantity
|
||||
this.onlineQuantity = onlineQuantity
|
||||
this.totalExceptionCount = totalExceptionCount
|
||||
this.deviceAlarms = deviceAlarms
|
||||
|
||||
this.deviceOnLineRatio = isNaN(
|
||||
(onlineQuantity / totalQuantity).toFixed(2),
|
||||
)
|
||||
? 0
|
||||
: ((onlineQuantity / totalQuantity) * 100).toFixed(2)
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getTtSysUserCheckListData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -66,6 +130,7 @@ export default {
|
|||
margin-top: 6px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-family: 'DS-TITle';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ module.exports = {
|
|||
open: true,
|
||||
proxy: {
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: 'http://192.168.0.60:38080',
|
||||
target: 'http://192.168.0.60:38080', // 赵福海
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: '',
|
||||
|
|
|
|||
Loading…
Reference in New Issue