|
|
|
@ -8,19 +8,9 @@ import "vue-waterfall-plugin-next/dist/style.css";
|
|
|
|
import InfiniteLoading from "v3-infinite-loading";
|
|
|
|
import InfiniteLoading from "v3-infinite-loading";
|
|
|
|
import { onMounted, reactive, ref, nextTick } from "vue";
|
|
|
|
import { onMounted, reactive, ref, nextTick } from "vue";
|
|
|
|
import backTop from "@/assets/svg/back_top.svg?component";
|
|
|
|
import backTop from "@/assets/svg/back_top.svg?component";
|
|
|
|
import generalIndustry from "@/assets/dataScreen/modelList/generalIndustry.png";
|
|
|
|
|
|
|
|
import phoneIndustry from "@/assets/dataScreen/modelList/phoneIndustry.png";
|
|
|
|
|
|
|
|
import photovoltaicIndustry from "@/assets/dataScreen/modelList/photovoltaicIndustry.png";
|
|
|
|
|
|
|
|
import pipeIndustry from "@/assets/dataScreen/modelList/pipeIndustry.png";
|
|
|
|
|
|
|
|
import mechanicalIndustry from "@/assets/dataScreen/modelList/mechanicalIndustry.png";
|
|
|
|
|
|
|
|
import lithiumBatteryIndustry from "@/assets/dataScreen/modelList/lithiumBatteryIndustry.png";
|
|
|
|
|
|
|
|
import healthcareIndustry from "@/assets/dataScreen/modelList/healthcareIndustry.png";
|
|
|
|
|
|
|
|
import foundryIndustry from "@/assets/dataScreen/modelList/foundryIndustry.png";
|
|
|
|
|
|
|
|
import electronicsIndustry from "@/assets/dataScreen/modelList/electronicsIndustry.png";
|
|
|
|
|
|
|
|
import bathroomIndustry from "@/assets/dataScreen/modelList/bathroomIndustry.png";
|
|
|
|
|
|
|
|
import bankIndustry from "@/assets/dataScreen/modelList/bankIndustry.png";
|
|
|
|
|
|
|
|
import PCBIndustry from "@/assets/dataScreen/modelList/PCBIndustry.png";
|
|
|
|
|
|
|
|
import { Waterfall } from "vue-waterfall-plugin-next";
|
|
|
|
import { Waterfall } from "vue-waterfall-plugin-next";
|
|
|
|
|
|
|
|
import ModelBox from "./components/ModelBox.vue";
|
|
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
defineOptions({
|
|
|
|
name: "ModelList"
|
|
|
|
name: "ModelList"
|
|
|
|
});
|
|
|
|
});
|
|
|
|
@ -72,7 +62,19 @@ const list = ref([]);
|
|
|
|
const pageSize = ref();
|
|
|
|
const pageSize = ref();
|
|
|
|
const loadingInstance = ref();
|
|
|
|
const loadingInstance = ref();
|
|
|
|
const modelDialogVisible = ref(false);
|
|
|
|
const modelDialogVisible = ref(false);
|
|
|
|
const modelInfo = ref();
|
|
|
|
const INITIAL_DATA = {
|
|
|
|
|
|
|
|
index: null,
|
|
|
|
|
|
|
|
industry: "",
|
|
|
|
|
|
|
|
state: "",
|
|
|
|
|
|
|
|
function: "",
|
|
|
|
|
|
|
|
deviceSort: "",
|
|
|
|
|
|
|
|
description: "",
|
|
|
|
|
|
|
|
version: "",
|
|
|
|
|
|
|
|
type: "",
|
|
|
|
|
|
|
|
provider: "",
|
|
|
|
|
|
|
|
updateTime: ""
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
const modelInfo = ref({ ...INITIAL_DATA });
|
|
|
|
|
|
|
|
|
|
|
|
/** 加载更多 */
|
|
|
|
/** 加载更多 */
|
|
|
|
function handleLoadMore() {
|
|
|
|
function handleLoadMore() {
|
|
|
|
@ -100,53 +102,12 @@ function handleLoadMore() {
|
|
|
|
// list.value.splice(index, 1);
|
|
|
|
// list.value.splice(index, 1);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
function handleClick(item) {
|
|
|
|
const handleBoxDetail = product => {
|
|
|
|
console.log(item);
|
|
|
|
|
|
|
|
modelDialogVisible.value = true;
|
|
|
|
modelDialogVisible.value = true;
|
|
|
|
modelInfo.value = item;
|
|
|
|
nextTick(() => {
|
|
|
|
console.log(modelInfo.value);
|
|
|
|
modelInfo.value = { ...product };
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
};
|
|
|
|
function getModelIcon(params: string) {
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
|
|
|
params == "电子、手机、SMT" ||
|
|
|
|
|
|
|
|
params == "手机、电子、手机、工件装配、SMT" ||
|
|
|
|
|
|
|
|
params == "手机、电子、SMT" ||
|
|
|
|
|
|
|
|
params == "手机、液晶显示屏"
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
return phoneIndustry;
|
|
|
|
|
|
|
|
} else if (
|
|
|
|
|
|
|
|
params ==
|
|
|
|
|
|
|
|
"机械、金属工件、线缆、铸造、薄膜、玻璃、造纸、铝板带、铝箔、铜箔、无纺布"
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
return mechanicalIndustry;
|
|
|
|
|
|
|
|
} else if (
|
|
|
|
|
|
|
|
params == "PVC管材、金属管材、金属工件、塑料水管、汽车软管、线缆"
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
return pipeIndustry;
|
|
|
|
|
|
|
|
} else if (params == "锂电池") {
|
|
|
|
|
|
|
|
return lithiumBatteryIndustry;
|
|
|
|
|
|
|
|
} else if (params == "食品、饮料、医疗卫生" || params == "食品、饮料") {
|
|
|
|
|
|
|
|
return healthcareIndustry;
|
|
|
|
|
|
|
|
} else if (params == "陶瓷、卫浴、瓷砖") {
|
|
|
|
|
|
|
|
return bathroomIndustry;
|
|
|
|
|
|
|
|
} else if (
|
|
|
|
|
|
|
|
params == "机加工、光伏、电子、SMT、手机、锂电池、精密零部件加工" ||
|
|
|
|
|
|
|
|
params == "光伏"
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
return photovoltaicIndustry;
|
|
|
|
|
|
|
|
} else if (params == "钢铁、冶金、铸造") {
|
|
|
|
|
|
|
|
return foundryIndustry;
|
|
|
|
|
|
|
|
} else if (params == "银行、营业厅") {
|
|
|
|
|
|
|
|
return bankIndustry;
|
|
|
|
|
|
|
|
} else if (params == "机加工、电子、手机、精密零部件加工、汽车") {
|
|
|
|
|
|
|
|
return electronicsIndustry;
|
|
|
|
|
|
|
|
} else if (params == "PCB") {
|
|
|
|
|
|
|
|
return PCBIndustry;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return generalIndustry;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
handleLoadMore();
|
|
|
|
handleLoadMore();
|
|
|
|
@ -164,84 +125,10 @@ onMounted(() => {
|
|
|
|
<el-scrollbar height="810px" class="content">
|
|
|
|
<el-scrollbar height="810px" class="content">
|
|
|
|
<Waterfall :list="list" v-bind="options">
|
|
|
|
<Waterfall :list="list" v-bind="options">
|
|
|
|
<template #item="{ item }">
|
|
|
|
<template #item="{ item }">
|
|
|
|
<div
|
|
|
|
<ModelBox :modelData="item" @check-detail="handleBoxDetail" />
|
|
|
|
:class="
|
|
|
|
|
|
|
|
item.state === '在线'
|
|
|
|
|
|
|
|
? 'model-box-inUsed'
|
|
|
|
|
|
|
|
: 'model-box-notUsed'
|
|
|
|
|
|
|
|
"
|
|
|
|
|
|
|
|
@click="handleClick(item)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div class="model-box-state" v-if="item.state === '在线'">
|
|
|
|
|
|
|
|
使用中
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="model-box-title">
|
|
|
|
|
|
|
|
<div class="model-box-name ff1">
|
|
|
|
|
|
|
|
{{ item.deviceSort }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
:class="
|
|
|
|
|
|
|
|
item.type === '经典算法'
|
|
|
|
|
|
|
|
? 'model-box-type'
|
|
|
|
|
|
|
|
: 'model-box-type-deep'
|
|
|
|
|
|
|
|
"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{{ item.type }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="model-box-version">
|
|
|
|
|
|
|
|
<div class="model-box-version-icon" />
|
|
|
|
|
|
|
|
版本：{{ item.version }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="model-box-industry">
|
|
|
|
|
|
|
|
<div class="model-box-industry-icon" />
|
|
|
|
|
|
|
|
<div class="model-box-industry-describe">
|
|
|
|
|
|
|
|
适用行业：{{ item.industry }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <div :class="getModelIcon(item.industry)" /> -->
|
|
|
|
|
|
|
|
<div class="model-box-icon">
|
|
|
|
|
|
|
|
<!-- <LazyImg :url="generalIndustry" /> -->
|
|
|
|
|
|
|
|
<img :src="getModelIcon(item.industry)" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- {{ item }} -->
|
|
|
|
|
|
|
|
<!-- <div class="overflow-hidden">
|
|
|
|
|
|
|
|
<LazyImg
|
|
|
|
|
|
|
|
:url="url"
|
|
|
|
|
|
|
|
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
<!-- <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
|
|
|
|
|
|
|
<h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
|
|
|
|
|
|
|
|
{{ item.deviceSort }}
|
|
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div class="text-gray-50">$ {{ item.price }}</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
|
|
|
|
|
|
|
|
@click.stop="handleDelete(item, index)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
删除
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</Waterfall>
|
|
|
|
</Waterfall>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <div class="flex justify-center py-10">
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
|
|
|
|
|
|
|
|
@click="handleLoadMore"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
加载更多
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-backtop
|
|
|
|
<el-backtop
|
|
|
|
title="回到顶部"
|
|
|
|
title="回到顶部"
|
|
|
|
:right="35"
|
|
|
|
:right="35"
|
|
|
|
|
JINGYJ
1 year ago