Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
GGJ
2024-09-29 18:15:54 +08:00
parent e140362c42
commit 83af279826
7 changed files with 291 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/views/govern/device/control/tabs/trend.vue
View File

@@ -1,51 +1,37 @@
<template>
<div>
<div class="history_header">
<el-form :model="searchForm" class="history_select" id="history_select">
<el-form-item>
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select
multiple
:multiple-limit="3"
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
@change="onIndexChange($event)"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<div v-for="(item, index) in countData" :key="index">
<el-form-item
:label="item.name + '谐波次数'"
v-if="item.countOptions.length != 0"
label-width="180px"
>
<el-select
v-model="item.count"
multiple
collapse-tags
collapse-tags-tooltip
@change="onCountChange($event, index)"
placeholder="请选择谐波次数"
>
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv" :value="vv"></el-option>
<div >
<TableHeader :showSearch="false">
<template v-slot:select>
<!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
<el-form-item>
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select multiple :multiple-limit="3" collapse-tags collapse-tags-tooltip
v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)">
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
<div class="history_searchBtn">
<div v-for="(item, index) in countData" :key="index">
<el-form-item :label="item.name + '谐波次数'" v-if="item.countOptions.length != 0"
label-width="180px">
<el-select v-model="item.count" multiple collapse-tags collapse-tags-tooltip
@change="onCountChange($event, index)" placeholder="请选择谐波次数">
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
:value="vv"></el-option>
</el-select>
</el-form-item>
</div>
<!-- </el-form> -->
</template>
<template #operation>
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
</div>
</template>
</TableHeader>
</div>
<div class="history_chart" v-loading="loading">
<MyEchart ref="historyChart" :options="echartsData" />
@@ -280,7 +266,7 @@ const init = async () => {
width: 430,
height: 50
},
xAxis: [
{
type: 'category',
@@ -457,7 +443,7 @@ const handleExport = async () => {
if (deviceData.value.records && deviceData.value.records.length != 0) {
let csv = '',
obj:any = {}
obj: any = {}
obj = deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})
@@ -612,14 +598,14 @@ const initSearchFormIndexAndCount = (list: any) => {
}
// 判断下拉框是否存在
const onCountChange = (val: any, index: any) => {
if(val.length==0){
countData.value[index].count=[countData.value[index].countOptions[0]]
}
if (val.length == 0) {
countData.value[index].count = [countData.value[index].countOptions[0]]
}
}
const onIndexChange = (val: any, ) => {
if(val.length==0){
searchForm.value.index=[indexOptions.value[0].id]
}
const onIndexChange = (val: any,) => {
if (val.length == 0) {
searchForm.value.index = [indexOptions.value[0].id]
}
}
watch(
() => searchForm.value.index,
@@ -657,13 +643,14 @@ watch(
// immediate: true
// }
// )
onMounted(() => {})
onMounted(() => { })
defineExpose({ getTrendRequest })
</script>
<style lang="scss" scoped>
.history_header {
display: flex;
// flex-wrap: wrap;
#history_select {
width: 100%;
@@ -672,10 +659,12 @@ defineExpose({ getTrendRequest })
// overflow-x: auto;
height: auto;
flex-wrap: wrap;
.el-form-item {
flex: none !important;
// max-width: 380px;
}
.el-select {
margin-right: 10px;
}
@@ -696,7 +685,7 @@ defineExpose({ getTrendRequest })
.history_chart {
width: 100%;
height: calc(100vh - 450px) !important;
height: calc(100vh - 400px) !important;
// flex: 1;
margin-top: 10px;
}