Update History.vue
parent
42fddcc5fc
commit
7499474661
|
|
@ -2,31 +2,55 @@
|
|||
<div class="history-container">
|
||||
<div class="flex top">
|
||||
<div class="flex width200">
|
||||
<span> 系统选择：</span>
|
||||
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||
<span> 系统选择：</span>
|
||||
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||
<el-option
|
||||
v-for="item in fxOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="date">
|
||||
<Date />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) of listData"
|
||||
:key="index"
|
||||
class="middle"
|
||||
>
|
||||
<BarEchart :echartData="item" class="echartDiv100"/>
|
||||
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||
<BarEchart :echartData="item" class="echartDiv100" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||
</el-table>
|
||||
</el-table> -->
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目</th>
|
||||
<th colspan="17">降雨量(mm/s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>序号</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.label }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>时间</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.time }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数值</td>
|
||||
<td v-for="(item, index) in tableHeader" :key="index">
|
||||
{{ item.value }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -43,7 +67,7 @@ export default {
|
|||
components: {
|
||||
BarEchart,
|
||||
Process,
|
||||
Date
|
||||
Date,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
|
|
@ -51,72 +75,124 @@ export default {
|
|||
{
|
||||
id: "echart0",
|
||||
title: "降水量-柱状图",
|
||||
legend: ['降水量'],
|
||||
legend: ["降水量"],
|
||||
color: ["#6fdbce"],
|
||||
}],
|
||||
fxOptions: [{
|
||||
value: '0',
|
||||
label: '降水量',
|
||||
},{
|
||||
value: '1',
|
||||
label: '系统A',
|
||||
},{
|
||||
value: '2',
|
||||
label: '系统B',
|
||||
},{
|
||||
value: '3',
|
||||
label: '系统C',
|
||||
},{
|
||||
value: '4',
|
||||
label: '系统D',
|
||||
},{
|
||||
value: '5',
|
||||
label: '系统E',
|
||||
}],
|
||||
value1:'降水量',
|
||||
tableHeader: [{
|
||||
prop: 'one',
|
||||
label: '1点'
|
||||
},{
|
||||
prop: 'two',
|
||||
label: '2点'
|
||||
},{
|
||||
prop: 'three',
|
||||
label: '3点'
|
||||
},{
|
||||
prop: 'four',
|
||||
label: '4点'
|
||||
},{
|
||||
prop: 'five',
|
||||
label: '5点'
|
||||
},{
|
||||
prop: 'six',
|
||||
label: '6点'
|
||||
},{
|
||||
prop: 'seven',
|
||||
label: '7点'
|
||||
},{
|
||||
prop: 'eight',
|
||||
label: '8点'
|
||||
},{
|
||||
prop: 'nine',
|
||||
label: '9点'
|
||||
},{
|
||||
prop: 'ten',
|
||||
label: '10点'
|
||||
}],
|
||||
tableData: [{
|
||||
one: '100',
|
||||
two: '200',
|
||||
three: '100',
|
||||
four: '500',
|
||||
five: '200',
|
||||
six: '300',
|
||||
seven: '200',
|
||||
eight: '100',
|
||||
nine: '300',
|
||||
ten: '400'
|
||||
}]
|
||||
},
|
||||
],
|
||||
fxOptions: [
|
||||
{
|
||||
value: "0",
|
||||
label: "降水量",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "系统A",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "系统B",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "系统C",
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "系统D",
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "系统E",
|
||||
},
|
||||
],
|
||||
value1: "降水量",
|
||||
tableHeader: [
|
||||
{
|
||||
label: 1,
|
||||
time: "00:00",
|
||||
value: 78,
|
||||
},
|
||||
{
|
||||
label: 2,
|
||||
time: "01:00",
|
||||
value: 56,
|
||||
},
|
||||
{
|
||||
label: 3,
|
||||
time: "02:00",
|
||||
value: 45,
|
||||
},
|
||||
{
|
||||
label: 4,
|
||||
time: "03:00",
|
||||
value: 66,
|
||||
},
|
||||
{
|
||||
label: 5,
|
||||
time: "04:00",
|
||||
value: 86,
|
||||
},
|
||||
{
|
||||
label: 6,
|
||||
time: "05:00",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
label: 7,
|
||||
time: "06:00",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
label: 8,
|
||||
time: "07:00",
|
||||
value: 55,
|
||||
},
|
||||
{
|
||||
label: 9,
|
||||
time: "08:00",
|
||||
value: 76,
|
||||
},
|
||||
{
|
||||
label: 10,
|
||||
time: "09:00",
|
||||
value: 65,
|
||||
},
|
||||
{
|
||||
label: 11,
|
||||
time: "10:00",
|
||||
value: 80,
|
||||
},
|
||||
{
|
||||
label: 12,
|
||||
time: "11:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 13,
|
||||
time: "12:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 14,
|
||||
time: "13:00",
|
||||
value: 89,
|
||||
},
|
||||
{
|
||||
label: 15,
|
||||
time: "14:00",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
label: 16,
|
||||
time: "15:00",
|
||||
value: 90,
|
||||
},
|
||||
{
|
||||
label: 17,
|
||||
time: "16:00",
|
||||
value: 45,
|
||||
},
|
||||
],
|
||||
});
|
||||
onMounted(async () => {});
|
||||
|
||||
|
|
@ -149,7 +225,7 @@ export default {
|
|||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
.bottom {
|
||||
height: calc(100% - 520px);
|
||||
// border: 1px solid red;
|
||||
}
|
||||
|
|
@ -161,10 +237,29 @@ export default {
|
|||
}
|
||||
.width200 {
|
||||
width: 200px;
|
||||
>span {
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
height: 50px;
|
||||
}
|
||||
th:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
tr {
|
||||
td:first-child {
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue