Merge branch 'yx' of http://61.161.152.110:10101/r/electronic-map into yx

src/views/About.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="about">
     <h1 @click="showDialog">This is an about page</h1>
-    <HealthReport :show="show" :params="{ wtId: 'QG01_11', recorddate: '2021-06-19' }" @closed="(res) => { this.show=false; }" />
+    <HealthReport
+      :show="show"
+      :params="{ wtId: 'QG01_11', recorddate: '2021-06-19' }"
+      @closed="
+        (res) => {
+          this.show = false;
+        }
+      "
+    />
     <div class="fjBox1">
       <!-- 风机 SVG 使用方法 -->
       <FJ id="fj-1" speed="5s" color="red" width="43px" height="46px" />
@@ -10,6 +18,23 @@
       <FJ />
       <FJ :speed="1" />
     </div>
+    <el-table
+      :data="tableData"
+      :span-method="arraySpanMethod"
+      border
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="部件"> </el-table-column>
+      <el-table-column
+        prop="amount1"
+        sortable
+        label="隐患类新"
+      ></el-table-column>
+      <el-table-column prop="amount2" sortable label="频次1"></el-table-column>
+      <el-table-column prop="amount2" sortable label="频次2"></el-table-column>
+      <el-table-column prop="amount2" sortable label="频次3"></el-table-column>
+      <el-table-column prop="amount2" sortable label="频次4"></el-table-column>
+    </el-table>
     <!-- <list-bar-chart /> -->
   </div>
 </template>
@@ -20,27 +45,51 @@ import HealthReport from "@com/other/healthReport/index.vue";
 import FJ from "@com/other/fj/index.vue";
 // 导入header.vue文件
 export default {
-  data () {
+  data() {
     return {
-      show: true
-    }
+      show: true,
+      tableData: [],
+    };
   },
 
   components: {
     // ListBarChart,
     HealthReport,
-    FJ
+    FJ,
+  },
+
+  created() {
+    let tableData = [];
+    let item = {
+      id: "12987122",
+      name: "王小虎",
+      amount1: "234",
+      amount2: "3.2",
+      amount3: 10,
+    };
+    for (let i = 0; i < 100; i++) {
+      tableData.push(item);
+    }
+    this.tableData = tableData;
   },
 
   methods: {
-    showDialog () {
+    showDialog() {
       this.show = true;
-    }
-  }
+    },
+
+    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (!rowIndex && !columnIndex) {
+        return [1, 3];
+      } else if (rowIndex === 5 && !columnIndex) {
+        return [10, 1];
+      }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
-.fjBox{
+.fjBox {
   display: flex;
   justify-content: start;
   align-items: center;

src/views/SandTable/SandTable.vue

@@ -3,16 +3,25 @@
     <img :src="require('@assets/png/3dback.png')" class="i3dback" />
     <!-- <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" /> -->
     <StBack></StBack>
-    <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
+    <ThreeModel1
+      class="three-model-layer"
+      :data="mapSource"
+      @when="when"
+    ></ThreeModel1>
     <div class="sand-table-left" v-if="showPanel">
-      <PanelSand class="left-panel" title="气象预测" subTitle="AM10:52  实况">
-        <weather class="pd-t-16" />
+      <PanelSand
+        class="left-panel"
+        title="气象预测"
+        :subTitle="timeStr + '实况'"
+      >
+        <weather class="pd-t-16" :data="tqmap1" />
       </PanelSand>
-      <PanelSand class="left-panel mg-t-16" title="等级评估">
+      <PanelSand class="left-panel mg-t-16" title="健康推荐">
         <RankTable :data="levelTableData"></RankTable>
       </PanelSand>
-      <PanelSand class="left-panel mg-t-16" title="等级评估">
-        <RankTable :data="levelTableData"></RankTable>
+      <PanelSand class="left-panel mg-t-16" title="停机信息">
+        <RankTable :data="sels" @rowClick="clickRow"></RankTable>
+        <!-- <ComTable :data="sels"></ComTable> -->
       </PanelSand>
       <PanelSandToolbar class="left-panel mg-t-16" title="部件">
         <template v-slot:tools>
@@ -48,25 +57,36 @@
           </el-col>
         </el-row>
       </PanelSand>
-      <PanelSand class="right-panel mg-t-16" title="板块标题">
-        <div class="person-info-box mg-t-16">
+      <PanelSand class="right-panel mg-t-16" title="工单管理">
+        <div
+          class="person-info-box mg-t-16 animated a0"
+          :class="peopleClass"
+          v-if="workData.data[0]"
+        >
           <img
             class="header mg-r-8 bg-green"
-            :src="require('@assets/logo.png')"
+            style="width: 75px; height: 75px"
+            :src="workData.data[workDataIndex].imgurl"
           />
           <div class="person-info">
-            <div class="green font-lg" style="font-weight: bold">张三</div>
+            <div class="green font-lg" style="font-weight: bold">
+              {{ workData.data[workDataIndex].laborname }}
+            </div>
             <div class="white font-sm">
-              <span>职务：高级检修工</span>
-              <span class="mg-l-16">当前任务编号 000000</span>
+              <span>职务：{{ workData.data[workDataIndex].jobcode }}</span>
+              <!-- <span class="mg-l-16">当前任务编号 000000</span> -->
             </div>
             <div class="white font-sm">
-              平均检修时间 <span class="green">5</span> 小时
+              <!-- 平均检修时间 <span class="green">5</span> 小时 -->
+              开始时间
+              <span class="green">{{
+                workData.data[workDataIndex].starttime
+              }}</span>
             </div>
           </div>
         </div>
         <div class="table mg-t-8">
-          <Table :data="tableData" />
+          <Table :data="workData" />
         </div>
       </PanelSand>
       <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
@@ -83,20 +103,179 @@
       </PanelSandToolbar>
     </div>
     <div class="sand-table-bottom" v-if="showPanel">
-      <Ppanel title="利用小时"></Ppanel>
-      <Ppanel title="设备可利用率" class="stb-p"></Ppanel>
-      <Ppanel title="MTBF" class="stb-p"></Ppanel>
-      <Ppanel title="MTTR" class="stb-p"></Ppanel>
-      <Ppanel title="MTTF" class="stb-p"></Ppanel>
+      <!-- <Ppanel
+        title="利用小时"
+        :data="riseNumber(gxkmap.bg_dxkyss)"
+        :dataColor="gxkmap.bg_dxkyss < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.ydxkyss"
+        :data1Icon="gxkmap.tb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="gxkmap.tb_dxkyss < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+        :data2Icon="gxkmap.hb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="gxkmap.hb_dxkyss < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+      ></Ppanel>
+      <Ppanel title="设备可利用率"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_sbklyl)"
+        :dataColor="gxkmap.bg_sbklyl < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.ysbklyl"
+        :data1Icon="gxkmap.hb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="gxkmap.hb_sbklyl < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+        :data2Icon="gxkmap.tb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="gxkmap.tb_sbklyl < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+      ></Ppanel>
+      <Ppanel
+        title="MTBF"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mtbf)"
+        :dataColor="gxkmap.bg_mtbf < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mtbf"
+        :data1Icon="gxkmap.hb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="gxkmap.hb_mtbf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+        :data2Icon="gxkmap.tb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="gxkmap.tb_mtbf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+      ></Ppanel>
+      <Ppanel
+        title="MTTR"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mttr)"
+        :dataColor="gxkmap.bg_mttr < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mttr"
+        :data1Icon="gxkmap.hb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="gxkmap.hb_mttr < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+        :data2Icon="gxkmap.tb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="gxkmap.tb_mttr < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+      ></Ppanel>
+      <Ppanel
+        title="MTTF"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mttf)"
+        :dataColor="gxkmap.bg_mttf < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mttf"
+        :data1Icon="gxkmap.hb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="gxkmap.hb_mttf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+        :data2Icon="gxkmap.tb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="gxkmap.tb_mttf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
+      ></Ppanel> -->
+      <Ppanel
+        title="利用小时"
+        :data="riseNumber(gxkmap.bg_dxkyss)"
+        :dataColor="gxkmap.bg_dxkyss < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.ydxkyss"
+        :data1Icon="
+          gxkmap.tb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
+        "
+        :data1IconClass="
+          gxkmap.tb_dxkyss < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+        :data2Icon="
+          gxkmap.hb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
+        "
+        :data2IconClass="
+          gxkmap.hb_dxkyss < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+      ></Ppanel>
+      <Ppanel
+        title="设备可利用率"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_sbklyl)"
+        :dataColor="gxkmap.bg_sbklyl < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.ysbklyl"
+        :data1Icon="
+          gxkmap.hb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
+        "
+        :data1IconClass="
+          gxkmap.hb_sbklyl < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+        :data2Icon="
+          gxkmap.tb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
+        "
+        :data2IconClass="
+          gxkmap.tb_sbklyl < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+      ></Ppanel>
+      <Ppanel
+        title="MTBF"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mtbf)"
+        :dataColor="gxkmap.bg_mtbf < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mtbf"
+        :data1Icon="gxkmap.hb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="
+          gxkmap.hb_mtbf < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+        :data2Icon="gxkmap.tb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="
+          gxkmap.tb_mtbf < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+      ></Ppanel>
+      <Ppanel
+        title="MTTR"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mttr)"
+        :dataColor="gxkmap.bg_mttr < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mttr"
+        :data1Icon="gxkmap.hb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="
+          gxkmap.hb_mttr < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+        :data2Icon="gxkmap.tb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="
+          gxkmap.tb_mttr < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+      ></Ppanel>
+      <Ppanel
+        title="MTTF"
+        class="stb-p"
+        :data="riseNumber(gxkmap.bg_mttf)"
+        :dataColor="gxkmap.bg_mttf < 0 ? '#f25656' : '#05BB4C'"
+        :days="gxkmap.mttf"
+        :data1Icon="gxkmap.hb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data1IconClass="
+          gxkmap.hb_mttf < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+        :data2Icon="gxkmap.tb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
+        :data2IconClass="
+          gxkmap.tb_mttf < 0
+            ? 'svg-icon-sm svg-icon-yellow'
+            : 'svg-icon-sm svg-icon-green'
+        "
+      ></Ppanel>
     </div>
-    <!-- bounceInUp, -->
     <el-dialog
       top="50px"
-      custom-class="modal animated bounceIn"
+      title="查看视频"
+      :custom-class="videoDialogClass"
       v-model="showVideoDialog"
       width="80%"
       :destroy-on-close="true"
-      @closed="dialogVideoUrl = ''"
+      :before-close="
+        (done) => {
+          videoDialogClass = 'modal animated a1 bounceOut';
+          delaylyFn(450, done);
+        }
+      "
+      @closed="
+        dialogVideoUrl = '';
+        videoDialogClass = 'modal animated a1 bounceIn';
+      "
     >
       <iframe
         class="videoBoxiframe"
@@ -105,6 +284,47 @@
         :src="dialogVideoUrl"
       />
     </el-dialog>
+    <el-dialog
+      title="停机详情"
+      :custom-class="tableDialogClass"
+      v-model="showTableDialog"
+      width="80%"
+      :destroy-on-close="true"
+      :before-close="
+        (done) => {
+          tableDialogClass = 'modal animated a1 fadeOutLeftBig';
+          delaylyFn(450, done);
+        }
+      "
+      @closed="
+        dialogVideoUrl = '';
+        tableDialogClass = 'modal animated a1 fadeInLeftBig';
+      "
+    >
+      <el-form style="margin: 30px 0" label-width="120px" inline>
+        <el-form-item label="风机ID" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.windTurbineId" readonly></el-input>
+        </el-form-item>
+        <el-form-item label="所属风场" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.wpName" readonly></el-input>
+        </el-form-item>
+        <el-form-item label="停机类型" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.statusName" readonly></el-input>
+        </el-form-item>
+        <el-form-item label="停机时间" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.stopTime" readonly></el-input>
+        </el-form-item>
+        <el-form-item label="恢复时间" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.startTime" readonly></el-input>
+        </el-form-item>
+        <el-form-item
+          label="停机时长(小时)"
+          style="width: 45%; margin-bottom: 25px"
+        >
+          <el-input v-model="tableItem.stopHours" readonly></el-input>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
@@ -136,11 +356,23 @@ export default {
   },
   // 数据
   data() {
+    const that = this;
     return {
       videoShow: true,
       showPanel: false,
       exchangeBtn: false,
       exchangeBtn1: false,
+      timmer1: null,
+      showTableDialog: false,
+      videoDialogClass: "modal animated a1 bounceIn",
+      tableDialogClass: "modal animated a1 fadeInLeftBig",
+      peopleClass: "",
+      timeStr: "",
+      wpId: "0",
+      tqmap1: {},
+      gxkmap: {},
+      tableItem: {},
+      mapSource: {},
       videoArray: [
         [
           {
@@ -193,65 +425,48 @@ export default {
           total: 100,
         },
       ],
-      tableData: {
+      workDataIndex: 0,
+      workData: {
         column: [
           {
-            name: "标题",
-            field: "v1",
+            name: "人员",
+            field: "laborname",
             is_num: false,
             is_light: false,
+            click(e, row) {
+              that.changePeople(row.index);
+            },
           },
           {
-            name: "标题",
-            field: "v2",
+            name: "职务",
+            field: "jobcode",
             is_num: false,
             is_light: false,
+            click(e, row) {
+              that.changePeople(row.index);
+            },
           },
           {
-            name: "标题",
-            field: "v3",
+            name: "开始时间",
+            field: "starttime",
             width: "150px",
             is_num: false,
             is_light: false,
+            click(e, row) {
+              that.changePeople(row.index);
+            },
           },
           {
-            name: "标题",
-            field: "v4",
+            name: "原因",
+            field: "problem",
             is_num: false,
             is_light: false,
+            click(e, row) {
+              that.changePeople(row.index);
+            },
           },
         ],
-        data: [
-          {
-            v1: "内容内容",
-            v2: "内容内容",
-            v3: "内容内容内容内容内容",
-            v4: "内容内容",
-            is_light: false,
-          },
-          {
-            v1: "内容内容",
-            v2: "内容内容",
-            v3: "内容内容内容内容内容",
-            v4: "内容内容",
-            is_light: false,
-          },
-          {
-            v1: "内容内容",
-            v2: "内容内容",
-            v3: "内容内容内容内容内容",
-            v4: "内容内容",
-            is_light: false,
-          },
-
-          {
-            v1: "内容内容",
-            v2: "内容内容",
-            v3: "内容内容内容内容内容",
-            v4: "内容内容",
-            is_light: false,
-          },
-        ],
+        data: [],
       },
       levelTableData: {
         column: [
@@ -296,8 +511,22 @@ export default {
           },
         ],
       },
+      sels: {
+        column: [
+          {
+            name: "风机编号",
+            field: "windTurbineId",
+          },
+          {
+            name: "时间",
+            field: "stopTime",
+          },
+        ],
+        data: [],
+      },
     };
   },
+
   // 函数
   methods: {
     openVideoDialog(item) {
@@ -306,12 +535,109 @@ export default {
         this.showVideoDialog = true;
       }
     },
+
+    getWtInfo() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "sandtable/findWtInfo",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+          console.log(11111, res);
+
+          that.tqmap1 = res.data.tqmap1;
+
+          res.data.sels.forEach((ele) => {
+            ele.stopTime = new Date(ele.stopTime).formatDate(
+              "yyyy-MM-dd hh:mm:ss"
+            );
+            ele.startTime = new Date(ele.stopTime).formatDate(
+              "yyyy-MM-dd hh:mm:ss"
+            );
+          });
+
+          that.sels.data = res.data.sels;
+          that.gxkmap = res.data.gxkmap;
+        },
+      });
+    },
+
+    // 获取中部地图数据
+    getWpHealthInfo() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "sandtable/judgeWpHealth",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+          that.mapSource = res.data;
+        },
+      });
+    },
+
+    // 获取中部地图数据
+    getTop4Info() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:9988/",
+        subUrl: "equoperationrecord/top4",
+        data: {
+          stId: that.wpId,
+        },
+        success(res) {
+          res.data.forEach((ele, index) => {
+            ele.index = index;
+          });
+          that.workData.data = res.data;
+        },
+      });
+    },
+
+    clickRow(row) {
+      this.tableItem = row;
+      this.showTableDialog = true;
+    },
+
+    delaylyFn(time, fn) {
+      setTimeout(() => {
+        fn();
+      }, time);
+    },
+
+    riseNumber(number) {
+      if (number < 0) {
+        return (number - number * 2) / 100;
+      } else {
+        return number / 100;
+      }
+    },
+
+    // 切换人员展示
+    changePeople(index) {
+      if (!this.peopleAnmLock && this.workDataIndex !== index) {
+        this.peopleAnmLock = true;
+        this.peopleClass = "fadeOutRight";
+        setTimeout(() => {
+          this.workDataIndex = index;
+          this.peopleClass = "fadeInRight";
+          this.peopleAnmLock = false;
+        }, 150);
+      }
+    },
+
     when: function () {
       this.showPanel = true;
     },
+
     exchange: function () {
       this.exchangeBtn = !this.exchangeBtn;
     },
+
     exchange1: function () {
       this.exchangeBtn1 = !this.exchangeBtn1;
     },
@@ -321,7 +647,13 @@ export default {
     // 创建前
   },
   created() {
-    // 创建后
+    this.getWtInfo();
+    this.getWpHealthInfo();
+    this.getTop4Info();
+    this.timeStr = new Date().formatDate("MM-dd hh:mm");
+    this.timmer1 = setInterval(() => {
+      this.timeStr = new Date().formatDate("MM-dd hh:mm");
+    });
   },
   beforeMount() {
     // 渲染前
@@ -335,6 +667,11 @@ export default {
   updated() {
     // 数据更新后
   },
+
+  unmounted() {
+    clearInterval(this.timmer1);
+    this.timmer1 = null;
+  },
 };
 </script>
 
@@ -450,6 +787,10 @@ export default {
     margin-left: -1.481vh;
     margin-bottom: -1.481vh;
 
+    tr {
+      cursor: pointer;
+    }
+
     .com-table thead tr th,
     .com-table tr td {
       padding: 0.556vh 0;
@@ -457,8 +798,12 @@ export default {
     }
   }
 
-  .animated {
-    // animation-duration: 0.5s;
+  .animated.a0 {
+    animation-duration: 0.35s;
+  }
+
+  .animated.a1 {
+    animation-duration: 0.5s;
   }
 
   .el-overlay {
@@ -480,22 +825,24 @@ export default {
   animation-duration: 0;
   @keyframes dialog-fade-in {
     0% {
-      transform: translate3d(0, 100%, 0);
-      opacity: 1;
+      transform: translate3d(-1000%, -1000%, 0);
+      opacity: 0;
     }
     100% {
-      transform: translate3d(0, 100%, 0);
+      transform: translate3d(-1000%, -1000%, 0);
       opacity: 1;
     }
   }
 
   @keyframes dialog-fade-out {
     0% {
-      transform: translate3d(0, 0, 0);
+      // transform: translate3d(0, 0, 0);
+      transform: translate3d(-1000%, -1000%, 0);
       opacity: 1;
     }
     100% {
-      transform: translate3d(0, -100%, 0);
+      // transform: translate3d(0, -100%, 0);
+      transform: translate3d(-1000%, -1000%, 0);
       opacity: 0;
     }
   }

src/views/SandTable/component/p-panel.vue

@@ -1,207 +1,231 @@
 <template>
-    <div class="p-panel">
-        <div class="p-panel-title font-sm">{{ title }}</div>
-        <div class="p-panel-body">
-            <div class="pp-info">
-                <div class="pp-info-days mg-r-16">
-                    <span class="font-num green font-lg pp-info-days-num">{{ days }}</span>
-                    <span class="gray font-sm">{{ daysUnit }}</span>
-                </div>
-                <div class="pp-info-data mg-l-16">
-                    <span class="gray-l font-sm">{{ data1Str }}</span>
-                    <span class="pp-icon-l svg-icon" :class="data1IconClass">
-                        <svg-icon :svgid="data1Icon" />
-                    </span>
-                    <span class="gray-l font-sm">{{ data2Str }}</span>
-                    <span class="pp-icon-r svg-icon" :class="data2IconClass">
-                        <svg-icon :svgid="data2Icon" />
-                    </span>
-                </div>
-            </div>
-            <div class="pp-data">
-                <div class="pp-tip" :style="'margin-left: ' + (data*100) + '%'">
-                    <div class="pp-tip-data font-sm">{{ flip ? ((1 - data) * 100).toFixed(2) + "%" : (data * 100).toFixed(2) + "%" }}</div>
-                    <div class="pp-tip-icon"><i class="el-icon-caret-bottom font-sm" :style="'color: ' + dataColor"></i></div>
-                </div>
-                <div class="pp-data-box" :style="'border-color: ' + dataColor + '4d; background: ' + backColor + ';'">
-                    <div class="pp-data-split" v-for="index of 20" :key="index"></div>
-                    <div class="pp-data-num" :style="'width: ' + (data*100) + '%; background: ' + dataColor + ';'"></div>
-                </div>
-            </div>
+  <div class="p-panel">
+    <div class="p-panel-title font-sm">{{ title }}</div>
+    <div class="p-panel-body">
+      <div class="pp-info">
+        <div class="pp-info-days mg-r-16">
+          <span class="font-num green font-lg pp-info-days-num">{{
+            days
+          }}</span>
+          <span class="gray font-sm">{{ daysUnit }}</span>
         </div>
+        <div class="pp-info-data mg-l-16">
+          <span class="gray-l font-sm">{{ data1Str }}</span>
+          <span class="pp-icon-l svg-icon" :class="data1IconClass">
+            <svg-icon :svgid="data1Icon" />
+          </span>
+          <span class="gray-l font-sm">{{ data2Str }}</span>
+          <span class="pp-icon-r svg-icon" :class="data2IconClass">
+            <svg-icon :svgid="data2Icon" />
+          </span>
+        </div>
+      </div>
+      <div class="pp-data">
+        <div class="pp-tip" :style="'margin-left: ' + data * 100 + '%'">
+          <div class="pp-tip-data font-sm">
+            {{
+              flip
+                ? ((1 - data) * 100).toFixed(2) + "%"
+                : (data * 100).toFixed(2) + "%"
+            }}
+          </div>
+          <div class="pp-tip-icon">
+            <i
+              class="el-icon-caret-bottom font-sm"
+              :style="'color: ' + dataColor"
+            ></i>
+          </div>
+        </div>
+        <div
+          class="pp-data-box"
+          :style="
+            'border-color: ' + dataColor + '4d; background: ' + backColor + ';'
+          "
+        >
+          <div class="pp-data-split" v-for="index of 20" :key="index"></div>
+          <div
+            class="pp-data-num"
+            :style="
+              'width: ' + data * 100 + '%; background: ' + dataColor + ';'
+            "
+          ></div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
-    // 名称
-    name: "Ppanel",
-    // 使用组件
-    components: {
-        SvgIcon,
+  // 名称
+  name: "Ppanel",
+  // 使用组件
+  components: {
+    SvgIcon,
+  },
+  // 传入参数
+  props: {
+    title: {
+      type: String,
+      default: "利用小时",
+    },
+    days: {
+      type: Number,
+      default: 88.5,
+    },
+    daysUnit: {
+      type: String,
+      default: "小时",
     },
-    // 传入参数
-    props: {
-        title: {
-            type: String,
-            default: "利用小时",
-        },
-        days: {
-            type: Number,
-            default: 88.5,
-        },
-        daysUnit: {
-            type: String,
-            default: "天",
-        },
-        data1Str: {
-            type: String,
-            default: "环",
-        },
-        data1IconClass: {
-            type: String,
-            default: "svg-icon-sm svg-icon-green",
-        },
-        data1Icon: {
-            type: String,
-            default: "svg-arrow-up-1",
-        },
-        data2Str: {
-            type: String,
-            default: "同",
-        },
-        data2Icon: {
-            type: String,
-            default: "svg-arrow-dpwn-1",
-        },
-        data2IconClass: {
-            type: String,
-            default: "svg-icon-sm svg-icon-yellow",
-        },
-        data: {
-            type: Number,
-            default: 0.75,
-        },
-        flip: {
-            type: Boolean,
-            default: false,
-        },
-        dataColor: {
-            type: String,
-            default: "#05BB4C",
-        },
-        backColor: {
-            type: String,
-            default: "#4B55AE",
-        },
+    data1Str: {
+      type: String,
+      default: "环",
     },
-    emits: {},
-    // 数据
-    data() {
-        return {};
+    data1IconClass: {
+      type: String,
+      default: "svg-icon-sm svg-icon-green",
     },
-    // 函数
-    methods: {},
-    // 生命周期钩子
-    beforeCreate() {
-        // 创建前
+    data1Icon: {
+      type: String,
+      default: "svg-arrow-up-1",
     },
-    created() {
-        // 创建后
+    data2Str: {
+      type: String,
+      default: "同",
     },
-    beforeMount() {
-        // 渲染前
+    data2Icon: {
+      type: String,
+      default: "svg-arrow-dpwn-1",
     },
-    mounted() {
-        // 渲染后
+    data2IconClass: {
+      type: String,
+      default: "svg-icon-sm svg-icon-yellow",
     },
-    beforeUpdate() {},
-    updated() {},
+    data: {
+      type: Number,
+      default: 0.75,
+    },
+    flip: {
+      type: Boolean,
+      default: false,
+    },
+    dataColor: {
+      type: String,
+      default: "#05BB4C",
+    },
+    backColor: {
+      type: String,
+      default: "#4B55AE",
+    },
+  },
+  emits: {},
+  // 数据
+  data() {
+    return {};
+  },
+  // 函数
+  methods: {},
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
 };
 </script>
 
 <style lang="less">
 .p-panel {
-    background: #1a1f2fCC;
+  background: #1a1f2fcc;
 
-    .font-sm {
-        font-size: 12px;
-    }
+  .font-sm {
+    font-size: 12px;
+  }
 
-    .p-panel-title {
-        height: 2.778vh;
-        line-height: 2.778vh;
-        text-align: center;
-        color: #ffffff;
-        border-bottom: 1px solid #ffffff66;
+  .p-panel-title {
+    height: 2.778vh;
+    line-height: 2.778vh;
+    text-align: center;
+    color: #ffffff;
+    border-bottom: 1px solid #ffffff66;
+  }
+
+  .p-panel-body {
+    .pp-info {
+      padding-top: 1.111vh;
+      display: flex;
+
+      .pp-info-days-num {
+        padding: 1.204vh 0.926vh 0 1.944vh;
+      }
+
+      .pp-info-data {
+        margin-left: auto;
+
+        .pp-icon-l {
+          padding: 1.111vh 2.037vh 0 0.556vh;
+        }
+
+        .pp-icon-r {
+          padding: 1.111vh 0.833vh 0 0.556vh;
+        }
+      }
     }
 
-    .p-panel-body {
-        .pp-info {
-            padding-top: 1.111vh;
-            display: flex;
+    .pp-data {
+      padding: 0.741vh 0.556vh 1.389vh 0.556vh;
+      .pp-tip {
+        display: inline-block;
 
-            .pp-info-days-num {
-                padding: 1.204vh 0.926vh 0 1.944vh;
-            }
+        .pp-tip-data,
+        .pp-tip-icon {
+          margin-left: -100%;
+          text-align: center;
+        }
+
+        .pp-tip-icon {
+          margin-top: -0.37vh;
+        }
+      }
 
-            .pp-info-data {
-                margin-left: auto;
+      .pp-data-box {
+        height: 0.741vh;
+        width: 200px;
+        border: 1px solid;
+        position: relative;
+        display: flex;
+        transform: skewX(-25deg);
 
-                .pp-icon-l {
-                    padding: 1.111vh 2.037vh 0 0.556vh;
-                }
+        .pp-data-split {
+          width: 10px;
+          height: 100%;
+          z-index: 2;
+          transition: 0.2s;
 
-                .pp-icon-r {
-                    padding: 1.111vh 0.833vh 0 0.556vh;
-                }
-            }
+          + .pp-data-split {
+            border-left: 1px solid #172f2e;
+          }
         }
 
-        .pp-data {
-            padding: 0.741vh 0.556vh 1.389vh 0.556vh;
-            .pp-tip {
-                display: inline-block;
-
-                .pp-tip-data,
-                .pp-tip-icon {
-                    margin-left: -100%;
-                    text-align: center;
-                }
-
-                .pp-tip-icon {
-                    margin-top: -0.37vh;
-                }
-            }
-
-            .pp-data-box {
-                height: 0.741vh;
-                width: 200px;
-                border: 1px solid;
-                position: relative;
-                display: flex;
-                transform: skewX(-25deg);
-
-                .pp-data-split {
-                    width: 10px;
-                    height: 100%;
-                    z-index: 2;
-                    
-                    +.pp-data-split {
-                        border-left: 1px solid #172F2E;
-                    }
-                }
-
-                .pp-data-num {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    height: 100%;
-                    z-index: 1;
-                }
-            }
+        .pp-data-num {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          z-index: 1;
         }
+      }
     }
+  }
 }
 </style>

src/views/SandTable/component/rank-table.vue

@@ -1,54 +1,74 @@
 <template>
-    <table class="com-table rank-table">
-        <thead>
-            <tr>
-                <th>排名</th>
-                <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
-                    {{ col.name }}
-                </th>
-            </tr>
-        </thead>
-        <el-scrollbar>
-            <tbody :style="{ height: height }">
-                <tr v-for="(row, index) of tableData" :key="index" :class="'rank rank' + index">
-                    <td class="rank-index">
-                        <span>{{ index + 1 }}</span>
-                    </td>
-                    <td
-                        v-for="(col, i) of data.column"
-                        :key="i"
-                        :style="{ width: col.width }"
-                        :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
-                        @mouseleave="leave()"
-                    >
-                        <component :is="col.type ? col.type : 'span'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)">
-                        </component>
-                    </td>
-                </tr>
-            </tbody>
-        </el-scrollbar>
-        <el-pagination
-            class="mg-t-8"
-            v-if="pageable"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-size="pageSize"
-            :total="data.total"
-            v-bind="elPaggingProps"
+  <table class="com-table rank-table">
+    <thead>
+      <tr>
+        <!-- <th>排名</th> -->
+        <th
+          v-for="(col, index) of data.column"
+          :key="index"
+          :class="{ light: col.is_light }"
+          :style="{ width: col.width }"
+          @click="onSort(col)"
         >
-        </el-pagination>
-    </table>
+          {{ col.name }}
+        </th>
+      </tr>
+    </thead>
+    <el-scrollbar>
+      <tbody :style="{ height: height }">
+        <tr
+          v-for="(row, index) of tableData"
+          :key="index"
+          :class="'rank rank' + index"
+          @click="clickRow(row)"
+        >
+          <!-- <td class="rank-index">
+            <span>{{ index + 1 }}</span>
+          </td> -->
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :style="{ width: col.width }"
+            :class="{
+              light: hoverRow == row || hoverCol == col,
+              num: col.is_num,
+              'always-light': col.is_light || row.is_light,
+            }"
+            @mouseleave="leave()"
+          >
+            <component
+              :is="col.type ? col.type : 'span'"
+              v-bind="col.props"
+              v-html="template(col, row[col.field])"
+              @click="onClick(col, row)"
+            >
+            </component>
+          </td>
+        </tr>
+      </tbody>
+    </el-scrollbar>
+    <el-pagination
+      class="mg-t-8"
+      v-if="pageable"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :total="data.total"
+      v-bind="elPaggingProps"
+    >
+    </el-pagination>
+  </table>
 </template>
 
 <script>
 export default {
-    // 名称
-    name: "ComTable",
-    // 使用组件
-    components: {},
-    // 传入参数
-    props: {
-        /**
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
         *   {
                 column: [{
                     name: "风机名称",
@@ -77,209 +97,213 @@ export default {
                 total:200
             }
         */
-        data: Object,
-        // hover 样式
-        showHover: {
-            type: Boolean,
-            default: true,
-        },
-        // 列高亮
-        showColHover: {
-            type: Boolean,
-            default: false,
-        },
-        canScroll: {
-            type: Boolean,
-            default: true,
-        },
-        pageSize: {
-            type: Number,
-            default: 0,
-        },
-        height: {
-            type: String,
-            default: "",
-        },
-        // 新增 支持 pagging 组件
-        elPaggingProps: {
-            type: Object,
-            default: () => {
-                return {
-                    layout: "total, sizes, prev, pager, next, jumper",
-                    // "page-sizes": [100, 200, 300, 400],
-                };
-            },
-        },
+    data: Object,
+    // hover 样式
+    showHover: {
+      type: Boolean,
+      default: true,
+    },
+    // 列高亮
+    showColHover: {
+      type: Boolean,
+      default: false,
+    },
+    canScroll: {
+      type: Boolean,
+      default: true,
     },
-    // 自定义事件
-    emits: {
-        // 分页事件
-        onPagging: null,
+    pageSize: {
+      type: Number,
+      default: 0,
     },
-    // 数据
-    data() {
+    height: {
+      type: String,
+      default: "",
+    },
+    // 新增 支持 pagging 组件
+    elPaggingProps: {
+      type: Object,
+      default: () => {
         return {
-            hoverRow: -1,
-            hoverCol: -1,
-            sortCol: "",
-            sortType: "",
-            currentPage: 1,
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
         };
+      },
     },
-    computed: {
-        tableData() {
-            let that = this;
-            if (this.sortCol == "") {
-                return this.data.data;
-            } else {
-                let data = this.data.data;
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      hoverRow: -1,
+      hoverCol: -1,
+      sortCol: "",
+      sortType: "",
+      currentPage: 1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
 
-                data.sort((a, b) => {
-                    let rev = 1;
-                    if (that.sortType == "ASC") rev = 1;
-                    else if (that.sortType == "DESC") rev = -1;
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
 
-                    if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
-                    if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
-                    return 0;
-                });
-                return data;
-            }
-        },
-        pageable() {
-            return this.pageSize != 0;
-        },
-        pages() {
-            if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
-            else return 0;
-        },
-        startRow() {
-            if (this.pageable) return (this.currentPage - 1) * this.pageSize;
-            else return 0;
-        },
-        endRow() {
-            if (this.pageable) return this.currentPage * this.pageSize;
-            else return this.data.data.length;
-        },
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
     },
-    // 函数
-    methods: {
-        onClick(col, data) {
-            if (col.click) col.click(event, data);
-        },
-        onSort(col) {
-            if (col.sortable == true) {
-                this.sortCol = col.field;
-                switch (this.sortType) {
-                    case "":
-                        this.sortType = "DESC";
-                        break;
-                    case "DESC":
-                        this.sortType = "ASC";
-                        break;
-                    case "ASC":
-                        this.sortType = "";
-                        break;
-                }
-            }
-        },
-        template(col, data) {
-            if (!col.template) return data;
-            else return col.template(data);
-        },
-        hover(row, col) {
-            if (this.showHover) {
-                this.hoverRow = row;
-                if (this.showColHover) this.hoverCol = col;
-            }
-        },
-        leave() {
-            this.hoverRow = -1;
-            this.hoverCol = -1;
-        },
-        handleCurrentChange(val) {
-            this.currentPage = val;
-            this.$emit("onPagging", {
-                pageIndex: this.currentPage,
-                pageSize: this.pageSize,
-                start: this.startRow,
-                end: this.endRow,
-            });
-        },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
     },
-    // 生命周期钩子
-    beforeCreate() {
-        // 创建前
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
     },
-    created() {
-        // 创建后
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
     },
-    beforeMount() {
-        // 渲染前
+  },
+  // 函数
+  methods: {
+    clickRow(row) {
+      this.$emit("rowClick", row);
     },
-    mounted() {
-        // 渲染后
+    onClick(col, data) {
+      if (col.click) col.click(event, data);
+    },
+    onSort(col) {
+      if (col.sortable == true) {
+        this.sortCol = col.field;
+        switch (this.sortType) {
+          case "":
+            this.sortType = "DESC";
+            break;
+          case "DESC":
+            this.sortType = "ASC";
+            break;
+          case "ASC":
+            this.sortType = "";
+            break;
+        }
+      }
     },
-    beforeUpdate() {},
-    updated() {},
+    template(col, data) {
+      if (!col.template) return data;
+      else return col.template(data);
+    },
+    hover(row, col) {
+      if (this.showHover) {
+        this.hoverRow = row;
+        if (this.showColHover) this.hoverCol = col;
+      }
+    },
+    leave() {
+      this.hoverRow = -1;
+      this.hoverCol = -1;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
 };
 </script>
 
 <style lang="less">
 .rank-table {
-    thead tr th {
-        color: #ffffff;
-    }
+  thead tr th {
+    color: #ffffff;
+  }
 
-    .rank {
-        background: transparent !important;
-        border-bottom: 1px solid #5362684d;
+  .rank {
+    background: transparent !important;
+    border-bottom: 1px solid #5362684d;
+    cursor: pointer;
 
-        td {
-            height: 2.593vh;
-            line-height: 2.593vh;
-            padding: 0;
-            color: #ffffff;
+    td {
+      height: 2.593vh;
+      line-height: 2.593vh;
+      padding: 0;
+      color: #ffffff;
 
-            &.rank-index {
-                span {
-                    width: 1.852vh;
-                    height: 1.852vh;
-                    display: flex;
-                    margin: 0.37vh auto;
-                    background: #414E64;
-                    align-items: center;
-                    justify-content: center;
-                }
-            }
+      &.rank-index {
+        span {
+          width: 1.852vh;
+          height: 1.852vh;
+          display: flex;
+          margin: 0.37vh auto;
+          background: #414e64;
+          align-items: center;
+          justify-content: center;
         }
+      }
     }
+  }
 
-    .rank.rank0 td {
-        color: #EDB32F;
+  .rank.rank0 td {
+    color: #edb32f;
 
-        &.rank-index span {
-            background: #EDB32F;
-            color: #FFFFFF;
-        }
+    &.rank-index span {
+      background: #edb32f;
+      color: #ffffff;
     }
+  }
 
-    .rank.rank1 td {
-        color: #05BB4C;
+  .rank.rank1 td {
+    color: #05bb4c;
 
-        &.rank-index span {
-            background: #05BB4C;
-            color: #FFFFFF;
-        }
+    &.rank-index span {
+      background: #05bb4c;
+      color: #ffffff;
     }
+  }
 
-    .rank.rank2 td {
-        color: #4B55AE;
+  .rank.rank2 td {
+    color: #4b55ae;
 
-        &.rank-index span {
-            background: #4B55AE;
-            color: #FFFFFF;
-        }
+    &.rank-index span {
+      background: #4b55ae;
+      color: #ffffff;
     }
+  }
 }
 </style>

src/views/SandTable/component/weather.vue

@@ -1,16 +1,15 @@
-// 天气分析
 <template>
   <div class="weather">
     <div class="weather-info">
       <span class="svg-icon">
-        <svg-icon class="weather-icon" svgid="svg-duoyun" />
+        <svg-icon class="weather-icon" :svgid="'svg-' + sourceData.tqtp" />
       </span>
       <div>
-        <div class="temperature">{{ temperature }} °</div>
+        <div class="temperature">{{ sourceData.wd }} °</div>
         <div class="other">
-          <span>{{ weather }}</span>
-          <span>{{ windDirection }}</span>
-          <span>{{ windSpeed }}</span>
+          <span>{{ sourceData.tqmc }}</span>
+          <span>{{ sourceData.fx }}</span>
+          <span>{{ sourceData.fs }}</span>
         </div>
       </div>
     </div>
@@ -20,35 +19,35 @@
           <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
             <svg-icon svgid="svg-能见度" />
           </div>
-          <div class="value">{{ visibility }}</div>
+          <div class="value">{{ sourceData.qxd }}</div>
           <div class="text">能见度</div>
         </Col>
         <Col>
           <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
             <svg-icon svgid="svg-湿度" />
           </div>
-          <div class="value">{{ humidity }}</div>
+          <div class="value">{{ sourceData.sd }}</div>
           <div class="text">湿度</div>
         </Col>
         <Col>
           <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
             <svg-icon svgid="svg-气压" />
           </div>
-          <div class="value">{{ pressure }}</div>
+          <div class="value">{{ sourceData.dqyl }}</div>
           <div class="text">气压</div>
         </Col>
         <Col>
           <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
             <svg-icon svgid="svg-日出" />
           </div>
-          <div class="value">{{ sunrise }}</div>
+          <div class="value">{{ sourceData.richushijian }}</div>
           <div class="text">日出时间</div>
         </Col>
         <Col>
           <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
             <svg-icon svgid="svg-日落" />
           </div>
-          <div class="value">{{ sunset }}</div>
+          <div class="value">{{ sourceData.riluoshijian }}</div>
           <div class="text">日落时间</div>
         </Col>
       </Row>
@@ -63,6 +62,12 @@ import SvgIcon from "@com/coms/icon/svg-icon.vue";
 
 export default {
   components: { Row, Col, SvgIcon },
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
   // 数据自己获取天气情况
   data() {
     return {
@@ -75,8 +80,20 @@ export default {
       pressure: "994kPa", // 气压
       sunrise: "04:06", // 日出
       sunset: "18:50", // 日落
+
+      sourceData: {},
     };
   },
+
+  mounted() {
+    this.sourceData = this.data;
+  },
+
+  watch: {
+    data(res) {
+      this.sourceData = res;
+    },
+  },
 };
 </script>