|
|
|
|
@ -0,0 +1,245 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { computed, PropType } from "vue";
|
|
|
|
|
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";
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "ModelBox"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
interface CardProductType {
|
|
|
|
|
isEnabled: boolean;
|
|
|
|
|
state: string;
|
|
|
|
|
description: string;
|
|
|
|
|
deviceSort: string;
|
|
|
|
|
updateTime: string;
|
|
|
|
|
type: string;
|
|
|
|
|
version: string;
|
|
|
|
|
industry: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
modelData: {
|
|
|
|
|
type: Object as PropType<CardProductType>
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const boxClass = computed(() => [
|
|
|
|
|
"model-box-inUsed",
|
|
|
|
|
{ "model-box-notUsed": props.modelData?.state !== "在线" }
|
|
|
|
|
]);
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const emit = defineEmits(["check-detail", "delete-item"]);
|
|
|
|
|
|
|
|
|
|
const handleClickDetail = (modelData: CardProductType) => {
|
|
|
|
|
emit("check-detail", modelData);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// const stateClass = computed(() => [
|
|
|
|
|
// "model-state",
|
|
|
|
|
// { "model-state_offline": props.device?.state === "离线" }
|
|
|
|
|
// ]);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div :class="boxClass" @click="handleClickDetail(modelData)">
|
|
|
|
|
<div class="model-box-state" v-if="modelData.state === '在线'">使用中</div>
|
|
|
|
|
<div class="model-box-title">
|
|
|
|
|
<div class="model-box-name ff1">
|
|
|
|
|
{{ modelData.deviceSort }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
:class="
|
|
|
|
|
modelData.type === '经典算法'
|
|
|
|
|
? 'model-box-type'
|
|
|
|
|
: 'model-box-type-deep'
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ modelData.type }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="model-box-version">
|
|
|
|
|
<div class="model-box-version-icon" />
|
|
|
|
|
版本：{{ modelData.version }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="model-box-industry">
|
|
|
|
|
<div class="model-box-industry-icon" />
|
|
|
|
|
<div class="model-box-industry-describe">
|
|
|
|
|
适用行业：{{ modelData.industry }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div :class="getModelIcon(item.industry)" /> -->
|
|
|
|
|
<div class="model-box-icon">
|
|
|
|
|
<!-- <LazyImg :url="generalIndustry" /> -->
|
|
|
|
|
<img :src="getModelIcon(modelData.industry)" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.model-box-inUsed,
|
|
|
|
|
.model-box-notUsed {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 65px 20px 24px;
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 172px;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
rgba(255, 207, 95, 0.4) 0%,
|
|
|
|
|
rgba(255, 207, 95, 0) 100%
|
|
|
|
|
);
|
|
|
|
|
background-image: url("@/assets/dataScreen/modelList/inUsed.svg");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
.model-box-state {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 48px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
background: #faad14;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
border-radius: 8px 0px 8px 0px;
|
|
|
|
|
}
|
|
|
|
|
.model-box-title {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
.model-box-name {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
max-width: 8em;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
.model-box-type,
|
|
|
|
|
.model-box-type-deep {
|
|
|
|
|
margin-left: 16px;
|
|
|
|
|
width: 56px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
background: linear-gradient(180deg, #21c7ff 0%, #428cff 100%);
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
}
|
|
|
|
|
.model-box-type-deep {
|
|
|
|
|
background: linear-gradient(180deg, #ffb21a 0%, #ff9b3e 100%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.model-box-version,
|
|
|
|
|
.model-box-industry {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
|
|
.model-box-version-icon {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
background: url("@/assets/dataScreen/modelList/modelVersion.svg")
|
|
|
|
|
no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
.model-box-industry-icon {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
background: url("@/assets/dataScreen/modelList/modelIndustry.svg")
|
|
|
|
|
no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
.model-box-industry-describe {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
max-width: 14em;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.model-box-version {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
.model-box-icon,
|
|
|
|
|
.model-box-icon-phone,
|
|
|
|
|
.model-box-icon-mechanical {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -40px;
|
|
|
|
|
left: 91px;
|
|
|
|
|
width: 72px;
|
|
|
|
|
height: 88px;
|
|
|
|
|
// background: url("@/assets/dataScreen/modelList/generalIndustry.svg")
|
|
|
|
|
// no-repeat center center;
|
|
|
|
|
}
|
|
|
|
|
// .model-box-icon-phone {
|
|
|
|
|
// background: url("@/assets/dataScreen/modelList/phoneIndustry.svg")
|
|
|
|
|
// no-repeat center center;
|
|
|
|
|
// }
|
|
|
|
|
// .model-box-icon-mechanical {
|
|
|
|
|
// background: url("@/assets/dataScreen/modelList/mechanicalIndustry.svg")
|
|
|
|
|
// no-repeat center center;
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
.model-box-notUsed {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 172px;
|
|
|
|
|
background: linear-gradient(180deg, #07428e 0%, rgba(7, 66, 142, 0) 100%);
|
|
|
|
|
background-image: url("@/assets/dataScreen/modelList/notUsed.svg");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
JINGYJ
1 year ago