<template>
<div class="page">
<BasicForm class="form" @register="register" />
<div class="flex">
<List :list="list" />
<div class="flex items-center">
<pieChart :value="34" />
<div class="pos-relative flex-col">
<Item v-for="(item, index) in list1" :key="index" v-bind="item" />
</div>
</div>
<div class="flex items-center">
<pieChart :value="77" />
<div class="pos-relative flex-col">
<Item v-for="(item, index) in list2" :key="index" v-bind="item" />
</div>
</div>
</div>
<div class="flex">
<div class="leftchart mt-7 w-1/2">
<div class="header1 flex justify-between pt-2">
<div class="ml-40 c-#00EAFF">配置图表</div>
<div class="flex">
<div
:class="type == index ? 'active' : 'default'"
v-for="(item, index) in buttons"
:key="index"
@click="type = index"
>
{{ item }}</div
>
</div>
</div>
<lineChart1 :data="data" :x="x" />
</div>
<div class="leftchart mt-7 w-1/2">
<div class="header2 flex justify-between pt-2">
<div class="ml-40 c-#00EAFF">配置图表</div>
<div class="flex">
<div
:class="type == index ? 'active' : 'default'"
v-for="(item, index) in buttons2"
:key="index"
@click="type = index"
>
{{ item }}</div
>
</div>
</div>
<lineBarChart :data="data2" :x="x2" />
</div>
</div>
<div class="leftchart mt-7 w-full">
<div class="header3 flex justify-between"> </div>
<div class="content flex">
<GaugeChart />
<pieChart1 />
<lineBarChart1 />
<DetectionIndex />
</div>
</div>
<div class="leftchart mt-7 w-full">
<div class="header4 flex justify-between"> </div>
<div class="fjsblb">
<p>风机设备列表</p>
<a-input-search
v-model:value="value"
style="width: 326px; height: 40px; padding-left: 12px;"
placeholder="按风机名称筛选"
search
/>
</div>
<div class="draughtTable"></div>
</div>
</div>
</template>
<script lang="ts" setup>
import { BasicForm, useForm } from '/@/components/Form';
import List from './components/list.vue';
import pieChart from './components/pieChart.vue';
import pieChart1 from './components/pieChart1.vue';
import lineChart1 from './components/lineChart.vue';
import lineBarChart from './components/lineBarChart.vue';
import lineBarChart1 from './components/lineBarChart1.vue';
import GaugeChart from './components/GaugeChart.vue';
import DetectionIndex from './components/DetectionIndex.vue';
import Item from './components/item';
import { ref, h } from 'vue';
const type = ref(0);
const buttons = ['1小时', '24小时'];
const buttons2 = ['周', '月', '季', '年'];
const list1 = ref([
{
name: '总出力(MW)',
value: 32.81,
},
{
name: '总容量(MW)',
value: 97.36,
},
]);
const list2 = ref([
{
name: '当年发电量·实际/全年计划(万kWh)',
value: '9460.1 / 12310',
},
{
name: '当年利用小时·实际/全年目标(h)',
value: '1259 / 1638',
},
]);
const [register] = useForm({
schemas: [
{
label: '场站',
field: 'fengchang',
component: 'Select',
componentProps: {
placeholder: '请选择风场',
},
},
],
labelWidth: 120,
baseColProps: { lg: 6, md: 6 },
showResetButton: true,
showSubmitButton: true,
});
const list = [
{
name: '正常发电',
value: 154,
color: '#2BFCCF',
},
{
name: '限功率',
value: 0,
color: '#F41EFF',
},
{
name: '用户停机',
value: 1,
color: '#fff',
},
{
name: '故障停机',
value: 0,
color: '#FF5B5B',
},
{
name: '服务停机',
value: 0,
color: '#FFFB97',
},
{
name: '电网故障',
value: 0,
color: '#BE56FF',
},
{
name: '技术待机',
value: 0,
color: '#C4CDA4',
},
{
name: '环境待命',
value: 0,
color: '#fff',
},
{
name: '未知状态',
value: 0,
color: '#66EFD4',
},
];
const data = ref([
{
name: '风机有功功率总计',
yAxisIndex: 0,
data: [25, 35, 22, 29, 33, 28],
color: '#D9D92E',
},
{
name: '风速',
yAxisIndex: 1,
data: [4, 6, 5, 7, 4, 3],
color: '#1CD6C0',
},
{
name: '理论功率',
yAxisIndex: 0,
data: [25, 16, 32, 24, 26, 32],
color: '#0E9CFF',
},
{
name: '场站ACG指令值',
yAxisIndex: 0,
data: [29, 24, 33, 19, 35, 22],
color: '#FF830F',
},
]);
const data2 = ref([
{
name: '完成率',
yAxisIndex: 1,
data: [7, 9, 6, 9, 8, 7, 8],
type: 'line',
color: '#D9D9D9',
},
{
name: '计划发电量',
yAxisIndex: 0,
type: 'bar',
data: [22, 23, 25, 27, 24, 23, 20],
color: '#19C2FF',
},
{
name: '理论功率',
yAxisIndex: 0,
type: 'bar',
data: [25, 16, 32, 24, 26, 32, 44],
color: '#26FFC9',
},
{
name: '场站ACG指令值',
yAxisIndex: 0,
type: 'bar',
data: [29, 24, 33, 19, 35, 22, 32],
color: '#FBC935',
},
{
name: 'PBA',
yAxisIndex: 1,
type: 'line',
data: [7, 5, 8, 5, 9, 7, 5],
color: '#4476FF',
},
]);
const x = ref(['18:00', '18:05', '18:10', '18:15', '18:20']);
const x2 = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);
</script>
<style lang="less" scoped>
.page {
padding: 0 3vh;
.form {
margin-left: 15%;
}
}
.leftchart {
.header(@bg) {
background: url(@bg);
background-size: cover;
width: 100%;
height: 41px;
}
.common1 {
width: 60px;
height: 22px;
text-align: center;
margin-right: 10px;
cursor: pointer;
}
.active {
background: linear-gradient(180deg, rgba(15, 74, 159, 0) 0%, rgba(17, 75, 160, 0.95) 100%);
border: 1px solid rgba(30, 123, 214, 0.8);
color: #d8f0ff;
text-shadow:
0px 0px 10px #0091ff,
0px 0px 4px #0091ff;
.common1();
}
.default {
background: linear-gradient(180deg, rgba(15, 133, 159, 0) 0%, rgba(17, 100, 160, 0.95) 100%);
border: 1px solid rgba(0, 66, 131, 0.8);
color: rgba(216, 240, 255, 0.7);
text-shadow:
0px 0px 10px #0091ff,
0px 0px 4px #0091ff;
.common1();
}
.header1 {
.header('/@/assets/images/fj/cz/header1.png');
}
.header2 {
.header('/@/assets/images/fj/cz/header2.png');
}
.header3 {
.header('/@/assets/images/fj/cz/header3.png');
}
.header4 {
.header('/@/assets/images/fj/cz/header4.png');
}
.content {
// height: 360px;
margin-top: 3px;
background: linear-gradient(136deg, rgba(0, 156, 223, 0.2) 50%, rgba(0, 156, 223, 0.05) 100%);
border-radius: 11px;
margin-bottom: 30px;
}
.fjsblb {
margin: 32px 37px;
color: #d8f0ff;
display: flex;
align-items: center;
p {
margin-right: 14px;
font-size: 16px;
color: #A6C9E3;
}
a-input-search {
width: 200px;
}
}
}
</style>
在 <div class="draughtTable"></div>
处加一个table,用antdesginvue组件库, 表头是:风机名称、运行状态、通讯状态、实施阶段、状态码、状态字描述、持续时间、风速(m/s)、有功功率(kW)、当日发电量(kWh)、当月发电量(kWh)、当年发电量(kWh); 行内容目前是假数据,对应表头列:江西太阳山风电场01、正常发电、通讯正常、已接入、SC_DT-MY29_0、系统正常、4天3小时30分钟、8.8、2159.81、27,092、383,304、4,582,664; 一共七行数据, 等后端接口出来后再调用接口, 换字段, 现在先用我给的假数据, 用vue3+ts+antdesginVue, 样式less语法, 并且把备注给我写出来, 给我完整代码