Update History.vue
parent
42fddcc5fc
commit
7499474661
|
|
@ -16,17 +16,41 @@
|
||||||
<Date />
|
<Date />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||||
v-for="(item, index) of listData"
|
|
||||||
:key="index"
|
|
||||||
class="middle"
|
|
||||||
>
|
|
||||||
<BarEchart :echartData="item" class="echartDiv100" />
|
<BarEchart :echartData="item" class="echartDiv100" />
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom">
|
<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-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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -43,7 +67,7 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
BarEchart,
|
BarEchart,
|
||||||
Process,
|
Process,
|
||||||
Date
|
Date,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
|
|
@ -51,72 +75,124 @@ export default {
|
||||||
{
|
{
|
||||||
id: "echart0",
|
id: "echart0",
|
||||||
title: "降水量-柱状图",
|
title: "降水量-柱状图",
|
||||||
legend: ['降水量'],
|
legend: ["降水量"],
|
||||||
color: ["#6fdbce"],
|
color: ["#6fdbce"],
|
||||||
}],
|
},
|
||||||
fxOptions: [{
|
],
|
||||||
value: '0',
|
fxOptions: [
|
||||||
label: '降水量',
|
{
|
||||||
},{
|
value: "0",
|
||||||
value: '1',
|
label: "降水量",
|
||||||
label: '系统A',
|
},
|
||||||
},{
|
{
|
||||||
value: '2',
|
value: "1",
|
||||||
label: '系统B',
|
label: "系统A",
|
||||||
},{
|
},
|
||||||
value: '3',
|
{
|
||||||
label: '系统C',
|
value: "2",
|
||||||
},{
|
label: "系统B",
|
||||||
value: '4',
|
},
|
||||||
label: '系统D',
|
{
|
||||||
},{
|
value: "3",
|
||||||
value: '5',
|
label: "系统C",
|
||||||
label: '系统E',
|
},
|
||||||
}],
|
{
|
||||||
value1:'降水量',
|
value: "4",
|
||||||
tableHeader: [{
|
label: "系统D",
|
||||||
prop: 'one',
|
},
|
||||||
label: '1点'
|
{
|
||||||
},{
|
value: "5",
|
||||||
prop: 'two',
|
label: "系统E",
|
||||||
label: '2点'
|
},
|
||||||
},{
|
],
|
||||||
prop: 'three',
|
value1: "降水量",
|
||||||
label: '3点'
|
tableHeader: [
|
||||||
},{
|
{
|
||||||
prop: 'four',
|
label: 1,
|
||||||
label: '4点'
|
time: "00:00",
|
||||||
},{
|
value: 78,
|
||||||
prop: 'five',
|
},
|
||||||
label: '5点'
|
{
|
||||||
},{
|
label: 2,
|
||||||
prop: 'six',
|
time: "01:00",
|
||||||
label: '6点'
|
value: 56,
|
||||||
},{
|
},
|
||||||
prop: 'seven',
|
{
|
||||||
label: '7点'
|
label: 3,
|
||||||
},{
|
time: "02:00",
|
||||||
prop: 'eight',
|
value: 45,
|
||||||
label: '8点'
|
},
|
||||||
},{
|
{
|
||||||
prop: 'nine',
|
label: 4,
|
||||||
label: '9点'
|
time: "03:00",
|
||||||
},{
|
value: 66,
|
||||||
prop: 'ten',
|
},
|
||||||
label: '10点'
|
{
|
||||||
}],
|
label: 5,
|
||||||
tableData: [{
|
time: "04:00",
|
||||||
one: '100',
|
value: 86,
|
||||||
two: '200',
|
},
|
||||||
three: '100',
|
{
|
||||||
four: '500',
|
label: 6,
|
||||||
five: '200',
|
time: "05:00",
|
||||||
six: '300',
|
value: 11,
|
||||||
seven: '200',
|
},
|
||||||
eight: '100',
|
{
|
||||||
nine: '300',
|
label: 7,
|
||||||
ten: '400'
|
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 () => {});
|
onMounted(async () => {});
|
||||||
|
|
||||||
|
|
@ -166,5 +242,24 @@ export default {
|
||||||
width: 180px;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue