|
|
@@ -1,17 +1,194 @@
|
|
|
-<!--
|
|
|
- * @Author: your name
|
|
|
- * @Date: 2025-01-09 17:40:53
|
|
|
- * @LastEditTime: 2025-01-09 17:50:49
|
|
|
- * @LastEditors: bogon
|
|
|
- * @Description: In User Settings Edit
|
|
|
- * @FilePath: /performance-test/src/views/overview/assetssMsg/index.vue
|
|
|
--->
|
|
|
<template>
|
|
|
- <div>分析信息</div>
|
|
|
+ <el-card shadow="always" class="box-card">
|
|
|
+ <div class="box-header">
|
|
|
+ <h4>分析介绍:</h4>
|
|
|
+ <div class="box-header-min">
|
|
|
+ <div>
|
|
|
+ 乌梅山风电场位于江西省赣州市，海拔高度为
|
|
|
+ <span class="headerMessage"> 1000米 </span>
|
|
|
+ ，所在经纬度为经度
|
|
|
+ <span class="headerMessage"> 110.8° </span>
|
|
|
+ ，纬度
|
|
|
+ <span class="headerMessage">35° </span>。
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 该风电场由大唐研究院管理，风场总容量为
|
|
|
+ <span class="headerMessage"> 49.5MW </span>
|
|
|
+ ，共安装
|
|
|
+ <span class="headerMessage"> 30台</span>
|
|
|
+
|
|
|
+ 风机，使用的机型为
|
|
|
+ <span class="headerMessage">
|
|
|
+ CCWE-1500/93.DF、CCWE-1500/77DF、CCWE-1500/82
|
|
|
+ </span>
|
|
|
+ 。
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 分析数据时间跨度为2025年1月20日至2025年2月20日，分析完成时间为2025年1月20日10:10:10。数据分析人XXXXXXXXXX。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+ <div class="left">
|
|
|
+ <div class="box-content-min">
|
|
|
+ <h4>完成分析类型:</h4>
|
|
|
+ <div class="completeAssetssType">
|
|
|
+ <el-tag type="warning">分钟级SCADA数据完整度分析 </el-tag>
|
|
|
+ <el-tag type="warning">逐月有功功率散点2D分析</el-tag>
|
|
|
+ <el-tag type="warning">逐月有功功率散点3D分析</el-tag>
|
|
|
+ <el-tag type="warning">秒级SCADA数据完整度分析</el-tag>
|
|
|
+ <el-tag type="warning">风速频率分析</el-tag>
|
|
|
+ <el-tag type="warning">风向玫瑰分析</el-tag>
|
|
|
+ <el-tag type="warning">风速均值分析</el-tag>
|
|
|
+ <el-tag type="warning">有功功率曲线分析</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-content-min">
|
|
|
+ <h4>分析完成机组：</h4>
|
|
|
+ <div class="analysisCompletionUnit">
|
|
|
+ <div
|
|
|
+ class="itemAnalysisCompletionUnit"
|
|
|
+ v-for="itemData in data"
|
|
|
+ :key="itemData"
|
|
|
+ >
|
|
|
+ <SvgIcons
|
|
|
+ name="WindPower1"
|
|
|
+ class="WindPower1"
|
|
|
+ width="40px"
|
|
|
+ height="42px"
|
|
|
+ color="#222"
|
|
|
+ ></SvgIcons>
|
|
|
+ <span>{{ itemData }}#机组</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <Map></Map>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
+import Map from "../../../performance/components/map.vue";
|
|
|
+
|
|
|
export default {
|
|
|
name: "AnalysisInformation",
|
|
|
+ components: {
|
|
|
+ Map,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeNames: ["1", "2", "3"],
|
|
|
+ data: [
|
|
|
+ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChange(val) {
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
-<style scoped lang="scss"></style>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.completeAssetssType {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .el-tag {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tag--warning {
|
|
|
+ background-color: #fdf6ec !important;
|
|
|
+ border-color: #faecd8 !important;
|
|
|
+ color: #e6a23c !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-card__body {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start; /* 上对齐 */
|
|
|
+ height: 100%; /* 确保内容区域有高度 */
|
|
|
+}
|
|
|
+
|
|
|
+.left {
|
|
|
+ width: 60%;
|
|
|
+ // flex: 1;
|
|
|
+ .box-content-min {
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ color: #303133;
|
|
|
+ h4 {
|
|
|
+ color: #303133;
|
|
|
+ // border-bottom: 1px solid #ebeef5;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .analysisCompletionUnit {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .itemAnalysisCompletionUnit {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border: #eaeef6 solid 1px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px 5px;
|
|
|
+ .WindPower1 {
|
|
|
+ padding: 10px 5px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.right {
|
|
|
+ width: 40%;
|
|
|
+ height: 100%; /* 确保容器高度为100% */
|
|
|
+ // flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.right .map-ditu {
|
|
|
+ width: 100%; /* 设置地图的宽度 */
|
|
|
+ height: 500px; /* 设置地图的高度 */
|
|
|
+}
|
|
|
+.box-card {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .box-header {
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ color: #303133;
|
|
|
+ h4 {
|
|
|
+ color: #303133;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-header-min {
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ line-height: 40px;
|
|
|
+ .headerMessage {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liujiejie