|
|
<template>
|
|
|
<view class="page-container">
|
|
|
<view class="header-section">
|
|
|
<view class="back-btn" @click="goBack">
|
|
|
<text class="back-icon">‹</text>
|
|
|
<text class="back-text">返回</text>
|
|
|
</view>
|
|
|
<text class="header-title">设备台账</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="filter-section">
|
|
|
<view class="filter-dropdown" @click="showFilterPicker">
|
|
|
<text :class="{ 'filter-placeholder': !selectedType }">
|
|
|
{{ selectedType || '请选择设备类型筛选' }}
|
|
|
</text>
|
|
|
<text class="filter-arrow">›</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="search-section">
|
|
|
<view class="search-wrapper">
|
|
|
<view class="search-icon">
|
|
|
<text class="iconfont icon-search"></text>
|
|
|
</view>
|
|
|
<input
|
|
|
v-model="searchKeyword"
|
|
|
class="search-input"
|
|
|
type="text"
|
|
|
placeholder="请输入编码或名称"
|
|
|
placeholder-class="input-placeholder"
|
|
|
@input="handleSearch"
|
|
|
/>
|
|
|
<view v-if="searchKeyword" class="clear-btn" @click="clearSearch">
|
|
|
<text class="clear-icon">×</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<scroll-view scroll-y class="content-scroll">
|
|
|
<view class="equipment-list">
|
|
|
<view
|
|
|
v-for="(item, index) in filteredList"
|
|
|
:key="index"
|
|
|
class="equipment-card"
|
|
|
>
|
|
|
<view class="card-header">
|
|
|
<view class="header-left">
|
|
|
<text class="equipment-name">{{ item.deviceName }}</text>
|
|
|
<text class="equipment-code">编码: {{ item.deviceCode }}</text>
|
|
|
</view>
|
|
|
<view class="card-actions">
|
|
|
<view class="action-btn edit-btn" @click.stop="handleEdit(item)">
|
|
|
<text class="action-icon">✎</text>
|
|
|
</view>
|
|
|
<view class="action-btn delete-btn" @click.stop="handleDelete(item)">
|
|
|
<text class="action-icon">🗑</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="card-body">
|
|
|
<view class="card-row">
|
|
|
<text class="card-label">类型</text>
|
|
|
<text class="card-value">{{ item.deviceType }}</text>
|
|
|
</view>
|
|
|
<view class="card-row">
|
|
|
<text class="card-label">状态</text>
|
|
|
<text class="card-value" :class="getStatusClass(item.deviceStatus)">
|
|
|
{{ getStatusText(item.deviceStatus) }}
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="card-row">
|
|
|
<text class="card-label">规格</text>
|
|
|
<text class="card-value">{{ item.standard || '-' }}</text>
|
|
|
</view>
|
|
|
<view class="card-row">
|
|
|
<text class="card-label">型号</text>
|
|
|
<text class="card-value">{{ item.model || '-' }}</text>
|
|
|
</view>
|
|
|
<view class="card-row">
|
|
|
<text class="card-label">位置</text>
|
|
|
<text class="card-value">{{ item.deviceLocation || '-' }}</text>
|
|
|
</view>
|
|
|
<view class="card-row">
|
|
|
<text class="card-label">责任人</text>
|
|
|
<text class="card-value">{{ item.supplier || '-' }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<view class="add-btn" @click="showAddForm">
|
|
|
<text class="add-icon">+</text>
|
|
|
</view>
|
|
|
|
|
|
<uni-popup ref="addPopup" type="center" background-color="#fff">
|
|
|
<view class="popup-content">
|
|
|
<view class="popup-header">
|
|
|
<text class="popup-title">{{ isEdit ? '编辑设备' : '新增设备' }}</text>
|
|
|
<view class="popup-close" @click="hideAddForm">
|
|
|
<text class="close-icon">×</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<scroll-view scroll-y class="form-scroll">
|
|
|
<view class="form-content">
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">设备编码 <text class="required">*</text></text>
|
|
|
<input
|
|
|
v-model="formData.deviceCode"
|
|
|
class="form-input"
|
|
|
type="text"
|
|
|
placeholder="请输入设备编码"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">设备名称 <text class="required">*</text></text>
|
|
|
<input
|
|
|
v-model="formData.deviceName"
|
|
|
class="form-input"
|
|
|
type="text"
|
|
|
placeholder="请输入设备名称"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">设备类型 <text class="required">*</text></text>
|
|
|
<view class="form-picker" @click="showTypePicker">
|
|
|
<text :class="{ 'placeholder-text': !formData.deviceType }">
|
|
|
{{ formData.deviceType || '请选择设备类型' }}
|
|
|
</text>
|
|
|
<text class="picker-arrow">›</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">设备状态 <text class="required">*</text></text>
|
|
|
<view class="status-selector">
|
|
|
<view
|
|
|
v-for="status in statusList"
|
|
|
:key="status.value"
|
|
|
class="status-option"
|
|
|
:class="{ active: formData.deviceStatus === status.value }"
|
|
|
@click="formData.deviceStatus = status.value"
|
|
|
>
|
|
|
<view class="status-dot" :class="{ active: formData.deviceStatus === status.value, [status.class]: true }"></view>
|
|
|
<text>{{ status.label }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">规格</text>
|
|
|
<input
|
|
|
v-model="formData.standard"
|
|
|
class="form-input"
|
|
|
type="text"
|
|
|
placeholder="请输入规格"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">型号</text>
|
|
|
<input
|
|
|
v-model="formData.model"
|
|
|
class="form-input"
|
|
|
type="text"
|
|
|
placeholder="请输入型号"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">生产日期</text>
|
|
|
<view class="form-picker" @click="showDatePicker(1)">
|
|
|
<text :class="{ 'placeholder-text': !formData.productionDate }">
|
|
|
{{ formData.productionDate || '请选择生产日期' }}
|
|
|
</text>
|
|
|
<text class="picker-arrow">›</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">入厂日期</text>
|
|
|
<view class="form-picker" @click="showDatePicker(2)">
|
|
|
<text :class="{ 'placeholder-text': !formData.entryDate }">
|
|
|
{{ formData.entryDate || '请选择入厂日期' }}
|
|
|
</text>
|
|
|
<text class="picker-arrow">›</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">位置</text>
|
|
|
<input
|
|
|
v-model="formData.deviceLocation"
|
|
|
class="form-input"
|
|
|
type="text"
|
|
|
placeholder="请输入设备位置"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">责任人</text>
|
|
|
<input
|
|
|
v-model="formData.supplier"
|
|
|
class="form-input"
|
|
|
type="text"
|
|
|
placeholder="请输入责任人"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">备注</text>
|
|
|
<textarea
|
|
|
v-model="formData.remark"
|
|
|
class="form-textarea"
|
|
|
placeholder="请输入备注"
|
|
|
:maxlength="200"
|
|
|
/>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<view class="form-footer">
|
|
|
<view class="footer-btn cancel-btn" @click="hideAddForm">
|
|
|
<text class="btn-text">取消</text>
|
|
|
</view>
|
|
|
<view class="footer-btn confirm-btn" @click="handleSave">
|
|
|
<text class="btn-text">保存</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
<uni-popup ref="filterPicker" type="bottom" background-color="#fff">
|
|
|
<view class="picker-content">
|
|
|
<view class="picker-header">
|
|
|
<text class="picker-title">选择设备类型</text>
|
|
|
<view class="picker-close" @click="clearFilter">
|
|
|
<text class="clear-text">清空</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<scroll-view scroll-y class="picker-list">
|
|
|
<view
|
|
|
v-for="(item, index) in typeList"
|
|
|
:key="index"
|
|
|
class="picker-item"
|
|
|
@click="selectType(item)"
|
|
|
>
|
|
|
<text class="picker-text">{{ item }}</text>
|
|
|
<text v-if="selectedType === item" class="picker-check">✓</text>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
<uni-popup ref="typePicker" type="bottom" background-color="#fff">
|
|
|
<view class="picker-content">
|
|
|
<view class="picker-header">
|
|
|
<text class="picker-title">选择设备类型</text>
|
|
|
<view class="picker-close" @click="hideTypePicker">
|
|
|
<text class="close-icon">×</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<scroll-view scroll-y class="picker-list">
|
|
|
<view
|
|
|
v-for="(item, index) in typeList"
|
|
|
:key="index"
|
|
|
class="picker-item"
|
|
|
@click="selectTypeForm(item)"
|
|
|
>
|
|
|
<text class="picker-text">{{ item }}</text>
|
|
|
<text v-if="formData.deviceType === item" class="picker-check">✓</text>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
<uni-popup ref="datePicker" type="bottom" background-color="#fff">
|
|
|
<view class="picker-content">
|
|
|
<view class="picker-header">
|
|
|
<text class="picker-title">选择日期</text>
|
|
|
<view class="picker-close" @click="hideDatePicker">
|
|
|
<text class="close-icon">×</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<picker-view
|
|
|
:value="datePickerValue"
|
|
|
@change="handleDateChange"
|
|
|
class="date-picker"
|
|
|
>
|
|
|
<picker-view-column>
|
|
|
<view v-for="(year, i) in years" :key="i" class="picker-column">{{ year }}年</view>
|
|
|
</picker-view-column>
|
|
|
<picker-view-column>
|
|
|
<view v-for="(month, i) in months" :key="i" class="picker-column">{{ month }}月</view>
|
|
|
</picker-view-column>
|
|
|
<picker-view-column>
|
|
|
<view v-for="(day, i) in days" :key="i" class="picker-column">{{ day }}日</view>
|
|
|
</picker-view-column>
|
|
|
</picker-view>
|
|
|
<view class="date-confirm" @click="confirmDate">确定</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, reactive, computed } from 'vue';
|
|
|
|
|
|
const addPopup = ref(null);
|
|
|
const filterPicker = ref(null);
|
|
|
const typePicker = ref(null);
|
|
|
const datePicker = ref(null);
|
|
|
const searchKeyword = ref('');
|
|
|
const selectedType = ref('');
|
|
|
const isEdit = ref(false);
|
|
|
const currentDatePicker = ref(1);
|
|
|
|
|
|
const statusList = [
|
|
|
{ value: 1, label: '正常', class: 'status-normal' },
|
|
|
{ value: 2, label: '维修中', class: 'status-repair' },
|
|
|
{ value: 3, label: '停用', class: 'status-stopped' },
|
|
|
{ value: 4, label: '报废', class: 'status-scrap' }
|
|
|
];
|
|
|
|
|
|
const formData = reactive({
|
|
|
deviceCode: '',
|
|
|
deviceName: '',
|
|
|
deviceType: '',
|
|
|
deviceStatus: 1,
|
|
|
standard: '',
|
|
|
model: '',
|
|
|
productionDate: '',
|
|
|
entryDate: '',
|
|
|
deviceLocation: '',
|
|
|
supplier: '',
|
|
|
remark: ''
|
|
|
});
|
|
|
|
|
|
const typeList = ['生产设备', '检测设备', '辅助设备', '动力设备', '运输设备', '办公设备'];
|
|
|
|
|
|
const equipmentList = reactive([
|
|
|
{
|
|
|
deviceCode: 'DEV001',
|
|
|
deviceName: '数控车床CK6163',
|
|
|
deviceType: '生产设备',
|
|
|
deviceStatus: 1,
|
|
|
standard: 'CK6163*2000',
|
|
|
model: 'CK6163',
|
|
|
productionDate: '2022-03-15',
|
|
|
entryDate: '2022-05-01',
|
|
|
deviceLocation: '车间A栋1号',
|
|
|
supplier: '张三',
|
|
|
remark: '主要加工设备'
|
|
|
},
|
|
|
{
|
|
|
deviceCode: 'DEV002',
|
|
|
deviceName: '三坐标测量仪',
|
|
|
deviceType: '检测设备',
|
|
|
deviceStatus: 1,
|
|
|
standard: '精度0.001mm',
|
|
|
model: 'CMM-550',
|
|
|
productionDate: '2021-08-20',
|
|
|
entryDate: '2021-10-15',
|
|
|
deviceLocation: '质检室',
|
|
|
supplier: '李四',
|
|
|
remark: '高精度检测设备'
|
|
|
},
|
|
|
{
|
|
|
deviceCode: 'DEV003',
|
|
|
deviceName: '空气压缩机',
|
|
|
deviceType: '动力设备',
|
|
|
deviceStatus: 1,
|
|
|
standard: '37kW',
|
|
|
model: 'LU37-8',
|
|
|
productionDate: '2020-01-10',
|
|
|
entryDate: '2020-03-01',
|
|
|
deviceLocation: '动力站房',
|
|
|
supplier: '王五',
|
|
|
remark: '车间供气设备'
|
|
|
},
|
|
|
{
|
|
|
deviceCode: 'DEV004',
|
|
|
deviceName: '激光切割机',
|
|
|
deviceType: '生产设备',
|
|
|
deviceStatus: 2,
|
|
|
standard: '2000W',
|
|
|
model: 'LCF-2015',
|
|
|
productionDate: '2023-06-01',
|
|
|
entryDate: '2023-08-10',
|
|
|
deviceLocation: '车间B栋3号',
|
|
|
supplier: '赵六',
|
|
|
remark: '维修中'
|
|
|
},
|
|
|
{
|
|
|
deviceCode: 'DEV005',
|
|
|
deviceName: '叉车',
|
|
|
deviceType: '运输设备',
|
|
|
deviceStatus: 1,
|
|
|
standard: '3T',
|
|
|
model: 'CPCD30',
|
|
|
productionDate: '2022-11-05',
|
|
|
entryDate: '2022-12-20',
|
|
|
deviceLocation: '仓库区',
|
|
|
supplier: '孙七',
|
|
|
remark: '物料搬运'
|
|
|
}
|
|
|
]);
|
|
|
|
|
|
const years = computed(() => {
|
|
|
const arr = [];
|
|
|
for (let i = 2020; i <= 2030; i++) arr.push(i);
|
|
|
return arr;
|
|
|
});
|
|
|
|
|
|
const months = computed(() => {
|
|
|
const arr = [];
|
|
|
for (let i = 1; i <= 12; i++) arr.push(i);
|
|
|
return arr;
|
|
|
});
|
|
|
|
|
|
const days = computed(() => {
|
|
|
const arr = [];
|
|
|
for (let i = 1; i <= 31; i++) arr.push(i);
|
|
|
return arr;
|
|
|
});
|
|
|
|
|
|
const datePickerValue = ref([0, 0, 0]);
|
|
|
|
|
|
const filteredList = computed(() => {
|
|
|
let list = equipmentList;
|
|
|
|
|
|
if (selectedType.value) {
|
|
|
list = list.filter(item => item.deviceType === selectedType.value);
|
|
|
}
|
|
|
|
|
|
if (searchKeyword.value) {
|
|
|
const keyword = searchKeyword.value.toLowerCase();
|
|
|
list = list.filter(item =>
|
|
|
item.deviceCode.toLowerCase().includes(keyword) ||
|
|
|
item.deviceName.toLowerCase().includes(keyword)
|
|
|
);
|
|
|
}
|
|
|
|
|
|
return list;
|
|
|
});
|
|
|
|
|
|
function getStatusClass(status) {
|
|
|
const map = {
|
|
|
1: 'status-normal',
|
|
|
2: 'status-repair',
|
|
|
3: 'status-stopped',
|
|
|
4: 'status-scrap'
|
|
|
};
|
|
|
return map[status] || '';
|
|
|
}
|
|
|
|
|
|
function getStatusText(status) {
|
|
|
const map = {
|
|
|
1: '正常',
|
|
|
2: '维修中',
|
|
|
3: '停用',
|
|
|
4: '报废'
|
|
|
};
|
|
|
return map[status] || '';
|
|
|
}
|
|
|
|
|
|
function goBack() {
|
|
|
uni.navigateBack();
|
|
|
}
|
|
|
|
|
|
function handleSearch() {
|
|
|
console.log('搜索:', searchKeyword.value);
|
|
|
}
|
|
|
|
|
|
function clearSearch() {
|
|
|
searchKeyword.value = '';
|
|
|
}
|
|
|
|
|
|
function selectType(type) {
|
|
|
selectedType.value = type;
|
|
|
filterPicker.value.close();
|
|
|
}
|
|
|
|
|
|
function clearFilter() {
|
|
|
selectedType.value = '';
|
|
|
filterPicker.value.close();
|
|
|
}
|
|
|
|
|
|
function showFilterPicker() {
|
|
|
filterPicker.value.open();
|
|
|
}
|
|
|
|
|
|
function handleEdit(item) {
|
|
|
isEdit.value = true;
|
|
|
Object.assign(formData, item);
|
|
|
addPopup.value.open();
|
|
|
}
|
|
|
|
|
|
function handleDelete(item) {
|
|
|
uni.showModal({
|
|
|
title: '确认删除',
|
|
|
content: `确定要删除"${item.deviceName}"吗？`,
|
|
|
success: () => {
|
|
|
uni.showToast({
|
|
|
title: '删除成功',
|
|
|
icon: 'success'
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function showAddForm() {
|
|
|
isEdit.value = false;
|
|
|
resetForm();
|
|
|
addPopup.value.open();
|
|
|
}
|
|
|
|
|
|
function hideAddForm() {
|
|
|
addPopup.value.close();
|
|
|
resetForm();
|
|
|
}
|
|
|
|
|
|
function resetForm() {
|
|
|
formData.deviceCode = '';
|
|
|
formData.deviceName = '';
|
|
|
formData.deviceType = '';
|
|
|
formData.deviceStatus = 1;
|
|
|
formData.standard = '';
|
|
|
formData.model = '';
|
|
|
formData.productionDate = '';
|
|
|
formData.entryDate = '';
|
|
|
formData.deviceLocation = '';
|
|
|
formData.supplier = '';
|
|
|
formData.remark = '';
|
|
|
}
|
|
|
|
|
|
function showTypePicker() {
|
|
|
typePicker.value.open();
|
|
|
}
|
|
|
|
|
|
function hideTypePicker() {
|
|
|
typePicker.value.close();
|
|
|
}
|
|
|
|
|
|
function selectTypeForm(type) {
|
|
|
formData.deviceType = type;
|
|
|
typePicker.value.close();
|
|
|
}
|
|
|
|
|
|
function showDatePicker(type) {
|
|
|
currentDatePicker.value = type;
|
|
|
datePicker.value.open();
|
|
|
}
|
|
|
|
|
|
function hideDatePicker() {
|
|
|
datePicker.value.close();
|
|
|
}
|
|
|
|
|
|
function handleDateChange(e) {
|
|
|
datePickerValue.value = e.detail.value;
|
|
|
}
|
|
|
|
|
|
function confirmDate() {
|
|
|
const year = years.value[datePickerValue.value[0]];
|
|
|
const month = String(months.value[datePickerValue.value[1]]).padStart(2, '0');
|
|
|
const day = String(days.value[datePickerValue.value[2]]).padStart(2, '0');
|
|
|
const dateStr = `${year}-${month}-${day}`;
|
|
|
|
|
|
if (currentDatePicker.value === 1) {
|
|
|
formData.productionDate = dateStr;
|
|
|
} else {
|
|
|
formData.entryDate = dateStr;
|
|
|
}
|
|
|
|
|
|
hideDatePicker();
|
|
|
}
|
|
|
|
|
|
function handleSave() {
|
|
|
if (!formData.deviceCode || !formData.deviceName) {
|
|
|
uni.showToast({
|
|
|
title: '请填写必填项',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (!formData.deviceType) {
|
|
|
uni.showToast({
|
|
|
title: '请选择设备类型',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
uni.showToast({
|
|
|
title: '保存成功',
|
|
|
icon: 'success'
|
|
|
});
|
|
|
|
|
|
hideAddForm();
|
|
|
resetForm();
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page-container {
|
|
|
min-height: 100vh;
|
|
|
background-color: #f0f2f5;
|
|
|
}
|
|
|
|
|
|
.header-section {
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
padding: 60rpx 40rpx 40rpx 30rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.back-btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
position: absolute;
|
|
|
left: 30rpx;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
|
|
|
.back-icon {
|
|
|
font-size: 48rpx;
|
|
|
color: #ffffff;
|
|
|
margin-right: 8rpx;
|
|
|
}
|
|
|
|
|
|
.back-text {
|
|
|
font-size: 28rpx;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.header-title {
|
|
|
font-size: 34rpx;
|
|
|
font-weight: bold;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.filter-section {
|
|
|
background: #ffffff;
|
|
|
padding: 20rpx 30rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.filter-dropdown {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
height: 72rpx;
|
|
|
padding: 0 24rpx;
|
|
|
background: #f5f7fa;
|
|
|
border-radius: 12rpx;
|
|
|
|
|
|
.filter-placeholder {
|
|
|
color: #999999;
|
|
|
}
|
|
|
|
|
|
.filter-arrow {
|
|
|
font-size: 32rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.search-section {
|
|
|
background: #ffffff;
|
|
|
padding: 0 30rpx 24rpx;
|
|
|
}
|
|
|
|
|
|
.search-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
background: #f5f7fa;
|
|
|
border-radius: 48rpx;
|
|
|
padding: 0 24rpx;
|
|
|
}
|
|
|
|
|
|
.search-icon {
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
.iconfont {
|
|
|
font-size: 36rpx;
|
|
|
color: #666666;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.search-input {
|
|
|
flex: 1;
|
|
|
height: 72rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
.input-placeholder {
|
|
|
color: #999999;
|
|
|
}
|
|
|
|
|
|
.clear-btn {
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
|
|
|
.clear-icon {
|
|
|
font-size: 36rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.content-scroll {
|
|
|
flex: 1;
|
|
|
height: calc(100vh - 340rpx);
|
|
|
}
|
|
|
|
|
|
.equipment-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding: 0 24rpx;
|
|
|
padding-bottom: 120rpx;
|
|
|
}
|
|
|
|
|
|
.equipment-card {
|
|
|
width: 100%;
|
|
|
background: #ffffff;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 28rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
box-sizing: border-box;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20rpx;
|
|
|
padding-bottom: 20rpx;
|
|
|
border-bottom: 2rpx solid #f0f2f5;
|
|
|
}
|
|
|
|
|
|
.header-left {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.equipment-name {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
color: #1a3a5c;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
.equipment-code {
|
|
|
font-size: 24rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
|
|
|
.card-actions {
|
|
|
display: flex;
|
|
|
gap: 16rpx;
|
|
|
}
|
|
|
|
|
|
.action-btn {
|
|
|
width: 64rpx;
|
|
|
height: 64rpx;
|
|
|
border-radius: 12rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.7;
|
|
|
transform: scale(0.95);
|
|
|
}
|
|
|
|
|
|
.action-icon {
|
|
|
font-size: 32rpx;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.edit-btn {
|
|
|
background: #1a3a5c;
|
|
|
}
|
|
|
|
|
|
.delete-btn {
|
|
|
background: #ff4d4f;
|
|
|
}
|
|
|
|
|
|
.card-body {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.card-row {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 16rpx;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.card-label {
|
|
|
font-size: 26rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
|
|
|
.card-value {
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
flex: 1;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.status-normal {
|
|
|
color: #18bc37;
|
|
|
}
|
|
|
|
|
|
.status-repair {
|
|
|
color: #ff8c00;
|
|
|
}
|
|
|
|
|
|
.status-stopped {
|
|
|
color: #999999;
|
|
|
}
|
|
|
|
|
|
.status-scrap {
|
|
|
color: #ff4d4f;
|
|
|
}
|
|
|
|
|
|
.add-btn {
|
|
|
position: fixed;
|
|
|
bottom: 120rpx;
|
|
|
right: 30rpx;
|
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
box-shadow: 0 8rpx 24rpx rgba(26, 58, 92, 0.3);
|
|
|
z-index: 999;
|
|
|
|
|
|
&:active {
|
|
|
transform: scale(0.95);
|
|
|
}
|
|
|
|
|
|
.add-icon {
|
|
|
font-size: 60rpx;
|
|
|
color: #ffffff;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.popup-content {
|
|
|
width: 680rpx;
|
|
|
max-height: 80vh;
|
|
|
background: #ffffff;
|
|
|
border-radius: 20rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.popup-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 32rpx;
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
}
|
|
|
|
|
|
.popup-title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.popup-close {
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
|
|
|
.close-icon {
|
|
|
font-size: 36rpx;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.form-scroll {
|
|
|
max-height: 55vh;
|
|
|
}
|
|
|
|
|
|
.form-content {
|
|
|
padding: 32rpx;
|
|
|
}
|
|
|
|
|
|
.form-item {
|
|
|
margin-bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
.form-label {
|
|
|
display: block;
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
.required {
|
|
|
color: #ff4d4f;
|
|
|
margin-left: 4rpx;
|
|
|
}
|
|
|
|
|
|
.form-input {
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
padding: 0 24rpx;
|
|
|
font-size: 28rpx;
|
|
|
background: #f5f7fa;
|
|
|
border-radius: 12rpx;
|
|
|
border: 2rpx solid #e8eaed;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.form-picker {
|
|
|
width: 100%;
|
|
|
height: 80rpx;
|
|
|
padding: 0 24rpx;
|
|
|
font-size: 28rpx;
|
|
|
background: #f5f7fa;
|
|
|
border-radius: 12rpx;
|
|
|
border: 2rpx solid #e8eaed;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
.placeholder-text {
|
|
|
color: #999999;
|
|
|
}
|
|
|
|
|
|
.picker-arrow {
|
|
|
font-size: 32rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.form-textarea {
|
|
|
width: 100%;
|
|
|
min-height: 120rpx;
|
|
|
padding: 16rpx 24rpx;
|
|
|
font-size: 28rpx;
|
|
|
background: #f5f7fa;
|
|
|
border-radius: 12rpx;
|
|
|
border: 2rpx solid #e8eaed;
|
|
|
box-sizing: border-box;
|
|
|
resize: none;
|
|
|
}
|
|
|
|
|
|
.status-selector {
|
|
|
display: flex;
|
|
|
gap: 16rpx;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.status-option {
|
|
|
flex: 1;
|
|
|
min-width: 140rpx;
|
|
|
height: 80rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background: #f5f7fa;
|
|
|
border-radius: 12rpx;
|
|
|
border: 2rpx solid #e8eaed;
|
|
|
gap: 8rpx;
|
|
|
|
|
|
&.active {
|
|
|
background: rgba(26, 58, 92, 0.1);
|
|
|
border-color: #1a3a5c;
|
|
|
|
|
|
text {
|
|
|
color: #1a3a5c;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
text {
|
|
|
font-size: 26rpx;
|
|
|
color: #666666;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status-dot {
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
border-radius: 50%;
|
|
|
background: #999999;
|
|
|
|
|
|
&.active {
|
|
|
&.status-normal {
|
|
|
background: #18bc37;
|
|
|
}
|
|
|
&.status-repair {
|
|
|
background: #ff8c00;
|
|
|
}
|
|
|
&.status-stopped {
|
|
|
background: #999999;
|
|
|
}
|
|
|
&.status-scrap {
|
|
|
background: #ff4d4f;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.form-footer {
|
|
|
display: flex;
|
|
|
gap: 16rpx;
|
|
|
padding: 0 32rpx 32rpx;
|
|
|
}
|
|
|
|
|
|
.footer-btn {
|
|
|
flex: 1;
|
|
|
height: 88rpx;
|
|
|
border-radius: 12rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
|
|
|
.btn-text {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cancel-btn {
|
|
|
background: #f5f7fa;
|
|
|
|
|
|
.btn-text {
|
|
|
color: #666666;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.confirm-btn {
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
|
|
|
.btn-text {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.picker-content {
|
|
|
background: #ffffff;
|
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
}
|
|
|
|
|
|
.picker-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 32rpx;
|
|
|
border-bottom: 2rpx solid #f0f2f5;
|
|
|
}
|
|
|
|
|
|
.picker-title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
color: #1a3a5c;
|
|
|
}
|
|
|
|
|
|
.picker-close {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.clear-text {
|
|
|
font-size: 28rpx;
|
|
|
color: #ff4d4f;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
|
|
|
.close-icon {
|
|
|
font-size: 36rpx;
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.picker-list {
|
|
|
max-height: 600rpx;
|
|
|
}
|
|
|
|
|
|
.picker-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 32rpx;
|
|
|
border-bottom: 2rpx solid #f0f2f5;
|
|
|
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background: #f5f7fa;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.picker-text {
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
}
|
|
|
|
|
|
.picker-check {
|
|
|
font-size: 32rpx;
|
|
|
color: #1a3a5c;
|
|
|
}
|
|
|
|
|
|
.date-picker {
|
|
|
height: 400rpx;
|
|
|
}
|
|
|
|
|
|
.picker-column {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
.date-confirm {
|
|
|
height: 88rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background: #1a3a5c;
|
|
|
font-size: 28rpx;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
</style>
|