422 lines
11 KiB
Vue
422 lines
11 KiB
Vue
<template>
|
|
<!-- 设备的基本信息 -->
|
|
<div class="el-overlay">
|
|
<div class="box">
|
|
<div class="box-header">
|
|
<div class="box-title">零件基本信息</div>
|
|
<div class="box-btn" @click="close"></div>
|
|
</div>
|
|
<div class="box-content">
|
|
<div class="box-content-left">
|
|
<div class="box-content-left-title">
|
|
<span>零件列表</span>
|
|
</div>
|
|
<!-- 选择框 -->
|
|
<div class="box-content-left-select">
|
|
<el-select
|
|
v-model="deviceListParams.name"
|
|
@clear="clearHandle"
|
|
@change="
|
|
deviceNameChange();
|
|
getDeviceList();
|
|
"
|
|
clearable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in allName"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
<el-select
|
|
v-model="deviceListParams.code"
|
|
@change="deviceListParams.index=1;getDeviceList()"
|
|
clearable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in deviceIds"
|
|
:key="item.id"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<!-- table -->
|
|
<div class="box-content-left-table">
|
|
<el-table
|
|
:row-class-name="getRowClassName"
|
|
:data="tableList"
|
|
style="width: 100%"
|
|
@row-click="rowClick"
|
|
>
|
|
<el-table-column prop="code" label="代号" />
|
|
<el-table-column prop="name" show-overflow-tooltip label="名称" />
|
|
</el-table>
|
|
|
|
</div>
|
|
<div style="float: right">
|
|
<el-pagination
|
|
v-model:current-page="deviceListParams.index"
|
|
:page-size="deviceListParams.size"
|
|
:size="deviceListParams.size"
|
|
:pager-count='5'
|
|
layout="total, prev, pager, next"
|
|
:total="total"
|
|
prev-text="上一页"
|
|
next-text="下一页"
|
|
@current-change="getDeviceList"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<div class="box-content-right">
|
|
<div class="box-content-right-title">
|
|
<span>零件参数</span>
|
|
</div>
|
|
<div class="box-content-right-subtxt">
|
|
<span>{{ deviceMsg.name }}</span>
|
|
</div>
|
|
<div class="box-content-right-data">
|
|
<section>
|
|
<p>
|
|
<span>其他参数</span>
|
|
<span class="underLine"></span>
|
|
</p>
|
|
<div class="chart">
|
|
<div class="chart-pie" v-for="item in pieList" :key="item.id">
|
|
<pieChart :dataMap="item" ref="chartRef" />
|
|
</div>
|
|
</div>
|
|
<div class="message">
|
|
<ul>
|
|
<li>
|
|
<span>供应商：</span><span>{{ deviceMsg.supplyer }}</span>
|
|
</li>
|
|
<li>
|
|
<span>生产厂商：</span
|
|
><span>{{ deviceMsg.productor }}</span>
|
|
</li>
|
|
<li>
|
|
<span>备注信息：</span><span>{{ deviceMsg.remark }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<p>
|
|
<span>结构示意</span>
|
|
<span class="underLine"></span>
|
|
</p>
|
|
<img src="@/assets/images/dialog/sketch-map.png" alt="" />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, ref, reactive, toRefs } from "vue";
|
|
import pieChart from "./components/pieChart";
|
|
import {
|
|
allDevicId,
|
|
allDeviceNames,
|
|
getEquipTable,
|
|
getDeviceDetail,
|
|
} from "@/api/equipmentManagement/index";
|
|
const emit = defineEmits(["closeDeviceInfo"]);
|
|
const tableList = ref([]);
|
|
|
|
// 获取设备列表数据
|
|
const deviceListParams = reactive({
|
|
name: "",
|
|
code: "",
|
|
size:10,
|
|
index:1
|
|
});
|
|
const total = ref(0)
|
|
const { facName, deviceCode } = toRefs(deviceListParams);
|
|
function getDeviceList() {
|
|
getEquipTable(deviceListParams).then((res) => {
|
|
tableList.value = res.result.data;
|
|
rowClick(tableList.value[0]);
|
|
total.value = res.result.totalNum
|
|
});
|
|
}
|
|
|
|
const allName = ref([]);
|
|
function getAllDeviceNames() {
|
|
allDeviceNames().then((res) => {
|
|
allName.value = res.result;
|
|
});
|
|
}
|
|
|
|
// 所有设备id
|
|
const deviceIds = ref([]);
|
|
function deviceNameChange() {
|
|
deviceListParams.code = "";
|
|
deviceListParams.index = 1
|
|
allDevicId({ name: deviceListParams.name }).then((res) => {
|
|
if (res.result.length) {
|
|
deviceIds.value = res.result[0].models;
|
|
}
|
|
});
|
|
}
|
|
// 清空事件
|
|
function clearHandle() {
|
|
deviceListParams.index = 1
|
|
deviceListParams.code = "";
|
|
deviceIds.value = "";
|
|
}
|
|
|
|
const chartRef = ref(null);
|
|
|
|
// 初始id
|
|
const currentRowId = ref(null);
|
|
|
|
const getRowClassName = ({ row, rowIndex }) => {
|
|
if (currentRowId.value == row.id) {
|
|
return "highlight-row";
|
|
}
|
|
return "";
|
|
};
|
|
// 设备详情信息
|
|
const deviceMsg = ref([]);
|
|
function rowClick(row) {
|
|
currentRowId.value = row.id;
|
|
getDeviceDetail({ id: row.id }).then((res) => {
|
|
deviceMsg.value = res.result;
|
|
if (res.result.stockNum / res.result.stockWarn > 1) {
|
|
pieList.value[0].total = pieList.value[0].value;
|
|
}
|
|
pieList.value[0].value = res.result.stockNum;
|
|
pieList.value[1].value = res.result.life;
|
|
chartRef.value.forEach((el, index) => {
|
|
el.drawChart();
|
|
});
|
|
// if (pieChart2.value) {
|
|
// pieChart2.value.darwChart();
|
|
// }
|
|
});
|
|
}
|
|
// 饼图数据列表
|
|
const pieList = ref([
|
|
{
|
|
id: 1,
|
|
name: "库存数量",
|
|
value: 48,
|
|
total: 80,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "使用年限",
|
|
value: 2,
|
|
// total: 10,
|
|
},
|
|
]);
|
|
// 关闭设备的基本信息弹窗
|
|
function close() {
|
|
emit("closeDeviceInfo", -1);
|
|
}
|
|
onMounted(() => {
|
|
getDeviceList();
|
|
getAllDeviceNames();
|
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
:deep(.highlight-row) {
|
|
background-color:rgba(174, 211, 255, 0.2) !important;
|
|
}
|
|
// :deep(.row) {
|
|
// background-color: rgba(174, 211, 255, 0.2) !important;
|
|
// // background: #000 !important;
|
|
// }
|
|
// :deep(.el-table__body tr.current-row > td.el-table__cell) {
|
|
// background: rgba(174, 211, 255, 0.2) !important;
|
|
// color: #ffffff !important;
|
|
// }
|
|
.box {
|
|
width: vw(1380);
|
|
height: vh(716);
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
margin: auto;
|
|
background-image: url("@/assets/images/dialog/device-dialog1.png");
|
|
background-size: 100% 100%;
|
|
&-header {
|
|
width: 100%;
|
|
height: vh(60);
|
|
font-family: "pangmen";
|
|
display: flex;
|
|
font-size: 1.875rem;
|
|
justify-content: center;
|
|
}
|
|
&-title {
|
|
line-height: vh(60);
|
|
}
|
|
&-btn {
|
|
background-image: url("@/assets/images/dialog/close.png");
|
|
width: vw(34);
|
|
height: vh(34);
|
|
position: absolute;
|
|
right: vw(20);
|
|
top: vh(12);
|
|
cursor: pointer;
|
|
}
|
|
&-content {
|
|
height: vh(716 - 60);
|
|
padding: vw(20) vh(20);
|
|
box-sizing: border-box;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
&-left,
|
|
&-right {
|
|
font-size: 1rem;
|
|
padding: vw(20) vh(20);
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
border: 1px solid;
|
|
border-image: linear-gradient(
|
|
180deg,
|
|
rgba(144, 218, 255, 0.5),
|
|
rgba(144, 218, 255, 0.1000000015)
|
|
)
|
|
1 1;
|
|
&-title {
|
|
width: 100%;
|
|
height: vh(36);
|
|
padding-left: vw(32);
|
|
line-height: vh(36);
|
|
box-sizing: border-box;
|
|
background-size: 100% 100%;
|
|
background-image: url("@/assets/images/dialog/deviceInfo-title1.png");
|
|
span {
|
|
font-size: 1.375rem;
|
|
font-family: "pangmen";
|
|
}
|
|
}
|
|
}
|
|
&-right {
|
|
width: vw(840);
|
|
&-title {
|
|
background-image: url("@/assets/images/dialog/deviceInfo-title2.png") !important;
|
|
}
|
|
&-subtxt {
|
|
line-height: vh(36);
|
|
padding-left: vw(18);
|
|
margin: vh(20) 0;
|
|
background-size: 100%;
|
|
background-size: 100%;
|
|
box-sizing: border-box;
|
|
background-image: url("@/assets/images/dialog/deviceInfo-subtxt.png");
|
|
}
|
|
&-data {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
section {
|
|
width: vw(390);
|
|
height: vh(462);
|
|
background-image: url("@/assets/images/dialog/deviceInfo-item-bg.png");
|
|
padding: vh(12) vw(16);
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
margin-bottom: vh(20);
|
|
img {
|
|
width: vw(358);
|
|
height: vh(384);
|
|
}
|
|
span:nth-of-type(1) {
|
|
position: relative;
|
|
z-index: 99;
|
|
margin-left: vw(20);
|
|
}
|
|
.underLine {
|
|
background-image: url("@/assets/images/dialog/under-line.png");
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: vh(16);
|
|
display: block;
|
|
position: relative;
|
|
top: vh(-10);
|
|
}
|
|
// 饼图的样式
|
|
.chart {
|
|
margin-bottom: vh(20);
|
|
display: flex;
|
|
height: vh(172);
|
|
.chart-pie {
|
|
width: vw(172);
|
|
height: vh(172);
|
|
}
|
|
}
|
|
.message {
|
|
ul {
|
|
li {
|
|
position: relative;
|
|
margin-bottom: vh(20);
|
|
width: 100%;
|
|
line-height: vh(44);
|
|
height: vh(44);
|
|
background-color: rgba(174, 211, 255, 0.03);
|
|
span:nth-child(1) {
|
|
color: rgba(174, 211, 255, 1);
|
|
}
|
|
}
|
|
li::before {
|
|
content: "";
|
|
top: vh(15);
|
|
left: vw(4);
|
|
position: absolute;
|
|
width: vw(12);
|
|
height: vh(12);
|
|
background-image: url("@/assets/images/dialog/dot.png");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-left {
|
|
width: vw(480);
|
|
&-select {
|
|
margin: vh(12) 0;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
}
|
|
&-table {
|
|
height: vh(440);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
:deep(.el-input__wrapper) {
|
|
background-color: transparent;
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.el-input) {
|
|
border: 1px solid;
|
|
border-image: linear-gradient(
|
|
180deg,
|
|
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
|
|
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.6)
|
|
)
|
|
1 1;
|
|
}
|
|
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.el-table .cell ){
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
:deep(.el-pagination__total){
|
|
left: vw(40) !important;
|
|
}
|
|
</style> |