water-dispatch-web/src/views/order/component/normalCreate.vue

<template>
  <div style="padding-bottom: 10px;">
    <LxHeader
      icon="md-apps"
      :text="$route.meta.title"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      text="调度指令"
    >
    </LxHeader>

    <div class="weather panel">
      <div class="title">今日信息</div>

      <template v-if="weather">
        <div class="weather-container">
          <Card class="weather-container__card" v-for="(item,key) in weatherKv" :style="{ 'background': item.color || '#fff','color': '#fff','border-radius': '14px' }">
            <template #title>
              <div style="display: flex;align-items: center;">
                <div style="padding: 0 14px 0 10px;" v-html="item.icon"></div>
                <span style="font-weight: 600;font-size: 17px;">{{ item.label }}</span>
              </div>
            </template>
            <template>
<!--              <template v-if="weather[key]&&weather[key].length>15">-->
<!--                <el-tooltip placement="bottom" :content="weather[key]">-->
<!--                  <div v-html="splitSpan(weather[key])"></div>-->
<!--                </el-tooltip>-->
<!--              </template>-->
              <template>
                <div class="text" v-html="splitSpan(weather[key])"></div>
              </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>

    <div class="dispatch panel">
      <div class="title">已创建调令</div>

      <div class="point-container">
        <Card class="point-container__card">
          <dispatchList></dispatchList>
        </Card>
      </div>
    </div>
  </div>
</template>

<script>
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 createDispatch from "@/views/order/component/createDispatch.vue";
import dispatchList from "@/views/order/component/dispatchList.vue";
export default {
  components: {
    LxHeader,
    createDispatch,
    dispatchList
  },
  data() {
    return {
      currentStep: 0,

      data: [],
      weather: {},
      weatherKv: {
        weather: {
          label: '今日天气',
          icon: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                   <path d="M281.583167 161.025417c3.1569 7.773034 10.643408 12.485359 18.545378 12.485359 2.5071 0 5.057179-0.473791 7.522324-1.475608 10.239202-4.157693 15.167444-15.829524 11.009751-26.067702l-26.532283-65.327868c-4.158716-10.240225-15.83157-15.167444-26.067702-11.009751-10.239202 4.157693-15.167444 15.829524-11.009751 26.067702L281.583167 161.025417z"
                   fill="#fff"></path>
                   <path d="M78.55103 290.170752l64.954361 27.431769c2.541893 1.073448 5.179976 1.582031 7.776104 1.582031 7.801686 0 15.21554-4.590552 18.441001-12.229532 4.299933-10.17985-0.467651-21.918195-10.647501-26.217105l-64.954361-27.431769c-10.17985-4.298909-21.919219 0.466628-26.217105 10.647501C63.603597 274.134521 68.37118 285.871843 78.55103 290.170752z"
                   fill="#fff"></path>
                   <path d="M157.393703 524.045337c10.239202-4.157693 15.167444-15.827477 11.009751-26.066679-4.158716-10.239202-15.829524-15.172561-26.067702-11.008728L77.007885 513.502213c-10.239202 4.157693-15.167444 15.827477-11.009751 26.066679 3.1569 7.773034 10.643408 12.486382 18.545378 12.486382 2.5071 0 5.056156-0.474814 7.522324-1.477654L157.393703 524.045337z"
                   fill="#fff"></path>
                   <path d="M651.359978 321.847196c2.5071 0 5.056156-0.473791 7.522324-1.475608l63.406099-25.7515c10.239202-4.157693 15.167444-15.829524 11.009751-26.067702-4.157693-10.240225-15.829524-15.167444-26.067702-11.009751l-63.406099 25.7515c-10.239202 4.157693-15.167444 15.829524-11.009751 26.067702C635.971499 317.134871 643.458007 321.847196 651.359978 321.847196z"
                   fill="#fff"></path>
                   <path d="M496.752738 174.136016c2.541893 1.073448 5.179976 1.582031 7.776104 1.582031 7.801686 0 15.21554-4.590552 18.441001-12.229532l27.432793-64.955384c4.299933-10.17985-0.466628-21.918195-10.647501-26.217105-10.18292-4.298909-21.919219 0.466628-26.217105 10.647501l-27.432793 64.955384C481.805304 158.098761 486.572888 169.837106 496.752738 174.136016z"
                   fill="#fff"></path>
                   <path d="M916.674623 693.742251c-23.938202-24.434505-54.67525-40.053228-88.025822-45.029566-7.003508-122.552174-106.647949-220.695425-229.836619-225.421053 0.496304-5.762237 0.76134-11.552104 0.76134-17.34504 0-110.179378-89.63753-199.815885-199.816908-199.815885s-199.815885 89.636506-199.815885 199.815885c0 56.262398 22.967084 108.316961 62.911842 145.645125-33.985022 18.200524-57.157791 54.05922-57.157791 95.231945 0 1.676176 0.038886 3.355421 0.118704 5.031597-66.419735 18.162662-114.362654 79.391165-114.362654 149.851936 0 85.653799 69.745481 155.338904 155.475004 155.338904l559.184649 0c40.85243 0 79.537498-16.07921 108.927875-45.278229 29.590945-29.39754 45.889143-68.352761 45.889143-109.687168C960.928522 761.346975 945.212586 722.872708 916.674623 693.742251zM239.959164 405.945569c0-88.112804 71.685669-159.797449 159.797449-159.797449 88.113827 0 159.798473 71.685669 159.798473 159.797449 0 6.4192-0.394996 12.830213-1.152243 19.176758-79.591733 10.394744-148.917658 60.171428-184.14088 132.332934-17.669428-12.011568-38.671765-18.584264-60.618613-18.584264-0.850367 0-1.696642 0.01228-2.541893 0.032746C266.426979 509.139859 239.959164 459.962833 239.959164 405.945569zM886.835014 883.378286c-21.841447 21.699208-50.510394 33.649378-80.723509 33.649378L246.926856 917.027663c-63.662949 0-115.456568-51.732222-115.456568-115.320469 0-57.346079 42.756803-106.451474 99.455129-114.224508 5.609765-0.76748 10.631128-3.87833 13.818727-8.558933 3.187599-4.679579 4.242627-10.490935 2.905166-15.993253-1.284249-5.279237-1.935072-10.69969-1.935072-16.10684 0-34.076096 25.218358-62.36335 57.969273-67.197448 1.010003 0.155543 2.025123 0.2415 3.036149 0.2415 2.081405 0 4.146437-0.327458 6.119371-0.958838 0.26913-0.00307 0.535189-0.020466 0.805342-0.020466 20.523429 0 39.736003 9.135054 52.710502 25.063839 4.588505 5.633301 11.875468 8.337899 19.026332 7.061836 7.154957-1.276063 13.054317-6.329149 15.413038-13.202697 27.64871-80.566944 103.490026-134.698818 188.720176-134.698818 110.010533 0 199.509916 89.456405 199.509916 199.409632 0 0.838088 0.019443 1.656733 0.040932 2.472308 0.013303 0.545422 0.034792 1.088798 0.023536 1.647523-0.224104 10.997472 8.470929 20.114107 19.465331 20.409842 30.166043 0.812505 58.411341 13.135158 79.533404 34.697243 21.166065 21.605064 32.82357 50.133817 32.82357 80.332606C920.91111 832.67551 908.809491 861.548094 886.835014 883.378286z"
                   fill="#fff"></path>
                 </svg>`,
          color: 'linear-gradient(150deg, #879afe, #5164f6)'
        },
        water: {
          label: '今日水情',
          icon: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                   <path fill="#fff"
                   d="M448.184 101.451c-0.903-7.267-12.85-7.267-13.754 0-29.928 241.246-182.938 290.943-182.938 458.589 0 103.601 86.891 187.578 189.835 187.578 102.904 0 189.796-83.978 189.796-187.578 0-167.646-153.011-217.343-182.939-458.589z m32.331 602.066c-10.778 0-19.46-8.704-19.46-19.461 0-10.756 8.723-19.46 19.46-19.46 26.809 0 48.61-21.719 48.61-48.465 0-10.757 8.702-19.46 19.46-19.46a19.46 19.46 0 0 1 17.94 11.823 19.285 19.285 0 0 1 1.56 7.637c0 48.198-39.29 87.386-87.57 87.386zM686.584 182.662c-0.321-2.58-4.563-2.58-4.883 0-10.626 85.654-64.952 103.298-64.952 162.82 0 36.783 30.85 66.599 67.4 66.599 36.536 0 67.386-29.816 67.386-66.599 0.001-59.522-54.325-77.167-64.951-162.82z m11.479 213.761a6.9 6.9 0 0 1-6.909-6.91 6.91 6.91 0 0 1 6.909-6.909c9.518 0 17.259-7.711 17.259-17.207a6.905 6.905 0 0 1 6.909-6.909 6.91 6.91 0 0 1 6.924 6.909c-0.001 17.112-13.95 31.026-31.092 31.026zM898.247 790.223c-14.688-6.216-31.634 0.65-37.851 15.338-16.46 38.884-54.66 64.682-97.613 64.682-43.511 0-82.097-26.461-98.17-66.073-5.997-14.781-22.839-21.9-37.617-15.904a28.722 28.722 0 0 0-13.197 10.808c-1.543 1.969-2.939 4.084-3.961 6.499-16.431 38.872-54.623 64.67-97.579 64.67-42.487 0-80.132-25.316-96.867-63.382-2.331-8.356-8.277-15.607-16.947-19.091-14.799-5.948-31.616 1.228-37.563 16.027-16.003 39.822-54.682 66.446-98.336 66.446-43.969 0-82.882-27.032-98.647-67.278-5.817-14.851-22.572-22.175-37.422-16.358-14.851 5.817-22.174 22.572-16.357 37.423C134.486 886.228 194.612 928 262.546 928c49.3 0 94.436-22.055 124.844-57.923C417.801 905.954 462.959 928 512.259 928c49.482 0 94.866-22.185 125.287-58.364C667.953 905.774 713.283 928 762.783 928c66.355 0 125.377-39.86 150.801-99.926 6.217-14.687-0.65-31.634-15.337-37.851z"></path>
                 </svg>`,
          color: 'linear-gradient(150deg, #bf8bf8, #a251f8)'
        },
        rain: {
          label: '降水情况',
          icon: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                   <path d="M377.0368 281.531733L369.629867 341.333333H273.066667a170.666667 170.666667 0 0 0 0 341.333334h477.866666a170.666667 170.666667 0 0 0 72.942934-325.0176l-37.341867-17.681067-1.672533-41.301333a204.8 204.8 0 0 0-407.790934-17.134934zM34.133333 512a238.933333 238.933333 0 0 1 238.933334-238.933333h36.2496a273.1008 273.1008 0 0 1 543.744 22.869333A238.933333 238.933333 0 0 1 750.933333 750.933333H273.1008a238.933333 238.933333 0 0 1-238.933333-238.933333z m267.332267 343.210667a34.133333 34.133333 0 0 0-56.797867-37.888l-68.266666 102.4a34.133333 34.133333 0 0 0 56.797866 37.888l68.266667-102.4z m238.933333 0a34.133333 34.133333 0 0 0-56.797866-37.888l-68.266667 102.4a34.133333 34.133333 0 0 0 56.797867 37.888l68.266666-102.4z m238.933334 0a34.133333 34.133333 0 0 0-56.797867-37.888l-68.266667 102.4a34.133333 34.133333 0 0 0 56.797867 37.888l68.266667-102.4z"
                   fill="#fff"></path>
                 </svg>`,
          color: 'linear-gradient(150deg, #ffa797, #ff755b)'
        },
        prevent: {
          label: '预警',
          icon: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                   <path d="M919.04 958.72H95.232c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72H919.04c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72z"
                   fill="#fff"></path>
                   <path d="M199.936 956.16c-16.896 0-30.72-13.824-30.72-30.72V567.808c0-186.368 151.552-337.92 337.92-337.92s337.92 151.552 337.92 337.92V921.6c0 16.896-13.824 30.72-30.72 30.72s-30.72-13.824-30.72-30.72V567.808c0-152.576-123.904-276.48-276.48-276.48s-276.48 123.904-276.48 276.48v357.632c0 16.896-13.824 30.72-30.72 30.72z"
                   fill="#fff"></path>
                   <path d="M465.152 801.024c-7.936 0-15.616-3.072-21.76-8.96-12.032-12.032-12.032-31.488-0.256-43.52l94.72-95.232-125.696-40.192c-9.216-2.816-16.384-9.984-19.456-18.944-3.072-8.96-2.048-19.2 3.328-27.136l87.296-133.12c9.216-14.08 28.416-18.176 42.496-8.704 14.08 9.216 18.176 28.416 8.704 42.496l-65.28 99.328 134.912 43.264c10.24 3.328 17.92 11.52 20.48 22.016s-0.512 21.248-7.936 28.928l-130.048 130.816c-5.632 6.144-13.568 8.96-21.504 8.96zM503.808 212.48c-16.896 0-30.72-13.824-30.72-30.72V74.24c0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72v107.52c0 16.896-13.824 30.72-30.72 30.72zM712.96 259.328c-5.888 0-12.032-1.792-17.408-5.376-14.08-9.728-17.664-28.672-7.936-42.752l60.672-88.576c9.728-14.08 28.672-17.664 42.752-7.936 14.08 9.728 17.664 28.672 7.936 42.752l-60.672 88.576c-5.888 8.448-15.36 13.312-25.344 13.312zM854.784 411.648c-8.96 0-17.92-3.84-24.064-11.52-10.496-13.312-8.448-32.512 4.864-43.264l83.712-67.072c13.312-10.496 32.512-8.448 43.264 4.864 10.496 13.312 8.448 32.512-4.864 43.264l-83.712 67.072c-5.632 4.352-12.288 6.656-19.2 6.656zM297.472 263.168c-9.728 0-19.456-4.608-25.344-13.312L211.2 161.28c-9.728-14.08-6.144-33.024 7.936-42.752 14.08-9.472 33.024-6.144 42.752 7.936L322.56 215.04c9.728 14.08 6.144 33.024-7.936 42.752-5.12 3.584-11.264 5.376-17.152 5.376zM155.648 415.488c-6.656 0-13.568-2.304-19.2-6.656l-83.712-67.072c-13.312-10.496-15.36-29.952-4.864-43.264 10.496-13.312 29.952-15.36 43.264-4.864l83.712 67.072c13.312 10.496 15.36 29.952 4.864 43.264-6.144 7.424-15.104 11.52-24.064 11.52z"
                   fill="#fff"></path>
                 </svg>`,
          color: 'linear-gradient(150deg, #89c3f7, #4497fd)'
        },
        early_warning: {
          label: '防汛等级',
          icon: `<svg viewBox="0 0 1105 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                   <path d="M763.574886 989.92128l-40.81664-30.6176a38.0928 38.0928 0 0 0-45.95712 0l-40.81664 30.59712a119.33696 119.33696 0 0 1-73.50272 23.79776 119.5008 119.5008 0 0 1-72.31488-24.20736l-39.69024-30.18752a38.0928 38.0928 0 0 0-45.95712 0l-40.81664 30.59712a120.03328 120.03328 0 0 1-144.50688 0L178.522726 959.30368a38.0928 38.0928 0 0 0-45.93664 0l-52.75648 39.95648a40.83712 40.83712 0 0 1-57.15968-7.80288 40.83712 40.83712 0 0 1 7.80288-57.15968l52.75648-39.95648a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a38.0928 38.0928 0 0 0 45.93664 0l40.83712-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a38.0928 38.0928 0 0 0 45.93664 0l40.83712-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a38.0928 38.0928 0 0 0 45.93664 0l40.83712-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a40.83712 40.83712 0 0 1-8.04864 71.14752 40.83712 40.83712 0 0 1-41.1648-6.18496l-40.83712-30.59712a38.0928 38.0928 0 0 0-45.95712 0l-40.81664 30.59712A119.76704 119.76704 0 0 1 835.869286 1014.08768a119.76704 119.76704 0 0 1-72.2944-24.1664zM490.351206 833.86368l-40.83712-30.59712a38.0928 38.0928 0 0 0-45.93664 0L362.740326 833.86368a120.03328 120.03328 0 0 1-144.50688 0l-40.83712-30.59712a38.0928 38.0928 0 0 0-45.93664 0l-52.75648 39.936a40.83712 40.83712 0 0 1-57.1392-7.7824 40.83712 40.83712 0 0 1 7.7824-57.18016l52.75648-39.936a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.57664a38.0928 38.0928 0 0 0 45.95712 0l40.81664-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a38.0928 38.0928 0 0 0 45.93664 0l40.83712-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a38.0928 38.0928 0 0 0 45.93664 0l40.83712-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a40.83712 40.83712 0 0 1 7.80288 57.15968 40.83712 40.83712 0 0 1-57.1392 7.82336l-40.8576-30.59712a38.0928 38.0928 0 0 0-45.93664 0L906.832486 833.86368a120.03328 120.03328 0 0 1-144.50688 0l-40.81664-30.59712a38.0928 38.0928 0 0 0-45.95712 0L634.714726 833.86368a119.52128 119.52128 0 0 1-72.04864 24.18688h-0.2048a119.52128 119.52128 0 0 1-72.11008-24.18688z m34.26304-127.52896a158.65856 158.65856 0 0 0-16.83456-10.89536V400.5888h88.76032v310.08768l-33.1776 25.16992-38.74816-29.51168z m-203.48928 5.85728V436.0192h88.76032V673.91488a159.66208 159.66208 0 0 0-79.11424 32.50176l-8.43776 6.38976-1.20832-0.6144z m376.97536-38.33856V435.95776h88.76032v265.09312a160.23552 160.23552 0 0 0-88.80128-27.19744h0.04096z m202.81344-461.1072H207.604326V681.90208a161.5872 161.5872 0 0 0-81.67424-5.71392V131.15392h154.8288V10.56768h546.63168v120.58624h154.97216v542.26944a161.1776 161.1776 0 0 0-81.67424 15.07328l0.2048-475.7504zM362.433126 131.09248h383.488V92.09856H362.453606v38.99392z"
                   fill="#fff"></path>
                 </svg>`,
          color: 'linear-gradient(150deg, #6bc8cf, #3db9c5)'
        }
      }
    }
  },
  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;
    //   }
    // },

    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: {
    splitSpan () {
      return function (text) {
        let html = '';
        let spit = text?.split(/，|；|。|,|\n/)
        spit?.forEach((i,index) => {
          html += ((index ? '<br>' : '') + '<span>' + i + '</span>')
        })

        return html;
      }
    }
  },
  created() {
    this.getWeather()
  }
}
</script>

<style scoped lang="scss">
::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 {
        max-height: 140px;
        text-align: center;
        overflow-y: scroll;
        //font-size: 13px;
        //display: -webkit-box;
        //-webkit-box-orient: vertical;
        //-webkit-line-clamp: 3;
        //overflow: hidden;
        &::-webkit-scrollbar-thumb {
          background: #0000;
        }
      }
    }
  }
}
.step {
  width: 80%;

  margin: 0 auto;
}

.complete {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-bottom: 20px;
  &__icon {
    color: green;
    font-size: 66px;
  }

  & > p {
    font-weight: 600;
    color: #333;
    font-size: 20px;

    padding: 20px 0;
  }
}
</style>