|
|
@@ -1,18 +1,28 @@
|
|
|
<template>
|
|
|
- <div class="decision-page-1">
|
|
|
- <div class="query mg-b-8">
|
|
|
- <div class="query-items">
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">算法类型：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-select v-model="chooseAlgorithm" @change="algorithmChange(chooseAlgorithm)" clearable
|
|
|
- placeholder="请选择" popper-class="select">
|
|
|
- <el-option v-for="item in algorithm" :key="item.name" :value="item.name" :label="item.name">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div v-for="(item, index) in chooseAlgorithm.parameters" :key="index">
|
|
|
+ <div class="decision-page-1">
|
|
|
+ <div class="query mg-b-8">
|
|
|
+ <div class="query-items">
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">算法类型：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select
|
|
|
+ v-model="chooseAlgorithm"
|
|
|
+ @change="algorithmChange(chooseAlgorithm)"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="select"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in algorithm"
|
|
|
+ :key="item.name"
|
|
|
+ :value="item.name"
|
|
|
+ :label="item.name"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-for="(item, index) in chooseAlgorithm.parameters" :key="index">
|
|
|
{{ item.name }}:
|
|
|
<input
|
|
|
v-model="item.value"
|
|
|
@@ -21,558 +31,641 @@
|
|
|
@blur="inputChange(item)"
|
|
|
/>
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="actions mg-b-8">
|
|
|
- <button class="btn" @click="TypeClick('sjfl')">数据分类</button>
|
|
|
- <button class="btn" @click="TypeClick('mxjl')">模型记录</button>
|
|
|
- <button class="btn" @click="TypeClick('jcjl')">检测记录</button>
|
|
|
- <!-- <button class="btn" @click="handleTraining()">检测记录</button> -->
|
|
|
- </div>
|
|
|
- <el-row :type="'flex'" class="content">
|
|
|
- <el-col :span="16" class="pd-l-8">
|
|
|
- <panel :title="'训练记录'" :showLine="false">
|
|
|
- <div class="dataTitle">
|
|
|
- <div class="chooses">
|
|
|
- <el-date-picker class="picker" @change="changes" v-model="timeValue" type="datetimerange"
|
|
|
- range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
- </el-date-picker>
|
|
|
- <div class="contents">
|
|
|
- 风电场：
|
|
|
- <el-select v-model="selectValue" @change="search()" clearable placeholder="请选择"
|
|
|
- popper-class="select" style="width: 170px; margin-left: 20px">
|
|
|
- <el-option v-for="item in options" :key="item.value" :value="item.value"
|
|
|
- :label="item.label" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="contents">
|
|
|
- 机型：
|
|
|
- <el-select v-model="selectMoudle" @change="selectSearch()" clearable placeholder="全部"
|
|
|
- popper-class="select" style="width: 120px; margin-left: 20px">
|
|
|
- <el-option v-for="item in moudleList" :key="item.value" :value="item.value"
|
|
|
- :label="item.label" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="contents">
|
|
|
- 数据源：
|
|
|
- <el-select v-model="category" clearable placeholder="全部" popper-class="select">
|
|
|
- <el-option v-for="item in sjyArr" :key="item.value" :value="item.value"
|
|
|
- :label="item.label" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <button class="btn" @click="getFaultList">查询</button>
|
|
|
- </div>
|
|
|
- <div class="bodys" v-if="dataList.length > 0">
|
|
|
- <div v-for="(item, index) in dataList" :key="index">
|
|
|
- <div class="faultTitle">{{ item.name }}:</div>
|
|
|
- <div class="fault">
|
|
|
- <div class="faultBlock" v-for="(val, indexs) in item.children" :key="indexs">
|
|
|
- <div class="left">
|
|
|
- <div>{{ val.stationcn }}</div>
|
|
|
- <div>{{ val.windturbineid }}</div>
|
|
|
- <div>{{ val.model }}</div>
|
|
|
- <div style="font-size: 14px">{{ val.starttime }}</div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <img class="imgs" src="./img/generator.png" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else class="none">暂无数据</div>
|
|
|
- </panel>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8" class="pd-l-8">
|
|
|
- <panel :title="'演示过程图'" :showLine="false">
|
|
|
- <div class="bodys">
|
|
|
- <div class="results" v-if="showTraining">
|
|
|
- <div class="progressTitle">
|
|
|
- <div v-if="!trainingFlag">数据获取中...</div>
|
|
|
- <div v-if="trainingFlag && width < 100">训练中...</div>
|
|
|
- <div v-if="trainingFlag && width === 100">训练完成</div>
|
|
|
- <div class="progressNum">
|
|
|
- 当前进度：{{ width >= 0 ? width : 0 }}%
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box">
|
|
|
- <div class="progress" :style="`width:${width}%;`"></div>
|
|
|
- <div class="line"></div>
|
|
|
- <div class="unprogress" :style="`width:${100 - width}%;`"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <LineChart v-if="lossList" id="loss" :dataList="lossList"></LineChart>
|
|
|
- <LineChart v-if="accuracyList" id="accuracy" :dataList="accuracyList"></LineChart>
|
|
|
- <BarChart v-if="barList.length > 0" id="bar" :baseLine="ceshiList?.BaseLine"
|
|
|
- @click="showDetials" :barList="barList"></BarChart>
|
|
|
- </div>
|
|
|
- </panel>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <SuperviseDataClassify ref="dataClass" @click-training="handleClick" @handleInterval="intervals"
|
|
|
- v-model="display" :allData="allData" :chooseAlgorithm="chooseAlgorithm"></SuperviseDataClassify>
|
|
|
- <Records @results="recordResults" supervisedFlag="true" :recordList="showBarList" :accuracyList="accuracyList"
|
|
|
- v-model="recordsDisplay"></Records>
|
|
|
- <ChartDetails v-model="detialsDisplay" :barList="ceshiList?.bar" :baseLine="ceshiList?.BaseLine"></ChartDetails>
|
|
|
- <DetectionRecord v-model="detectionDisplay" :myData="myData"></DetectionRecord>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="actions mg-b-8">
|
|
|
+ <button class="btn" @click="TypeClick('sjfl')">数据分类</button>
|
|
|
+ <button class="btn" @click="TypeClick('mxjl')">模型记录</button>
|
|
|
+ <button class="btn" @click="TypeClick('jcjl')">检测记录</button>
|
|
|
+ <!-- <button class="btn" @click="handleTraining()">检测记录</button> -->
|
|
|
+ </div>
|
|
|
+ <el-row :type="'flex'" class="content">
|
|
|
+ <el-col :span="16" class="pd-l-8">
|
|
|
+ <panel :title="'训练记录'" :showLine="false">
|
|
|
+ <div class="dataTitle">
|
|
|
+ <div class="chooses">
|
|
|
+ <el-date-picker
|
|
|
+ class="picker"
|
|
|
+ @change="changes"
|
|
|
+ v-model="timeValue"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <div class="contents">
|
|
|
+ 风电场：
|
|
|
+ <el-select
|
|
|
+ v-model="selectValue"
|
|
|
+ @change="search()"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="select"
|
|
|
+ style="width: 170px; margin-left: 20px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="contents">
|
|
|
+ 机型：
|
|
|
+ <el-select
|
|
|
+ v-model="selectMoudle"
|
|
|
+ @change="selectSearch()"
|
|
|
+ clearable
|
|
|
+ placeholder="全部"
|
|
|
+ popper-class="select"
|
|
|
+ style="width: 120px; margin-left: 20px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in moudleList"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="contents">
|
|
|
+ 数据源：
|
|
|
+ <el-select
|
|
|
+ v-model="category"
|
|
|
+ clearable
|
|
|
+ placeholder="全部"
|
|
|
+ popper-class="select"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in sjyArr"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button class="btn" @click="getFaultList">查询</button>
|
|
|
+ </div>
|
|
|
+ <div class="bodys" v-if="dataList.length > 0">
|
|
|
+ <div v-for="(item, index) in dataList" :key="index">
|
|
|
+ <div class="faultTitle">{{ item.name }}:</div>
|
|
|
+ <div class="fault">
|
|
|
+ <div
|
|
|
+ class="faultBlock"
|
|
|
+ v-for="(val, indexs) in item.children"
|
|
|
+ :key="indexs"
|
|
|
+ >
|
|
|
+ <div class="left">
|
|
|
+ <div>{{ val.stationcn }}</div>
|
|
|
+ <div>{{ val.windturbineid }}</div>
|
|
|
+ <div>{{ val.model }}</div>
|
|
|
+ <div style="font-size: 14px">{{ val.starttime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <img class="imgs" src="./img/generator.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="none">暂无数据</div>
|
|
|
+ </panel>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="pd-l-8">
|
|
|
+ <panel :title="'演示过程图'" :showLine="false">
|
|
|
+ <div class="bodys">
|
|
|
+ <div class="results" v-if="showTraining">
|
|
|
+ <div class="progressTitle">
|
|
|
+ <div v-if="!trainingFlag">数据获取中...</div>
|
|
|
+ <div v-if="trainingFlag && width < 100">训练中...</div>
|
|
|
+ <div v-if="trainingFlag && width === 100">训练完成</div>
|
|
|
+ <div class="progressNum">
|
|
|
+ 当前进度：{{ width >= 0 ? width : 0 }}%
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="progress" :style="`width:${width}%;`"></div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="unprogress" :style="`width:${100 - width}%;`"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <LineChart
|
|
|
+ v-if="lossList"
|
|
|
+ id="loss"
|
|
|
+ :dataList="lossList"
|
|
|
+ ></LineChart>
|
|
|
+ <LineChart
|
|
|
+ v-if="accuracyList"
|
|
|
+ id="accuracy"
|
|
|
+ :dataList="accuracyList"
|
|
|
+ ></LineChart>
|
|
|
+ <BarChart
|
|
|
+ v-if="barList.length > 0"
|
|
|
+ id="bar"
|
|
|
+ :baseLine="ceshiList?.BaseLine"
|
|
|
+ @click="showDetials"
|
|
|
+ :barList="barList"
|
|
|
+ ></BarChart>
|
|
|
+ </div>
|
|
|
+ </panel>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <SuperviseDataClassify
|
|
|
+ ref="dataClass"
|
|
|
+ @click-training="handleClick"
|
|
|
+ @handleInterval="intervals"
|
|
|
+ v-model="display"
|
|
|
+ :allData="allData"
|
|
|
+ :chooseAlgorithm="chooseAlgorithm"
|
|
|
+ ></SuperviseDataClassify>
|
|
|
+ <Records
|
|
|
+ @results="recordResults"
|
|
|
+ supervisedFlag="true"
|
|
|
+ :recordList="showBarList"
|
|
|
+ :accuracyList="accuracyList"
|
|
|
+ v-model="recordsDisplay"
|
|
|
+ ></Records>
|
|
|
+ <ChartDetails
|
|
|
+ v-model="detialsDisplay"
|
|
|
+ :barList="ceshiList?.bar"
|
|
|
+ :baseLine="ceshiList?.BaseLine"
|
|
|
+ ></ChartDetails>
|
|
|
+ <DetectionRecord
|
|
|
+ v-model="detectionDisplay"
|
|
|
+ :myData="myData"
|
|
|
+ ></DetectionRecord>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import Panel from "../../components/coms/panel/panel.vue";
|
|
|
- import LineChart from "./components/lineChart.vue";
|
|
|
- import BarChart from "./components/barChart.vue";
|
|
|
- import SuperviseDataClassify from "./components/superviseDataClassify.vue";
|
|
|
- import Records from "./components/records.vue";
|
|
|
- import ChartDetails from "./components/chartDetails.vue";
|
|
|
- import DetectionRecord from "./components/detectionRecord.vue";
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- Panel,
|
|
|
- LineChart,
|
|
|
- BarChart,
|
|
|
- SuperviseDataClassify,
|
|
|
- Records,
|
|
|
- ChartDetails,
|
|
|
- DetectionRecord,
|
|
|
- },
|
|
|
- created() {
|
|
|
- if (this.timeValue.length === 0) {
|
|
|
- let date = new Date();
|
|
|
- this.timeValue[0] = date.getTime() - 86400000;
|
|
|
- this.timeValue[1] = date.getTime();
|
|
|
- }
|
|
|
- let select = this.options.filter(
|
|
|
- (item) => item.value === this.selectValue
|
|
|
- )[0];
|
|
|
- this.selectMoudle = select.station[0].lable;
|
|
|
- this.moudleList = select.station;
|
|
|
- this.getfaultLables();
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- category: 0,
|
|
|
- sjyArr: [{
|
|
|
- value: 0,
|
|
|
- label: '检修数据'
|
|
|
- }, {
|
|
|
- value: 1,
|
|
|
- label: '手动打标签'
|
|
|
- }, {
|
|
|
- value: 2,
|
|
|
- label: 'scada'
|
|
|
- }, {
|
|
|
- value: 3,
|
|
|
- label: '有监督学习'
|
|
|
- }],
|
|
|
- myData: {},
|
|
|
- dataList: [],
|
|
|
- faultLists: [],
|
|
|
- lossList: {},
|
|
|
- accuracyList: {},
|
|
|
- barList: [],
|
|
|
- algorithm: [], //算法
|
|
|
- chooseAlgorithm: "",
|
|
|
- timeValue: [],
|
|
|
- showBarList: [],
|
|
|
- moudleList: [],
|
|
|
- allData: [],
|
|
|
- ceshiList: [],
|
|
|
- detectionDisplay: false,
|
|
|
- showTraining: false,
|
|
|
- trainingFlag: false,
|
|
|
- lastTraining: false,
|
|
|
- display: false,
|
|
|
- recordsDisplay: false,
|
|
|
- detialsDisplay: false,
|
|
|
- width: 60,
|
|
|
- selectValue: "NSS_FDC",
|
|
|
- selectMoudle: "UP82",
|
|
|
- options: [{
|
|
|
- value: "NSS_FDC",
|
|
|
- label: "牛首山风电场",
|
|
|
- station: [{
|
|
|
- lable: "UP82",
|
|
|
- value: "UP82",
|
|
|
- }, ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: "MHS_FDC",
|
|
|
- label: "麻黄山风电场",
|
|
|
- station: [{
|
|
|
- lable: "UP77",
|
|
|
- value: "UP77",
|
|
|
- },
|
|
|
- {
|
|
|
- lable: "UP105-2000-S",
|
|
|
- value: "UP105-2000-S",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: "QS_FDC",
|
|
|
- label: "青山风电场",
|
|
|
- station: [{
|
|
|
- lable: "CCWE-1500",
|
|
|
- value: "CCWE-1500",
|
|
|
- },
|
|
|
- {
|
|
|
- lable: "UP105-2000-S",
|
|
|
- value: "UP105-2000-S",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: "SBQ_FDC",
|
|
|
- label: "石板泉风电场",
|
|
|
- station: [{
|
|
|
- lable: "UP82",
|
|
|
- value: "UP82",
|
|
|
- },
|
|
|
- {
|
|
|
- lable: "UP97",
|
|
|
- value: "UP97",
|
|
|
- },
|
|
|
- {
|
|
|
- lable: "UP105-2000-S",
|
|
|
- value: "UP105-2000-S",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: "XS_FDC",
|
|
|
- label: "香山风电场",
|
|
|
- station: [{
|
|
|
- lable: "UP97",
|
|
|
- value: "UP97",
|
|
|
- },
|
|
|
- {
|
|
|
- lable: "UP105-2000-S",
|
|
|
- value: "UP105-2000-S",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- let dataList = JSON.parse(
|
|
|
- '{"ducumentName":"NNS-1637028563000","loss":[1.0882383584976196,1.067789912223816,1.0520573854446411,1.0380222797393799,1.0230460166931152,1.0070627927780151,0.9899255037307739,0.9736341238021851,0.9547672271728516,0.9341660737991333,0.9082227945327759,0.8833365440368652,0.8581799268722534,0.8310791254043579,0.8011142611503601,0.7700659036636353,0.7383494973182678,0.7076452970504761,0.6731187105178833,0.6390867829322815],"accuracy":[0.3047619163990021,0.37142857909202576,0.3619047701358795,0.3619047701358795,0.380952388048172,0.5809524059295654,0.6571428775787354,0.6571428775787354,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6761904954910278,0.6952381134033203,0.7333333492279053,0.7428571581840515],"val_loss":[1.0914311408996582,1.0727100372314453,1.0579898357391357,1.0469794273376465,1.0305122137069702,1.012723684310913,0.9997329115867615,0.9839586615562439,0.9610583782196045,0.9339884519577026,0.9096081256866455,0.8876619338989258,0.862886905670166,0.8299474120140076,0.793283998966217,0.7597811222076416,0.7229973673820496,0.6826366782188416,0.6449647545814514,0.6126752495765686],"val_accuracy":[0.2666666805744171,0.2666666805744171,0.2666666805744171,0.2666666805744171,0.4000000059604645,0.644444465637207,0.644444465637207,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.7333333492279053,0.7555555701255798,0.7333333492279053],"bar":[{"name":"邮箱温度","value":0.3},{"name":"风速","value":0.25},{"name":"变桨","value":0.25},{"name":"有高","value":0.2}]}'
|
|
|
- );
|
|
|
- this.ceshiList = dataList;
|
|
|
- this.lossList.loss = dataList.loss;
|
|
|
- this.lossList.val_loss = dataList.val_loss;
|
|
|
- this.accuracyList.accuracy = dataList.accuracy;
|
|
|
- this.accuracyList.val_accuracy = dataList.val_accuracy;
|
|
|
- this.barList = dataList.bar;
|
|
|
- this.getType();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getfaultLables() {
|
|
|
- let that = this;
|
|
|
- this.API.requestData({
|
|
|
- method: "GET",
|
|
|
- subUrl: "http://192.168.1.18:9002/know/fault/type/all",
|
|
|
- success(res) {
|
|
|
- if (res) {
|
|
|
- that.faultLists = res.data;
|
|
|
- that.getFaultList();
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- getType() {
|
|
|
- let that = this;
|
|
|
- this.API.requestData({
|
|
|
- method: "GET",
|
|
|
- baseURL: "http://10.155.32.14:9090/",
|
|
|
- subUrl: "api/coordinate/algorithm",
|
|
|
- data: {
|
|
|
- type: 1,
|
|
|
- },
|
|
|
- success(res) {
|
|
|
- if (res) {
|
|
|
- that.algorithm = res;
|
|
|
- that.chooseAlgorithm = res[0].name;
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- TypeClick(btnType) {
|
|
|
- if (btnType === "sjfl") {
|
|
|
- this.display = true;
|
|
|
- } else if (btnType === "mxjl") {
|
|
|
- this.showBarList.push(this.ceshiList);
|
|
|
- this.recordsDisplay = true;
|
|
|
- } else if (btnType === "jcjl") {
|
|
|
- this.myData = {
|
|
|
- station: this.selectValue,
|
|
|
- model: this.selectMoudle,
|
|
|
- st: new Date(this.timeValue[0]).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
- et: new Date(this.timeValue[1]).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
- };
|
|
|
- this.detectionDisplay = true;
|
|
|
- }
|
|
|
- },
|
|
|
- selectSearch() {
|
|
|
- this.allData.forEach((item) => {
|
|
|
- if (item.modelId.indexOf(this.selectMoudle) != -1) {
|
|
|
- this.dataList.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- search() {
|
|
|
- let select = this.options.filter(
|
|
|
- (item) => item.value === this.selectValue
|
|
|
- )[0];
|
|
|
- this.selectMoudle = select.station[0].lable;
|
|
|
- this.moudleList = select.station;
|
|
|
- },
|
|
|
- showDetials() {
|
|
|
- this.detialsDisplay = true;
|
|
|
- },
|
|
|
- getFaultList() {
|
|
|
- this.dataList = [];
|
|
|
- let that = this;
|
|
|
- this.API.requestData({
|
|
|
- method: "GET",
|
|
|
- subUrl: "http://192.168.1.18:9002/case/fault/list",
|
|
|
- data: {
|
|
|
- station: this.selectValue,
|
|
|
- model: this.selectMoudle,
|
|
|
- st: new Date(this.timeValue[0]).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
- et: new Date(this.timeValue[1]).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
- category: this.category
|
|
|
- },
|
|
|
- success(res) {
|
|
|
- if (res) {
|
|
|
- that.allData = res.data;
|
|
|
- res.data.forEach((item) => {
|
|
|
- let array = that.dataList.filter(
|
|
|
- (val) => val.code === item.faultcode
|
|
|
- );
|
|
|
- item.stationcn = that.options.filter(
|
|
|
- (items) => items.value === item.stationen
|
|
|
- )[0]?.label;
|
|
|
- if (array.length > 0) {
|
|
|
- array[0].children.push(item);
|
|
|
- } else {
|
|
|
- let obj = {
|
|
|
- name: that.faultLists.filter(
|
|
|
- (items) => items.faultcode === item.faultcode
|
|
|
- )[0]?.faulttype,
|
|
|
- code: item.faultcode,
|
|
|
- children: [],
|
|
|
- };
|
|
|
- obj.children.push(item);
|
|
|
- that.dataList.push(obj);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- handleClick() {
|
|
|
- this.lastTraining = false;
|
|
|
- this.barList = [];
|
|
|
- this.handleTraining();
|
|
|
- },
|
|
|
- handleTraining() {
|
|
|
- let that = this;
|
|
|
- that.resultList = [];
|
|
|
- this.API.requestData({
|
|
|
- method: "GET",
|
|
|
- baseURL: "http://10.155.32.14:9090/",
|
|
|
- subUrl: "api/supervised/",
|
|
|
- success(res) {
|
|
|
- console.log(222,res)
|
|
|
- if (res.value.length > 0) {
|
|
|
+import Panel from "../../components/coms/panel/panel.vue";
|
|
|
+import LineChart from "./components/lineChart.vue";
|
|
|
+import BarChart from "./components/barChart.vue";
|
|
|
+import SuperviseDataClassify from "./components/superviseDataClassify.vue";
|
|
|
+import Records from "./components/records.vue";
|
|
|
+import ChartDetails from "./components/chartDetails.vue";
|
|
|
+import DetectionRecord from "./components/detectionRecord.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Panel,
|
|
|
+ LineChart,
|
|
|
+ BarChart,
|
|
|
+ SuperviseDataClassify,
|
|
|
+ Records,
|
|
|
+ ChartDetails,
|
|
|
+ DetectionRecord,
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (this.timeValue.length === 0) {
|
|
|
+ let date = new Date();
|
|
|
+ this.timeValue[0] = date.getTime() - 86400000;
|
|
|
+ this.timeValue[1] = date.getTime();
|
|
|
+ }
|
|
|
+ let select = this.options.filter(
|
|
|
+ (item) => item.value === this.selectValue
|
|
|
+ )[0];
|
|
|
+ this.selectMoudle = select.station[0].lable;
|
|
|
+ this.moudleList = select.station;
|
|
|
+ this.getfaultLables();
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ category: 3,
|
|
|
+ sjyArr: [
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ label: "检修数据",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: "手动打标签",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: "scada",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ label: "有监督学习",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ myData: {},
|
|
|
+ dataList: [],
|
|
|
+ faultLists: [],
|
|
|
+ lossList: {},
|
|
|
+ accuracyList: {},
|
|
|
+ barList: [],
|
|
|
+ algorithm: [], //算法
|
|
|
+ chooseAlgorithm: "",
|
|
|
+ timeValue: [],
|
|
|
+ showBarList: [],
|
|
|
+ moudleList: [],
|
|
|
+ allData: [],
|
|
|
+ ceshiList: [],
|
|
|
+ detectionDisplay: false,
|
|
|
+ showTraining: false,
|
|
|
+ trainingFlag: false,
|
|
|
+ lastTraining: false,
|
|
|
+ display: false,
|
|
|
+ recordsDisplay: false,
|
|
|
+ detialsDisplay: false,
|
|
|
+ width: 60,
|
|
|
+ selectValue: "NSS_FDC",
|
|
|
+ selectMoudle: "UP82",
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "NSS_FDC",
|
|
|
+ label: "牛首山风电场",
|
|
|
+ station: [
|
|
|
+ {
|
|
|
+ lable: "UP82",
|
|
|
+ value: "UP82",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "MHS_FDC",
|
|
|
+ label: "麻黄山风电场",
|
|
|
+ station: [
|
|
|
+ {
|
|
|
+ lable: "UP77",
|
|
|
+ value: "UP77",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ lable: "UP105-2000-S",
|
|
|
+ value: "UP105-2000-S",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "QS_FDC",
|
|
|
+ label: "青山风电场",
|
|
|
+ station: [
|
|
|
+ {
|
|
|
+ lable: "CCWE-1500",
|
|
|
+ value: "CCWE-1500",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ lable: "UP105-2000-S",
|
|
|
+ value: "UP105-2000-S",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "SBQ_FDC",
|
|
|
+ label: "石板泉风电场",
|
|
|
+ station: [
|
|
|
+ {
|
|
|
+ lable: "UP82",
|
|
|
+ value: "UP82",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ lable: "UP97",
|
|
|
+ value: "UP97",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ lable: "UP105-2000-S",
|
|
|
+ value: "UP105-2000-S",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "XS_FDC",
|
|
|
+ label: "香山风电场",
|
|
|
+ station: [
|
|
|
+ {
|
|
|
+ lable: "UP97",
|
|
|
+ value: "UP97",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ lable: "UP105-2000-S",
|
|
|
+ value: "UP105-2000-S",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let dataList = JSON.parse(
|
|
|
+ '{"ducumentName":"NNS-1637028563000","loss":[1.0882383584976196,1.067789912223816,1.0520573854446411,1.0380222797393799,1.0230460166931152,1.0070627927780151,0.9899255037307739,0.9736341238021851,0.9547672271728516,0.9341660737991333,0.9082227945327759,0.8833365440368652,0.8581799268722534,0.8310791254043579,0.8011142611503601,0.7700659036636353,0.7383494973182678,0.7076452970504761,0.6731187105178833,0.6390867829322815],"accuracy":[0.3047619163990021,0.37142857909202576,0.3619047701358795,0.3619047701358795,0.380952388048172,0.5809524059295654,0.6571428775787354,0.6571428775787354,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6761904954910278,0.6952381134033203,0.7333333492279053,0.7428571581840515],"val_loss":[1.0914311408996582,1.0727100372314453,1.0579898357391357,1.0469794273376465,1.0305122137069702,1.012723684310913,0.9997329115867615,0.9839586615562439,0.9610583782196045,0.9339884519577026,0.9096081256866455,0.8876619338989258,0.862886905670166,0.8299474120140076,0.793283998966217,0.7597811222076416,0.7229973673820496,0.6826366782188416,0.6449647545814514,0.6126752495765686],"val_accuracy":[0.2666666805744171,0.2666666805744171,0.2666666805744171,0.2666666805744171,0.4000000059604645,0.644444465637207,0.644444465637207,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.6666666865348816,0.7333333492279053,0.7555555701255798,0.7333333492279053],"bar":[{"name":"邮箱温度","value":0.3},{"name":"风速","value":0.25},{"name":"变桨","value":0.25},{"name":"有高","value":0.2}]}'
|
|
|
+ );
|
|
|
+ this.ceshiList = dataList;
|
|
|
+ this.lossList.loss = dataList.loss;
|
|
|
+ this.lossList.val_loss = dataList.val_loss;
|
|
|
+ this.accuracyList.accuracy = dataList.accuracy;
|
|
|
+ this.accuracyList.val_accuracy = dataList.val_accuracy;
|
|
|
+ this.barList = dataList.bar;
|
|
|
+ this.getType();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getfaultLables() {
|
|
|
+ let that = this;
|
|
|
+ this.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ subUrl: "http://192.168.1.18:9002/know/fault/type/all",
|
|
|
+ success(res) {
|
|
|
+ if (res) {
|
|
|
+ that.faultLists = res.data;
|
|
|
+ that.getFaultList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getType() {
|
|
|
+ let that = this;
|
|
|
+ this.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL: "http://10.155.32.14:9090/",
|
|
|
+ subUrl: "api/coordinate/algorithm",
|
|
|
+ data: {
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ if (res) {
|
|
|
+ that.algorithm = res;
|
|
|
+ that.chooseAlgorithm = res[0].name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ TypeClick(btnType) {
|
|
|
+ if (btnType === "sjfl") {
|
|
|
+ this.display = true;
|
|
|
+ } else if (btnType === "mxjl") {
|
|
|
+ this.showBarList.push(this.ceshiList);
|
|
|
+ this.recordsDisplay = true;
|
|
|
+ } else if (btnType === "jcjl") {
|
|
|
+ this.myData = {
|
|
|
+ station: this.selectValue,
|
|
|
+ model: this.selectMoudle,
|
|
|
+ st: new Date(this.timeValue[0]).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
+ et: new Date(this.timeValue[1]).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
+ };
|
|
|
+ this.detectionDisplay = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectSearch() {
|
|
|
+ this.allData.forEach((item) => {
|
|
|
+ if (item.modelId.indexOf(this.selectMoudle) != -1) {
|
|
|
+ this.dataList.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ let select = this.options.filter(
|
|
|
+ (item) => item.value === this.selectValue
|
|
|
+ )[0];
|
|
|
+ this.selectMoudle = select.station[0].lable;
|
|
|
+ this.moudleList = select.station;
|
|
|
+ },
|
|
|
+ showDetials() {
|
|
|
+ this.detialsDisplay = true;
|
|
|
+ },
|
|
|
+ getFaultList() {
|
|
|
+ this.dataList = [];
|
|
|
+ let that = this;
|
|
|
+ this.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ subUrl: "http://192.168.1.18:9002/case/fault/list",
|
|
|
+ data: {
|
|
|
+ station: this.selectValue,
|
|
|
+ model: this.selectMoudle,
|
|
|
+ st: new Date(this.timeValue[0]).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
+ et: new Date(this.timeValue[1]).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
+ category: this.category,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ if (res) {
|
|
|
+ that.allData = res.data;
|
|
|
+ res.data.forEach((item) => {
|
|
|
+ let array = that.dataList.filter(
|
|
|
+ (val) => val.code === item.faultcode
|
|
|
+ );
|
|
|
+ item.stationcn = that.options.filter(
|
|
|
+ (items) => items.value === item.stationen
|
|
|
+ )[0]?.label;
|
|
|
+ if (array.length > 0) {
|
|
|
+ array[0].children.push(item);
|
|
|
+ } else {
|
|
|
+ let obj = {
|
|
|
+ name: that.faultLists.filter(
|
|
|
+ (items) => items.faultcode === item.faultcode
|
|
|
+ )[0]?.faulttype,
|
|
|
+ code: item.faultcode,
|
|
|
+ children: [],
|
|
|
+ };
|
|
|
+ obj.children.push(item);
|
|
|
+ that.dataList.push(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClick() {
|
|
|
+ this.lastTraining = false;
|
|
|
+ this.barList = [];
|
|
|
+ this.handleTraining();
|
|
|
+ },
|
|
|
+ handleTraining() {
|
|
|
+ let that = this;
|
|
|
+ that.resultList = [];
|
|
|
+ this.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL: "http://10.155.32.14:9090/",
|
|
|
+ subUrl: "api/supervised/",
|
|
|
+ success(res) {
|
|
|
+ if (res.value.length > 0) {
|
|
|
+ let arr = JSON.parse(res.value);
|
|
|
+ that.ceshiList = arr;
|
|
|
|
|
|
- let arr = JSON.parse(res.value);
|
|
|
- that.ceshiList = arr;
|
|
|
-
|
|
|
- that.lossList.loss = arr.loss;
|
|
|
- that.lossList.val_loss = arr.val_loss;
|
|
|
- that.accuracyList.accuracy = arr.accuracy;
|
|
|
- that.accuracyList.val_accuracy = arr.val_accuracy;
|
|
|
- if (arr.bar) {
|
|
|
- arr.bar = JSON.parse(arr.bar);
|
|
|
- arr.bar?.sort(that.Compare("value"));
|
|
|
- that.barList = arr.bar?.slice(0, 5);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- this.API.requestData({
|
|
|
- method: "GET",
|
|
|
- baseURL: "http://10.155.32.14:9090/",
|
|
|
- subUrl: "api/supervised/progress",
|
|
|
- success(res) {
|
|
|
- that.showTraining = true;
|
|
|
- if (res) {
|
|
|
- that.trainingFlag = res.value === -1 ? false : true;
|
|
|
- that.width = res.value === -1 ? 0 : (res.value * 100).toFixed(2);
|
|
|
- if (that.width < 100) {
|
|
|
- setTimeout(() => {
|
|
|
- that.handleTraining();
|
|
|
- }, 1000);
|
|
|
- } else {
|
|
|
- if (!that.lastTraining) {
|
|
|
- that.lastTraining = true;
|
|
|
- that.handleTraining();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- handleClose() {
|
|
|
- this.barList = this.ceshiList.bar.slice(0, 5);
|
|
|
- },
|
|
|
- algorithmChange(val) {
|
|
|
- this.chooseAlgorithm = this.algorithm.filter(
|
|
|
- (item) => item.name === val
|
|
|
- )[0].name;
|
|
|
- },
|
|
|
- // clear() {
|
|
|
- // this.chooseAlgorithm = '';
|
|
|
- // },
|
|
|
- Compare(property) {
|
|
|
- return function(a, b) {
|
|
|
- var value1 = a[property];
|
|
|
- var value2 = b[property];
|
|
|
- return value2 - value1;
|
|
|
- };
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
+ that.lossList.loss = arr.loss;
|
|
|
+ that.lossList.val_loss = arr.val_loss;
|
|
|
+ that.accuracyList.accuracy = arr.accuracy;
|
|
|
+ that.accuracyList.val_accuracy = arr.val_accuracy;
|
|
|
+ if (arr.bar) {
|
|
|
+ arr.bar = JSON.parse(arr.bar);
|
|
|
+ arr.bar?.sort(that.Compare("value"));
|
|
|
+ that.barList = arr.bar?.slice(0, 5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL: "http://10.155.32.14:9090/",
|
|
|
+ subUrl: "api/supervised/progress",
|
|
|
+ success(res) {
|
|
|
+ that.showTraining = true;
|
|
|
+ if (res) {
|
|
|
+ that.trainingFlag = res.value === -1 ? false : true;
|
|
|
+ that.width = res.value === -1 ? 0 : (res.value * 100).toFixed(2);
|
|
|
+ if (that.width < 100) {
|
|
|
+ setTimeout(() => {
|
|
|
+ that.handleTraining();
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ if (!that.lastTraining) {
|
|
|
+ that.lastTraining = true;
|
|
|
+ that.handleTraining();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.barList = this.ceshiList.bar.slice(0, 5);
|
|
|
+ },
|
|
|
+ algorithmChange(val) {
|
|
|
+ this.chooseAlgorithm = this.algorithm.filter(
|
|
|
+ (item) => item.name === val
|
|
|
+ )[0].name;
|
|
|
+ },
|
|
|
+ // clear() {
|
|
|
+ // this.chooseAlgorithm = '';
|
|
|
+ // },
|
|
|
+ Compare(property) {
|
|
|
+ return function (a, b) {
|
|
|
+ var value1 = a[property];
|
|
|
+ var value2 = b[property];
|
|
|
+ return value2 - value1;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- .dataTitle {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 20px;
|
|
|
- margin-top: 10px;
|
|
|
+.dataTitle {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
|
|
|
- .chooses {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ .chooses {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- .timeInput {
|
|
|
- width: 30px;
|
|
|
- }
|
|
|
+ .timeInput {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
|
|
|
- .contents {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- margin-left: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .contents {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .faultTitle {
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
+.faultTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
|
|
|
- .fault {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
+.fault {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
|
- .faultBlock {
|
|
|
- width: 220px;
|
|
|
- height: 90px;
|
|
|
- border: 1px solid #05bb4c;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-right: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
+ .faultBlock {
|
|
|
+ width: 220px;
|
|
|
+ height: 90px;
|
|
|
+ border: 1px solid #05bb4c;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
|
- .left {
|
|
|
- line-height: 19px;
|
|
|
- margin-left: 10px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+ .left {
|
|
|
+ line-height: 19px;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 100%;
|
|
|
- border-left: 1px solid #05bb4c;
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ border-left: 1px solid #05bb4c;
|
|
|
|
|
|
- .imgs {
|
|
|
- margin: 0px 10px;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .imgs {
|
|
|
+ margin: 0px 10px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .bodys {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow-y: auto;
|
|
|
- height: 75vh;
|
|
|
- }
|
|
|
+.bodys {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 75vh;
|
|
|
+}
|
|
|
|
|
|
- .none {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin-top: 150px;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+.none {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 150px;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
|
|
|
- .results {
|
|
|
- margin-left: 35px;
|
|
|
- }
|
|
|
+.results {
|
|
|
+ margin-left: 35px;
|
|
|
+}
|
|
|
|
|
|
- .box {
|
|
|
- width: 80%;
|
|
|
- margin-top: 20px;
|
|
|
- height: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+.box {
|
|
|
+ width: 80%;
|
|
|
+ margin-top: 20px;
|
|
|
+ height: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .progress {
|
|
|
- background: linear-gradient(to right, #0d692c, #6df0a0);
|
|
|
- height: 16px;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
+ .progress {
|
|
|
+ background: linear-gradient(to right, #0d692c, #6df0a0);
|
|
|
+ height: 16px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
|
|
|
- .line {
|
|
|
- width: 1px;
|
|
|
- height: 70px;
|
|
|
- z-index: 2;
|
|
|
- background: linear-gradient(to bottom,
|
|
|
- rgba(158, 151, 151, 0) 0%,
|
|
|
- rgba(0, 0, 0, 0) 10%,
|
|
|
- rgba(255, 255, 255, 0.3) 20%,
|
|
|
- rgba(255, 255, 255, 0.6) 30%,
|
|
|
- rgba(255, 255, 255, 0.8) 40%,
|
|
|
- rgba(255, 255, 255, 1) 50%,
|
|
|
- rgba(255, 255, 255, 0.8) 60%,
|
|
|
- rgba(255, 255, 255, 0.6) 70%,
|
|
|
- rgba(255, 255, 255, 0.3) 80%,
|
|
|
- rgba(0, 0, 0, 0) 90%,
|
|
|
- rgba(0, 0, 0, 0) 100%);
|
|
|
- transition: width 0.2s linear;
|
|
|
- }
|
|
|
+ .line {
|
|
|
+ width: 1px;
|
|
|
+ height: 70px;
|
|
|
+ z-index: 2;
|
|
|
+ background: linear-gradient(
|
|
|
+ to bottom,
|
|
|
+ rgba(158, 151, 151, 0) 0%,
|
|
|
+ rgba(0, 0, 0, 0) 10%,
|
|
|
+ rgba(255, 255, 255, 0.3) 20%,
|
|
|
+ rgba(255, 255, 255, 0.6) 30%,
|
|
|
+ rgba(255, 255, 255, 0.8) 40%,
|
|
|
+ rgba(255, 255, 255, 1) 50%,
|
|
|
+ rgba(255, 255, 255, 0.8) 60%,
|
|
|
+ rgba(255, 255, 255, 0.6) 70%,
|
|
|
+ rgba(255, 255, 255, 0.3) 80%,
|
|
|
+ rgba(0, 0, 0, 0) 90%,
|
|
|
+ rgba(0, 0, 0, 0) 100%
|
|
|
+ );
|
|
|
+ transition: width 0.2s linear;
|
|
|
+ }
|
|
|
|
|
|
- .unprogress {
|
|
|
- background: linear-gradient(to right, #41acec, #003e7a);
|
|
|
- height: 16px;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- }
|
|
|
+ .unprogress {
|
|
|
+ background: linear-gradient(to right, #41acec, #003e7a);
|
|
|
+ height: 16px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
Koishi