elink-star
/
yifeng_integration
16
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页上报可移动视频，路由跳转

master
是小王呀\24601 1 year ago
parent
c15ec2a6ff
commit
91e0d9a59a
4 changed files with 281 additions and 218 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      yarn.lock
  2. BIN
      yifengdian-company-report/src/assets/images/home/shangbao.gif
  3. 4
      yifengdian-company-report/src/router/router_modular/index.js
  4. 474
      yifengdian-company-report/src/views/home.vue

5
yarn.lock
View File

@ -3903,6 +3903,11 @@ data-view-byte-offset@^1.0.0:
es-errors "^1.3.0" es-errors "^1.3.0"
is-data-view "^1.0.1" is-data-view "^1.0.1"
dayjs@^1.11.7:
version "1.11.11"
resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==
de-indent@^1.0.2: de-indent@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz" resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz"

BIN
yifengdian-company-report/src/assets/images/home/shangbao.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 357 KiB

4
yifengdian-company-report/src/router/router_modular/index.js
View File

@ -10,11 +10,13 @@ const router_modular = [
path: '/list', path: '/list',
name: 'list', name: 'list',
component: () => import(/* webpackChunkName: "about" */ '@/views/vegetableList.vue') component: () => import(/* webpackChunkName: "about" */ '@/views/vegetableList.vue')
}, },
{ {
path: '/vegetableDetails', path: '/vegetableDetails',
name: 'vegetableDetails', name: 'vegetableDetails',
component: () => import(/* webpackChunkName: "about" */ '@/views/vegetableDetails.vue') component: () => import(/* webpackChunkName: "about" */ '@/views/vegetableDetails.vue'),
title:'产量上报'
}, },
{ {
path: '/home', path: '/home',

474
yifengdian-company-report/src/views/home.vue
View File

@ -1,96 +1,103 @@
<template> <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">
<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="home">
<div class="scroll-box m-top18"> <div class="header">
<div class="scroll-title flex flex-mean flex-center2" style="padding: 0 26px;"> <div class="tel_box flex flex-center2 flex-end">
<span class="flex1 text-anign-left">品名</span> <span>服务热线：</span><span class="m-right7">0532-58773877</span>
<span class="flex1 text-anign-right">产量 <span>(吨)</span></span> <a :href='`tel:0532-58773877`'>拨打</a>
</div> </div>
<section style="overflow: hidden;"> </div>
<vue-seamless-scroll :class-option="optionHover" :data="vegetableList"> <section class="container">
<div class="scroll-content"> <div class="card">
<div class="flex flex-end item" v-for="(item, index) in vegetableList" <div class="title">
:key="'vegetable' + index" style="padding: 0 26px;"> <span>移风菜篮子 <span>（单位：吨）</span></span>
<!-- <img :src="item.imageList[0]" v-if="item.imageList.length >0"/> <div @click="$router.push('/vegetable')">
<img src="../../assets/images/dyfc.png" v-else alt=""> --> 更多 <img class="img-12" src="@/assets/images/home/right.png" alt="">
<div class="flex1 van-ellipsis text-anign-left">{{ item.vegetableCategory }} </div> </div>
<div class="vegetable-item-row2 van-ellipsis text-anign-right flex1">{{ item.output }}
</div>
</div>
</div>
</vue-seamless-scroll> </div>
</section> <div class="scroll-box m-top18">
</div> <div class="scroll-title flex flex-mean flex-center2" style="padding: 0 26px;">
</div> <span class="flex1 text-anign-left">品名</span>
<div class="card m-top10"> <span class="flex1 text-anign-right">产量 <span>(吨)</span></span>
<div class="title"> </div>
<span>今日市场 <span>（单位：元/公斤）</span></span> <section style="overflow: hidden;">
<div @click="$router.push('/bazaar')"> <vue-seamless-scroll :class-option="optionHover" :data="vegetableList">
更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""> <div class="scroll-content">
</div> <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>
<div class="scroll-box m-top18"> </div>
<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> </vue-seamless-scroll>
</div> </section>
</div>
</div>
<div class="card m-top10">
<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>
</vue-seamless-scroll>
</section>
</div>
</div>
<div class="card m-top10">
<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">
<div class="van-multi-ellipsis--l2 font-bold" style="font-weight: 500;">
市农业农村局开展智慧农业、设施农业建设工作指导
</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">青岛市人民政府</span>
</div>
<span class="gray">2024-03-05</span>
</div>
</div> </div>
</div>
</vue-seamless-scroll>
</section>
</div>
</div>
<div class="card m-top10">
<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">
<div class="van-multi-ellipsis--l2 font-bold" style="font-weight: 500;">
市农业农村局开展智慧农业、设施农业建设工作指导
</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">青岛市人民政府</span>
</div> </div>
</section> <span class="gray">2024-03-05</span>
</div>
</div>
</div>
</section>
<div class="container1">
<div class="movable-area" @touchstart="onMovableStart" @touchmove="onMovableMove" @touchend="onMovableEnd" @click="$router.push('/vegetableDetails')">
<div class="movable-view" :style="{ left: x + 'px', top: y + 'px' }">
<img src="@/assets/images/home/shangbao.gif" class="draggable" alt="draggable image">
</div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -98,48 +105,72 @@ import { mapActions } from 'vuex'
import { prcCollectionListForGov, getVegetableOutputList } from '@/api/test' import { prcCollectionListForGov, getVegetableOutputList } from '@/api/test'
export default { export default {
data() { data() {
return { return {
params: { params: {
Country: 0, Country: 0,
FEndDate: this.$moment().format('yyyy-MM-DD'), FEndDate: this.$moment().format('yyyy-MM-DD'),
FParentPartyID: 1, FParentPartyID: 1,
FPartyName: '青岛移风蔬菜批发市场有限公司', FPartyName: '青岛移风蔬菜批发市场有限公司',
FPartyType: 1010, FPartyType: 1010,
FStartDate: this.$moment().format('yyyy-MM-DD'), FStartDate: this.$moment().format('yyyy-MM-DD'),
FStoreId: 1, FStoreId: 1,
Name: '全部', Name: '全部',
page: 1, page: 1,
pageSize: 10, pageSize: 10,
singletype: 0, singletype: 0,
sort: '' sort: ''
}, },
times: this.$moment().subtract(1, 'days').format('yyyy-MM-DD'), times: this.$moment().subtract(1, 'days').format('yyyy-MM-DD'),
optionHover: { optionHover: {
step: 1, // 数值越大速度滚动越快 step: 1, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右 direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 2000, // 单步运动停止的时间(默认值1000ms) waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
}, },
vegetableList: [ vegetableList: [
], ],
priceList: [ priceList: [
], ],
dayList: [], dayList: [],
tDayList: [] tDayList: [],
}; dragging: false,
}, startX: 0,
created () { startY: 0,
x: 279,
y: 625
};
},
created() {
this.getDayScData() this.getDayScData()
}, },
methods: { methods: {
handelClickEmap () { 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;
}
console.log(this.x, this.y);
},
onMovableEnd() {
this.dragging = false;
},
handelClickEmap() {
this.$EventBus.$emit('switcMapType', 'Emap') this.$EventBus.$emit('switcMapType', 'Emap')
}, },
...mapActions({ ...mapActions({
@ -149,13 +180,13 @@ export default {
set_yfclz: 'SET_YFCLZ', set_yfclz: 'SET_YFCLZ',
set_ldhg: 'SET_LDGH' set_ldhg: 'SET_LDGH'
}), }),
openClz () { openClz() {
this.set_yfclz(true) this.set_yfclz(true)
}, },
openPdf () { openPdf() {
this.set_viewPdf(true) this.set_viewPdf(true)
}, },
deduplicationJs (arr) { deduplicationJs(arr) {
const data = [] const data = []
arr.forEach((item, index) => { arr.forEach((item, index) => {
if ((index + 1) % 2 === 0) { if ((index + 1) % 2 === 0) {
@ -167,22 +198,22 @@ export default {
}, },
getDayScData(data) { getDayScData(data) {
console.log(data,"123"); console.log(data, "123");
console.log(this.params, data ); console.log(this.params, data);
console.log(this.times,"事件"); console.log(this.times, "事件");
prcCollectionListForGov({ ...this.params, ...data }).then((res) => { prcCollectionListForGov({ ...this.params, ...data }).then((res) => {
console.log(res,"XIAOWANG"); console.log(res, "XIAOWANG");
if (res.data.priceslist.length > 0) { if (res.data.priceslist.length > 0) {
this.dayList = res.data.priceslist this.dayList = res.data.priceslist
console.log("day"); console.log("day");
console.log(this.dayList,"day"); console.log(this.dayList, "day");
this.getDayScTData() this.getDayScTData()
} else { } else {
console.log("11"); console.log("11");
this.times = this.$moment(this.times) this.times = this.$moment(this.times)
.subtract(1, 'days') .subtract(1, 'days')
.format('yyyy-MM-DD') .format('yyyy-MM-DD')
console.log( this.times); console.log(this.times);
this.getDayScData({ this.getDayScData({
FEndDate: this.$moment(this.times) FEndDate: this.$moment(this.times)
.subtract(1, 'days') .subtract(1, 'days')
@ -196,24 +227,24 @@ export default {
} }
}) })
getVegetableOutputList().then(res => { getVegetableOutputList().then(res => {
console.log(res,"12651651651"); console.log(res, "12651651651");
this.vegetableList = res.data.data, this.vegetableList = res.data.data,
console.log(res.data.data,"12651651651"); console.log(res.data.data, "12651651651");
console.log(this.vegetableList,"1232432"); console.log(this.vegetableList, "1232432");
}) })
}, },
getDayScTData () { getDayScTData() {
console.log(this.times); console.log(this.times);
prcCollectionListForGov({ prcCollectionListForGov({
...this.params, ...this.params,
FEndDate: this.times, FEndDate: this.times,
FStartDate: this.times FStartDate: this.times
}).then((res1) => { }).then((res1) => {
console.log(res1.data,"15216516516"); console.log(res1.data, "15216516516");
if (res1.data.priceslist.length > 0) { if (res1.data.priceslist.length > 0) {
this.priceList = this.getScData(this.dayList, res1.data.priceslist) this.priceList = this.getScData(this.dayList, res1.data.priceslist)
console.log( this.priceList); console.log(this.priceList);
} else { } else {
this.times = this.$moment(this.times) this.times = this.$moment(this.times)
.subtract(1, 'days') .subtract(1, 'days')
@ -222,7 +253,7 @@ export default {
} }
}) })
}, },
getScData (arr, arr1) { getScData(arr, arr1) {
const dataD = this.deduplicationJs(arr) const dataD = this.deduplicationJs(arr)
const dataTd = this.deduplicationJs(arr1) const dataTd = this.deduplicationJs(arr1)
return dataD.map((item, index) => { return dataD.map((item, index) => {
@ -243,93 +274,118 @@ export default {
}) })
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.home { .home {
position: relative; position: relative;
.header { .header {
height: 135px; height: 135px;
background: url('@/assets/images/home/header.png'); background: url('@/assets/images/home/header.png');
background-size: 100% 100%; background-size: 100% 100%;
.tel_box { .tel_box {
padding: 79px 25px 0; padding: 79px 25px 0;
box-sizing: border-box; box-sizing: border-box;
font-style: italic; font-style: italic;
:nth-child(1) { :nth-child(1) {
color: #cce6fd; color: #cce6fd;
height: 35px; height: 35px;
font-size: 17px; font-size: 17px;
font-family: fangzheng-bold; font-family: fangzheng-bold;
line-height: 39px; line-height: 39px;
} }
:nth-child(2) { :nth-child(2) {
font-weight: 300; font-weight: 300;
font-family: Impact; font-family: Impact;
color: #ffffff; color: #ffffff;
font-size: 25px; font-size: 25px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
} }
a { a {
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
width: 63px; width: 63px;
height: 30px; height: 30px;
border-radius: 17px; border-radius: 17px;
font-style: normal; font-style: normal;
line-height: 30px; line-height: 30px;
background: linear-gradient(45deg, #ffd14d, #f78919); background: linear-gradient(45deg, #ffd14d, #f78919);
} }
}
} }
}
>section { >section {
position: absolute; position: absolute;
top: 110px; top: 110px;
width: calc(100% - 20px); width: calc(100% - 20px);
margin: 0 auto; margin: 0 auto;
} }
.scroll-box { .scroll-box {
height: 225px; height: 225px;
overflow: hidden; overflow: hidden;
.scroll-title { .scroll-title {
height: 45px; height: 45px;
background: url('@/assets/images/home/table_header.png') no-repeat; background: url('@/assets/images/home/table_header.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 0 5px; padding: 0 5px;
box-sizing: border-box; box-sizing: border-box;
color: #0082f0; color: #0082f0;
} }
.scroll-content { .scroll-content {
height: 225px; height: 225px;
overflow: hidden; overflow: hidden;
.item { .item {
padding: 0 5px; padding: 0 5px;
box-sizing: border-box; box-sizing: border-box;
height: 45px; height: 45px;
border: 1px solid #E0E9F5; border: 1px solid #E0E9F5;
border-bottom: none; border-bottom: none;
line-height: 45px; line-height: 45px;
text-align: center; text-align: center;
} }
.vegetable-item-row2 { .vegetable-item-row2 {
color: #ff9805; color: #ff9805;
} }
}
} }
}
}
.container1 {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.movable-area {
width: 100%;
height: 100%;
position: relative;
}
.movable-view {
width: 80px;
height: 80px;
position: absolute;
cursor: move;
}
.draggable {
width: 100%;
height: 100%;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save