|
|
@@ -124,7 +124,7 @@
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="selections">
|
|
|
+ <div class="selections" :data-type="$store.state.moreSty">
|
|
|
<div
|
|
|
class="selections_btn"
|
|
|
@click="tabSelect(0)"
|
|
|
@@ -150,64 +150,48 @@
|
|
|
</div>
|
|
|
<div style="background: rgba(0, 0, 0, 0.4)">
|
|
|
<div class="Benchmarking_title clearfix">
|
|
|
- <div class="leftContent floatLeft"><span>单机对标</span></div>
|
|
|
+ <div class="leftContent floatLeft" :data-type="$store.state.moreSty"><span>单机性能对标</span></div>
|
|
|
</div>
|
|
|
<div class="Benchmarking_Table">
|
|
|
<el-table
|
|
|
:data="BenchmarkingData"
|
|
|
size="mini"
|
|
|
- height="46vh"
|
|
|
+ height="55vh"
|
|
|
ref="stand_table"
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
- <el-table-column type="index" label="序号" width="55" align="center">
|
|
|
- </el-table-column>
|
|
|
- <!-- <el-table-column prop='name' label="指标" width="55" align="center">
|
|
|
- </el-table-column> -->
|
|
|
- <el-table-column
|
|
|
- v-for="(item, index) in tableHeader"
|
|
|
- :key="index"
|
|
|
- :prop="item.code"
|
|
|
- :label="item.title"
|
|
|
- align="center"
|
|
|
- :width="item.title === '指标' ? '150' : ''"
|
|
|
- >
|
|
|
- <template #default="scope">
|
|
|
- <span v-if="item.title === '指标'">{{ scope.row.name }}</span>
|
|
|
- <span v-else>
|
|
|
- <span
|
|
|
- v-if="scope.row.name === '风资源' && scope.row[item.code * 1]"
|
|
|
- >
|
|
|
- <div class="chart-namess">
|
|
|
- <div class="point left"></div>
|
|
|
- <div class="point right"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- :indicator="scope.row[item.code*1].indicator" :showLegend="true"-->
|
|
|
- <!-- <direction-radar-chart
|
|
|
- width="300px"
|
|
|
- height="300px"
|
|
|
- :value="[scope.row[item.code*1]]"
|
|
|
- :showTool="false"
|
|
|
- /> -->
|
|
|
- <!-- :lenged="scope.row[item.code*1].lenged" -->
|
|
|
- <direction-radar-chart
|
|
|
- width="280px"
|
|
|
- height="300px"
|
|
|
- :xAxis="scope.row[item.code * 1].rzdfsxaisx"
|
|
|
- :series="scope.row[item.code * 1].data"
|
|
|
- title=""
|
|
|
- :isRadar="false"
|
|
|
- />
|
|
|
- <div class="chart-namess">
|
|
|
- <div class="point left"></div>
|
|
|
- <div class="point right"></div>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- <span v-else>{{ scope.row[item.code * 1] }}</span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <el-table-column type="index" label="序号" width="55" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='title' label="指标" width="130" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in tableHeader"
|
|
|
+ :key="index"
|
|
|
+ :prop="item.code"
|
|
|
+ :label="item.title"
|
|
|
+ align="center"
|
|
|
+ :width="item.title === '指标' ? '150' : ''"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <div v-if="scope.row.title === '风资源'">
|
|
|
+ <div class="chart-namess">
|
|
|
+ <div class="point left"></div>
|
|
|
+ <div class="point right"></div>
|
|
|
+ </div>
|
|
|
+ <direction-radar-chart
|
|
|
+ width="300px"
|
|
|
+ height="300px"
|
|
|
+ :value="scope.row[item.code]"
|
|
|
+ :showTool="false"
|
|
|
+ />
|
|
|
+ <div class="chart-namess">
|
|
|
+ <div class="point left"></div>
|
|
|
+ <div class="point right"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span v-else>{{ scope.row[item.code] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -223,10 +207,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// import DirectionRadarChart from "@/components/chart/radar/direction-radar-chart.vue";
|
|
|
+import DirectionRadarChart from "@/components/chart/radar/direction-radar-chart.vue";
|
|
|
// import DirectionRadarChart from "@/components/chart/radar/radar-chart.vue";
|
|
|
// import DirectionRadarChart from "../../homePage/components/normal-radar-chart.vue";
|
|
|
-import DirectionRadarChart from "../../analyse/standAloneAnalyse/raderswithhart.vue";
|
|
|
+// import DirectionRadarChart from "../../analyse/standAloneAnalyse/raderswithhart.vue";
|
|
|
+// import DirectionRadarChart from "../../windAnalyse/singleWindAnasyle/raderswithhart.vue";
|
|
|
import * as echarts from "echarts";
|
|
|
import {
|
|
|
getApicompanyslist,
|
|
|
@@ -240,10 +225,11 @@ import {
|
|
|
import utils from "@/utills/downXlsx";
|
|
|
import partten from "@/helper/partten.js";
|
|
|
import util from "@/helper/util.js";
|
|
|
+import dataJson from "./dataJson.json"
|
|
|
export default {
|
|
|
name: "singleMachineBenchmarking",
|
|
|
components: {
|
|
|
- DirectionRadarChart,
|
|
|
+ DirectionRadarChart
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -273,8 +259,47 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.getCompanyData();
|
|
|
+ this.tableHeader = [
|
|
|
+ {
|
|
|
+ title: "A01",
|
|
|
+ code: "A01"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "A02",
|
|
|
+ code: "A02"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "A03",
|
|
|
+ code: "A03"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.BenchmarkingData = dataJson.data1
|
|
|
+ this.$nextTick(() =>{
|
|
|
+ this.initChart()
|
|
|
+ })
|
|
|
},
|
|
|
methods: {
|
|
|
+ initChart() {
|
|
|
+ let lenged = ["实发功率", "应发功率"];
|
|
|
+ let xAxis = ["A01", "A02", "A03"];
|
|
|
+ let series = [
|
|
|
+ {
|
|
|
+ name: "实发功率",
|
|
|
+ data: [820, 932, 231],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "应发功率",
|
|
|
+ data: [234, 657, 345],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.getChart(xAxis, lenged, series);
|
|
|
+ },
|
|
|
// 切换tab
|
|
|
tabSelect(index) {
|
|
|
this.tabIndex = index;
|
|
|
@@ -518,22 +543,15 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
- show: true,
|
|
|
- data: lenged,
|
|
|
- padding: [10, 10],
|
|
|
- right: 56,
|
|
|
- icon: "circle",
|
|
|
- itemWidth: 6,
|
|
|
- inactiveColor: partten.getColor("gray"),
|
|
|
- textStyle: {
|
|
|
- color: partten.getColor("grayl"),
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
+ data: lenged,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ }
|
|
|
},
|
|
|
grid: {
|
|
|
top: 56,
|
|
|
- left: 40,
|
|
|
- right: 15,
|
|
|
+ left: 50,
|
|
|
+ right: 55,
|
|
|
bottom: 24,
|
|
|
},
|
|
|
xAxis: [
|
|
|
@@ -723,9 +741,27 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .selections[data-type~="greenSty"] {
|
|
|
+ .selections_btn{
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ background: fade(#05bb4c, 80);
|
|
|
+ border: 1px solid #05bb4c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .selections[data-type~="blueSty"] {
|
|
|
+ .selections_btn{
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ background: fade(#0046c7, 80);
|
|
|
+ border: 1px solid #0046c7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.selections {
|
|
|
position: relative;
|
|
|
- right: 100px;
|
|
|
+ top: 46px;
|
|
|
display: flex;
|
|
|
margin-top: 13px;
|
|
|
.selections_btn {
|
|
|
@@ -741,8 +777,6 @@ export default {
|
|
|
border-radius: 20px;
|
|
|
&:hover,
|
|
|
&.active {
|
|
|
- background: fade(#0046c7, 80);
|
|
|
- border: 1px solid #0046c7;
|
|
|
color: #b9b9b9;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
@@ -751,11 +785,16 @@ export default {
|
|
|
}
|
|
|
.Benchmarking_title {
|
|
|
padding-left: 10px;
|
|
|
+ .leftContent[data-type~="greenSty"] {
|
|
|
+ background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
|
|
|
+ }
|
|
|
+ .leftContent[data-type~="blueSty"] {
|
|
|
+ background: url("~@/assets/imgs/title_left_bg.png") no-repeat;
|
|
|
+ }
|
|
|
.leftContent {
|
|
|
width: 242px;
|
|
|
height: 41px;
|
|
|
line-height: 41px;
|
|
|
- background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
|
|
|
span {
|
|
|
font-size: 16px;
|
|
|
font-family: Microsoft YaHei;
|
sunzehao