最新版

main
zzq 1 year ago
parent c99dec7048
commit 96677cc470

@ -10,6 +10,8 @@
<script src="./js/axios.min.js" ></script>
<script type="text/javascript" src="./webrtcstreamer.js"></script>
<script type="text/javascript" src="./adapter.min.js"></script>
<!-- 引入百度地图的JavaScript API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=kR0zwB5jXUgblnbIU4PhFET2dizP6NfA"></script>
<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script>
<link href="./public/mapboxgl/mapbox-gl.css" rel="stylesheet">
<script src="./mapboxgl/mapbox-gl.js"></script>

@ -8,10 +8,19 @@ export const MAP_SERVER_CONFIG = [
show: true,
image: '/images/echartsimg/mapbottom.png',
children: [
{
id: 1,
parentId: "baseMap",
proxiedUrl: '//dev.virtualearth.net',
name: '必应地图',
type: 'BINGMAP',
state: 1,
image: '/images/baseLayer/Bing.png'
},
{
id: 2,
parentId: "baseMap",
proxiedUrl: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=',
proxiedUrl: 'http://t0.tianditu.gov.cn/img_w/wmts',
name: '天地图',
type: 'TIANDITU',
state: 0,
@ -20,10 +29,10 @@ export const MAP_SERVER_CONFIG = [
{
id: 3,
parentId: "baseMap",
proxiedUrl: 'http://t0.tianditu.gov.cn/cva_c/wmts?tk=',
name: '天地图注记',
type: 'TIANDITU',
state: 0,
proxiedUrl: 'https://a.tile.openstreetmap.org/',
name: 'OSM街道地图',
type: 'OSM',
state: 1,
image: '/images/baseLayer/OSM.png'
}
]

@ -566,6 +566,21 @@ export default defineComponent({
if (imageryLayerCollection.get(1)) {
imageryLayerCollection.remove(imageryLayerCollection.get(1));
}
var TDT_CIA_W =
"http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default.jpg&tk=" +
TDT_KEY;
let labelProvider = new Cesium.WebMapTileServiceImageryProvider({
//
url: TDT_CIA_W,
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
layer: "cia_w",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
})
imageryLayerCollection.addImageryProvider(labelProvider, 0);
switch (type) {
case "BINGMAP":
imageryProvider = new Cesium.BingMapsImageryProvider({
@ -574,34 +589,17 @@ export default defineComponent({
});
break;
case "TIANDITU":
let urlr =
"http://{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
TDT_KEY;
imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
let urlr ='http://{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk='+TDT_KEY
imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
url: urlr,
layer: "name",
layer: 'name',
style: "default",
format: "image/jpeg",
maximumLevel: 18,
tileMatrixSetID: "w",
show: false,
subdomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7", "t0"],
subdomains:['t1','t2','t3','t4','t5','t6','t7','t0']
});
var TDT_CIA_W =
"http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default.jpg&tk=" +
TDT_KEY;
let labelProvider = new Cesium.WebMapTileServiceImageryProvider({
//
url: TDT_CIA_W,
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
layer: "cia_w",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
})
imageryLayerCollection.addImageryProvider(labelProvider, 0);
// imageryProvider = new Cesium.TiandituImageryProvider({url: url, token: TDT_KEY});
break;
@ -636,28 +634,6 @@ export default defineComponent({
imageryLayerCollection.remove(layer);
// STK
// var provider = new Cesium.createWorldTerrain({
// token:"b6585bc41ee16251dbe6b1af64f375d9"
// });
// viewer.terrainProvider = provider;
// var terrainProvider = new Cesium.createWorldTerrain({
// url: "https://t{s}.tianditu.gov.cn/mapservice/swdx",
// key: "b6585bc41ee16251dbe6b1af64f375d9",
// subdomains: "01234567"
// });
// viewer.terrainProvider = terrainProvider;
// var provider = new Cesium.TiandituTerrainProvider({
// token: "b6585bc41ee16251dbe6b1af64f375d9",
// })
// //
// viewer.terrainProvider = provider;
// viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
// url: "http://223.99.16.253:8090/iserver/services/3D-fxdxt/rest/realspace/datas/%40fxdxt",
// isSct: true, //SuperMap iServerisScttrue
// invisibility: true,
// });
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
url: "http://data.mars3d.cn/terrain",
requestWaterMask: false,
@ -675,7 +651,7 @@ export default defineComponent({
viewer.scene.undergroundMode = true;
viewer.scene.globe.show = true;
viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500;
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10;
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 5600000;

@ -1,15 +1,29 @@
<template>
<div class="flex common-box">
<div class="imgbox">
<img class="max-w max-h" v-if="tasData.src" :src="tasData.src" />
<img class="max-w max-h" v-else src="/public/images/goodsno.png" />
<div class="leftbox">
<div class="imgbox">
<img class="max-w max-h" v-if="tasData.src" :src="tasData.src" />
<img class="max-w max-h" v-else src="/public/images/goodsno.png" />
</div>
<div class="flex max-w bottomimg" v-if="tasData.srcArr && tasData.srcArr.length > 2">
<div v-for="(item,index) in tasData.srcArr">
<img v-if="index != tasData.srcArr.length - 1 && index > 0 && index < 6" class="imgs" :src="BaseApi + item" />
</div>
</div>
</div>
<div class="flex labelbox fz-16 column jc-sb">
<div class="ta-l">
<p class="mb-2 p ta-l">{{tasData.label}} - {{tasData.name}}</p>
<span class="flex span ai-c jc-c fz-20 fw-b">{{tasData.name}}</span>
<p class="mb-2 p ta-l">{{tasData.label}}</p>
<p class="mb-2 ta-l fz-18">价格<span class="price fz-18">{{tasData.price}}</span></p>
<p class="mb-2 fz-18 ta-l">合作社名称{{tasData.name}}</p>
<p class="mb-2 fz-18 ta-l">规格<span class="unit fz-16">{{tasData.unit}}</span></p>
<p class="mb-3 fz-18 ta-l">数量<el-input-number v-model="roleInfo.num" :min="1" :max="10000" /> <span class="fz-16"></span></p>
<div class="flex mt-3 jc-sb btn-container">
<div class="flex btnbox btnbox1 ai-c jc-c">立即购买</div>
<div class="flex btnbox btnbox2 ai-c jc-c"><el-icon><ShoppingCart /></el-icon><span class="ml-1"></span></div>
<div class="flex btnbox btnbox3 ai-c jc-c"><span class="ml-1">收藏商品</span></div>
</div>
</div>
<div class="areabox">{{tasData.countyName}}</div>
</div>
</div>
<div class="flex mt-3 common-box column">
@ -22,6 +36,8 @@
<p v-if="tasData.greatName">{{tasData.greatName}}</p>
<p v-if="tasData.value">{{tasData.value}}</p>
<p>商品分类{{tasData.typeName}}</p>
<p>联系人{{tasData.contacts}}</p>
<p>联系方式{{tasData.phone}}</p>
<p>所属县区{{tasData.county}}</p>
<p v-if="tasData.town">{{tasData.town}}</p>
<p>所属合作社{{tasData.name}}</p>
@ -32,13 +48,18 @@
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import { BASE_API } from "/public/config/server.js";
export default defineComponent({
name: "Index",
components: {},
props: ["lisdata"],
setup(props, context) {
let data = reactive({
tasData: props.lisdata
tasData: props.lisdata,
BaseApi: BASE_API,
roleInfo:{
num: 1
}
});
watch(
() => props.lisdata,
@ -74,12 +95,25 @@ export default defineComponent({
border-radius: 6px;
padding: 34px 20px;
}
.leftbox{
width: 663px;
}
.imgbox{
width: 663px;
height: 403px;
padding: 10px;
border: 1px solid #DEE2E7;
}
.bottomimg{
height: 100px;
width: 100%;
padding: 10px;
}
.bottomimg .imgs{
width: 120px;
height: 100px;
margin-right: 20px;
}
.labelbox{
width: 666px;
margin-left: 35px;
@ -94,14 +128,15 @@ export default defineComponent({
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.labelbox .span{
display: inline-block;
height: 52px;
line-height: 52px;
padding: 0 10px;
background: #F4F5F9;
border-radius: 7px;
color: #0E5EF9;
.labelbox .unit{
padding: 4px 10px;
border-radius: 3px;
color: #FE4600;
border: 1px solid #FE4600;
}
.labelbox .price{
color: #FE4600;
font-weight: bold;
}
.areabox{
text-align: left;
@ -126,4 +161,27 @@ export default defineComponent({
.detailbox p{
margin-top: 30px;
}
.btn-container{
margin-top: 100px;
}
.btnbox{
width: 30%;
height: 50px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
.btnbox1{
background: #FEE7D5;
color: #FE4600;
}
.btnbox2{
background: #FE4600;
color: #fff;
}
.btnbox3{
background: #fff;
color: #2C3543;
border: 1px solid #eee;
}
</style>

@ -23,7 +23,7 @@
</div>
</div>
<div class="mt-3 common-box">
<div class="flex wrap jc-sb">
<div class="flex wrap">
<div class="mb-2 goodsli-common" v-for="item in roleInfo.goodsData" @click="tabLiClick(item)">
<div class="img">
<img class="max-w max-h" v-if="item.src" :src="item.src" />
@ -157,7 +157,7 @@ export default defineComponent({
_input_83f2bb43d50d4f8facb3c8d046acfcf9: data.roleInfo.inputValue,
}
let param = {
id: window.goodsId || "64bf1a9b-528f-4337-91e0-81a95f6524f0",
id: window.goodsId || "2b8e8557-689a-45dc-b177-cfffe52af844",
mid: window.goodsMid || "074d0217-2c28-4c32-be54-24dbe010b9b6",
paginationInputDto: {
page: data.roleInfo.currentPage,
@ -174,11 +174,16 @@ export default defineComponent({
data.roleInfo.goodsData.push({
name: item._input_80b4fa2f7f7546fab7ef300e2efeaa7a,
src: BASE_API + item._image_upload_6dac9b2e6816498bafdafdc2afc0dc53.split(',')[0] || null,
srcArr: item._image_upload_6dac9b2e6816498bafdafdc2afc0dc53.split(',') || [],
time: item._modify_time_9fbd11b18c9d41629a55f8ff37b5109d,
label: item._input_83f2bb43d50d4f8facb3c8d046acfcf9,
details: item._input_text_area_be9296152c444608ae874a808c242d63,
county: item.county,
town: item.town,
contacts: item.contacts,
phone: item.phone,
price: item.price,
unit: item.unit,
type: item._select_8f4db93a317145c788c978c1365523c5,
greatName: item.greatName,
value: item.value
@ -191,6 +196,10 @@ export default defineComponent({
label: item._input_83f2bb43d50d4f8facb3c8d046acfcf9,
details: item._input_text_area_be9296152c444608ae874a808c242d63,
county: item.county,
price: item.price,
unit: item.unit,
contacts: item.contacts,
phone: item.phone,
type: item._select_8f4db93a317145c788c978c1365523c5,
greatName: item.greatName,
value: item.value
@ -220,6 +229,10 @@ export default defineComponent({
height: 230px;
border: 1px solid #DEE2E7;
cursor: pointer;
margin-right: 1.75%;
}
.goodsli-common:nth-child(4n){
margin-right: 0;
}
.goodsli-common .img{
height: 169px;

@ -12,7 +12,7 @@
</div>
<div class="flex section-container jc-c" >
<!-- 首页 -->
<HomePage v-if="navsIndex==0" @moreclick="moreclick" @godetails="godetails" @newsClick="newsClick" @bfcgClick="bfcgClick"></HomePage>
<HomePage v-if="navsIndex==0" @moreclick="moreclick" @hzsmoreClick="hzsmoreClick" @godetails="godetails" @godetailsMap="godetailsMap" @newsClick="newsClick"></HomePage>
<!-- 商品 -->
<GoodsPage :detail="roleInfo.listDetailData" v-if="navsIndex==1"></GoodsPage>
<!-- 供需 -->
@ -22,7 +22,9 @@
<!-- 新闻 -->
<NewsPage :lisdata="roleInfo.newsDetail" v-if="navsIndex==100"></NewsPage>
<!-- 帮扶成果下级 -->
<goodsWay v-if="navsIndex==200"></goodsWay>
<bfMapDetail :lisdata="roleInfo.bfTabDetail" v-if="navsIndex==200"></bfMapDetail>
<bfListDetail @liclick="bfliclick" v-if="navsIndex==300"></bfListDetail>
<!-- -->
</div>
<!-- <div class="footer-container">
<footerBox></footerBox>
@ -40,6 +42,8 @@ import NewsPage from "../NewsPage/index.vue";
import footerBox from "./widget/footer.vue";
import mapBox from "../Map/index.vue";
import goodsWay from "../goodsWay/index.vue";
import bfMapDetail from "../bfMapDetail/index.vue";
import bfListDetail from "../bfMapDetail/list.vue";
export default defineComponent({
name: "Index",
@ -51,7 +55,9 @@ export default defineComponent({
FinancialService,
NewsPage,
footerBox,
mapBox
mapBox,
bfMapDetail,
bfListDetail
},
setup() {
let data = reactive({
@ -59,7 +65,8 @@ export default defineComponent({
navsArr: ["首页","商品","供需", "财务系统","金融服务","地图大屏"],
roleInfo:{
listDetailData:'',
newsDetail: ''
newsDetail: '',
bfTabDetail: ''
}
});
const route = useRoute();
@ -100,9 +107,6 @@ export default defineComponent({
data.roleInfo.newsDetail = e
data.navsIndex = 100
},
bfcgClick(){
data.navsIndex = 200
},
moreclick(e){
if(e == "maps"){
window.open('/#/map', '_blank')
@ -118,7 +122,6 @@ export default defineComponent({
}
},
godetails(e){
console.log('oooobbb', e)
data.navsIndex = e.index
data.roleInfo.listDetailData = e.record
router.push({
@ -128,6 +131,17 @@ export default defineComponent({
type: 2,
}
})
},
godetailsMap(e){
data.roleInfo.bfTabDetail = e.record
data.navsIndex = 200
},
hzsmoreClick(){
data.navsIndex = 300
},
bfliclick(e){
data.roleInfo.bfTabDetail = e
data.navsIndex = 200
}
};
return {

@ -6,7 +6,7 @@
</div>
<div class="flex mt-3 common-box" style="padding: 40px 20px;">
<div class="swiper-container">
<el-carousel height="550px">
<el-carousel>
<el-carousel-item v-for="item in roleInfo.newsImgData" :key="item">
<img class="max-w max-h" :src="item" />
</el-carousel-item>
@ -30,9 +30,41 @@
</div>
</div>
</div>
<div class="mt-3 common-box">
<div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
<span class="commontitle">商品展示</span>
<span class="commontitle" @click="supplyReload" >合作社风采</span>
<!-- <div class="flex flex-1 ml-3">
<div class="ml-2 cursor supplyspan" v-for="(item,index) in roleInfo.supplyArr" :class="roleInfo.supplyIndex==index?'red':''" @click="supplyClick(item,index)">
{{item.name}}
</div>
</div> -->
<spam class="more-common" @click="hzsmoreClick">+</spam>
</div>
<div class="line-common"></div>
<div class="flex wrap">
<div class="mapimg pos-r max-h">
<MapBox @godetails="godetailsMap"></MapBox>
</div>
<div class="flex column flex-1">
<div class="flex mb-2 max-w cursor serveli" v-for="item in roleInfo.servesData" @click="godetailsMapRIght(item)">
<div style="width: 150px;">
<img class="max-w max-h" v-if="item.src" :src="item.src" />
<img class="max-w max-h" v-else src="/public/images/serverno.png" />
</div>
<div class="flex flex-1 max-h column jc-sb label">
<p class="fz-18 fw-b ta-l">{{ item.name }}</p>
<p class="fz-16">{{ item.type }}</p>
</div>
<div class="viewDetail">查看详情<el-icon><Right /></el-icon></div>
</div>
</div>
</div>
</div>
<div class="mt-3 common-box">
<div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
<span class="commontitle">农发优品</span>
<spam class="more-common" @click="moreClick('1')">+</spam>
</div>
<div class="line-common"></div>
@ -46,14 +78,20 @@
</div>
</div>
</div>
<div class="mt-3 common-box">
<div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
<span class="commontitle">农资服务</span>
<span class="commontitle" @click="supplyReload"></span>
<div class="flex flex-1 ml-3">
<div class="ml-2 cursor supplyspan" v-for="(item,index) in roleInfo.supplyArr" :class="roleInfo.supplyIndex==index?'red':''" @click="supplyClick(item,index)">
{{item.name}}
</div>
</div>
<spam class="more-common" @click="moreClick('2')">+</spam>
</div>
<div class="line-common"></div>
<div class="flex wrap jc-sb">
<div class="flex mb-2 materialli-common cursor" v-for="item in roleInfo.servesData" @click="godetails(item, '2')">
<div class="flex wrap">
<div class="flex mb-2 materialli-common cursor" v-for="item in roleInfo.societyServesData" @click="godetails(item, '2')">
<div style="width: 150px;">
<img class="max-w max-h" v-if="item.src" :src="item.src" />
<img class="max-w max-h" v-else src="/public/images/serverno.png" />
@ -66,6 +104,7 @@
</div>
</div>
</div>
<div class="mt-3 common-box">
<div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
<span class="commontitle">金融信息</span>
@ -73,47 +112,38 @@
</div>
<div class="line-common"></div>
<div class="flex mb-3 jrimgbox wrap jc-sb">
<div class="financialicommon" v-for="item in roleInfo.financialData" @click="godetails(item, '4')">
<div class="fz-26 fw-b">{{item.name}}</div>
<div class="financialicommon fz-18" v-for="item in roleInfo.financialData" @click="godetails(item, '4')">
<div class="fw-b">{{item.name}}</div>
<div class="mt-2 lilv">贷款利率</div>
<div class="mt-2 lilvnum">{{ item.nhll }}</div>
<div class="mt-2">担保方式<div class="typejr">{{ item.dbfs }}</div></div>
<div class="mt-2 fz-18">额度{{ item.rzed }}</div>
<div class="mt-2">额度{{ item.rzed }}</div>
</div>
</div>
</div>
<div class="flex mt-3 common-box map-container column">
<!-- <div class="flex mt-3 common-box map-container column">
<div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
<span class="commontitle">帮扶成果</span>
</div>
<div class="line-common"></div>
<div class="flex map-box ai-c jc-c">
<div class="mapimg pos-r max-h">
<!-- <div v-for="item in roleInfo.pointArr1">
<div class="point background1 pos-a " :style="{'left': item.left + 'px', 'top': item.top + 'px'}"></div>
</div>
<div v-for="item in roleInfo.pointArr2">
<div class="point background2 pos-a " :style="{'left': item.left + 'px', 'top': item.top + 'px'}"></div>
</div>
<div v-for="item in roleInfo.pointArr3">
<div class="point background3 pos-a " :style="{'left': item.left + 'px', 'top': item.top + 'px'}"></div>
</div>
<img class="max-w" src="/public/images/mapimg.png" /> -->
<MapBox></MapBox>
</div>
<div class="flex cgbox column ta-l fz-24 fw-b">
<div class="mt-3 mb-3 ta-l">
<span class="spanbf color1">数字乡村公司</span>
<span class="spanbf cursor color1" @click="opWindows"></span>
</div>
<div class="mt-3 mb-3 ta-l">
<span class="spanbf cursor color2" @click="bfcgClick()"></span>
<span class="spanbf cursor color2" @click="bfcgClick"></span>
</div>
<div class="mt-3 mb-3 ta-l">
<span class="spanbf color3">东蒙全流程服务型帮扶模式</span>
</div>
</div>
</div>
</div>
</div> -->
</div>
</template>
<script>
@ -134,24 +164,20 @@
areasArr:["市总平台", "兰山区", "罗庄区", "河东区", "郯城县", "兰陵县", "莒南县", "沂水县", "蒙阴县", "平邑县", "费县", "沂南县", "临沭县", "高新区", "沂河新区"],
goodsData:[],
servesData:[],
societyServesData: [],
navsArr: [],
areasOption: [],
newsData:[],
newsImgData:[],
financialData: [],
pointArr1:[
{left: 260 , top: 500}, {left: 239 , top: 520}, {left: 440 , top: 470}, {left: 430 , top: 530}, {left: 460 , top: 510},
supplyArr: [
{ name: "农机", value: "1" },
{ name: "农技", value: "2" },
{ name: "农资", value: "3" },
{ name: "管理", value: "4" },
],
pointArr2:[
{left: 260 , top: 460}, {left: 370 , top: 530}, {left: 620 , top: 510}, {left: 280 , top: 703}, {left: 230 , top: 677},
{left: 240 , top: 650}, {left: 270 , top: 690}, {left: 280 , top: 686}, {left: 310 , top: 680}, {left: 280 , top: 610},
{left: 303 , top: 660}, {left: 233 , top: 690}, {left: 338 , top: 604}, {left: 358 , top: 633}, {left: 270 , top: 300},
{left: 410 , top: 400}, {left: 380 , top: 370}, {left: 367 , top: 411}, {left: 347 , top: 352}, {left: 370 , top: 320},
{left: 340 , top: 310}, {left: 330 , top: 295}, {left: 446 , top: 341}, {left: 437 , top: 232},
],
pointArr3:[
{left: 224 , top: 510}
]
supplyIndex: null,
supplySearch: null,
}
});
onMounted(() => {
@ -169,11 +195,24 @@
methods.getNewsData()
methods.getGoodsData()
methods.getServersData()
methods.getServersData1()
methods.getFiancialData()
methods.getCodeType()
methods.getAreaCode()
});
let methods = {
supplyClick(item,index){
data.roleInfo.supplyIndex = index
data.roleInfo.supplySearch = item.value
methods.getServersData1()
},
supplyReload(){
if(data.roleInfo.supplySearch){
data.roleInfo.supplyIndex = null
data.roleInfo.supplySearch = null
methods.getServersData1()
}
},
navsClick(item,index){
let depeArr = LinYiDeptJson.RECORDS
if(!item.pId){
@ -193,6 +232,7 @@
}
methods.getGoodsData(item)
methods.getServersData(item)
methods.getServersData1(item)
},
navsAllClick(){
data.roleInfo.navsIndex = null
@ -208,6 +248,7 @@
})
methods.getGoodsData()
methods.getServersData()
methods.getServersData1()
},
//
getCodeType(){
@ -252,7 +293,7 @@
mid: window.newsMid || "35861221-3686-47be-9703-a55c986a14f6",
paginationInputDto: {
page: 1,
rows: 6
rows: 4
},
}
data.roleInfo.newsData = []
@ -287,7 +328,7 @@
}
}
let param = {
id: window.goodsId || "64bf1a9b-528f-4337-91e0-81a95f6524f0",
id: window.goodsId || "2b8e8557-689a-45dc-b177-cfffe52af844",
mid: window.goodsMid || "074d0217-2c28-4c32-be54-24dbe010b9b6",
paginationInputDto: {
page: 1,
@ -303,11 +344,16 @@
data.roleInfo.goodsData.push({
name: item._input_80b4fa2f7f7546fab7ef300e2efeaa7a,
src: BASE_API + item._image_upload_6dac9b2e6816498bafdafdc2afc0dc53.split(',')[0] || null,
srcArr: item._image_upload_6dac9b2e6816498bafdafdc2afc0dc53.split(','),
time: item._modify_time_9fbd11b18c9d41629a55f8ff37b5109d,
label: item._input_83f2bb43d50d4f8facb3c8d046acfcf9,
details: item._input_text_area_be9296152c444608ae874a808c242d63,
county: item.county,
town: item.town,
price: item.price,
unit: item.unit,
contacts: item.contacts,
phone: item.phone,
type: item._select_8f4db93a317145c788c978c1365523c5,
greatName: item.greatName,
value: item.value
@ -321,6 +367,10 @@
details: item._input_text_area_be9296152c444608ae874a808c242d63,
county: item.county,
town: item.town,
price: item.price,
unit: item.unit,
contacts: item.contacts,
phone: item.phone,
type: item._select_8f4db93a317145c788c978c1365523c5,
greatName: item.greatName,
value: item.value
@ -331,7 +381,9 @@
},
//
getServersData(val){
let serach = {}
let serach = {
type1: 1
}
if(val){
if(val.pId){
serach.town = val.name
@ -340,7 +392,47 @@
}
}
let param = {
id: window.supplyId || "c3f59b58-168d-4663-9dbc-3b6616e46f08",
// id: window.supplyId || "b67f0631-8a4d-4093-99cb-54f51be9499f",
// mid: window.supplyMid || "196514f9-ba78-47f3-b4ce-31e4ed04f488",
id: "cf16f568-4bb8-43b9-8e49-b23105e70bda",
mid: "9c027ef9-cc04-4006-831d-e799982f6435",
paginationInputDto: {
page: 1,
rows: 4
},
queryJson: JSON.stringify(serach)
}
data.roleInfo.servesData = []
postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
let rel = res.data.result.items
rel.forEach(item =>{
if (item.imgsrc) {
item.src = BASE_API + item.imgsrc.split(",")[0] || null,
item.srcArr = item.imgsrc.split(',')
}
if (item.imgsrc1) {
item.src1 = BASE_API + item.imgsrc1.split(",")[0] || null,
item.srcArr1 = item.imgsrc1.split(',')
}
data.roleInfo.servesData.push(item)
})
})
},
getServersData1(val){
let serach = {
type1: data.roleInfo.supplyIndex + 1
}
if(val){
if(val.pId){
serach.town = val.name
}else{
serach.county = val.name
}
}
let param = {
id: window.supplyId || "b67f0631-8a4d-4093-99cb-54f51be9499f",
mid: window.supplyMid || "196514f9-ba78-47f3-b4ce-31e4ed04f488",
paginationInputDto: {
page: 1,
@ -348,42 +440,25 @@
},
queryJson: JSON.stringify(serach)
}
data.roleInfo.servesData = []
data.roleInfo.societyServesData = []
postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
let rel = res.data.result.items
rel.forEach(item =>{
if (item._image_upload_6ef4229fad0f4d4ba56561d26d71c357) {
data.roleInfo.servesData.push({
name: item._input_3892f6e0bb6146aaad369b9e7fb74c25,
src:
BASE_API +
item._image_upload_6ef4229fad0f4d4ba56561d26d71c357.split(
","
)[0] || null,
time: item._modify_time_68d02ed08d66492ba116fb8e682f29cd,
owerhzs: item._input_30c6c60ea8c040efa8b16190a89c83db,
details: item._input_text_area_41db31bf108a4cca909e498a59bfb26d,
county: item.county,
town: item.town,
type: item._select_58acbd1176e64cc1829fc15beae082e5,
type1: item._radio_group_d4dc9d5ca439493db18d34a4c95d24dd,
});
} else {
data.roleInfo.servesData.push({
name: item._input_3892f6e0bb6146aaad369b9e7fb74c25,
src: null,
time: item._modify_time_68d02ed08d66492ba116fb8e682f29cd,
owerhzs: item._input_30c6c60ea8c040efa8b16190a89c83db,
details: item._input_text_area_41db31bf108a4cca909e498a59bfb26d,
county: item.county,
town: item.town,
type: item._select_58acbd1176e64cc1829fc15beae082e5,
type1: item._radio_group_d4dc9d5ca439493db18d34a4c95d24dd,
});
if (item.imagesrc) {
item.src = BASE_API + item.imagesrc.split(",")[0] || null,
item.srcArr = item.imagesrc.split(',')
}
if (item.imagesrc1) {
item.src1 = BASE_API + item.imagesrc1.split(",")[0] || null,
item.srcArr1 = item.imagesrc1.split(',')
}
data.roleInfo.societyServesData.push(item)
})
})
},
//
getFiancialData(){
let param = {
@ -409,8 +484,11 @@
newsClick(e){
context.emit('newsClick', e)
},
bfcgClick(){
context.emit('bfcgClick')
// bfcgClick(){
// context.emit('bfcgClick')
// },
opWindows(){
window.open("https://yqgj.huafeng.cloud/")
},
godetails(e,i){
let emitData = e
@ -421,32 +499,48 @@
}
})
}
if( i==2 ){
let navsType = [
{ name: "物资供需", value: "1" },
{ name: "服务供需", value: "2" },
{ name: "农机", value: "1" },
{ name: "农技", value: "2" },
{ name: "农资", value: "3" },
{ name: "管理", value: "4" },
]
let navsType1 = [
{ name: "提供", value: "1" },
{ name: "需求", value: "2" },
]
navsType1.forEach(item =>{
navsType.forEach(item =>{
if(item.value == e.type1){
emitData.Type1Name = item.name
}
})
navsType.forEach(item =>{
if(item.value == e.type){
emitData.TypeName = item.name
}
})
})
}
if(e.type1 == 4){
if(e.linksrc){
window.open(e.linksrc)
}
if(e.manageupload){
window.open(BASE_API + e.manageupload.split(',')[0])
}
}else{
let obj = {
index: i,
record: emitData
}
context.emit('godetails', obj)
}
},
hzsmoreClick(){
context.emit('hzsmoreClick')
},
godetailsMap(obj){
context.emit('godetailsMap', obj)
},
godetailsMapRIght(item){
let obj = {
index: i,
record: emitData
}
context.emit('godetails', obj)
index: '2',
record: item,
}
context.emit('godetailsMap', obj)
}
};
return {
@ -466,13 +560,13 @@
padding: 20px;
}
.swiper-container{
width: 60%;
height: 550px;
border: 1px solid #DEE2E7;
width: 40%;
height: 350px;
padding: 5px;
}
.news-container{
width: 40%;
width: 60%;
}
.news-title{
font-size: 18px;
@ -496,11 +590,11 @@
line-height: 30px;
}
.news-li .labelsli .label{
width: 365px;
width: 525px;
display: inline-block;
font-weight: 550;
line-height: 30px;
font-size: 20px;
font-size: 18px;
text-align: left;
overflow: hidden;
white-space: normal;
@ -554,6 +648,10 @@
border-radius: 8px;
border: 1px solid #DEE2E7;
overflow: hidden;
margin-right: 1.7%;
}
.materialli-common:nth-child(3n){
margin-right: 0;
}
.materialli-common .img{
width: 150px;
@ -627,7 +725,10 @@
border-radius: 10px;
}
.mapimg{
width: 60%;
width: 65%;
height: 800px;
background: #fff;
position: relative;
}
.cgbox{
width: 35%;
@ -656,7 +757,6 @@
}
.financialicommon .lilv{
color: #546e7a;
font-size: 18px;
}
.financialicommon .lilvnum{
color: #fd6040;
@ -707,4 +807,37 @@
background: linear-gradient( 270deg, #EAE6E6 0%, #F6F4F4 100%);
margin-bottom: 25px;
}
.red{
color: red;
}
.supplyspan{
padding: 5px 15px;
border-radius: 8px;
border: 1px solid #dfdfdf;
}
.serveli{
height: 150px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #DEE2E7;
overflow: hidden;
}
.serveli .img{
width: 150px;
height: 150px;
}
.serveli .label{
align-items: flex-start;
padding: 25px 20px;
height: calc(100% - 50px);
}
.serveli .viewDetail{
width: 45px;
background: #D1241E;
font-size: 15px;
color: #fff;
line-height: 45px;
writing-mode: vertical-rl;
letter-spacing: 8px;
}
</style>

@ -1,5 +1,5 @@
<template>
<div class="max-w max-h hidden" >
<div class="hidden max-w max-h" >
<div class="max-w" style="height: calc(100% + 35px);" id="distribution_map"></div>
</div>
@ -8,6 +8,8 @@
import { defineComponent, reactive, onMounted, toRefs } from "vue";
import xianjiegeojson from "/public/config/临沂市县界.json";
import { postMethodCommon, getMethodCommon } from "../../../api/common";
import axios from 'axios'
import { BASE_API } from "/public/config/server.js";
export default defineComponent({
components: {
@ -30,7 +32,7 @@ export default defineComponent({
"sources": {},
"layers": []
},
zoom: 8,
zoom: 7.8,
center: [ 118.33206615680547, 35.280140501608024 ],
});
data.mapBox = map
@ -177,50 +179,203 @@ export default defineComponent({
},
getListData(){
let param = {
id: "03e356f2-dca5-4b62-884b-c42f69c7c881",
// id: "a31215f5-e2eb-4bd7-ad6b-f8fd08bd82c7",
// mid: "9c027ef9-cc04-4006-831d-e799982f6435",
id: "cf16f568-4bb8-43b9-8e49-b23105e70bda",
mid: "9c027ef9-cc04-4006-831d-e799982f6435",
paginationInputDto: {
page: 1,
rows: 1000
rows: 10000
}
}
postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
let rel = res.data.result.items
console.log('000000000')
console.log('000000000', rel)
let popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false,
});
let socketIngLatArr = []
let socketData = JSON.parse(localStorage.getItem("socketIngLatArr"));
if(socketData){
socketIngLatArr = socketData
}
console.log('socketData', socketData)
if(rel){
rel.forEach(item =>{
let el = document.createElement('div');
el.setAttribute("data-caseId", item.name);
let uavimgCon = document.createElement("div");
if(item.type=="数字乡村公司"){
uavimgCon.className = "background1";
}else if(item.type=="订单服务"){
uavimgCon.className = "background2";
}else if(item.type=="东蒙全流程服务"){
uavimgCon.className = "background3";
}
uavimgCon.className = "background2";
// if(item.type1=="1"){
// uavimgCon.className = "2";
// }else if(item.type1==""){
// uavimgCon.className = "background2";
// }else if(item.type1=="3"){
// uavimgCon.className = "background3";
// }else if(item.type1=="4"){
// avimgCon.className = "background4";
// }
uavimgCon.appendChild(el);
el.className = "uavmarker";
el.onclick = function(){
let str = "单位:" + item.name + "<br><br>地址:" + item.address + "<br><br>需求:" + item.type;
popup.setLngLat([item.lng, item.lat]).setHTML("<p style='color:#333;font-weight:bold;'>" + str + "</p>").addTo(data.mapBox);
// el.onclick = function(){
// let str = "" + item.name + "<br><br>" + item.address + "<br><br>" + item.type + "<br><br>" + item.descript;
// popup.setLngLat([item.lng, item.lat]).setHTML("<p style='color:#333;font-weight:bold;'>" + str + "</p>").addTo(data.mapBox);
// }
if (item.imgsrc) {
item.src = BASE_API + item.imgsrc.split(",")[0] || null,
item.srcArr = item.imgsrc.split(',')
}
if (item.imgsrc1) {
item.src1 = BASE_API + item.imgsrc1.split(",")[0] || null,
item.srcArr1 = item.imgsrc1.split(',')
}
let pointArr = []
let keyValue = null
if(item.address){
keyValue = item.address
}else{
keyValue = item.town
}
if(socketData && socketData.length>0){
socketData.forEach(val =>{
if(val.name == item.name){
pointArr = val.latlng
}
})
}else{
const myGeo = new BMap.Geocoder();
myGeo.getPoint(keyValue, (point) => {
if (point) {
//
pointArr.push(point.lng,point.lat)
pointArr = pointArr.filter((item, index) => {
return pointArr.indexOf(item) === index;
});
socketIngLatArr.push({
latlng: pointArr,
name: item.name,
location: keyValue
})
} else {
//
console.log('地理编码失败');
}
}, '全国');
// let url = "https://restapi.amap.com/v5/place/text?&key=3dc91e9d5de90f97cbb8597dd5c7c9d5&keywords=" + keyValue
// axios.get(url).then((result) => {
// console.log('result', result)
// if(result.data.pois[0]){
// let latlng = result.data.pois[0].location.split(',')
// console.log('latlng', latlng)
// socketIngLatArr.push({
// latlng: latlng,
// name: item.name,
// location: keyValue
// })
// pointArr = latlng
// }
// })
// .catch((err) => {
// //
// console.log('err', err);
// });
}
setTimeout(()=>{
if(pointArr.length == 0){
// const point = methods.getPointByAddress(keyValue);
const myGeo = new BMap.Geocoder();
myGeo.getPoint(keyValue, (point) => {
if (point) {
//
pointArr.push(point.lng,point.lat)
pointArr = pointArr.filter((item, index) => {
return pointArr.indexOf(item) === index;
});
socketIngLatArr.push({
latlng: pointArr,
name: item.name,
location: keyValue
})
} else {
//
console.log('地理编码失败');
}
}, '全国');
// let url = "https://restapi.amap.com/v5/place/text?&key=3dc91e9d5de90f97cbb8597dd5c7c9d5&keywords=" + keyValue
// axios.get(url).then((result) => {
// console.log('result', result)
// if(result.data.pois[0]){
// let latlng = result.data.pois[0].location.split(',')
// console.log('latlng', latlng)
// socketIngLatArr.push({
// latlng: latlng,
// name: item.name,
// location: keyValue
// })
// pointArr = latlng
// }
// })
// .catch((err) => {
// //
// console.log('err', err);
// });
}
},500)
el.onmouseover = function(){
let str = "单位名称:" + item.name + "<br><br>地址:" + item.address + "<br><br>联系人:" + item.contacts + "<br><br>联系方式:" + item.phone + "<br><br>简介:" + item.descript;
popup.setLngLat(pointArr).setHTML("<p style='color:#333;font-weight:bold;'>" + str + "</p>").addTo(data.mapBox);
}
let coordinate = [item.lng, item.lat];
}
el.onmouseleave = function(){
popup.remove();
}
el.onclick = function(){
console.log('iii', item)
let obj = {
index: '2',
record: item,
}
context.emit('godetails', obj)
}
setTimeout(()=>{
console.log('pointArr', pointArr)
let coordinate = pointArr;
let UAVmarker = new mapboxgl.Marker(uavimgCon).setLngLat(coordinate);
UAVmarker.addTo(data.mapBox)
let UAVmarker = new mapboxgl.Marker(uavimgCon).setLngLat(coordinate);
UAVmarker.addTo(data.mapBox)
},1000)
})
setTimeout(()=>{
console.log('socketIngLatArr', socketIngLatArr)
const mapa = new Map();
const newArr = socketIngLatArr.filter(v => !mapa.has(v.name) && mapa.set(v.name, v));
localStorage.setItem("socketIngLatArr", JSON.stringify(newArr));
},2000)
}
})
}
},
//
getPointByAddress(address) {
//
const myGeo = new BMap.Geocoder();
return new Promise((resolve, reject) => {
//
});
},
};
return {
...data,
@ -255,4 +410,10 @@ export default defineComponent({
border-radius: 10px;
background: #F5CE06;
}
.background4{
width: 10px;
height: 10px;
border-radius: 10px;
background: #47C4BB;
}
</style>

@ -1,13 +1,30 @@
<template>
<div class="flex common-box">
<div class="imgbox">
<!-- <div class="imgbox">
<img class="max-w max-h" v-if="tasData.src" :src="tasData.src" />
<img class="max-w max-h" v-else src="/public/images/serverno.png" />
</div> -->
<div class="leftbox">
<div class="imgbox">
<img class="max-w max-h" v-if="tasData.src" :src="tasData.src" />
<img class="max-w max-h" v-else src="/public/images/serverno.png" />
</div>
<div class="flex max-w bottomimg" v-if="tasData.srcArr && tasData.srcArr.length > 2">
<div v-for="(item,index) in tasData.srcArr">
<img v-if="index != tasData.srcArr.length - 1 && index > 0 && index < 6" class="imgs" :src="BaseApi + item" />
</div>
</div>
<div class="flex max-w bottomimg" v-if="tasData.srcArr1 && tasData.srcArr1.length > 2">
<div v-for="(item,index) in tasData.srcArr1">
<img v-if="index != tasData.srcArr.length - 1 && index > 0 && index < 6" class="imgs" :src="BaseApi + item" />
</div>
</div>
</div>
<div class="flex labelbox fz-16 column jc-sb">
<div class="ta-l">
<p class="mb-2 p ta-l">{{tasData.TypeName}} - {{tasData.name}}</p>
<span class="flex span ai-c jc-c fz-20 fw-b">{{tasData.name}}</span>
<p class="mb-2 p ta-l">{{tasData.name}}</p>
<span v-if="tasData.owerhzs" class="flex span ai-c jc-c fz-20 fw-b">{{tasData.owerhzs}}</span>
<span class="flex ai-c jc-c fz-18 fw-b">{{tasData.details}}</span>
</div>
<div class="areabox">{{tasData.countyName}}</div>
</div>
@ -20,6 +37,8 @@
<div class="mt-2 detailbox">
<p>名称{{tasData.name}}</p>
<p>类型{{tasData.Type1Name}}</p>
<p>联系人{{tasData.contacts}}</p>
<p>联系方式{{tasData.phone}}</p>
<p>供需类型{{tasData.TypeName}}</p>
<p>所属县区{{tasData.county}}</p>
<p v-if="tasData.town">{{tasData.town}}</p>
@ -28,16 +47,32 @@
<p>发布时间{{tasData.time}}</p>
</div>
</div>
<div class="flex mt-3 common-box column" v-if="tasData.video">
<div class="flex titlebox ai-c">
<span></span>
<div class="fz-24 fw-b">视频</div>
</div>
<div class="flex mt-2 detailbox jc-c">
<video id="videoId" width="1000" height="600" autoplay controls >
<!-- .mp4格式的浏览器都能播 -->
<source :src="BaseApi + tasData.video.split(',')[0]" id="sourceId" />
不支持video,建议升级浏览器
</video>
</div>
</div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import { BASE_API } from "/public/config/server.js";
export default defineComponent({
name: "Index",
components: {},
props: ["lisdata"],
setup(props, context) {
let data = reactive({
BaseApi: BASE_API,
tasData: props.lisdata
});
watch(
@ -74,12 +109,25 @@ export default defineComponent({
border-radius: 6px;
padding: 34px 20px;
}
.leftbox{
width: 663px;
}
.imgbox{
width: 663px;
height: 403px;
padding: 10px;
border: 1px solid #DEE2E7;
}
.bottomimg{
height: 100px;
width: 100%;
padding: 10px;
}
.bottomimg .imgs{
width: 120px;
height: 100px;
margin-right: 20px;
}
.labelbox{
width: 666px;
margin-left: 35px;

@ -1,14 +1,14 @@
<template>
<div class="flex jc-sb">
<div class="flex">
<div
<!-- <div
class="mr-2 fz-18 cursor"
:class="roleInfo.navsIndex == index ? 'navsactive' : ''"
@click="navsClick(index)"
v-for="(item, index) in roleInfo.navsArr"
>
{{ item.name }}
</div>
</div> -->
</div>
<div class="flex">
<el-input
@ -34,7 +34,7 @@
</div>
</div>
<div class="mt-3 common-box">
<div class="flex wrap jc-sb">
<div class="flex wrap">
<div
class="mb-2 goodsli-common"
v-for="item in roleInfo.goodsData"
@ -80,8 +80,9 @@ export default defineComponent({
],
navsTypeValue: null,
navsTypeOption: [
{ name: "提供", value: "1" },
{ name: "需求", value: "2" },
{ name: "农产品", value: "1" },
{ name: "农机", value: "2" },
{ name: "农技", value: "3" },
],
currentPage: 1,
pageSize: 8,
@ -147,7 +148,7 @@ export default defineComponent({
_input_3892f6e0bb6146aaad369b9e7fb74c25: data.roleInfo.inputValue
};
let param = {
id: window.supplyId || "c3f59b58-168d-4663-9dbc-3b6616e46f08",
id: window.supplyId || "24f98b09-8352-456f-b9dc-6bc8bfffddb4",
mid: window.supplyMid || "196514f9-ba78-47f3-b4ce-31e4ed04f488",
paginationInputDto: {
page: data.roleInfo.currentPage,
@ -163,37 +164,19 @@ export default defineComponent({
let rel = res.data.result.items;
data.roleInfo.pageTotal = res.data.result.total;
console.log('rrrrrrrr', rel)
rel.forEach((item) => {
if (item._image_upload_6ef4229fad0f4d4ba56561d26d71c357) {
data.roleInfo.goodsData.push({
name: item._input_3892f6e0bb6146aaad369b9e7fb74c25,
src:
BASE_API +
item._image_upload_6ef4229fad0f4d4ba56561d26d71c357.split(
","
)[0] || null,
time: item._modify_time_68d02ed08d66492ba116fb8e682f29cd,
owerhzs: item._input_30c6c60ea8c040efa8b16190a89c83db,
details: item._input_text_area_41db31bf108a4cca909e498a59bfb26d,
county: item.county,
town: item.town,
type: item._select_58acbd1176e64cc1829fc15beae082e5,
type1: item._radio_group_d4dc9d5ca439493db18d34a4c95d24dd,
});
} else {
data.roleInfo.goodsData.push({
name: item._input_3892f6e0bb6146aaad369b9e7fb74c25,
src: null,
time: item._modify_time_68d02ed08d66492ba116fb8e682f29cd,
owerhzs: item._input_30c6c60ea8c040efa8b16190a89c83db,
details: item._input_text_area_41db31bf108a4cca909e498a59bfb26d,
county: item.county,
town: item.town,
type: item._select_58acbd1176e64cc1829fc15beae082e5,
type1: item._radio_group_d4dc9d5ca439493db18d34a4c95d24dd,
});
}
});
rel.forEach(item =>{
if (item.imagesrc) {
item.src = BASE_API + item.imagesrc.split(",")[0] || null,
item.srcArr = item.imagesrc.split(',')
}
if (item.imagesrc1) {
item.src1 = BASE_API + item.imagesrc1.split(",")[0] || null,
item.srcArr1 = item.imagesrc1.split(',')
}
data.roleInfo.goodsData.push(item)
})
});
},
};
@ -217,6 +200,10 @@ export default defineComponent({
height: 230px;
border: 1px solid #dee2e7;
cursor: pointer;
margin-right: 1.75%;
}
.goodsli-common:nth-child(4n){
margin-right: 0
}
.goodsli-common .img {
height: 169px;

@ -0,0 +1,179 @@
<template>
<div class="flex column">
<div class="flex common-box max-w">
<div class="leftbox">
<div class="imgbox">
<img class="max-w max-h" v-if="tasData.src" :src="tasData.src" />
<img class="max-w max-h" v-else src="/public/images/serverno.png" />
</div>
<div class="flex max-w bottomimg" v-if="tasData.srcArr && tasData.srcArr.length > 2">
<div v-for="(item,index) in tasData.srcArr">
<img v-if="index != tasData.srcArr.length - 1 && index > 0 && index < 6" class="imgs" :src="BaseApi + item" />
</div>
</div>
</div>
<div class="flex labelbox fz-16 column jc-sb">
<div class="ta-l">
<p class="mb-2 p ta-l">{{tasData.name}}</p>
<span v-if="tasData.type" class="flex span ai-c jc-c fz-20 fw-b">{{tasData.type}}</span>
<span class="flex ai-c jc-c fz-18 fw-b mt-2">{{tasData.descript}}</span>
</div>
<div class="areabox">{{tasData.address}}</div>
</div>
</div>
<div class="flex mt-3 common-box column max-w" v-if="tasData.srcArr1 && tasData.srcArr1.length > 0">
<div class="flex titlebox ai-c">
<span></span>
<div class="fz-24 fw-b">三品一标</div>
</div>
<div class="max-w mt-1">
<div class="flex max-w" v-if="tasData.srcArr1 && tasData.srcArr1.length > 0">
<div v-for="(item,index) in tasData.srcArr1" class="imgssp mr-1">
<img v-if="index != tasData.srcArr1.length - 1 && index < 6" class="imgssp" :src="BaseApi + item" />
</div>
</div>
</div>
</div>
<div class="flex mt-3 common-box column max-w">
<div class="flex titlebox ai-c">
<span></span>
<div class="fz-24 fw-b">详情介绍</div>
</div>
<div class="mt-2 detailbox">
<p>单位名称{{tasData.name}}</p>
<p>所属区县{{tasData.county}}</p>
<p>所属街道{{tasData.town}}</p>
<p>所属社区{{tasData.community}}</p>
<p>地址{{tasData.address}}</p>
<p>联系人{{tasData.contacts}}</p>
<p>联系方式{{tasData.phone}}</p>
<p>经营状态{{tasData.businesstype}}</p>
<p>经营规模{{tasData.scale}}</p>
<p>种植养殖面积{{tasData.areas}}</p>
<p>主要农产品与产量: {{tasData.product}}</p>
<p>帮扶模式: {{tasData.type}}</p>
<p>帮扶成效: {{tasData.bfcx}}</p>
<p>帮扶单位: {{tasData.bfunit}}</p>
<p>单位简介: {{tasData.descript}}</p>
</div>
</div>
</div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import { BASE_API } from "/public/config/server.js";
export default defineComponent({
name: "Index",
components: {},
props: ["lisdata"],
setup(props, context) {
let data = reactive({
BaseApi: BASE_API,
tasData: props.lisdata
});
watch(
() => props.lisdata,
(newVal, oldVal) => {
data.tasData = newVal
}
);
const router = useRouter();
onMounted(() => {
console.log('tasData', data.tasData)
if(!props.lisdata){
router.push({
path: '/',
query: {
navIndex: 2,
type: 1,
}
})
}
});
let methods = {};
return {
...methods,
...toRefs(data),
};
},
});
</script>
<style scoped>
.common-box {
background: #ffffff;
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.06);
border-radius: 6px;
padding: 34px 20px;
}
.leftbox{
width: 663px;
}
.imgbox{
width: 663px;
height: 403px;
padding: 10px;
border: 1px solid #DEE2E7;
}
.bottomimg{
height: 100px;
width: 100%;
padding: 10px;
}
.bottomimg .imgs{
width: 120px;
height: 100px;
margin-right: 20px;
}
.imgssp{
width: 300px;
height: 300px;
}
.labelbox{
width: 666px;
margin-left: 35px;
}
.labelbox .p{
margin-top: 30px;
font-size: 28px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.labelbox .span{
display: inline-block;
height: 52px;
line-height: 52px;
padding: 0 10px;
background: #F4F5F9;
border-radius: 7px;
color: #0E5EF9;
}
.areabox{
text-align: left;
font-size: 22px;
font-weight: 600;
margin-bottom: 20px;
}
.titlebox{
border-bottom: 1px solid #F4F5F9;
padding-bottom: 20px;
}
.titlebox span{
width: 4px;
height: 26px;
background: #0E5EF9;
margin-right: 14px;
}
.detailbox{
text-align: left;
padding-left: 20px;
}
.detailbox p{
margin-top: 30px;
}
</style>

@ -0,0 +1,150 @@
<template>
<div class="flex column" style="width: 1280px;">
<div class="flex jc-sb max-w">
<div class="flex">
</div>
<div class="flex">
<el-input
v-model="roleInfo.inputValue"
style="width: 200px"
placeholder="请输入单位名称"
/>
<el-button type="primary" @click="getGoodsData"></el-button>
</div>
</div>
<div class="mt-3 common-box">
<div class="flex wrap">
<div
class="mb-2 goodsli-common"
v-for="item in roleInfo.goodsData"
@click="tabLiClick(item)"
>
<div class="img">
<img class="max-w max-h" v-if="item.src" :src="item.src" />
<img class="max-w max-h" v-else src="/public/images/serverno.png" />
</div>
<div class="flex label fz-14 ai-c">{{ item.name }}</div>
</div>
</div>
<div class="flex mt-2 mb-2 jc-e">
<el-pagination
v-model:current-page="roleInfo.currentPage"
v-model:page-size="roleInfo.pageSize"
:page-sizes="[8, 16, 32, 64]"
layout="sizes, prev, pager, next, total"
:total="roleInfo.pageTotal"
@size-change="getGoodsData"
@current-change="getGoodsData"
/>
</div>
</div>
</div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { postMethodCommon, getMethodCommon } from "../../api/common";
import { BASE_API } from "/public/config/server.js";
export default defineComponent({
name: "Index",
components: {},
setup(props, context) {
let data = reactive({
roleInfo: {
goodsData: [],
navsIndex: null,
inputValue: "",
currentPage: 1,
pageSize: 8,
pageTotal: "",
},
});
onMounted(() => {
methods.getGoodsData();
});
let methods = {
navsClick(index) {
data.roleInfo.navsIndex = index;
methods.getGoodsData();
},
tabLiClick(e) {
context.emit("liclick", e);
},
getGoodsData() {
let serach = {
name: data.roleInfo.inputValue
};
let param = {
id: "cf16f568-4bb8-43b9-8e49-b23105e70bda",
mid: "9c027ef9-cc04-4006-831d-e799982f6435",
paginationInputDto: {
page: data.roleInfo.currentPage,
rows: data.roleInfo.pageSize,
},
queryJson: JSON.stringify(serach),
};
data.roleInfo.goodsData = [];
postMethodCommon(
"/FormScheme/GetFormDataPage?id=" + param.id + "&mid=" + param.mid,
param
).then((res) => {
let rel = res.data.result.items;
data.roleInfo.pageTotal = res.data.result.total;
rel.forEach(item =>{
if (item.imgsrc) {
item.src = BASE_API + item.imgsrc.split(",")[0] || null,
item.srcArr = item.imgsrc.split(',')
}
if (item.imgsrc1) {
item.src1 = BASE_API + item.imgsrc1.split(",")[0] || null,
item.srcArr1 = item.imgsrc1.split(',')
}
data.roleInfo.goodsData.push(item)
})
});
},
};
return {
...methods,
...toRefs(data),
};
},
});
</script>
<style scoped>
.common-box {
background: #ffffff;
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.06);
border-radius: 6px;
padding: 34px 20px;
}
.goodsli-common {
width: 23.5%;
height: 230px;
border: 1px solid #dee2e7;
cursor: pointer;
margin-right: 1.75%;
}
.goodsli-common:nth-child(4n){
margin-right: 0
}
.goodsli-common .img {
height: 169px;
padding: 10px;
}
.goodsli-common .label {
width: calc(100% - 15px);
height: 40px;
padding-left: 15px;
background: #f4f5f9;
border-top: 1px solid #dee2e7;
}
.navsactive {
color: #0058ff;
padding-bottom: 6px;
border-bottom: 4px solid #0058ff;
}
</style>
Loading…
Cancel
Save