SOURCE

  <!-- 风力 windScale-->
              <div class="info-data" v-if="item.value === 11">
                <div
                  class="data"
                  v-for="(item1, index1) in dataFormList"
                  :class="colorListFun(item1, item.value - 1)"
                  :key="index1"
                  :style="{ height: heightTopData(item1.windScale, item.value) }"
                  @mouseleave.stop="changeOut(item1, index, index1)"
                  @mousemove.stop="changeMove(item1, index, index1)"
                >
                  <div v-if="index1 === InxData && index === listIndex" class="headerBox">
                    <div class="top" style="color: rgb(116, 111, 111)">{{ hoverData.hoveTime }}</div>
                    <div class="bottom">
                      <span style="color: rgb(116, 111, 111)">{{ hoverData.type }}:</span>
                      <span
                        style="
                      display: inline-block;
                      width: 40px;
                      height: 20px;
                      border-radius: 5px;
                      color: rgb(116, 111, 111);
                    "
                      >{{ hoverData.typeData }}</span>
                    </div>
                  </div>
                  <div
                    v-if="
                  new Date(item1.dataTime).getHours() == 18 ||
                  new Date(item1.dataTime).getHours() == 12 ||
                  new Date(item1.dataTime).getHours() == 0 ||
                  new Date(item1.dataTime).getHours() == 6
                "
                    :style="{
                  position: 'absolute',
                  bottom: '0',
                  background: '#c4c5c4',
                  width: '1px',
                  height:
                    new Date(item1.dataTime).getHours() == 0 ? '35px' : '22px',
                }"
                  ></div>
                </div>
                <div class="info-sj">
                  <div class="info-sin">{{ maxDataeleven({ type: "max" }) }}</div>
                  <div class="info-max">{{ maxDataeleven({ type: "min" }) }}</div>
                </div>
              </div>
              <!-- 降雨降雪 precip -->
              <div class="info-data" v-if="item.value === 13">
                <div
                  class="data"
                  v-for="(item1, index1) in dataFormList"
                  :class="colorListFun(item1, index)"
                  :key="index1"
                  :style="{
                height: heightTopData(item1.precip, item.value),
              }"
                  @mouseleave.stop="changeOut(item1, index, index1)"
                  @mousemove.stop="changeMove(item1, index, index1)"
                >
                  <div v-if="!item1.precip">-</div>
                  <div v-if="index1 === InxData && index === listIndex" class="headerBox">
                    <div class="top" style="color: rgb(116, 111, 111)">{{ hoverData.hoveTime }}</div>
                    <div class="bottom">
                      <span style="color: rgb(116, 111, 111)">{{ hoverData.type }}:</span>
                      <span
                        style="
                      display: inline-block;
                      width: 40px;
                      height: 20px;
                      border-radius: 5px;
                      color: rgb(116, 111, 111);
                    "
                      >{{ hoverData.typeData || "-" }}</span>
                    </div>
                  </div>
                  <div
                    v-if="
                  new Date(item1.dataTime).getHours() == 18 ||
                  new Date(item1.dataTime).getHours() == 12 ||
                  new Date(item1.dataTime).getHours() == 0 ||
                  new Date(item1.dataTime).getHours() == 6
                "
                    :style="{
                  position: 'absolute',
                  bottom: '0',
                  background: '#c4c5c4',
                  width: '1px',
                  height:
                    new Date(item1.dataTime).getHours() == 0 ? '35px' : '22px',
                }"
                  ></div>
                </div>
                <div class="info-sj">
                  <div class="info-sin">{{ maxDatatwelve({ type: "max" }) }}</div>
                  <div class="info-max">{{ maxDatatwelve({ type: "min" }) }}</div>
                </div>
              </div>

               <!-- 风向 windDirectionDegree-->
              <div class="info-data windSpeed" v-if="item.value === 12">
                <div
                  class="data"
                  v-for="(item1, index1) in dataFormList"
                  :class="colorListFun(item1, item.value - 1)"
                  :key="index1"
                  :style="{ height: heightTopData(item1.temperature, item.value) }"
                  @mouseleave.stop="changeOut(item1, index, index1)"
                  @mousemove.stop="changeMove(item1, index, index1)"
                >
                  <div style="width: 97.8%" :style="transData(item1.windDirectionDegree)">
                    <img src="../../assets/images/fengx.png" width="70%" alt />
                    <!-- :style="transData(item.windDirectionDegree)" -->
                  </div>
                  <div v-if="index1 === InxData && index === listIndex" class="headerBox">
                    <div class="top" style="color: rgb(116, 111, 111)">{{ hoverData.hoveTime }}</div>
                    <div class="bottom">
                      <span style="color: rgb(116, 111, 111)">{{ hoverData.type }}:</span>
                      <span
                        style="
                      display: inline-block;
                      width: 40px;
                      height: 20px;
                      border-radius: 5px;
                      color: rgb(116, 111, 111);
                    "
                      >{{ hoverData.typeData }}</span>
                    </div>
                  </div>
                  <div
                    v-if="
                  new Date(item1.dataTime).getHours() == 18 ||
                  new Date(item1.dataTime).getHours() == 12 ||
                  new Date(item1.dataTime).getHours() == 0 ||
                  new Date(item1.dataTime).getHours() == 6
                "
                    :style="{
                  position: 'absolute',
                  bottom: '0',
                  background: '#c4c5c4',
                  width: '1px',
                  height:
                    new Date(item1.dataTime).getHours() == 0 ? '35px' : '22px',
                }"
                  ></div>
                </div>
                <div class="info-sj">
                  <div class="info-sin">{{ "-" }}</div>
                  <div class="info-max">{{ "-" }}</div>
                </div>
              </div>