yifeng_integration/yifengdian-company-report/src/views/home.vue

<template>

  <div class="home">
    <div class="header">
      <div class="tel_box flex flex-center2 flex-end">
        <span>服务热线：</span><span class="m-right7">0532-58773877</span>
        <a :href='`tel:0532-58773877`'>拨打</a>
      </div>
    </div>
    <section class="container">
      <div class="card" v-if="pageType === 'vegetable'">
        <div class="title">
          <span>移风菜篮子 <span>（单位：吨）</span></span>
          <div @click="$router.push('/vegetable')">
            更多 <img class="img-12" src="@/assets/images/home/right.png" alt="">
          </div>

        </div>
        <div class="scroll-box m-top18">
          <div class="scroll-title flex flex-mean flex-center2" style="padding: 0 26px;">
            <span class="flex1 text-anign-left">品名</span>
            <span class="flex1 text-anign-right">产量 <span>(吨)</span></span>
          </div>
          <section style="overflow: hidden;">
            <vue-seamless-scroll :class-option="optionHover" :data="vegetableList">
              <div class="scroll-content">
                <div class="flex flex-end item" v-for="(item, index) in vegetableList" :key="'vegetable' + index"
                  style="padding: 0 26px;">
                  <!-- <img :src="item.imageList[0]" v-if="item.imageList.length >0"/>
                                <img src="../../assets/images/dyfc.png" v-else alt=""> -->
                  <div class="flex1 van-ellipsis text-anign-left">{{ item.vegetableCategory }} </div>
                  <div class="vegetable-item-row2 van-ellipsis text-anign-right flex1">{{ item.output }}
                  </div>
                </div>
              </div>

            </vue-seamless-scroll>
          </section>
        </div>
      </div>
      <div class="card m-top10" v-if="pageType === 'bazaar'">
        <div class="title">
          <span>今日市场 <span>（单位：元/公斤）</span></span>
          <div @click="$router.push('/bazaar')">
            更多 <img class="img-12" src="@/assets/images/home/right.png" alt="">
          </div>
        </div>
        <div class="scroll-box m-top18">
          <div class="scroll-title flex flex-mean flex-center2 text-anign-center">
            <span class="flex1">品名</span>
            <span class="flex1">均价</span>
            <span class="flex1">较昨日</span>
          </div>
          <section style="overflow: hidden;">
            <vue-seamless-scroll :class-option="optionHover" :data="priceList">
              <div class="scroll-content">
                <div class="flex flex-mean  item" v-for="(item,index ) in priceList" :key="'price' + index">
                  <div class="flex1 van-ellipsis">{{ item.Name }} </div>
                  <div class="flex1 van-ellipsis">{{ item.price }} </div>
                  <div class="vegetable-item-row2 flex1 van-ellipsis">{{ item.jzrPrice }}
                    <img v-if="item.jzrPrice > 0 && item.jzrPrice != '暂无'" src="@/assets/up.png" alt=""
                      style="width: 11px;height: 15px;">
                    <img v-if="item.jzrPrice < 0 && item.jzrPrice != '暂无'" src="@/assets/down.png" alt=""
                      style="width: 11px;height: 15px;">
                  </div>
                </div>
              </div>

            </vue-seamless-scroll>
          </section>
        </div>
      </div>
      <div class="card m-top10" v-if="pageType === 'news'">
        <div class="title">
          <span>政策资讯</span>
          <span @click="$router.push('/policy')">更多 <img class="img-12" src="@/assets/images/home/right.png"
              alt=""></span>
        </div>
        <div class="flex-y" v-for="(item, index) in policyList">
          <div class="van-multi-ellipsis--l2 font-bold" style="font-weight: 500;">
            {{ item.title }}
          </div>
          <div class="flex flex-end m-top12">
            <div class="flex font-size14 flex-center2">
              <img src="@/assets/images/home/unit.png" class="img-13" alt=""><span class="blue">{{item.author  }}</span>
            </div>
            <span class="gray">{{ item.publishTime }}</span>
          </div>
        </div>
      </div>
    </section>
    <!-- <div class="container1">
      <div class="movable-area" @touchstart="onMovableStart" @touchmove="onMovableMove" @touchend="onMovableEnd" >
        <div class="movable-view" :style="{ left: x + 'px', top: y + 'px' }">
          <img @click="$router.push('/login')" src="@/assets/images/home/shangbao.gif" class="draggable" alt="draggable image">
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>

import { mapActions } from 'vuex'
import { prcCollectionListForGov, getVegetableOutputList,seedNewsScreenList } from '@/api/test'
export default {

  data() {
    return {
      params: {
        Country: 0,
        FEndDate: this.$moment().format('yyyy-MM-DD'),
        FParentPartyID: 1,
        FPartyName: '青岛市城阳蔬菜水产品批发市场有限公司',
        FPartyType: 1010,
        FStartDate: this.$moment().format('yyyy-MM-DD'),
        FStoreId: 1,
        Name: '全部',
        page: 1,
        pageSize: 10,
        singletype: 0,
        sort: ''
      },
      times: this.$moment().subtract(1, 'days').format('yyyy-MM-DD'),
      optionHover: {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 20, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
      },
      vegetableList: [],
      policyList:[],
      priceList: [],
      dayList: [],
      tDayList: [],
      pageType:null,
      dragging: false,
        startX: 0,
        startY: 0,
        x: 275,
        y: 540
    };
  },
  created() {
    if(this.$route.query.type){
        this.pageType = this.$route.query.type;
    }
    this.getDayScData()
    this.seedNewsScreenList()
  },
  mounted(){
  },
  watch:{
    $route: {
      handler: function (newVal, oldVal) {
        if(newVal.query.type){
          this.pageType = this.$route.query.type;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    seedNewsScreenList(){
      seedNewsScreenList({}).then((res) => {
      this.policyList = res.data.data
      console.log(this.policyList,"564698");
    })
    },

    onMovableStart(event) {
      console.log("123");
      this.dragging = true;
      this.startX = event.touches[0].clientX - this.x;
      this.startY = event.touches[0].clientY - this.y

    },
    onMovableMove(event) {
      console.log("123");
       event.preventDefault(); // 阻止默认滚动行为
      if (this.dragging) {
        this.x = event.touches[0].clientX - this.startX;
        this.y = event.touches[0].clientY - this.startY;
        if(this.x>300){ 
          console.log("12w3");
          this.x=300
        }
        if(this.x<0){ 
          console.log("12w3");
          this.x=10
        }
        if(this.y>600){
          this.y=600
        }
        if(this.y<0){
          this.y=10
        }
      }
      console.log(this.x, this.y);
    },
    onMovableEnd() {
      this.dragging = false;
    },

    handelClickEmap() {
      this.$EventBus.$emit('switcMapType', 'Emap')
    },
    ...mapActions({
      showGlobalDialog: 'showGlobalDialog',
      set_yfcj: 'SET_YFCJ',
      set_viewPdf: 'SET_VIEWPDF',
      set_yfclz: 'SET_YFCLZ',
      set_ldhg: 'SET_LDGH'
    }),
    openClz() {
      this.set_yfclz(true)
    },
    openPdf() {
      this.set_viewPdf(true)
    },
  
    deduplicationJs(arr) {
      const data = []
      arr.forEach((item, index) => {
        if ((index + 1) % 2 === 0) {
          const num = (arr[index - 1].AvgPrice + item.AvgPrice) / 2
          data.push({ ...item, price: num })
        }
      })
      return data
    },
    getDayScData(data) {

      console.log(data, "123");
      console.log(this.params, data);
      console.log(this.times, "事件");
      prcCollectionListForGov({ ...this.params, ...data }).then((res) => {
        console.log(res, "XIAOWANG");
        if (res.data.priceslist.length > 0) {
          this.dayList = res.data.priceslist
          console.log("day");
          console.log(this.dayList, "day");
          this.getDayScTData()
        } else {
          console.log("11");
          this.times = this.$moment(this.times)
            .subtract(1, 'days')
            .format('yyyy-MM-DD')
          console.log(this.times);
          this.getDayScData({
            FEndDate: this.$moment(this.times)
              .subtract(1, 'days')
              .format('yyyy-MM-DD'),

            FStartDate: this.$moment(this.times)
              .subtract(1, 'days')
              .format('yyyy-MM-DD')
          })

        }
      })
      getVegetableOutputList().then(res => {
        console.log(res, "12651651651");
        this.vegetableList = res.data.data,
          console.log(res.data.data, "12651651651");
        console.log(this.vegetableList, "1232432");

      })
    },
    getDayScTData() {
      console.log(this.times);
      prcCollectionListForGov({
        ...this.params,
        FEndDate: this.times,
        FStartDate: this.times
      }).then( (res1) => {
        console.log(res1.data, "15216516516");
        if (res1.data.priceslist.length > 0) {
          this.priceList =  this.getScData(this.dayList, res1.data.priceslist)
          console.log(this.priceList,'seeeeee');
        } else {
          this.times = this.$moment(this.times)
            .subtract(1, 'days')
            .format('yyyy-MM-DD')
          this.getDayScTData()
        }
      })
    },
    getScData(arr, arr1) {
      const dataD = this.deduplicationJs(arr)
      const dataTd = this.deduplicationJs(arr1)
      return dataD.map((item, index) => {
        const priceTd = dataTd.filter((item1) => item.Name === item1.Name)
        // [0].price
        if (priceTd.length > 0) {
          const jzrPrice = (item.price - priceTd[0].price).toFixed(2)
          return {
            ...item,
            jzrPrice
          }
        } else {
          return {
            ...item,
            jzrPrice: '暂无'
          }
        }
      })
    },

  },
};
</script>

<style lang="less" scoped>
.home {
  position: relative;
  
  .header {
    height: 100px;
    background: url('@/assets/images/home/header.png');
    background-size: 100% 100%;

    .tel_box {
      padding: 30px 25px 0;
      box-sizing: border-box;
      font-style: italic;

      :nth-child(1) {
        color: #cce6fd;
        height: 35px;
        font-size: 17px;
        font-family: fangzheng-bold;
        line-height: 39px;

      }

      :nth-child(2) {
        font-weight: 300;
        font-family: Impact;
        color: #ffffff;
        font-size: 25px;
        height: 35px;
        line-height: 35px;
      }

      a {
        text-align: center;
        color: #ffffff;
        width: 63px;
        height: 30px;
        border-radius: 17px;
        font-style: normal;
        line-height: 30px;
        background: linear-gradient(45deg, #ffd14d, #f78919);
      }
    }
  }

  >section {
    position: absolute;
    top: 66px;
    width: calc(100% - 20px);
    margin: 0 auto;
  }

  .scroll-box {
    max-height: calc(100vh - 210px);
    min-height: calc(100vh - 163px);
    overflow: hidden;
    .scroll-title {
      height: 45px;
      background: url('@/assets/images/home/table_header.png') no-repeat;
      background-size: 100% 100%;
      padding: 0 5px;
      box-sizing: border-box;
      color: #0082f0;
    }

    .scroll-content {
      overflow: hidden;

      .item {
        padding: 0 5px;
        box-sizing: border-box;
        height: 45px;
        border: 1px solid #E0E9F5;
        border-bottom: none;
        line-height: 45px;
        text-align: center;
      }

      .vegetable-item-row2 {
        color: #ff9805;
      }
    }
  }
}
.container1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.movable-area {
  width: 375px;
  height: 100%;
  position: relative;
}

.movable-view {
  width: 80px;
  height: 80px;
  position: fixed;
  cursor: move;
}

.draggable {
  width: 80px;
  height: 80px;
}
</style>