mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-28 11:19:24 +08:00
合并代码
This commit is contained in:
ym1026
@@ -17,7 +17,7 @@
|
||||
selectedRowKeys: data.selectedRowKeys,
|
||||
onChange: onSelectChange
|
||||
}
|
||||
: false
|
||||
: {}
|
||||
"
|
||||
:expanded-row-keys="data.newTableOpt.expand ? data.expandedKeys : null"
|
||||
size="middle"
|
||||
@@ -161,8 +161,11 @@ const scroll = ref({})
|
||||
onMounted(async () => {
|
||||
data.newColumns = [...props.columns]
|
||||
data.realTableData = [...props.tableData]
|
||||
|
||||
await nextTick()
|
||||
// console.log(props.tableH, 'props.tableH');
|
||||
console.log(comtable.value.offsetHeight,'comtable.value.offsetHeight');
|
||||
|
||||
|
||||
scroll.value = { y: comtable.value.offsetHeight - 56 }
|
||||
})
|
||||
@@ -220,10 +223,11 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.comtable {
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@@ -261,6 +265,10 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
background: transparent;
|
||||
color: #fff !important;
|
||||
border-bottom: none !important; /* 可选：去除底部边框 */
|
||||
&.ant-table-cell-fix-right{
|
||||
background: #10687d !important;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -339,19 +347,22 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
top: -210px !important;
|
||||
}
|
||||
.ant-pagination-item {
|
||||
border: 1px solid #fff;
|
||||
&:not(.ant-pagination-item-active):hover {
|
||||
background: #1c797a !important;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
background: #1c797a !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-item-ellipsis){
|
||||
color: rgb(255 255 255 / 25%) !important;
|
||||
}
|
||||
.ant-pagination-item-active {
|
||||
border: 1px solid transparent;
|
||||
color: #fff;
|
||||
border: none !important;
|
||||
background: #1c797a !important;
|
||||
}
|
||||
}
|
||||
@@ -369,6 +380,12 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
:deep(.ant-table-body .ant-table-cell-fix-right.ant-table-cell-fix-right-first){
|
||||
background: #082e4a !important;
|
||||
|
||||
}
|
||||
:deep(.ant-table-body) {
|
||||
color:#fff;
|
||||
@@ -416,4 +433,9 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
|
||||
background: var(--table-select) !important;
|
||||
}
|
||||
:deep(.ant-table-cell-fix-right){
|
||||
&::after{
|
||||
border-inline-end:none !important
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -371,7 +371,7 @@ import {
|
||||
onMounted,
|
||||
defineExpose
|
||||
} from 'vue'
|
||||
import { TreeSelect } from 'ant-design-vue'
|
||||
|
||||
import iconfonts from '../assets/iconfont/iconfont.json'
|
||||
import validateRulesObj from '../utils/decorator'
|
||||
|
||||
@@ -420,7 +420,7 @@ const data = reactive({
|
||||
],
|
||||
|
||||
treeCheckValue: null,
|
||||
SHOW_PARENT: TreeSelect.SHOW_PARENT,
|
||||
// SHOW_PARENT: TreeSelect.SHOW_PARENT,
|
||||
|
||||
loading: false,
|
||||
imageUrl: ''
|
||||
@@ -641,7 +641,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.form-item {
|
||||
width: 320px !important;
|
||||
// width: 320px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -154,8 +154,7 @@ export default {
|
||||
// this.formRules = menuFormRules
|
||||
break
|
||||
case 'permission':
|
||||
// this.detailInfos = permissionOptions
|
||||
// this.formRules = permissionFormRules
|
||||
|
||||
break
|
||||
|
||||
case 'role':
|
||||
@@ -175,6 +174,7 @@ export default {
|
||||
case 'alarmLog':
|
||||
this.detailInfos = alarmlogOptions
|
||||
this.formRules = {}
|
||||
break
|
||||
case 'serviceApi':
|
||||
this.detailInfos = serviceApiOptions
|
||||
this.formRules = serviceApiFormRules
|
||||
|
||||
@@ -35,43 +35,62 @@
|
||||
<span class="value">{{ info.v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.view == 1" class="item-button">
|
||||
<span class="text">实时数据：</span>
|
||||
<a-button type="primary" size="small" @click="openModal(item)">查看</a-button>
|
||||
<div class="item-button">
|
||||
<div v-if="item.view == 1">
|
||||
<span class="text">实时数据：</span>
|
||||
<a-button type="primary" size="small" @click="openModal(item, 1)">查看</a-button>
|
||||
</div>
|
||||
<div v-if="item.type == 105">
|
||||
<span class="text">单体信息：</span>
|
||||
<a-button type="primary" size="small" @click="openModal(item, 2)">查看</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:open="modalOpen"
|
||||
@ok="handleOk"
|
||||
width="90%"
|
||||
width="60%"
|
||||
class="modal-device"
|
||||
:get-container="() => $refs.device"
|
||||
>
|
||||
<div>
|
||||
<div class="title">
|
||||
<div>电流电压</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" />
|
||||
<div v-if="modalComponent == 1" class="modal-content">
|
||||
<div class="item">
|
||||
<div class="title">
|
||||
电流电压
|
||||
<!-- <div>电流电压</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" /> -->
|
||||
</div>
|
||||
<div class="echarts">
|
||||
<predictEcharts
|
||||
:chart-options="chartOptions[0]"
|
||||
:chart-data="chartData"
|
||||
ref="chartRef1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echarts">
|
||||
<predictEcharts
|
||||
:chart-options="chartOptions[0]"
|
||||
:chart-data="chartData"
|
||||
ref="chartRef1"
|
||||
/>
|
||||
<div class="item">
|
||||
<div class="title">功率</div>
|
||||
<div class="echarts">
|
||||
<predictEcharts
|
||||
:chart-options="chartOptions[1]"
|
||||
:chart-data="chartData"
|
||||
ref="chartRef2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">
|
||||
<div>功率</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" />
|
||||
</div>
|
||||
<div class="echarts">
|
||||
<predictEcharts
|
||||
:chart-options="chartOptions[1]"
|
||||
:chart-data="chartData"
|
||||
ref="chartRef2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="content-table" style="height: 600px" v-else>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
size="small"
|
||||
:scroll="{ y: 500 }"
|
||||
:pagination="false"
|
||||
row-class-name="no-hover-row"
|
||||
row-key="id"
|
||||
>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
@@ -98,19 +117,7 @@ export default {
|
||||
return {
|
||||
modalOpen: false,
|
||||
deviceList: [],
|
||||
chunengInfo: [
|
||||
{ label: '运行模式', key: 'operationMode', value: '并网运行' },
|
||||
{ label: '电池储能容量', key: 'batteryCapacity', value: '100kWh' },
|
||||
{ label: '实时电压', key: 'voltage', value: '232.5V' },
|
||||
{ label: '功率因数', key: 'powerFactor', value: '0.95' },
|
||||
{ label: '实时电流', key: 'current', value: '0.01A' },
|
||||
{ label: '额定电压', key: 'ratedVoltage', value: '232.5V' },
|
||||
{ label: '实时功率', key: 'power', value: '0.01kW' },
|
||||
{ label: '额定电流', key: 'ratedCurrent', value: '0.01A' },
|
||||
{ label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
|
||||
{ label: '额定功率', key: 'ratedPower', value: '0.01kW' },
|
||||
{ label: '冷却方式', key: 'coolingMethod', value: '风冷' }
|
||||
],
|
||||
|
||||
chartOptions: [
|
||||
{
|
||||
type: 'line',
|
||||
@@ -173,6 +180,52 @@ export default {
|
||||
chartData: {
|
||||
xdata: [],
|
||||
ydata: {}
|
||||
},
|
||||
modalComponent: 1,
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '单体SOC（%）',
|
||||
dataIndex: 'SOC',
|
||||
key: 'SOC'
|
||||
},
|
||||
{
|
||||
title: '单体SOH（%）',
|
||||
dataIndex: 'SOH',
|
||||
key: 'SOH'
|
||||
},
|
||||
{
|
||||
title: '单体电压（V）',
|
||||
dataIndex: 'V',
|
||||
key: 'V'
|
||||
},
|
||||
{
|
||||
title: '单体温度（℃）',
|
||||
dataIndex: 'T',
|
||||
key: 'T'
|
||||
},
|
||||
{
|
||||
title: '单体内阻（Ω）',
|
||||
dataIndex: 'R_i',
|
||||
key: 'R_i'
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
pageOption: {
|
||||
// pageSize: 1000,
|
||||
// page: 1
|
||||
},
|
||||
tableOption: {
|
||||
scroll: {
|
||||
y: 500
|
||||
},
|
||||
page: false
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -191,8 +244,15 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.getDeviceList()
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
this.getList()
|
||||
},
|
||||
getIcongont(ele) {
|
||||
return deviceTypeList.find((item) => item.value == ele.type).iconfont || ''
|
||||
},
|
||||
@@ -226,9 +286,32 @@ export default {
|
||||
})
|
||||
this.chartData.ydata = res.data
|
||||
this.chartData.xdata = this.generateTimePoints()
|
||||
this.$refs.chartRef1.initCharts()
|
||||
this.$refs.chartRef2.initCharts()
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.chartRef1) {
|
||||
this.$refs.chartRef1.initCharts()
|
||||
}
|
||||
if (this.$refs.chartRef2) {
|
||||
this.$refs.chartRef2.initCharts()
|
||||
}
|
||||
})
|
||||
// this.$refs.chartRef1.initCharts()
|
||||
// this.$refs.chartRef2.initCharts()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
//查询BCU单体信息
|
||||
async getDeviceBCUDetail(item) {
|
||||
try {
|
||||
const res = await getReq('/queryDeviceBCUDetail', {
|
||||
station_id: this.stationId,
|
||||
device_id: item.device_id
|
||||
})
|
||||
|
||||
this.tableData = res.data.map((item, index) => {
|
||||
item.id = index + 1
|
||||
return item
|
||||
})
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
@@ -249,10 +332,15 @@ export default {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
async openModal(item) {
|
||||
await this.getDevicCharts(item)
|
||||
|
||||
async openModal(item, val) {
|
||||
console.log(item, '=============')
|
||||
this.modalComponent = val
|
||||
this.modalOpen = true
|
||||
if (val == 1) {
|
||||
await this.getDevicCharts(item)
|
||||
} else {
|
||||
await this.getDeviceBCUDetail(item)
|
||||
}
|
||||
},
|
||||
handleOk() {
|
||||
this.modalOpen = false
|
||||
@@ -266,15 +354,20 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
// grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
.device-item {
|
||||
border-radius: 15px;
|
||||
|
||||
background: $bg2-color;
|
||||
padding: 15px;
|
||||
min-width: 340px;
|
||||
max-width: 430px;
|
||||
height: 260px;
|
||||
flex: 1;
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -290,7 +383,7 @@ export default {
|
||||
background: linear-gradient(90deg, #3dfefa 0%, #2a82e4 2.96%, #27a188 100%),
|
||||
linear-gradient(90deg, #3dfefa 0%, #01dfef 2.96%, #08a5ff 100%);
|
||||
.iconfont {
|
||||
font-size: 50px;
|
||||
font-size: 45px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@@ -332,8 +425,8 @@ export default {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
color: #fff;
|
||||
display: grid;
|
||||
// line-height: 45px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 3px;
|
||||
padding: 0 10px;
|
||||
height: 120px;
|
||||
overflow-y: auto;
|
||||
@@ -345,7 +438,12 @@ export default {
|
||||
}
|
||||
}
|
||||
.item-button {
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
div {
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
.text {
|
||||
color: $text-color;
|
||||
@@ -354,26 +452,66 @@ export default {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.content-table {
|
||||
height: 700px;
|
||||
margin-top: 40px;
|
||||
|
||||
:deep(.ant-table-header tr th) {
|
||||
background: $table-border !important;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.ant-table-body tr td, .ant-table-cell) {
|
||||
background: $table-bg !important;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.environment {
|
||||
width: 200px;
|
||||
}
|
||||
:deep(.modal-device) {
|
||||
.modal-device {
|
||||
color: #fff;
|
||||
.title {
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
flex-direction: column;
|
||||
.modal-content {
|
||||
height: 700px;
|
||||
.item {
|
||||
// height: 300px;
|
||||
.title {
|
||||
color: #fff;
|
||||
width: 230px;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-image: url('@/assets/boxBottom.png') 0 0 100% 0 stretch;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 232px;
|
||||
height: 6px;
|
||||
margin-top: 10px;
|
||||
.echarts {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-body) {
|
||||
:deep(.ant-table-wrapper .ant-table-row-expand-icon) {
|
||||
color: $green !important;
|
||||
}
|
||||
//表格行悬浮样式
|
||||
.no-hover-row:hover > td {
|
||||
// background-color: transparent !important;
|
||||
background-color: #f0f8ff !important;
|
||||
}
|
||||
}
|
||||
:deep(.ant-table-cell) {
|
||||
&::before {
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
:deep(.ant-table-thead > tr > td) {
|
||||
border-bottom: none !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table-tbody > tr > td) {
|
||||
border-top: none !important;
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table-thead > tr > th) {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
167
web/src/components/monitor/haikang.vue
Normal file
167
web/src/components/monitor/haikang.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="title" >
|
||||
<span>{{ item.name }}</span>
|
||||
<img
|
||||
src="@/assets/images/fillScreen.png"
|
||||
alt=""
|
||||
width="23px"
|
||||
style="margin-left: 10px; cursor: pointer"
|
||||
/>
|
||||
</div>
|
||||
<div :id="'divPlugin_' + index" class="plugin"></div>
|
||||
<!-- <a-button @click="clickLogin">开始登录</a-button>
|
||||
<a-button @click="clickStartRealPlay">开始预览</a-button> -->
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
g_iWndIndex: 0,
|
||||
szDeviceIdentify: '',
|
||||
deviceport: '',
|
||||
channels: [],
|
||||
ip: '',
|
||||
port: '',
|
||||
username: '',
|
||||
password: '',
|
||||
iRtspPort: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.init()
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let that = this;
|
||||
|
||||
// 初始化插件参数及插入插件
|
||||
this.$nextTick(() => {
|
||||
window.WebVideoCtrl.I_InitPlugin('100%', '100%', {
|
||||
bWndFull: true, // 但窗口双击全屏
|
||||
iPackageType: 2, // 封装格式 无插件只能是2
|
||||
iWndowType: 1, // 分屏类型 1*1 2*2 ....
|
||||
bNoPlugin: true, // 开启无插件模式
|
||||
cbInitPluginComplete: function () {
|
||||
console.log("初始化成功！");
|
||||
window.WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin_' + that.index);
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
// 登录
|
||||
clickLogin() {
|
||||
if (!this.ip || !this.port) {
|
||||
return
|
||||
}
|
||||
this.szDeviceIdentify = this.ip+"_"+this.port
|
||||
WebVideoCtrl.I_Login(this.ip, 1, this.port, this.username, this.password,
|
||||
{
|
||||
success: function(xmlDoc) {
|
||||
this.getChannelInfo() // 获取模拟通道
|
||||
this.getDevicePort() // 获取端口 （影响不大）
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取模拟媒体通道
|
||||
getChannelInfo() {
|
||||
let self = this
|
||||
if (!this.szDeviceIdentify) {
|
||||
return
|
||||
}
|
||||
WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
|
||||
async: false,
|
||||
success: function (xmlDoc) {
|
||||
let oChannels = $(xmlDoc).find("VideoInputChannel");
|
||||
console.log('获取模拟通道成功', oChannels)
|
||||
$.each(oChannels, function (i) {
|
||||
let id = $(this).find("id").eq(0).text(),
|
||||
name = $(this).find("name").eq(0).text();
|
||||
if (!name) {
|
||||
name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
|
||||
}
|
||||
self.channels.push({
|
||||
id: id,
|
||||
name: name
|
||||
})
|
||||
});
|
||||
},
|
||||
error: function (status, xmlDoc) {
|
||||
console.log('获取模拟通道失败', status, xmlDoc)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取端口 不会对预览效果造成影响
|
||||
getDevicePort() {
|
||||
if (!this.szDeviceIdentify) {
|
||||
return
|
||||
}
|
||||
let oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
|
||||
console.log('获取通道端口号', oPort)
|
||||
if (oPort != null) {
|
||||
this.deviceport = oPort.iDevicePort;
|
||||
this.iRtspPort= oPort.iRtspPort;
|
||||
}
|
||||
},
|
||||
// 开始预览
|
||||
clickStartRealPlay() {
|
||||
let self = this
|
||||
let oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
|
||||
iChannelID = self.channels[0].id
|
||||
if (!this.szDeviceIdentify) {
|
||||
return;
|
||||
}
|
||||
let startRealPlay = function () {
|
||||
WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
|
||||
iRtspPort: parseInt(self.deviceport, 10), // RTSP端口必须是int
|
||||
iStreamType: 1, // 码流类型：1-主码流 必须int
|
||||
iChannelID: parseInt(iChannelID, 10), // 播放通道 必须int
|
||||
bZeroChannel: false, // 是否播放零通道 默认false
|
||||
success: function () {
|
||||
console.log("预览成功")
|
||||
},
|
||||
error: function (status, xmlDoc) {
|
||||
console.log("预览失败", status, xmlDoc)
|
||||
}
|
||||
});
|
||||
};
|
||||
if (oWndInfo != null) {// 已经在播放了，先停止
|
||||
WebVideoCtrl.I_Stop({
|
||||
success: function () {
|
||||
startRealPlay();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
startRealPlay();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.plugin{
|
||||
width:100%;
|
||||
height:calc(100% - 40px)
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
color: #fff;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,14 @@
|
||||
<template>
|
||||
<div class="videos">
|
||||
<div class="video-item" v-for="item in 8" :key="item">
|
||||
<div class="title">
|
||||
<span>xxxxz监控点</span>
|
||||
<img
|
||||
src="@/assets/images/fillScreen.png"
|
||||
alt=""
|
||||
width="23px"
|
||||
style="margin-left: 10px; cursor: pointer"
|
||||
/>
|
||||
</div>
|
||||
<div class="video">
|
||||
<video
|
||||
src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
|
||||
controls="controls"
|
||||
width="100%"
|
||||
height="100%"
|
||||
></video>
|
||||
</div>
|
||||
<div class="videosPage" id="videosPage">
|
||||
<div
|
||||
class="content"
|
||||
:class="videosPageWidth < 900 ? 'con-w2' : 'con-w1'"
|
||||
v-for="(item, index) in videoList"
|
||||
:key="item"
|
||||
>
|
||||
<haikang :index="index" :item="item" class="video"></haikang>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="environment">
|
||||
<div class="tab-header">
|
||||
@@ -34,10 +24,8 @@
|
||||
<ComTable
|
||||
:columns="columns[activeTab]"
|
||||
:table-data="tableDatas[activeTab]"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-option="{ page: false }"
|
||||
>
|
||||
</ComTable>
|
||||
</div>
|
||||
@@ -46,17 +34,14 @@
|
||||
|
||||
<script>
|
||||
import { postReq, getReq } from '@/request/api'
|
||||
import haikang from './haikang.vue'
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
components: { haikang },
|
||||
props: {
|
||||
stationId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
systemType: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -111,7 +96,7 @@ export default {
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
'temp_hum': [
|
||||
temp_hum: [
|
||||
{
|
||||
title: '点位',
|
||||
dataIndex: 'pos',
|
||||
@@ -158,20 +143,54 @@ export default {
|
||||
tableOption: {
|
||||
select: false,
|
||||
page: false
|
||||
}
|
||||
},
|
||||
//
|
||||
videoList: [],
|
||||
g_iWndIndex: 0,
|
||||
szDeviceIdentify: '',
|
||||
deviceport: '',
|
||||
channels: [],
|
||||
ip: '',
|
||||
port: '',
|
||||
username: '',
|
||||
password: '',
|
||||
iRtspPort: '',
|
||||
videosPageWidth: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const div = document.getElementById('videosPage')
|
||||
const width = div.offsetWidth
|
||||
this.videosPageWidth = width
|
||||
})
|
||||
|
||||
this.getEnvironment()
|
||||
this.getDeviceList()
|
||||
},
|
||||
methods: {
|
||||
async getEnvironment() {
|
||||
try {
|
||||
const res = await getReq('/queryEnvironment', { station_id: this.stationId })
|
||||
console.log(res, '==============')
|
||||
this.tableDatas = res.data
|
||||
// this.deviceList=res.data
|
||||
} catch (error) {
|
||||
this.tableDatas = {}
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
//请求运行监控系统设备信息
|
||||
async getDeviceList() {
|
||||
try {
|
||||
const res = await getReq('/queryDevicByCategory', {
|
||||
station_id: this.stationId,
|
||||
category: 4
|
||||
})
|
||||
|
||||
this.videoList = res.data.concat(res.data)
|
||||
this.videoList = this.videoList.concat(this.videoList)
|
||||
} catch (error) {
|
||||
this.videoList = []
|
||||
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
@@ -180,30 +199,27 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.videos {
|
||||
.videosPage {
|
||||
width: calc(100% - 470px);
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
overflow-y: auto;
|
||||
.video-item {
|
||||
// width: 410px;
|
||||
// height: 340px;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
.content {
|
||||
border-radius: 15px;
|
||||
|
||||
background: $bg2-color;
|
||||
padding: 10px;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.video {
|
||||
margin-top: 10px;
|
||||
}
|
||||
padding: 15px;
|
||||
height: 280px;
|
||||
}
|
||||
.con-w1 {
|
||||
width: calc((100% - 40px) / 3);
|
||||
}
|
||||
.con-w2 {
|
||||
width: calc((100% - 20px) / 2);
|
||||
}
|
||||
}
|
||||
.environment {
|
||||
@@ -250,6 +266,7 @@ export default {
|
||||
cursor: pointer;
|
||||
border: 1px solid $tab-border;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.actived {
|
||||
|
||||
@@ -81,7 +81,7 @@ export default {
|
||||
show: true,
|
||||
xAxisIndex: 0, // 控制第一个X轴
|
||||
start: 0, // 初始显示范围起点（百分比）
|
||||
end: 20, // 初始显示范围终点（百分比）
|
||||
end: 100, // 初始显示范围终点（百分比）
|
||||
height: 20, // 滑动条高度
|
||||
bottom: 10 // 距离底部距离
|
||||
},
|
||||
@@ -89,7 +89,7 @@ export default {
|
||||
type: 'inside', // 内置型（鼠标滚轮/拖拽交互）
|
||||
xAxisIndex: 0,
|
||||
start: 0,
|
||||
end: 20
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
<!-- eslint-disable camelcase -->
|
||||
<template>
|
||||
<div class="policyForm">
|
||||
<div class="policyForm" ref="policyForm">
|
||||
<div class="title">
|
||||
<div>基础信息{{ formStatus }}</div>
|
||||
<div>基础信息</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" />
|
||||
</div>
|
||||
<a-form
|
||||
:model="formData"
|
||||
layout="inline"
|
||||
label-align="left"
|
||||
:label-col="{ style: { width: '85px' } }"
|
||||
:rules="rules"
|
||||
@@ -30,7 +29,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="低谷电价" class="col4" required>
|
||||
<a-form-item label="低谷电价" class="col2" required>
|
||||
<a-input-number
|
||||
:precision="2"
|
||||
v-model:value="formData.price[0]"
|
||||
@@ -39,7 +38,7 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="平段电价" class="col4" required>
|
||||
<a-form-item label="平段电价" class="col2" required>
|
||||
<a-input-number
|
||||
:precision="2"
|
||||
v-model:value="formData.price[1]"
|
||||
@@ -48,7 +47,7 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="高峰电价" class="col4" required>
|
||||
<a-form-item label="高峰电价" class="col2" required>
|
||||
<a-input-number
|
||||
:precision="2"
|
||||
v-model:value="formData.price[2]"
|
||||
@@ -57,7 +56,7 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="尖峰电价" class="col4" required>
|
||||
<a-form-item label="尖峰电价" class="col2" required>
|
||||
<a-input-number
|
||||
:precision="2"
|
||||
v-model:value="formData.price[3]"
|
||||
@@ -179,7 +178,7 @@
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<a-form-item label="策略描述" class="col2">
|
||||
<a-form-item label="策略描述" class="col1">
|
||||
<a-textarea v-model:value="formData.describe" :disabled="formStatus == 'read'" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否启用" class="col2">
|
||||
@@ -193,7 +192,8 @@
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-modal v-model:open="periodModal" @ok="handlePeriodModalOk">
|
||||
<a-modal
|
||||
v-model:open="periodModal" @ok="handlePeriodModalOk" :get-container="()=>$refs.policyForm">
|
||||
<a-form
|
||||
ref="periodRef"
|
||||
:model="periodForm"
|
||||
@@ -240,6 +240,7 @@ export default {
|
||||
default: 'add'
|
||||
}
|
||||
},
|
||||
emits:['closeModal'],
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
@@ -308,8 +309,8 @@ export default {
|
||||
handler(newVal) {
|
||||
if (this.formStatus == 'add') {
|
||||
this.formData = {
|
||||
type: '5',
|
||||
name: '测试',
|
||||
type: '',
|
||||
name: '',
|
||||
price: [0, 0, 0, 0],
|
||||
period1: [],
|
||||
period5: [
|
||||
@@ -321,14 +322,7 @@ export default {
|
||||
chargeType: null,
|
||||
dischargeType: null
|
||||
}
|
||||
// {
|
||||
// charge_time: [],
|
||||
// discharge_time: [],
|
||||
// charge_power: '',
|
||||
// discharge_power: '',
|
||||
// chargeType: 1,
|
||||
// dischargeType:1
|
||||
// }
|
||||
|
||||
],
|
||||
is_open: false,
|
||||
chargePolicy: 1
|
||||
@@ -474,6 +468,7 @@ export default {
|
||||
console.log(this.formData)
|
||||
},
|
||||
handleAdd() {
|
||||
if(this.formStatus=='read') return
|
||||
this.periodModal = true
|
||||
this.periodForm = {}
|
||||
},
|
||||
@@ -481,7 +476,6 @@ export default {
|
||||
this.$refs.periodRef
|
||||
.validateFields()
|
||||
.then((res) => {
|
||||
console.log(this.formData.period1,'=============')
|
||||
const target = this.formData.period1.find((item) => item.month == this.periodForm.month)
|
||||
|
||||
if (target) {
|
||||
@@ -574,15 +568,18 @@ export default {
|
||||
img {
|
||||
width: 232px;
|
||||
height: 6px;
|
||||
margin-top: 10px;
|
||||
// margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form {
|
||||
display: flex;
|
||||
flex-wrap:wrap ;
|
||||
|
||||
.charge {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 1fr;
|
||||
// gap: 10px;
|
||||
.box {
|
||||
border: 1px solid $table-border;
|
||||
padding-left: 10px;
|
||||
@@ -590,6 +587,7 @@ export default {
|
||||
padding-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -615,7 +613,7 @@ export default {
|
||||
.ant-select,
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-input-number {
|
||||
width: 150px;
|
||||
width: 200px;
|
||||
}
|
||||
textarea {
|
||||
.ant-input {
|
||||
@@ -627,6 +625,7 @@ export default {
|
||||
}
|
||||
.col4 {
|
||||
width: 25%;
|
||||
min-width: 270px;
|
||||
}
|
||||
.col1 {
|
||||
width: 100%;
|
||||
@@ -645,32 +644,10 @@ export default {
|
||||
:deep(.ant-table-wrapper .ant-table-cell){
|
||||
background:none!important;
|
||||
}
|
||||
// /* 禁用行的 hover 过渡动画 */
|
||||
// .ant-table-tbody > tr.ant-table-row {
|
||||
// transition: none !important;
|
||||
// }
|
||||
:deep(.ant-table-cell){
|
||||
&::before{
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// /* 确保 hover 背景色完全透明 */
|
||||
// .ant-table-tbody > tr.ant-table-row:hover > td {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// .ant-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// :deep(.ant-table-tbody > tr.ant-table-row:hover > td) {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// :deep(.ant-table-tbody) {
|
||||
// color: var(--theme-text-default) !important;
|
||||
|
||||
// > tr {
|
||||
// &:hover {
|
||||
// > .ant-table-cell {
|
||||
|
||||
// background: none !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user