From 5d828825ed7f46a25d72788d502de22214eb2a96 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Thu, 30 Nov 2023 17:29:48 +0800
Subject: [PATCH] 2023-11-30 xy

---
 src/views/order/component/createDispatch.vue | 536 +++++++++++++++++++
 src/views/order/component/dispatchList.vue   | 174 ++++++
 src/views/order/component/normalCreate.vue   | 275 ++++++----
 3 files changed, 893 insertions(+), 92 deletions(-)
 create mode 100644 src/views/order/component/createDispatch.vue
 create mode 100644 src/views/order/component/dispatchList.vue

diff --git a/src/views/order/component/createDispatch.vue b/src/views/order/component/createDispatch.vue
new file mode 100644
index 0000000..4a52d70
--- /dev/null
+++ b/src/views/order/component/createDispatch.vue
@@ -0,0 +1,536 @@
+<template>
+  <div>
+    <div class="select">
+      <div class="select-item">
+        <div class="select-item__title">片区</div>
+        <el-checkbox-group size="small" v-model="select.area">
+          <el-checkbox-button v-for="item in areas" :label="item.value">{{
+            item.key
+          }}</el-checkbox-button>
+        </el-checkbox-group>
+      </div>
+
+      <div class="select-item">
+        <div class="select-item__title">功能</div>
+        <el-checkbox-group size="small" v-model="select.type">
+          <el-checkbox-button v-for="item in types" :label="item.value">{{
+            item.key
+          }}</el-checkbox-button>
+        </el-checkbox-group>
+      </div>
+
+      <div class="select-item">
+        <Button type="primary" style="margin-left: 10px" @click="clear"
+          >清空筛选</Button
+        >
+      </div>
+
+      <div class="date">
+        <p>
+          您正在为
+          <span style="color: red">{{ date }}</span>
+          创建
+          <span> {{ "排水" }} </span>
+          调令
+        </p>
+        <DatePicker
+          :value="date"
+          type="date"
+          format="yyyy-MM-dd"
+          :options="options"
+          placeholder="日期选择"
+          style="width: 160px; margin-left: 14px"
+          @on-change="(e) => (date = e)"
+        ></DatePicker>
+      </div>
+    </div>
+
+    <Table
+      :columns="columns"
+      :data="mergeData"
+      stripe
+      :span-method="objectSpanMethod"
+    ></Table>
+
+    <div class="btns">
+      <Button type="primary" @click="submit">创建调令</Button>
+      <Button type="primary" ghost @click="reset">重置列表</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { index, save } from "@/api/system/baseForm";
+import { deepCopy } from "@/utils";
+import { mergeTableRow } from "@/utils/mergeTableRow";
+import { show } from "@/api/system/customFormField";
+export default {
+  inject: ["equipments"],
+  props: {},
+  data() {
+    const _this = this;
+    return {
+      options: {
+        shortcuts: [
+          {
+            text: "今天",
+            onClick() {
+              _this.date = _this.$moment().format("YYYY-MM-DD");
+            },
+          },
+          {
+            text: "明天",
+            onClick() {
+              _this.date = _this.$moment().add(1, "days").format("YYYY-MM-DD");
+            },
+          },
+          {
+            text: "一周后",
+            onClick() {
+              _this.date = _this.$moment().add(1, "weeks").format("YYYY-MM-DD");
+            },
+          },
+          {
+            text: "一个月后",
+            onClick() {
+              _this.date = _this
+                .$moment()
+                .add(1, "months")
+                .format("YYYY-MM-DD");
+            },
+          },
+        ],
+      },
+      areas: [],
+      types: [],
+      select: {
+        area: [],
+        type: [],
+      },
+      weather: [],
+      copyOriginalData: [],
+      date: this.$moment().format("YYYY-MM-DD"),
+      data:
+        this.equipmentList?.map((i) => ({
+          equipment_id: i.id,
+          start_time: "",
+          end_time: "",
+          content: "",
+          level: 1,
+        })) || [],
+      columns: [
+        // {
+        //   width: 50,
+        //   title: ' ',
+        //   type: 'index',
+        //   key: 'index'
+        // },
+        {
+          title: "点位",
+          width: 240,
+          key: "equipment_id",
+          align: "center",
+          render: (h, { row, index }) => {
+            let equipment = this.equipmentList.find(
+              (i) => i.id === row.equipment_id
+            );
+            let text = equipment ? equipment.name : "";
+            return h("div", [
+              h('span',text),
+              h('Button',{
+                props: {
+                  size: 'small',
+                  type: 'primary',
+                  icon: 'ios-add'
+                },
+                style: {
+                  'margin-left': '6px'
+                },
+                on: {
+                  ['click']:e => {
+                    this.data.splice(index,0,deepCopy(row))
+                  }
+                }
+              },'新增')
+            ]);
+          },
+          // render: (h,{ row, index }) => {
+          //   return h('div',{
+          //     style: {
+          //       display: 'flex',
+          //       'justify-content': 'space-between'
+          //     }
+          //   },[
+          //     h('Select',{
+          //       style: {
+          //         width: '140px'
+          //       },
+          //       props: {
+          //         value: row.equipment_id,
+          //         filterable: true,
+          //         size: 'small',
+          //         transfer: true,
+          //         disabled: true
+          //       },
+          //       on: {
+          //         ['on-select']:e => {
+          //           row.equipment_id = e.value;
+          //         }
+          //       }
+          //     },this.equipments().map(i => {
+          //       return h('Option',{
+          //         props: {
+          //           value: i.id,
+          //         }
+          //       },i.name)
+          //     })),
+          //     h('Button',{
+          //       props: {
+          //         size: 'small',
+          //         type: 'primary'
+          //       },
+          //       on: {
+          //         ['click']:e => {
+          //           this.data.splice(index,0,deepCopy(row))
+          //         }
+          //       }
+          //     },'新增')
+          //   ])
+          // }
+        },
+        {
+          title: "开启时间",
+          width: 140,
+          align: "center",
+          key: "start_time",
+          render: (h, { row, index }) => {
+            return h("TimePicker", {
+              props: {
+                value: row.start_time,
+                type: "time",
+                size: "small",
+                transfer: true,
+              },
+              on: {
+                ["on-change"]: (e) => (this.data[index].start_time = e),
+              },
+            });
+          },
+        },
+        {
+          title: "结束时间",
+          width: 140,
+          align: "center",
+          key: "end_time",
+          render: (h, { row, index }) => {
+            return h("TimePicker", {
+              props: {
+                value: row.end_time,
+                type: "time",
+                size: "small",
+                transfer: true,
+              },
+              on: {
+                ["on-change"]: (e) => (this.data[index].end_time = e),
+              },
+            });
+          },
+        },
+        {
+          title: "调令内容",
+          minWidth: 200,
+          key: "content",
+          align: "center",
+          render: (h, { row, index }) => {
+            return h("Input", {
+              style: {
+                padding: "6px 0",
+              },
+              props: {
+                size: "small",
+                value: row.content,
+                type: "textarea",
+              },
+              on: {
+                ["input"]: (e) => (this.data[index].content = e),
+              },
+            });
+          },
+        },
+        {
+          title: "调令等级",
+          width: 140,
+          key: "level",
+          align: "center",
+          render: (h, { row }) => {
+            return h(
+              "Select",
+              {
+                props: {
+                  value: row.level,
+                  filterable: true,
+                  size: "small",
+                  transfer: true,
+                },
+                on: {
+                  ["on-select"]: (e) => {
+                    row.level = e.value;
+                  },
+                },
+              },
+              [
+                { label: "一般", value: 1 },
+                { label: "紧急", value: 2 },
+              ].map((i) => {
+                return h(
+                  "Option",
+                  {
+                    props: {
+                      value: i.value,
+                    },
+                  },
+                  i.label
+                );
+              })
+            );
+          },
+        },
+        {
+          title: "操作",
+          width: 140,
+          key: "operate",
+          render: (h, { row, index }) => {
+            return h(
+              "Poptip",
+              {
+                props: {
+                  title: "确认要删除吗？",
+                  confirm: true,
+                  transfer: true,
+                },
+                on: {
+                  ["on-ok"]: (e) => {
+                    this.data.splice(index, 1);
+                  },
+                },
+              },
+              [
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "primary",
+                      size: "small",
+                    },
+                  },
+                  "删除"
+                ),
+              ]
+            );
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    clear () {
+      this.select = {
+        area: [],
+        type: [],
+      };
+    },
+
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      const span = column["key"] + "-span";
+      if (row[span]) {
+        return row[span];
+      }
+    },
+
+    reset () {
+      this.clear();
+      this.data =
+        this.equipmentList?.map((i) => ({
+          equipment_id: i.id,
+          start_time: "",
+          end_time: "",
+          content: "",
+          level: 1,
+        })) || [];
+    },
+
+    submit () {
+      let verify = true;
+      const submitData = this.data.filter(i => (i.start_time || i.end_time || i.content));
+      submitData.forEach(item => {
+        if (!item.start_time || !item.end_time || !item.level) {
+          verify = false;
+        }
+      })
+      if (!verify) {
+        this.$message({
+          type: 'warning',
+          message: '请填写完整信息'
+        })
+        return
+      }
+
+      let promiseAll = submitData.map(i => {
+        delete i['equipment_id-span']
+        delete i['_index']
+        delete i['_rowKey']
+        i.start_time = `${this.date} ${i.start_time}`;
+        i.end_time = `${this.date} ${i.end_time}`;
+
+        return save({
+          table_name: 'transfers',
+          ...i
+        },false)
+      })
+      let loadingInstance = this.$loading({
+        lock:true,
+        background:"rgba(0,0,0,0.4)",
+        text:"正在加载中..."
+      })
+      Promise.all(promiseAll).then(res => {
+        this.reset();
+        loadingInstance.close();
+        this.$message({
+          type: 'success',
+          message: `成功创建${res.length}条调令`
+        })
+      }).catch(_ => {
+        loadingInstance.close();
+      })
+    },
+
+    async getArea() {
+      const obj = (await show({ id: 4 }, false))?.select_item;
+      if (obj && typeof obj === "object") {
+        let keys = Object.keys(obj);
+        if (keys.length > 0) {
+          this.areas = keys.map((key) => {
+            return {
+              key,
+              value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
+            };
+          });
+        }
+      }
+    },
+    async getType() {
+      const obj = (await show({ id: 1 }, false))?.select_item;
+      if (obj && typeof obj === "object") {
+        let keys = Object.keys(obj);
+        if (keys.length > 0) {
+          this.types = keys.map((key) => {
+            return {
+              key,
+              value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
+            };
+          });
+        }
+      }
+    },
+  },
+  computed: {
+    mergeData() {
+      return mergeTableRow({
+        data: this.data.map((i) => {
+          delete i["equipment_id-span"];
+          return i;
+        }),
+        mergeColNames: ["equipment_id"], // 需要合并的列，默认合并列相同的数据
+        firstMergeColNames: ["equipment_id"], // 受影响的列，只合并以firstMerge为首的同类型数据
+        firstMerge: "equipment_id", // 以哪列为基础进行合并，一般为第一列
+      });
+    },
+    equipmentList() {
+      return this.equipments() || [];
+    },
+  },
+  watch: {
+    equipmentList(val) {
+      this.data =
+        val?.map((i) => ({
+          equipment_id: i.id,
+          start_time: "",
+          end_time: "",
+          content: "",
+          level: 1,
+        })) || [];
+    },
+    select: {
+      handler: function (val) {
+        if (val.area.length > 0 || val.type.length > 0) {
+          let list1 = [];
+          let list2 = [];
+          if (val.area.length > 0) {
+            list1 = this.equipments().filter(i => val.area.find(j => j === i.id))
+          }
+          if (val.type.length > 0) {
+            list2 = this.equipments().filter(i => val.type.find(j => j === i.id))
+          }
+          this.data = Array.from(new Set([...list1,...list2].map(JSON.stringify))).map(JSON.parse).map((i) => ({
+            equipment_id: i.id,
+            start_time: "",
+            end_time: "",
+            content: "",
+            level: 1,
+          })) || [];
+        } else {
+          this.data = this.equipments()?.map((i) => ({
+            equipment_id: i.id,
+            start_time: "",
+            end_time: "",
+            content: "",
+            level: 1,
+          })) || [];;
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {},
+  created() {
+    this.getArea();
+    this.getType();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.select {
+  &-item {
+    display: flex;
+    align-items: center;
+    &__title {
+      width: 50px;
+      flex-shrink: 0;
+      font-weight: 600;
+      text-align: center;
+    }
+
+    & + & {
+      margin-top: 10px;
+    }
+  }
+
+  .date {
+    display: flex;
+    align-items: center;
+
+    padding: 10px;
+  }
+}
+.btns {
+
+  margin-top: 10px;
+  padding-left: 10px;
+}
+</style>
diff --git a/src/views/order/component/dispatchList.vue b/src/views/order/component/dispatchList.vue
new file mode 100644
index 0000000..59f8d9e
--- /dev/null
+++ b/src/views/order/component/dispatchList.vue
@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <Table
+      :columns="columns"
+      :data="mergeData"
+      stripe
+      :span-method="objectSpanMethod"
+    ></Table>
+
+    <el-pagination
+      class="pagination"
+      @size-change="e => {
+        select.page_size = e;
+        select.page = 1;
+        getDispatches();
+      }"
+      @current-change="e => {
+        select.page = e;
+        getDispatches();
+      }"
+      :current-page="select.page"
+      :page-sizes="[10, 20, 30, 40]"
+      :page-size="select.page_size"
+      layout="total, prev, pager, next, jumper, sizes"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { deepCopy } from "@/utils";
+import { index } from "@/api/system/baseForm";
+import {mergeTableRow} from "@/utils/mergeTableRow";
+
+export default {
+  inject: ["equipments"],
+  data() {
+    return {
+      select: {
+        table_name: 'transfers',
+        page: 1,
+        page_size: 10,
+        sort_name: 'equipment_id'
+      },
+      total: 0,
+      data: [],
+      columns: [
+        {
+          title: "点位",
+          width: 240,
+          key: "equipment_id",
+          align: "center",
+          render: (h, { row, index }) => {
+            let equipment = this.equipmentList.find(
+              (i) => i.id === row.equipment_id
+            );
+            let text = equipment ? equipment.name : "";
+            return h('span',text);
+          },
+        },
+        {
+          title: "开启时间",
+          width: 180,
+          align: "center",
+          key: "start_time",
+        },
+        {
+          title: "结束时间",
+          width: 180,
+          align: "center",
+          key: "end_time",
+        },
+        {
+          title: "调令内容",
+          minWidth: 200,
+          key: "content",
+          align: "left",
+        },
+        {
+          title: "调令等级",
+          width: 140,
+          key: "level",
+          align: "center",
+          render: (h, { row }) => {
+            let type = new Map([
+              [1,'一般'],
+              [2,'紧急']
+            ])
+            return h('span',type.get(row.level));
+          },
+        },
+        {
+          title: "操作",
+          width: 140,
+          key: "operate",
+          render: (h, { row, index }) => {
+            return h(
+              "Poptip",
+              {
+                props: {
+                  title: "确认要删除吗？",
+                  confirm: true,
+                  transfer: true,
+                },
+                on: {
+                  ["on-ok"]: (e) => {
+                    this.data.splice(index, 1);
+                  },
+                },
+              },
+              [
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "primary",
+                      size: "small",
+                    },
+                  },
+                  "删除"
+                ),
+              ]
+            );
+          },
+        },
+      ]
+    }
+  },
+  methods: {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      const span = column["key"] + "-span";
+      if (row[span]) {
+        return row[span];
+      }
+    },
+
+    async getDispatches () {
+      const res = await index(this.select);
+      this.data = res.data;
+      this.total = res.total;
+    }
+  },
+  computed: {
+    mergeData() {
+      return mergeTableRow({
+        data: this.data.map((i) => {
+          delete i["equipment_id-span"];
+          return i;
+        }),
+        mergeColNames: ["equipment_id"], // 需要合并的列，默认合并列相同的数据
+        firstMergeColNames: ["equipment_id"], // 受影响的列，只合并以firstMerge为首的同类型数据
+        firstMerge: "equipment_id", // 以哪列为基础进行合并，一般为第一列
+      });
+    },
+    equipmentList() {
+      return this.equipments() || [];
+    },
+  },
+  watch: {
+  },
+  created() {
+    this.getDispatches()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.pagination {
+  display: flex;
+  justify-content: center;
+
+  padding: 20px 0;
+}
+</style>
diff --git a/src/views/order/component/normalCreate.vue b/src/views/order/component/normalCreate.vue
index 6736a18..1b099bc 100644
--- a/src/views/order/component/normalCreate.vue
+++ b/src/views/order/component/normalCreate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="padding-bottom: 10px;">
     <LxHeader
       icon="md-apps"
       :text="$route.meta.title"
@@ -8,122 +8,169 @@
     >
     </LxHeader>
 
-    <Card>
-      <div class="step">
-        <el-steps :active="currentStep" align-center process-status="finish" finish-status="success">
-          <el-step title="点位选择"></el-step>
-          <el-step title="调令内容"></el-step>
-          <el-step title="调令预览"></el-step>
-          <el-step title="完成"></el-step>
-        </el-steps>
+    <div class="weather panel">
+      <div class="title">今日信息</div>
+
+      <template v-if="weather">
+        <div class="weather-container">
+          <Card class="weather-container__card" v-for="(value,key) in weatherObj">
+            <template #title>
+              {{ value }}
+            </template>
+            <template>
+              <template v-if="weather[key]&&weather[key].length>15">
+                <el-tooltip placement="bottom" :content="weather[key]">
+                  <span class="text">{{ weather[key] }}</span>
+                </el-tooltip>
+              </template>
+              <template v-else>
+                {{ weather[key] }}
+              </template>
+            </template>
+          </Card>
+        </div>
+      </template>
+      <template v-else>
+        <Card>
+          <el-empty :image-size="60" description="暂无信息"></el-empty>
+        </Card>
+      </template>
+    </div>
+
+    <div class="point panel">
+      <div class="title">创建调令</div>
+
+      <div class="point-container">
+        <Card class="point-container__card">
+          <createDispatch></createDispatch>
+        </Card>
       </div>
+    </div>
 
-      <Divider></Divider>
-
-      <div class="content">
-        <step1 v-if="currentStep === 0" :original-data="data" @next="handleNext"></step1>
-        <step2 v-if="currentStep === 1" :original-data="data" @next="handleNext" @forward="handleForward"></step2>
-        <step3 v-if="currentStep === 2" :original-data="data" @next="handleNext" @forward="handleForward"></step3>
-
-        <div v-if="currentStep === 3" class="complete">
-          <Icon class="complete__icon" type="ios-checkmark-circle" />
+    <div class="dispatch panel">
+      <div class="title">已创建调令</div>
 
-          <p>完成</p>
-
-          <Button style="width: 180px;" type="primary" @click="$router.push('/dispatch/list')">查看调令</Button>
-        </div>
+      <div class="point-container">
+        <Card class="point-container__card">
+          <dispatchList></dispatchList>
+        </Card>
       </div>
-    </Card>
+    </div>
   </div>
 </template>
 
 <script>
-import { save } from "@/api/system/baseForm";
+import { index, save } from "@/api/system/baseForm";
 import { uuid } from "@/utils";
 
 import LxHeader from "@/components/LxHeader/index.vue";
-import step1 from "@/views/order/component/step1.vue";
-import step2 from "@/views/order/component/step2.vue";
-import step3 from "@/views/order/component/step3.vue";
+// import step1 from "@/views/order/component/step1.vue";
+// import step2 from "@/views/order/component/step2.vue";
+// import step3 from "@/views/order/component/step3.vue";
+import createDispatch from "@/views/order/component/createDispatch.vue";
+import dispatchList from "@/views/order/component/dispatchList.vue";
 export default {
   components: {
     LxHeader,
-    step1,
-    step2,
-    step3
+    createDispatch,
+    dispatchList
   },
   data() {
     return {
       currentStep: 0,
 
-      data: []
+      data: [],
+      weather: {},
+      weatherObj: {
+        weather: '今日天气',
+        water: '今日水情',
+        rain: '降水情况',
+        prevent: '预警',
+        early_warning: '防汛等级'
+      }
     }
   },
   methods: {
-    handleNext ({ data, step }) {
-      console.log(data,step)
-      switch (step) {
-        case 1:
-          let uid = uuid();
-          this.data = data.map(equipmentId => {
-            return {
-              no: uid,
-              equipment_id: equipmentId,
-              start_time: '',
-              end_time: '',
-              content: '',
-              level: 1,
-              status: 1
-            }
-          })
-          this.currentStep = 1;
-          break;
-        case 2:
-          this.data = data;
-          this.currentStep = 2;
-          break;
-        case 3:
-          let promiseAll = this.data.map(i => {
-            delete i['equipment_id-span']
-            delete i['_index']
-            delete i['_rowKey']
-            i.start_time = `${this.$moment().format('YYYY-MM-DD')} ${i.start_time}`;
-            i.end_time = `${this.$moment().format('YYYY-MM-DD')} ${i.end_time}`;
-
-            return save({
-              table_name: 'transfers',
-              ...i
-            },false)
-          })
-          let loadingInstance = this.$loading({
-            lock:true,
-            background:"rgba(0,0,0,0.4)",
-            text:"正在加载中..."
-          })
-          Promise.all(promiseAll).then(res => {
-            this.data = [];
-            loadingInstance.close();
-            this.currentStep = 3;
-          }).catch(_ => {
-            loadingInstance.close();
-          })
-          break;
-      }
-    },
-
-    handleForward ({ data, step }) {
-      switch (step) {
-        case 2:
-          this.data = data;
-          this.currentStep = 0;
-          break;
-        case 3:
-          this.currentStep = 1;
-          break;
-      }
+    // handleNext ({ data, step }) {
+    //   console.log(data,step)
+    //   switch (step) {
+    //     case 1:
+    //       let uid = uuid();
+    //       this.data = data.map(equipmentId => {
+    //         return {
+    //           no: uid,
+    //           equipment_id: equipmentId,
+    //           start_time: '',
+    //           end_time: '',
+    //           content: '',
+    //           level: 1,
+    //           status: 1
+    //         }
+    //       })
+    //       this.currentStep = 1;
+    //       break;
+    //     case 2:
+    //       this.data = data;
+    //       this.currentStep = 2;
+    //       break;
+    //     case 3:
+    //       let promiseAll = this.data.map(i => {
+    //         delete i['equipment_id-span']
+    //         delete i['_index']
+    //         delete i['_rowKey']
+    //         i.start_time = `${this.$moment().format('YYYY-MM-DD')} ${i.start_time}`;
+    //         i.end_time = `${this.$moment().format('YYYY-MM-DD')} ${i.end_time}`;
+    //
+    //         return save({
+    //           table_name: 'transfers',
+    //           ...i
+    //         },false)
+    //       })
+    //       let loadingInstance = this.$loading({
+    //         lock:true,
+    //         background:"rgba(0,0,0,0.4)",
+    //         text:"正在加载中..."
+    //       })
+    //       Promise.all(promiseAll).then(res => {
+    //         this.data = [];
+    //         loadingInstance.close();
+    //         this.currentStep = 3;
+    //       }).catch(_ => {
+    //         loadingInstance.close();
+    //       })
+    //       break;
+    //   }
+    // },
+    //
+    // handleForward ({ data, step }) {
+    //   switch (step) {
+    //     case 2:
+    //       this.data = data;
+    //       this.currentStep = 0;
+    //       break;
+    //     case 3:
+    //       this.currentStep = 1;
+    //       break;
+    //   }
+    // },
+
+    async getWeather () {
+      this.weather = (await index({
+        table_name: 'waters',
+        filter: [
+          {
+            key: 'date',
+            op: 'eq',
+            value: this.$moment().format('YYYY-MM-DD')
+          }
+        ]
+      },false)).data[0]
     }
   },
   computed: {},
+  created() {
+    this.getWeather()
+  }
 }
 </script>
 
@@ -131,7 +178,51 @@ export default {
 ::v-deep .ivu-steps .ivu-steps-title,::v-deep .ivu-steps .ivu-steps-head {
   background: #0000;
 }
+.panel {
+  .title {
+    font-weight: 600;
+    font-size: 16px;
+
+    padding: 10px 20px;
+    position: relative;
+
+    &::before {
+      content: '';
+      width: 12px;
+      height: 12px;
+      border-radius: 100%;
+      transform: translateY(-50%);
+      background: radial-gradient(50% 50% at 50% 50%,$primaryColor 0,$primaryColor 60%,#0000 60%,#0000 80%,$primaryColor 80%,$primaryColor 100%);
+
+      position: absolute;
+      left: 0;
+      top: 50%;
+    }
+  }
+
+  & + & {
+    margin-top: 20px;
+  }
+}
+.weather {
+
+  &-container {
+    display: flex;
+    justify-content: space-between;
 
+    &__card {
+      flex: 0;
+      flex-basis: 19%;
+
+      .text {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+      }
+    }
+  }
+}
 .step {
   width: 80%;