健康管理模块--消缺跟踪

src/components/coms/table/table.vue

@@ -256,6 +256,9 @@ export default {
         color: @rowGray;
         text-align: center;
         font-size: @fontsize-s;
+        overflow: hidden; //隐藏文字
+        text-overflow: ellipsis; //显示 ...
+        white-space: nowrap; //不换行
 
         &.light,
         &.always-light {

src/views/HealthControl/HealthTab3.vue

@@ -73,33 +73,11 @@
       </div>
     </div>
     <div class="table-box">
-      <table class="com-table">
-        <thead>
-          <tr>
-            <th v-for="(col, index) of tableData.column" :key="index">
-              {{ col }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, index) of tableData.data" :key="index">
-            <td>{{ row.wfname }}</td>
-            <td>{{ row.wtid }}</td>
-            <td>{{row.operationdate ? new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{row.departuretime ? new Date(row.departuretime).formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{ row.reason }}</td>
-            <td>{{ row.ismain }}</td>
-            <td>{{ row.status }}</td>
-            <td>
-              <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <ComTable :data="tableData" height="80vh"></ComTable>
     </div>
-    <div>
-      <el-dialog title="消缺跟踪" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
-        <info-track />
+    <div class="dialog-box">
+      <el-dialog title="消缺跟踪" v-model="dialogVisible" width="950px" custom-class="modal" :close-on-click-modal="false">
+        <info-track :data="trackDate"/>
       </el-dialog>   
     </div> 
   </div>
@@ -107,11 +85,13 @@
 
 <script>
 import InfoTrack from "./infotrack.vue";
+import ComTable from "@com/coms/table/table.vue";
 import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 
 export default {
-  components: { InfoTrack, SvgIcon },
+  components: { InfoTrack, ComTable, SvgIcon },
   data() {
+    const that = this
     return {
       stations: [], // 场站
       windturbines: [], // 风机
@@ -120,14 +100,62 @@ export default {
       starts: "",
       endts: new Date(),
       tableData: {
-        column: ["场站", "风机编号", "任务开始时间", "任务接受时间", "检修原因", "受否下单", "任务状态", "操作"],
+        column: [
+          { 
+            name: "场站",
+            field: "wfname",
+            is_light: false
+          },
+          { 
+            name: "风机编号",
+            field: "wtid",
+            is_light: false
+          },
+          { 
+            name: "任务开始时间",
+            field: "operationdate",
+            is_light: false
+          },
+          { 
+            name: "任务接受时间",
+            field: "departuretime",
+            is_light: false
+          },
+          { 
+            name: "检修原因",
+            field: "reason",
+            is_light: false
+          },
+          { 
+            name: "受否下单",
+            field: "ismain",
+            is_light: false
+          },
+          { 
+            name: "任务状态",
+            field: "status",
+            is_light: false
+          },
+          {
+            name: "操作",
+            field: "",
+            is_num: false,
+            is_light: false,
+            template() {
+              return "<el-button type='text' style='cursor: pointer;'>消缺跟踪</el-button>";
+            },
+            click(e, row) {
+              that.onClickTrack(row);
+            },
+          },],
         data: [],
       },
-      dialogVisible: false
+      dialogVisible: false,
+      trackDate: undefined,
     };
   },
   created() {
-    this.starts = new Date(new Date().setMonth(new Date().getMonth()-40)).formatDate("yyyy-MM-dd");
+    this.starts = new Date(new Date().setMonth(new Date().getMonth()-2)).formatDate("yyyy-MM-dd");
     this.requestStations();
   },
   methods: {
@@ -138,6 +166,7 @@ export default {
     // 消缺跟踪
     onClickTrack(row){
       this.dialogVisible = true
+      this.requestTrack(row);
     },
     // 获取场站
     requestStations() {
@@ -149,6 +178,7 @@ export default {
           if (res.code == 200) {
             that.stations = res.data;
             that.station = that.stations[3].id;
+            that.requestUnfinishedList();
           }
         },
       });
@@ -179,11 +209,40 @@ export default {
         },
         success(res) {
           if (res.code == 200) {
-            that.tableData.data = res.data;
+            that.tableData.data = []
+            res.data.forEach(item => {
+              let obj = {
+                wfname: item.wfname,
+                wtid: item.wtid,
+                operationdate: item.operationdate?new Date(item.operationdate).formatDate("yyyy-MM-dd hh:mm:ss"):'',
+                departuretime: item.departuretime?new Date(item.departuretime).formatDate("yyyy-MM-dd hh:mm:ss"):'',
+                reason: item.reason,
+                ismain: item.ismain,
+                status: item.status,
+                rid: item.rid
+              }
+              that.tableData.data.push(obj)
+          });
           }
         },
       });
     },
+    // 通过消缺单获得详细信息
+    requestTrack(row){
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "recommen/findMainTrack",
+        data: {
+          rid: row.rid,
+        },
+        success(res) {
+          if (res.code == 200) {
+            that.trackDate = res.data
+          }
+        },
+      });
+    }
   },
   watch: {
     station(val) {
@@ -199,77 +258,11 @@ export default {
 @rowGray: #606769;
 @darkBack: #536268;
 .health-tab-3 {
-  .table-box {
-    border: 0.093vh solid @darkgray;
-    position: relative;
-    overflow: auto;
-    flex-grow: 1;
-    top: 1vh;
-  }
-  .com-table {
-    width: 100%;
-    border-collapse: collapse;
+  .dialog-box {
+    height: 100%;
     display: flex;
-    flex-direction: column;
-    max-height: calc(100vh - 175px);
-  
-    thead {
-      tr {
-        position: relative;
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        th {
-          background-color: fade(@darkBack, 20%);
-          padding: 1.481vh 0;
-          color: @titleGray;
-          font-weight: 400;
-          font-size: @fontsize-s;
-          position: sticky;
-          // top: 0;
-
-          &.light {
-            color: @green;
-          }
-        }
-      }
-    }
-
-    tbody {
-      display: block;
-      max-height: 100%; 
-      overflow-y: scroll;
-
-      tr {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        &:nth-child(2n) {
-          background-color: fade(@rowGray, 20%);
-        }
-
-        td {
-          padding: 0.556vh 0;
-          color: @rowGray;
-          text-align: center;
-          font-size: @fontsize-s;
-          overflow: hidden; //隐藏文字
-          text-overflow: ellipsis; //显示 ...
-          white-space: nowrap; //不换行
-
-          &.light {
-            color: @green !important;
-          }
-
-          &.num {
-            font-family: "Bicubik";
-            font-weight: 400;
-          }
-        }
-      }
-    }
+    justify-content: center;
+    align-items: center;
   }
 }
 </style>

src/views/HealthControl/HealthTab4.vue

@@ -68,50 +68,31 @@
           </div>
         </div>
       </div>
+      
       <div class="query-actions" style="margin-right: 500px">
         <button class="btn green" @click="onClickSearch">搜索</button>
       </div>
     </div>
     <div class="table-box">
-      <table class="com-table">
-        <thead>
-          <tr>
-            <th v-for="(col, index) of tableData.column" :key="index">
-              {{ col }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, index) of tableData.data" :key="index">
-            <td>{{ row.wfname }}</td>
-            <td>{{ row.wtid }}</td>
-            <td>{{new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
-            <td>{{row.departuretime ? new Date().formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{ row.reason }}</td>
-            <td>{{ row.repairedcomment }}</td>
-            <td>
-              <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
-              <button class="btn success" @click="onClickHistory(row)">历史查询</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <ComTable :data="tableData" height="80vh"></ComTable>
     </div>
-    <div>
-      <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
-        <dayinfo />
+    <div class="dialog-box">
+      <el-dialog title="日信息对比" v-model="dialogVisible" width="1200px" custom-class="modal" :close-on-click-modal="false">
+        <info-history :data="trackDate"/>
       </el-dialog>   
     </div> 
   </div>
 </template>
 
 <script>
-import Dayinfo from "./dayinfo.vue";
+import InfoHistory from "./infotrack2.vue";
+import ComTable from "@com/coms/table/table.vue";
 import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 
 export default {
-  components: { Dayinfo, SvgIcon },
+  components: { InfoHistory, ComTable, SvgIcon },
   data() {
+    const that = this
     return {
       stations: [], // 场站
       windturbines: [], // 风机
@@ -120,28 +101,73 @@ export default {
       starts: "",
       endts: new Date(),
       tableData: {
-        column: ["场站", "风机编号", "任务开始时间", "任务接受时间", "检修原因", "消缺工艺",  "操作"],
+        column: [
+          { 
+            name: "场站",
+            field: "wfname",
+            is_light: false
+          },
+          { 
+            name: "风机编号",
+            field: "wtid",
+            is_light: false
+          },
+          { 
+            name: "任务开始时间",
+            field: "operationdate",
+            is_light: false
+          },
+          { 
+            name: "任务接受时间",
+            field: "departuretime",
+            is_light: false
+          },
+          { 
+            name: "检修原因",
+            field: "reason",
+            is_light: false
+          },
+          { 
+            name: "消缺工艺",
+            field: "repairedcomment",
+            is_light: false
+          },
+          {
+            name: "操作",
+            field: "",
+            is_num: false,
+            is_light: false,
+            template() {
+              return "<el-button type='text' style='cursor: pointer;'>消缺跟踪</el-button>";
+            },
+            click(e, row) {
+              that.onClickTrack(row);
+            },
+          }
+        ],
         data: [],
       },
-      dialogVisible: false
+      dialogVisible: false,
+      trackDate: undefined,
     };
   },
   created() {
-    this.starts = new Date(new Date().setMonth(new Date().getMonth()-1)).formatDate("yyyy-MM-dd");
+    this.starts = new Date(new Date().setMonth(new Date().getMonth()-2)).formatDate("yyyy-MM-dd");
     this.requestStations();
   },
   methods: {
     // 搜索按钮
     onClickSearch() {
-      this.requestUnfinishedList();
+      this.requestFinishedList();
     },
     // 消缺跟踪
     onClickTrack(row){
       this.dialogVisible = true
+      this.requestTrack(row);
     },
     // 历史查询
     onClickHistory(row){
-
+      this.dialogVisible = true
     },
     // 获取场站
     requestStations() {
@@ -153,6 +179,7 @@ export default {
           if (res.code == 200) {
             that.stations = res.data;
             that.station = that.stations[3].id;
+            that.requestFinishedList();
           }
         },
       });
@@ -169,8 +196,8 @@ export default {
         },
       });
     },
-    // 获取未完成消缺单列表
-    requestUnfinishedList() {
+    // 获取已完成消缺单列表
+    requestFinishedList() {
       let that = this;
       that.API.requestData({
         method: "POST",
@@ -183,11 +210,39 @@ export default {
         },
         success(res) {
           if (res.code == 200) {
-            that.tableData.data = res.data;
+            that.tableData.data = []
+            res.data.forEach(item => {
+              let obj = {
+                wfname: item.wfname,
+                wtid: item.wtid,
+                operationdate: item.operationdate?new Date(item.operationdate).formatDate("yyyy-MM-dd hh:mm:ss"):'',
+                departuretime: item.departuretime?new Date(item.departuretime).formatDate("yyyy-MM-dd hh:mm:ss"):'',
+                reason: item.reason,
+                repairedcomment: item.repairedcomment,
+                rid: item.rid
+              }
+              that.tableData.data.push(obj)
+            });
           }
         },
       });
     },
+    // 通过消缺单获得详细信息
+    requestTrack(row){
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "recommen/findMainTrack",
+        data: {
+          rid: row.rid,
+        },
+        success(res) {
+          if (res.code == 200) {
+            that.trackDate = res.data
+          }
+        },
+      });
+    }
   },
   watch: {
     station(val) {
@@ -203,77 +258,11 @@ export default {
 @rowGray: #606769;
 @darkBack: #536268;
 .health-tab-4 {
-  .table-box {
-    border: 0.093vh solid @darkgray;
-    position: relative;
-    overflow: auto;
-    flex-grow: 1;
-    top: 1vh;
-  }
-  .com-table {
-    width: 100%;
-    border-collapse: collapse;
+  .dialog-box {
+    height: 100%;
     display: flex;
-    flex-direction: column;
-    max-height: calc(100vh - 175px);
-  
-    thead {
-      tr {
-        position: relative;
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        th {
-          background-color: fade(@darkBack, 20%);
-          padding: 1.481vh 0;
-          color: @titleGray;
-          font-weight: 400;
-          font-size: @fontsize-s;
-          position: sticky;
-          // top: 0;
-
-          &.light {
-            color: @green;
-          }
-        }
-      }
-    }
-
-    tbody {
-      display: block;
-      max-height: 100%; 
-      overflow-y: scroll;
-
-      tr {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        &:nth-child(2n) {
-          background-color: fade(@rowGray, 20%);
-        }
-
-        td {
-          padding: 0.556vh 0;
-          color: @rowGray;
-          text-align: center;
-          font-size: @fontsize-s;
-          overflow: hidden; //隐藏文字
-          text-overflow: ellipsis; //显示 ...
-          white-space: nowrap; //不换行
-
-          &.light {
-            color: @green !important;
-          }
-
-          &.num {
-            font-family: "Bicubik";
-            font-weight: 400;
-          }
-        }
-      }
-    }
+    justify-content: center;
+    align-items: center;
   }
 }
 </style>

src/views/HealthControl/infohistory.vue

@@ -1,275 +0,0 @@
-<template>
-  <div class="health-tab-3">
-    <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="station"
-              clearable
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in stations"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">机组</div>
-          <div class="search-input">
-            <el-select
-              v-model="windturbine"
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in windturbines"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-
-        <div class="query-item">
-          <div class="lable">开始日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="starts"
-              type="date"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">结束日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="endts"
-              type="date"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-            <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="''" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="query-actions" style="margin-right: 500px">
-        <button class="btn green" @click="onClickSearch">搜索</button>
-      </div>
-    </div>
-    <div class="table-box">
-      <table class="com-table">
-        <thead>
-          <tr>
-            <th v-for="(col, index) of tableData.column" :key="index">
-              {{ col }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, index) of tableData.data" :key="index">
-            <td>{{ row.wfname }}</td>
-            <td>{{ row.wtid }}</td>
-            <td>{{row.operationdate ? new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{row.departuretime ? new Date(row.departuretime).formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{ row.reason }}</td>
-            <td>{{ row.ismain }}</td>
-            <td>{{ row.status }}</td>
-            <td>
-              <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div>
-      <el-dialog title="消缺跟踪" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
-        <info-track />
-      </el-dialog>   
-    </div> 
-  </div>
-</template>
-
-<script>
-import InfoTrack from "./infotrack.vue";
-import SvgIcon from "../../components/coms/icon/svg-icon.vue";
-
-export default {
-  components: { InfoTrack, SvgIcon },
-  data() {
-    return {
-      stations: [], // 场站
-      windturbines: [], // 风机
-      station: "",
-      windturbine: "",
-      starts: "",
-      endts: new Date(),
-      tableData: {
-        column: ["场站", "风机编号", "任务开始时间", "任务接受时间", "检修原因", "受否下单", "任务状态", "操作"],
-        data: [],
-      },
-      dialogVisible: false
-    };
-  },
-  created() {
-    this.starts = new Date(new Date().setMonth(new Date().getMonth()-40)).formatDate("yyyy-MM-dd");
-    this.requestStations();
-  },
-  methods: {
-    // 搜索按钮
-    onClickSearch() {
-      this.requestUnfinishedList();
-    },
-    // 消缺跟踪
-    onClickTrack(row){
-      this.dialogVisible = true
-    },
-    // 获取场站
-    requestStations() {
-      let that = this;
-      that.API.requestData({
-        method: "GET",
-        subUrl: "powercompare/windfarmAjax",
-        success(res) {
-          if (res.code == 200) {
-            that.stations = res.data;
-            that.station = that.stations[3].id;
-          }
-        },
-      });
-    },
-    // 获取风机
-    requestWindturbines(wpid) {
-      let that = this;
-      that.API.requestData({
-        method: "GET",
-        subUrl: "powercompare/windturbineAjax",
-        data: { wpId: wpid },
-        success(res) {
-          if (res.code == 200) that.windturbines = res.data;
-        },
-      });
-    },
-    // 获取未完成消缺单列表
-    requestUnfinishedList() {
-      let that = this;
-      that.API.requestData({
-        method: "POST",
-        subUrl: "recommen/unfinishedList",
-        data: {
-          wpId: that.station,
-          wtId: that.windturbine,
-          beginDate: new Date(that.starts).formatDate("yyyy-MM-dd"),
-          endDate: new Date(that.endts).formatDate("yyyy-MM-dd"),
-        },
-        success(res) {
-          if (res.code == 200) {
-            that.tableData.data = res.data;
-          }
-        },
-      });
-    },
-  },
-  watch: {
-    station(val) {
-      this.windturbine = "";
-      this.requestWindturbines(val);
-    },
-  },
-};
-</script>
-
-<style lang="less" scope>
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.health-tab-3 {
-  .table-box {
-    border: 0.093vh solid @darkgray;
-    position: relative;
-    overflow: auto;
-    flex-grow: 1;
-    top: 1vh;
-  }
-  .com-table {
-    width: 100%;
-    border-collapse: collapse;
-    display: flex;
-    flex-direction: column;
-    max-height: calc(100vh - 175px);
-  
-    thead {
-      tr {
-        position: relative;
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        th {
-          background-color: fade(@darkBack, 20%);
-          padding: 1.481vh 0;
-          color: @titleGray;
-          font-weight: 400;
-          font-size: @fontsize-s;
-          position: sticky;
-          // top: 0;
-
-          &.light {
-            color: @green;
-          }
-        }
-      }
-    }
-
-    tbody {
-      display: block;
-      max-height: 100%; 
-      overflow-y: scroll;
-
-      tr {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        &:nth-child(2n) {
-          background-color: fade(@rowGray, 20%);
-        }
-
-        td {
-          padding: 0.556vh 0;
-          color: @rowGray;
-          text-align: center;
-          font-size: @fontsize-s;
-          overflow: hidden; //隐藏文字
-          text-overflow: ellipsis; //显示 ...
-          white-space: nowrap; //不换行
-
-          &.light {
-            color: @green !important;
-          }
-
-          &.num {
-            font-family: "Bicubik";
-            font-weight: 400;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/views/HealthControl/infotrack.vue

@@ -1,31 +1,535 @@
 <template>
-  <div class="info-track">
-
+  <div class="track-info">
+    <div class="form-info">
+      <div class="work-flow">
+        <div class="work-flow-line"></div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-warn"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">流程未启动</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-down"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺单已下达</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-hour-hand"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺单处理中</div>
+        </div>
+        <div class="work-flow-item active">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-对"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺完成</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-flag"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺验收</div>
+        </div>
+      </div>
+      <div class="form-body">
+        <el-form ref="form" :model="form" label-width="120px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="风场：">
+                <el-input
+                  v-model="form.wpName"
+                  placeholder="风场名称"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="风机：">
+                <el-input
+                  v-model="form.wtId"
+                  placeholder="风机名称"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="推荐检修时间：">
+                <el-input
+                  v-model="form.tjss"
+                  placeholder="推荐检修时间"
+                ></el-input>
+                <!-- <el-date-picker v-model="form.tjjxsj" type="datetime" placeholder="推荐检修时间" popper-class="date-select"></el-date-picker> -->
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="预计检修风速：">
+                <el-input
+                  v-model="form.tjfs"
+                  placeholder="预计检修风速"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="推荐理由：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.description"
+                  placeholder="推荐理由"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="下单时间：">
+                <el-input
+                  v-model="form.prodtdepttime"
+                  placeholder="下单时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="主要负责人：">
+                <el-input
+                  v-model="form.workleader"
+                  placeholder="主要负责人"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="出发时间：">
+                <el-input
+                  v-model="form.departuretime"
+                  placeholder="出发时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="到达时间：">
+                <el-input
+                  v-model="form.arrivaltime"
+                  placeholder="到达时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="排查方法：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.gzpc"
+                  placeholder="排查方法"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="处理方法：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.repairedcomment"
+                  placeholder="处理方法"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="消缺时间：">
+                <el-input
+                  v-model="form.repairedtime"
+                  placeholder="消缺时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="故障时长：">
+                <el-input
+                  v-model="form.degradebugtype"
+                  placeholder="故障时长"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="验收人：">
+                <el-input
+                  v-model="form.checkdeptlabornum"
+                  placeholder="验收人"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="验收时间：">
+                <el-input
+                  v-model="form.checktime"
+                  placeholder="验收时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="验收意见：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.checkdeptopinion"
+                  placeholder="验收意见"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <div class="tabs">
+      <div class="tab-box">
+        <div
+          class="tab-item"
+          v-for="(tab, index) of tabs"
+          :key="index"
+          :class="{ active: activeTab == index }"
+          @click="selectTab(index)"
+        >
+          <span
+            class="svg-icon svg-icon-md"
+            :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'"
+          >
+            <SvgIcon :svgid="tab.icon"></SvgIcon>
+          </span>
+          <span>{{ tab.text }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-
 <script>
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
-  name: "info-track",
-  props:{id: String}
-
+  components: {
+    SvgIcon,
+  },
+  props: {
+    data: Object,
+  },
+  data() {
+    return {
+      tabs: [
+        {
+          icon: "svg-gis",
+          text: "GIS地貌",
+        },
+        {
+          icon: "svg-jkp",
+          text: "手环监控",
+        },
+        {
+          icon: "svg-jk",
+          text: "监控视频",
+        },
+      ],
+      activeTab: 0,
+      form: {
+        wtId: "",
+        wpId: "",
+        wpName: "",
+        tjyy: "",
+        tjss: null,
+        tjfs: null,
+        bugnum: null,
+        workgroup1: null,
+        findlabornum: null,
+        reportlabornum: null,
+        description: null,
+        departuretime: null,
+        arrivaltime: null,
+        prodtdeptopinion: null,
+        workleader: null,
+        repairedtime: null,
+        repairedcomment: null,
+        unresolvedbug: null,
+        checktime: null,
+        degradebugtype: null,
+        repairdeptbugtype1: null,
+        checkdeptlabornum: null,
+        status: null,
+        gzpc: null,
+        gzjx: null,
+        prodtdepttime: null,
+        checkdeptopinion: null,
+        rwfpsc: 0.0,
+        rwfppjsc: 1066.0,
+        ddxcsc: 0.0,
+        ddxcpjsc: 0.0,
+        qxclsc: 0.0,
+        qxclpjsc: 0.0,
+        yssc: 0.0,
+        yspjsc: 0.0,
+        workHours: null,
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.form = this.data;
+    });
+  },
+  // 函数
+  methods: {
+    selectTab: function (index) {
+      this.activeTab = index;
+    },
+  },
+  watch: {
+    data(value) {
+      this.form = value;
+      this.form.tjss = value.tjss?new Date(value.tjss).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.prodtdepttime = value.prodtdepttime?new Date(value.prodtdepttime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.departuretime = value.departuretime?new Date(value.departuretime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.arrivaltime = value.arrivaltime?new Date(value.arrivaltime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.repairedtime = value.repairedtime?new Date(value.repairedtime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.checktime = value.checktime?new Date(value.checktime).formatDate("yyyy-MM-dd hh:mm:ss"):"" 
+    },
+  },
 };
 </script>
 
+<style lang="less">
+.track-info {
+  display: flex;
+  .form-info {
+    flex: 0 0 720px;
+    .work-flow {
+      height: 132px;
+      width: 100%;
+      background: fade(@gray, 20);
+      margin-bottom: 8px;
+      padding: 26px 69px;
+      display: flex;
+      position: relative;
+
+      .work-flow-line {
+        position: absolute;
+        width: 600px;
+        height: 4px;
+        left: calc(50% - 300px);
+        top: calc(50% - 11px);
+        background: @green;
+      }
+
+      .work-flow-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &.active {
+          .work-flow-icon-item {
+            .work-flow-icon-o {
+              border: 1px solid @green;
+              opacity: 0.4;
+            }
+
+            .work-flow-icon-i {
+              border: 2px solid @green;
+              background: linear-gradient(
+                to bottom,
+                #1f2b2b 0%,
+                #1f2b2b 20%,
+                @green 100%
+              );
+            }
+
+            .svg-icon {
+              svg {
+                use {
+                  fill: @green;
+                }
+              }
+            }
+          }
+
+          .work-flow-text {
+            color: @green;
+          }
+        }
+
+        .work-flow-icon-item {
+          width: 60px;
+          height: 60px;
+          position: relative;
+
+          .work-flow-icon-o {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            border: 1px solid #b3bdc0;
+            opacity: 0.4;
+          }
+
+          .work-flow-icon-m {
+            position: absolute;
+            top: 1px;
+            left: 1px;
+            width: 59px;
+            height: 59px;
+            border-radius: 50%;
+            border: 4px solid #212b2b;
+          }
+
+          .work-flow-icon-i {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            border: 2px solid #606769;
+            background: linear-gradient(
+              to bottom,
+              #1f2b2b 0%,
+              #1f2b2b 20%,
+              #606769 100%
+            );
+          }
+
+          .svg-icon {
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            top: calc(50% - 10px);
+            left: calc(50% - 13px);
+            svg {
+              width: 26px;
+              height: 26px;
+              use {
+                fill: @gray-l;
+              }
+            }
+          }
+        }
+
+        .work-flow-text {
+          color: @gray-l;
+          margin-top: 8px;
+          font-size: @fontsize-s;
+        }
+      }
+    }
+  }
+
+  .evaluate {
+    flex: 0 0 358px;
+    margin-left: 69px;
+
+    .evaluate-item {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+
+      .evaluate-label {
+        width: 120px;
+        text-align: right;
+      }
+
+      .evaluate-label,
+      .evaluate-unit {
+        font-size: @fontsize;
+        color: @gray-l;
+      }
+
+      .input-number {
+        display: inline-block;
+        width: 62px;
+        margin: 0 16px;
+      }
+    }
+  }
+
+  .tabs {
+    flex: 0 0 220px;
+    height: 619px;
+    border-left: 1px solid #53626833;
+
+    .tab-box {
+      margin: 1.852vh 2.778vh;
+      display: inline-block;
+      z-index: 2;
+      position: relative;
+      margin: 26px auto;
+
+      .tab-item {
+        display: flex;
+        align-items: center;
+        // justify-content: center;
+        font-size: @fontsize-l;
+        cursor: pointer;
+        // width: 120px;
+        padding: 8px;
+        margin-bottom: 16px;
 
-<style lang="less" scoped>
-.info-track{
-     display: flex;
-     flex-direction: column;
-     
-     .track-map{
-          flex-direction: row;
-          justify-content: flex-end;
-     }
+        &.active {
+          color: @green;
+          position: relative;
+          background-image: @greenLinearTop;
 
-     .track-line{
+          &::after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 5px;
+            border: 1px solid @green;
+            border-top: 0;
+            left: 0;
+            bottom: 0;
+            box-sizing: border-box;
+          }
+        }
 
-     }
+        .svg-icon {
+          margin-right: 16px;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/HealthControl/infotrack2.vue

@@ -0,0 +1,573 @@
+<template>
+  <div class="track-info">
+    <div class="form-info">
+      <div class="work-flow">
+        <div class="work-flow-line"></div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-warn"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">流程未启动</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-down"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺单已下达</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-hour-hand"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺单处理中</div>
+        </div>
+        <div class="work-flow-item active">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-对"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺完成</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-flag"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺验收</div>
+        </div>
+      </div>
+       <div class="form-body">
+        <el-form ref="form" :model="form" label-width="120px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="风场：">
+                <el-input
+                  v-model="form.wpName"
+                  placeholder="风场名称"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="风机：">
+                <el-input
+                  v-model="form.wtId"
+                  placeholder="风机名称"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="推荐检修时间：">
+                <el-input
+                  v-model="form.tjss"
+                  placeholder="推荐检修时间"
+                ></el-input>
+                <!-- <el-date-picker v-model="form.tjjxsj" type="datetime" placeholder="推荐检修时间" popper-class="date-select"></el-date-picker> -->
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="预计检修风速：">
+                <el-input
+                  v-model="form.tjfs"
+                  placeholder="预计检修风速"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="推荐理由：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.description"
+                  placeholder="推荐理由"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="下单时间：">
+                <el-input
+                  v-model="form.prodtdepttime"
+                  placeholder="下单时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="主要负责人：">
+                <el-input
+                  v-model="form.workleader"
+                  placeholder="主要负责人"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="出发时间：">
+                <el-input
+                  v-model="form.departuretime"
+                  placeholder="出发时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="到达时间：">
+                <el-input
+                  v-model="form.arrivaltime"
+                  placeholder="到达时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="排查方法：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.gzpc"
+                  placeholder="排查方法"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="处理方法：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.repairedcomment"
+                  placeholder="处理方法"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="消缺时间：">
+                <el-input
+                  v-model="form.repairedtime"
+                  placeholder="消缺时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="故障时长：">
+                <el-input
+                  v-model="form.degradebugtype"
+                  placeholder="故障时长"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="验收人：">
+                <el-input
+                  v-model="form.checkdeptlabornum"
+                  placeholder="验收人"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="验收时间：">
+                <el-input
+                  v-model="form.checktime"
+                  placeholder="验收时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="验收意见：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.checkdeptopinion"
+                  placeholder="验收意见"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <div class="evaluate">
+      <div class="white">评价</div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">任务分配时长</div>
+        <el-input-number class="input-number" v-model="form.rwfpsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">任务分配平均时长</div>
+        <el-input-number class="input-number" v-model="form.rwfppjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">到达现场时长</div>
+        <el-input-number class="input-number" v-model="form.ddxcsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">到达现场平均时长</div>
+        <el-input-number class="input-number" v-model="form.ddxcpjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">缺陷处理时长</div>
+        <el-input-number class="input-number" v-model="form.qxclsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">缺陷处理平均时长</div>
+        <el-input-number class="input-number" v-model="form.qxclpjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">验收时长</div>
+        <el-input-number class="input-number" v-model="form.yssc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">验收平均时长</div>
+        <el-input-number class="input-number" v-model="form.yspjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+    </div>
+    <div class="tabs">
+      <div class="tab-box">
+        <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{ active: activeTab == index }" @click="selectTab(index)">
+          <span class="svg-icon svg-icon-md" :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'">
+            <SvgIcon :svgid="tab.icon"></SvgIcon>
+          </span>
+          <span>{{ tab.text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+export default {
+  components: {
+    SvgIcon
+  },
+   props: {
+    data: Object,
+  },
+  data() {
+    return {
+      tabs: [
+        {
+          icon: "svg-gis",
+          text: "GIS地貌",
+        },
+        {
+          icon: "svg-jkp",
+          text: "手环监控",
+        },
+        {
+          icon: "svg-jk",
+          text: "监控视频",
+        },
+      ],
+      activeTab: 0,
+      form: {
+        wtId: "",
+        wpId: "",
+        wpName: "",
+        tjyy: "",
+        tjss: null,
+        tjfs: null,
+        bugnum: null,
+        workgroup1: null,
+        findlabornum: null,
+        reportlabornum: null,
+        description: null,
+        departuretime: null,
+        arrivaltime: null,
+        prodtdeptopinion: null,
+        workleader: null,
+        repairedtime: null,
+        repairedcomment: null,
+        unresolvedbug: null,
+        checktime: null,
+        degradebugtype: null,
+        repairdeptbugtype1: null,
+        checkdeptlabornum: null,
+        status: null,
+        gzpc: null,
+        gzjx: null,
+        prodtdepttime: null,
+        checkdeptopinion: null,
+        rwfpsc: 0.0,
+        rwfppjsc: 1066.0,
+        ddxcsc: 0.0,
+        ddxcpjsc: 0.0,
+        qxclsc: 0.0,
+        qxclpjsc: 0.0,
+        yssc: 0.0,
+        yspjsc: 0.0,
+        workHours: null,
+        rwfpsc: 0,
+        rwfppjsc: 0,
+        ddxcsc: 0,
+        ddxcpjsc: 0,
+        qxclsc: 0,
+        qxclpjsc: 0,
+        yssc: 0,
+        yspjsc: 0,
+        workHours: 0
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.form = this.data;
+    });
+  },
+  // 函数
+  methods: {
+    selectTab: function (index) {
+      this.activeTab = index;
+    },
+  },
+  watch: {
+    data(value) {
+      this.form = value;
+      this.form.tjss = value.tjss?new Date(value.tjss).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.prodtdepttime = value.prodtdepttime?new Date(value.prodtdepttime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.departuretime = value.departuretime?new Date(value.departuretime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.arrivaltime = value.arrivaltime?new Date(value.arrivaltime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.repairedtime = value.repairedtime?new Date(value.repairedtime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.checktime = value.checktime?new Date(value.checktime).formatDate("yyyy-MM-dd hh:mm:ss"):"" 
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.track-info {
+  display: flex;
+  .form-info {
+    flex: 0 0 720px;
+    .work-flow {
+      height: 132px;
+      width: 100%;
+      background: fade(@gray, 20);
+      margin-bottom: 8px;
+      padding: 26px 69px;
+      display: flex;
+      position: relative;
+
+      .work-flow-line {
+        position: absolute;
+        width: 600px;
+        height: 4px;
+        left: calc(50% - 300px);
+        top: calc(50% - 11px);
+        background: @green;
+      }
+
+      .work-flow-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &.active {
+          .work-flow-icon-item {
+            .work-flow-icon-o {
+                border: 1px solid @green;
+                opacity: 0.4;
+              }
+
+              .work-flow-icon-i {
+                border: 2px solid @green;
+                background: linear-gradient(to bottom, #1F2B2B 0%,#1F2B2B 20%,@green 100%);
+              }
+
+              .svg-icon {
+                svg {
+                  use {
+                    fill: @green;
+                  }
+                }
+              }
+          }
+
+          .work-flow-text {
+            color: @green;
+          }
+          
+        }
+
+        .work-flow-icon-item {
+          width: 60px;
+          height: 60px;
+          position: relative;
+
+          .work-flow-icon-o {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            border: 1px solid #B3BDC0;
+            opacity: 0.4;
+          }
+
+          .work-flow-icon-m {
+            position: absolute;
+            top: 1px;
+            left: 1px;
+            width: 59px;
+            height: 59px;
+            border-radius: 50%;
+            border: 4px solid #212b2b;
+          }
+
+          .work-flow-icon-i {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            border: 2px solid #606769;
+            background: linear-gradient(to bottom, #1F2B2B 0%,#1F2B2B 20%,#606769 100%);
+          }
+
+          .svg-icon {
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            top: calc(50% - 10px);
+            left: calc(50% - 13px);
+            svg {
+               width: 26px;
+              height: 26px;
+              use {
+                fill: @gray-l;
+              }
+            }
+          }
+          
+        }
+
+        .work-flow-text {
+            color: @gray-l;
+            margin-top: 8px;
+            font-size: @fontsize-s;
+          }
+      }
+    }
+  }
+
+  .evaluate {
+    flex: 0 0 240px;
+    margin-left: 30px;
+
+    .evaluate-item {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+
+      .evaluate-label {
+        width: 120px;
+        text-align: right;
+      }
+
+      .evaluate-label,
+      .evaluate-unit {
+        font-size: @fontsize;
+        color: @gray-l;
+      }
+
+      .input-number {
+        display: inline-block;
+        width: 62px;
+        margin: 0 16px;
+      }
+    }
+
+    
+  }
+
+  .tabs {
+    flex: 0 0 200px;
+    height: 619px;
+    margin-left: 20px;
+    border-left: 1px solid #53626833;
+
+    .tab-box {
+    margin: 1.852vh 2.778vh;
+    display: inline-block;
+    z-index: 2;
+    position: relative;
+    margin: 26px 0 0 20px;
+
+    .tab-item {
+      display: flex;
+      align-items: center;
+      // justify-content: center;
+      font-size: @fontsize-l;
+      cursor: pointer;
+      // width: 120px;
+      padding: 8px;
+      margin-bottom: 16px;
+
+      &.active {
+        color: @green;
+        position: relative;
+        background-image: @greenLinearTop;
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 5px;
+          border: 1px solid @green;
+          border-top: 0;
+          left: 0;
+          bottom: 0;
+          box-sizing: border-box;
+        }
+      }
+
+      .svg-icon {
+        margin-right: 16px;
+      }
+    }
+  }
+  }
+}
+</style>