This commit is contained in:
parent
8aa5767ce4
commit
1537811346
|
|
@ -0,0 +1,215 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">{{ title }}</div>
|
||||
|
||||
<div ref="category" style="height: 600px"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { equipmentInServiceRateApi } from "@/api/screen/cityScreen"
|
||||
import { getStatByTypeAndAgeByUsageRateApi, getStatByTypeAndAgeByTurnoverRateApi } from '@/api/wsScreen'
|
||||
|
||||
export default {
|
||||
// props: {
|
||||
// title: {
|
||||
// type: String,
|
||||
// default: '',
|
||||
// },
|
||||
// dlgParams: {
|
||||
// type: Object,
|
||||
// default: () => {},
|
||||
// },
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
unit: '',
|
||||
categories: [],
|
||||
line: [], // 线路
|
||||
substation: [], // 变电
|
||||
cable: [], // 电缆
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openDialog(type) {
|
||||
if (type == 1) {
|
||||
this.title = '装备在用率'
|
||||
this.unit = '%'
|
||||
} else {
|
||||
this.title = '装备周转率'
|
||||
this.unit = '次'
|
||||
}
|
||||
this.dialogVisible = true
|
||||
this.getInfo(type)
|
||||
},
|
||||
async getInfo(type) {
|
||||
try {
|
||||
let res = null
|
||||
if (type == 1) {
|
||||
res = await getStatByTypeAndAgeByUsageRateApi()
|
||||
} else {
|
||||
res = await getStatByTypeAndAgeByTurnoverRateApi()
|
||||
}
|
||||
if (!res.data || res.data.length == 0) return
|
||||
this.categories = res.data.map((item) => item.month)
|
||||
this.line = res.data.map((item) => item.lineCount)
|
||||
this.substation = res.data.map((item) => item.substationCount)
|
||||
this.cable = res.data.map((item) => item.cableCount)
|
||||
this.$nextTick(() => {
|
||||
this.initLineChart()
|
||||
})
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getInfo ~ error:', error)
|
||||
}
|
||||
},
|
||||
initLineChart() {
|
||||
const chartDom = this.$refs.category
|
||||
if (!chartDom) return
|
||||
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
const categories = this.categories
|
||||
|
||||
// 三条折线的假数据
|
||||
const data1 = this.line
|
||||
const data2 = this.substation
|
||||
const data3 = this.cable
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['线路', '变电', '电缆'],
|
||||
textStyle: { color: '#fff' },
|
||||
top: 10,
|
||||
right: 10,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: categories,
|
||||
axisLine: { lineStyle: { color: '#ccc' } },
|
||||
splitLine: { show: false },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: `单位：${this.unit}`,
|
||||
axisLine: { show: false },
|
||||
splitLine: { show: false },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '线路',
|
||||
data: data1,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: { width: 2, color: '#4facfe' },
|
||||
label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0, 90, 170, 0.8)' },
|
||||
{ offset: 1, color: 'rgba(0, 180, 255, 0.05)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '电缆',
|
||||
data: data3,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: { width: 2, color: '#43e97b' },
|
||||
label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 140, 0, 0.8)' },
|
||||
{ offset: 1, color: 'rgba(255, 200, 0, 0.05)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '变电',
|
||||
data: data2,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: { width: 2, color: '#ffae00' },
|
||||
label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0, 150, 80, 0.8)' },
|
||||
{ offset: 1, color: 'rgba(0, 255, 130, 0.05)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', () => myChart.resize())
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../wsScreenWidescreen/img/right-dialog.png');
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
height: 800px;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../wsScreenWidescreen/img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="65%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">装备状态</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择" clearable :popper-append-to-body="false" style="width: 240px">
|
||||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 表单按钮 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="55"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
<template v-slot="{ row }" v-if="column.prop == 'status'">
|
||||
<span v-if="row.status == 1">在库</span>
|
||||
<span v-if="row.status == 2">自用</span>
|
||||
<span v-if="row.status == 3">共享</span>
|
||||
<span v-if="row.status == 4">退役</span>
|
||||
<span v-if="row.status == 5">维修</span>
|
||||
</template>
|
||||
<template v-slot="{ row }" v-else-if="/^feature(Item|Value)\d+$/.test(column.prop)">
|
||||
<span>
|
||||
{{ getFeatureValue(row, column.prop) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDeviceListAPI } from '@/api/EquipmentLedger/index.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
status: '', // 状态
|
||||
},
|
||||
equipList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
statusList: [
|
||||
{ label: '在库', value: 1 },
|
||||
{ label: '自用', value: 2 },
|
||||
{ label: '共享', value: 3 },
|
||||
{ label: '退役', value: 4 },
|
||||
{ label: '维修', value: 5 },
|
||||
],
|
||||
|
||||
tableColumns: [
|
||||
{ label: '施工装备', prop: 'major' },
|
||||
{ label: '型号', prop: 'specificationModel' },
|
||||
{ label: '数量', prop: 'count' },
|
||||
{ label: '设备编码', prop: 'code' },
|
||||
{ label: '特征项1', prop: 'featureItem1' },
|
||||
{ label: '特征值1', prop: 'featureValue1' },
|
||||
{ label: '特征项1', prop: 'featureItem2' },
|
||||
{ label: '特征值2', prop: 'featureValue2' },
|
||||
{ label: '特征项2', prop: 'featureItem3' },
|
||||
{ label: '特征值3', prop: 'featureValue3' },
|
||||
{ label: '特征项4', prop: 'featureItem4' },
|
||||
{ label: '特征值4', prop: 'featureValue4' },
|
||||
{ label: '特征项5', prop: 'featureItem5' },
|
||||
{ label: '特征值5', prop: 'featureValue5' },
|
||||
{ label: '特征项6', prop: 'featureItem6' },
|
||||
{ label: '特征值6', prop: 'featureValue6' },
|
||||
{ label: '特征项7', prop: 'featureItem7' },
|
||||
{ label: '特征值7', prop: 'featureValue7' },
|
||||
{ label: '特征项8', prop: 'featureItem8' },
|
||||
{ label: '特征值8', prop: 'featureValue8' },
|
||||
{ label: '特征项9', prop: 'featureItem9' },
|
||||
{ label: '特征值9', prop: 'featureValue9' },
|
||||
{ label: '产权单位', prop: 'propertyUnit' },
|
||||
{ label: '资产原值（元）', prop: 'originalValue' },
|
||||
{ label: '出厂日期', prop: 'productionDate' },
|
||||
{ label: '使用项目', prop: 'usingProject' },
|
||||
// { label: 'vlook的状态', prop: 'vlookStatus' },
|
||||
{ label: '状态', prop: 'status' },
|
||||
{ label: '下次维保日期', prop: 'nextMaintenanceDate' },
|
||||
{ label: '生产厂家', prop: 'manufacturer' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
// 获取设备列表
|
||||
const res = await getDeviceListAPI(this.queryParams)
|
||||
this.tableList = res.data?.rows || []
|
||||
this.total = res.data?.total || 0
|
||||
} catch (error) {
|
||||
this.$message.error('获取设备列表失败：' + (error.message || '未知错误'))
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
getFeatureValue(row, prop) {
|
||||
const match = prop.match(/feature(Item|Value)(\d+)/)
|
||||
if (!match) return '-'
|
||||
|
||||
const type = match[1] // 'Item' or 'Value'
|
||||
const index = Number(match[2]) - 1
|
||||
const list = row.propertyVoList || []
|
||||
|
||||
if (!list[index]) return '-'
|
||||
|
||||
return type === 'Item' ? list[index].propertyName : list[index].propertyValue
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table {
|
||||
// 启用斑马纹
|
||||
&.el-table--striped .el-table__body {
|
||||
tr.el-table__row--striped td {
|
||||
background-color: #0d214580 !important; // 浅紫色
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9) !important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table td,
|
||||
::v-deep .el-table th.is-leaf {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
::v-deep .el-table::before,
|
||||
.el-table--group::after,
|
||||
.el-table--border::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 隐藏表格滚动条 */
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper {
|
||||
scrollbar-width: none !important; /* Firefox */
|
||||
-ms-overflow-style: none !important; /* IE/Edge */
|
||||
}
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../wsScreenWidescreen/img/all-dialog.png');
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
// 输入框
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(3, 16, 44, 0.5) !important;
|
||||
}
|
||||
::v-deep .el-button--primary {
|
||||
background: #3165d6;
|
||||
border-color: #3165d6;
|
||||
}
|
||||
::v-deep .el-button--mini.is-circle {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
// 表格 - 单元格
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表格 - 每一行
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表头
|
||||
::v-deep .el-table thead tr {
|
||||
background: url('../wsScreenWidescreen/img/all-table-tr.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 点击后背景色
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||||
.el-table__body tr.selection-row > td.el-table__cell {
|
||||
background: #10264a;
|
||||
}
|
||||
// 鼠标移入
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9);
|
||||
}
|
||||
// stripe - 斑马线
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: #0d214580;
|
||||
}
|
||||
// 分页背景
|
||||
::v-deep .pagination-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
// 分页-按钮-选中
|
||||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #3165d6;
|
||||
}
|
||||
// 分页-按钮-未选中
|
||||
::v-deep .el-pagination.is-background .el-pager li {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-上一页
|
||||
::v-deep .el-pagination.is-background .btn-prev {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-下一页
|
||||
::v-deep .el-pagination.is-background .btn-next {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
::v-deep .el-select-dropdown {
|
||||
background-color: #0c1837 !important;
|
||||
border: 1px solid #0c1837 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
::v-deep .el-scrollbar {
|
||||
/* height: 184px !important; */
|
||||
background-color: #0c1837 !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item {
|
||||
color: #fff !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background: #0c1837 !important;
|
||||
}
|
||||
|
||||
// --
|
||||
.btn {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
// 选中颜色
|
||||
&:hover {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 点击颜色
|
||||
&:active {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../wsScreenWidescreen/img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="65%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">装备周转率</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<!-- <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择" clearable :popper-append-to-body="false" style="width: 240px">
|
||||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
|
||||
<!-- <el-row :gutter="10" class="mb8">
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
|
||||
</el-row> -->
|
||||
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="60"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { equipmentTurnoverRateApi } from '@/api/screen/cityScreen'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
status: '', // 状态
|
||||
},
|
||||
equipList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
statusList: [
|
||||
{ label: '在库', value: 1 },
|
||||
{ label: '自用', value: 2 },
|
||||
{ label: '共享', value: 3 },
|
||||
{ label: '退役', value: 4 },
|
||||
{ label: '维修', value: 5 },
|
||||
],
|
||||
|
||||
tableColumns: [
|
||||
{ label: '专业', prop: 'major' },
|
||||
{ label: '主工序', prop: 'mainProcess' },
|
||||
{ label: '子工序', prop: 'subprocess' },
|
||||
{ label: '装备名称', prop: 'deviceName' },
|
||||
{ label: '周转率', prop: 'turnoverRate' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
// 获取设备列表
|
||||
const res = await equipmentTurnoverRateApi({ ...this.queryParams, companyId: sessionStorage.getItem('companyId') })
|
||||
this.tableList = res.data?.list || []
|
||||
this.total = res.data?.total || 0
|
||||
} catch (error) {
|
||||
this.$message.error('获取设备列表失败：' + (error.message || '未知错误'))
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
getFeatureValue(row, prop) {
|
||||
const match = prop.match(/feature(Item|Value)(\d+)/)
|
||||
if (!match) return '-'
|
||||
|
||||
const type = match[1] // 'Item' or 'Value'
|
||||
const index = Number(match[2]) - 1
|
||||
const list = row.propertyVoList || []
|
||||
|
||||
if (!list[index]) return '-'
|
||||
|
||||
return type === 'Item' ? list[index].propertyName : list[index].propertyValue
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table {
|
||||
// 启用斑马纹
|
||||
&.el-table--striped .el-table__body {
|
||||
tr.el-table__row--striped td {
|
||||
background-color: #0d214580 !important; // 浅紫色
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9) !important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table td,
|
||||
::v-deep .el-table th.is-leaf {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
::v-deep .el-table::before,
|
||||
.el-table--group::after,
|
||||
.el-table--border::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 隐藏表格滚动条 */
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper {
|
||||
scrollbar-width: none !important; /* Firefox */
|
||||
-ms-overflow-style: none !important; /* IE/Edge */
|
||||
}
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../wsScreenWidescreen/img/all-dialog.png');
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
// 输入框
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(3, 16, 44, 0.5) !important;
|
||||
}
|
||||
::v-deep .el-button--primary {
|
||||
background: #3165d6;
|
||||
border-color: #3165d6;
|
||||
}
|
||||
::v-deep .el-button--mini.is-circle {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
// 表格 - 单元格
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表格 - 每一行
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表头
|
||||
::v-deep .el-table thead tr {
|
||||
background: url('../wsScreenWidescreen/img/all-table-tr.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 点击后背景色
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||||
.el-table__body tr.selection-row > td.el-table__cell {
|
||||
background: #10264a;
|
||||
}
|
||||
// 鼠标移入
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9);
|
||||
}
|
||||
// stripe - 斑马线
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: #0d214580;
|
||||
}
|
||||
// 分页背景
|
||||
::v-deep .pagination-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
// 分页-按钮-选中
|
||||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #3165d6;
|
||||
}
|
||||
// 分页-按钮-未选中
|
||||
::v-deep .el-pagination.is-background .el-pager li {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-上一页
|
||||
::v-deep .el-pagination.is-background .btn-prev {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-下一页
|
||||
::v-deep .el-pagination.is-background .btn-next {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
::v-deep .el-select-dropdown {
|
||||
background-color: #0c1837 !important;
|
||||
border: 1px solid #0c1837 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
::v-deep .el-scrollbar {
|
||||
/* height: 184px !important; */
|
||||
background-color: #0c1837 !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item {
|
||||
color: #fff !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background: #0c1837 !important;
|
||||
}
|
||||
|
||||
// --
|
||||
.btn {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
// 选中颜色
|
||||
&:hover {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 点击颜色
|
||||
&:active {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../wsScreenWidescreen/img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="65%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">维保预警</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<!-- <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择" clearable :popper-append-to-body="false" style="width: 240px">
|
||||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
|
||||
<!-- <el-row :gutter="10" class="mb8">
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
|
||||
</el-row> -->
|
||||
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="60"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { maintenanceAlarmApi } from '@/api/screen/cityScreen'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
status: '', // 状态
|
||||
},
|
||||
equipList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
statusList: [
|
||||
{ label: '在库', value: 1 },
|
||||
{ label: '自用', value: 2 },
|
||||
{ label: '共享', value: 3 },
|
||||
{ label: '退役', value: 4 },
|
||||
{ label: '维修', value: 5 },
|
||||
],
|
||||
|
||||
tableColumns: [
|
||||
{ label: '工序', prop: 'procedureName' },
|
||||
{ label: '设备', prop: 'deviceName' },
|
||||
{ label: '维保情况', prop: 'situation' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
// 获取设备列表
|
||||
const res = await maintenanceAlarmApi({ ...this.queryParams, companyId: sessionStorage.getItem('companyId') })
|
||||
this.tableList = res.data?.list || []
|
||||
this.total = res.data?.total || 0
|
||||
} catch (error) {
|
||||
this.$message.error('获取设备列表失败：' + (error.message || '未知错误'))
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
getFeatureValue(row, prop) {
|
||||
const match = prop.match(/feature(Item|Value)(\d+)/)
|
||||
if (!match) return '-'
|
||||
|
||||
const type = match[1] // 'Item' or 'Value'
|
||||
const index = Number(match[2]) - 1
|
||||
const list = row.propertyVoList || []
|
||||
|
||||
if (!list[index]) return '-'
|
||||
|
||||
return type === 'Item' ? list[index].propertyName : list[index].propertyValue
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table {
|
||||
// 启用斑马纹
|
||||
&.el-table--striped .el-table__body {
|
||||
tr.el-table__row--striped td {
|
||||
background-color: #0d214580 !important; // 浅紫色
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9) !important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table td,
|
||||
::v-deep .el-table th.is-leaf {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
::v-deep .el-table::before,
|
||||
.el-table--group::after,
|
||||
.el-table--border::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 隐藏表格滚动条 */
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper {
|
||||
scrollbar-width: none !important; /* Firefox */
|
||||
-ms-overflow-style: none !important; /* IE/Edge */
|
||||
}
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../wsScreenWidescreen/img/all-dialog.png');
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
// 输入框
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(3, 16, 44, 0.5) !important;
|
||||
}
|
||||
::v-deep .el-button--primary {
|
||||
background: #3165d6;
|
||||
border-color: #3165d6;
|
||||
}
|
||||
::v-deep .el-button--mini.is-circle {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
// 表格 - 单元格
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表格 - 每一行
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表头
|
||||
::v-deep .el-table thead tr {
|
||||
background: url('../wsScreenWidescreen/img/all-table-tr.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 点击后背景色
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||||
.el-table__body tr.selection-row > td.el-table__cell {
|
||||
background: #10264a;
|
||||
}
|
||||
// 鼠标移入
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9);
|
||||
}
|
||||
// stripe - 斑马线
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: #0d214580;
|
||||
}
|
||||
// 分页背景
|
||||
::v-deep .pagination-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
// 分页-按钮-选中
|
||||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #3165d6;
|
||||
}
|
||||
// 分页-按钮-未选中
|
||||
::v-deep .el-pagination.is-background .el-pager li {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-上一页
|
||||
::v-deep .el-pagination.is-background .btn-prev {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-下一页
|
||||
::v-deep .el-pagination.is-background .btn-next {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
::v-deep .el-select-dropdown {
|
||||
background-color: #0c1837 !important;
|
||||
border: 1px solid #0c1837 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
::v-deep .el-scrollbar {
|
||||
/* height: 184px !important; */
|
||||
background-color: #0c1837 !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item {
|
||||
color: #fff !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background: #0c1837 !important;
|
||||
}
|
||||
|
||||
// --
|
||||
.btn {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
// 选中颜色
|
||||
&:hover {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 点击颜色
|
||||
&:active {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../wsScreenWidescreen/img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="65%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">工程在用装备情况</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<!-- <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择" clearable :popper-append-to-body="false" style="width: 240px">
|
||||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
|
||||
<!-- <el-row :gutter="10" class="mb8">
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
|
||||
</el-row> -->
|
||||
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="60"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { equipmentInUseInTheProjectApi } from '@/api/screen/cityScreen'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
status: '', // 状态
|
||||
},
|
||||
equipList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
statusList: [
|
||||
{ label: '在库', value: 1 },
|
||||
{ label: '自用', value: 2 },
|
||||
{ label: '共享', value: 3 },
|
||||
{ label: '退役', value: 4 },
|
||||
{ label: '维修', value: 5 },
|
||||
],
|
||||
|
||||
tableColumns: [
|
||||
{ label: '工程名称', prop: 'projectName' },
|
||||
{ label: '在用装备数(台)', prop: 'useNum' },
|
||||
{ label: '投资额(万元)', prop: 'investAmount' },
|
||||
{ label: '现场人员(人)', prop: 'scenePersonNum' },
|
||||
{ label: '风险等级', prop: 'riskLevel' },
|
||||
{ label: '地理特征', prop: 'geoFeature' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
// 获取设备列表
|
||||
const res = await equipmentInUseInTheProjectApi({ ...this.queryParams, companyId: sessionStorage.getItem('companyId') })
|
||||
this.tableList = res.data?.list || []
|
||||
this.total = res.data?.total || 0
|
||||
} catch (error) {
|
||||
this.$message.error('获取设备列表失败：' + (error.message || '未知错误'))
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
getFeatureValue(row, prop) {
|
||||
const match = prop.match(/feature(Item|Value)(\d+)/)
|
||||
if (!match) return '-'
|
||||
|
||||
const type = match[1] // 'Item' or 'Value'
|
||||
const index = Number(match[2]) - 1
|
||||
const list = row.propertyVoList || []
|
||||
|
||||
if (!list[index]) return '-'
|
||||
|
||||
return type === 'Item' ? list[index].propertyName : list[index].propertyValue
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table {
|
||||
// 启用斑马纹
|
||||
&.el-table--striped .el-table__body {
|
||||
tr.el-table__row--striped td {
|
||||
background-color: #0d214580 !important; // 浅紫色
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9) !important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table td,
|
||||
::v-deep .el-table th.is-leaf {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
::v-deep .el-table::before,
|
||||
.el-table--group::after,
|
||||
.el-table--border::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 隐藏表格滚动条 */
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper {
|
||||
scrollbar-width: none !important; /* Firefox */
|
||||
-ms-overflow-style: none !important; /* IE/Edge */
|
||||
}
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../wsScreenWidescreen/img/all-dialog.png');
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
// 输入框
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(3, 16, 44, 0.5) !important;
|
||||
}
|
||||
::v-deep .el-button--primary {
|
||||
background: #3165d6;
|
||||
border-color: #3165d6;
|
||||
}
|
||||
::v-deep .el-button--mini.is-circle {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
// 表格 - 单元格
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表格 - 每一行
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表头
|
||||
::v-deep .el-table thead tr {
|
||||
background: url('../wsScreenWidescreen/img/all-table-tr.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 点击后背景色
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||||
.el-table__body tr.selection-row > td.el-table__cell {
|
||||
background: #10264a;
|
||||
}
|
||||
// 鼠标移入
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9);
|
||||
}
|
||||
// stripe - 斑马线
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: #0d214580;
|
||||
}
|
||||
// 分页背景
|
||||
::v-deep .pagination-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
// 分页-按钮-选中
|
||||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #3165d6;
|
||||
}
|
||||
// 分页-按钮-未选中
|
||||
::v-deep .el-pagination.is-background .el-pager li {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-上一页
|
||||
::v-deep .el-pagination.is-background .btn-prev {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-下一页
|
||||
::v-deep .el-pagination.is-background .btn-next {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
::v-deep .el-select-dropdown {
|
||||
background-color: #0c1837 !important;
|
||||
border: 1px solid #0c1837 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
::v-deep .el-scrollbar {
|
||||
/* height: 184px !important; */
|
||||
background-color: #0c1837 !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item {
|
||||
color: #fff !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background: #0c1837 !important;
|
||||
}
|
||||
|
||||
// --
|
||||
.btn {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
// 选中颜色
|
||||
&:hover {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 点击颜色
|
||||
&:active {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../wsScreenWidescreen/img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="dialogVisible"
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="65%"
|
||||
:modal="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div>
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">退役预警</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<!-- <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择" clearable :popper-append-to-body="false" style="width: 240px">
|
||||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
|
||||
<!-- <el-row :gutter="10" class="mb8">
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
|
||||
</el-row> -->
|
||||
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:data="tableList"
|
||||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="60"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { retirementAlarmApi } from '@/api/screen/cityScreen'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
status: '', // 状态
|
||||
},
|
||||
equipList: [
|
||||
{ label: '全网省', value: 1 },
|
||||
{ label: '合肥市', value: 2 },
|
||||
],
|
||||
statusList: [
|
||||
{ label: '在库', value: 1 },
|
||||
{ label: '自用', value: 2 },
|
||||
{ label: '共享', value: 3 },
|
||||
{ label: '退役', value: 4 },
|
||||
{ label: '维修', value: 5 },
|
||||
],
|
||||
|
||||
tableColumns: [
|
||||
{ label: '工序', prop: 'procedureName' },
|
||||
{ label: '设备', prop: 'deviceName' },
|
||||
{ label: '预警情况', prop: 'situation' },
|
||||
],
|
||||
tableList: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
// 获取设备列表
|
||||
const res = await retirementAlarmApi({ ...this.queryParams, companyId: sessionStorage.getItem('companyId') })
|
||||
this.tableList = res.data?.list || []
|
||||
this.total = res.data?.total || 0
|
||||
} catch (error) {
|
||||
this.$message.error('获取设备列表失败：' + (error.message || '未知错误'))
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
getFeatureValue(row, prop) {
|
||||
const match = prop.match(/feature(Item|Value)(\d+)/)
|
||||
if (!match) return '-'
|
||||
|
||||
const type = match[1] // 'Item' or 'Value'
|
||||
const index = Number(match[2]) - 1
|
||||
const list = row.propertyVoList || []
|
||||
|
||||
if (!list[index]) return '-'
|
||||
|
||||
return type === 'Item' ? list[index].propertyName : list[index].propertyValue
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table {
|
||||
// 启用斑马纹
|
||||
&.el-table--striped .el-table__body {
|
||||
tr.el-table__row--striped td {
|
||||
background-color: #0d214580 !important; // 浅紫色
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9) !important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table td,
|
||||
::v-deep .el-table th.is-leaf {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
::v-deep .el-table::before,
|
||||
.el-table--group::after,
|
||||
.el-table--border::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 隐藏表格滚动条 */
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper {
|
||||
scrollbar-width: none !important; /* Firefox */
|
||||
-ms-overflow-style: none !important; /* IE/Edge */
|
||||
}
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../wsScreenWidescreen/img/all-dialog.png');
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
// 输入框
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(3, 16, 44, 0.5) !important;
|
||||
}
|
||||
::v-deep .el-button--primary {
|
||||
background: #3165d6;
|
||||
border-color: #3165d6;
|
||||
}
|
||||
::v-deep .el-button--mini.is-circle {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
// 表格 - 单元格
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表格 - 每一行
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
// 表头
|
||||
::v-deep .el-table thead tr {
|
||||
background: url('../wsScreenWidescreen/img/all-table-tr.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
// 点击后背景色
|
||||
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||||
.el-table__body tr.selection-row > td.el-table__cell {
|
||||
background: #10264a;
|
||||
}
|
||||
// 鼠标移入
|
||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(16, 37, 81, 0.9);
|
||||
}
|
||||
// stripe - 斑马线
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background-color: #0d214580;
|
||||
}
|
||||
// 分页背景
|
||||
::v-deep .pagination-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
// 分页-按钮-选中
|
||||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #3165d6;
|
||||
}
|
||||
// 分页-按钮-未选中
|
||||
::v-deep .el-pagination.is-background .el-pager li {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-上一页
|
||||
::v-deep .el-pagination.is-background .btn-prev {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 分页-下一页
|
||||
::v-deep .el-pagination.is-background .btn-next {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
::v-deep .el-select-dropdown {
|
||||
background-color: #0c1837 !important;
|
||||
border: 1px solid #0c1837 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
::v-deep .el-scrollbar {
|
||||
/* height: 184px !important; */
|
||||
background-color: #0c1837 !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item {
|
||||
color: #fff !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background: #0c1837 !important;
|
||||
}
|
||||
|
||||
// --
|
||||
.btn {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
// 选中颜色
|
||||
&:hover {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
// 点击颜色
|
||||
&:active {
|
||||
background-color: rgba(16, 37, 81, 0.5);
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../wsScreenWidescreen/img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-loading="isLoading"
|
||||
:visible.sync="dialogVisible"
|
||||
width="90%"
|
||||
:modal="false"
|
||||
:modal-append-to-body="false"
|
||||
class="dlg-box"
|
||||
>
|
||||
<div style="height: 800px">
|
||||
<!-- 自定义title -->
|
||||
<i class="close-btn" @click="dialogVisible = false" />
|
||||
<div class="dlg-title">体系装备</div>
|
||||
<!-- 内容 -->
|
||||
<div class="box">
|
||||
<!-- left -->
|
||||
<div class="text left-text-1"></div>
|
||||
<div class="text left-text-2"></div>
|
||||
<div class="text left-text-3"></div>
|
||||
<div class="text left-text-4"></div>
|
||||
<div class="text left-text-5"></div>
|
||||
<div class="text left-text-6"></div>
|
||||
<div class="text left-text-7"></div>
|
||||
<div class="text left-text-8"></div>
|
||||
<div class="text left-text-9"></div>
|
||||
<div class="text left-text-10"></div>
|
||||
<div class="text left-text-11"></div>
|
||||
<div class="text left-text-12"></div>
|
||||
<div class="text left-text-13"></div>
|
||||
<div class="text left-text-14"></div>
|
||||
<div class="text left-text-15"></div>
|
||||
<div class="text left-text-16"></div>
|
||||
<div class="text left-text-17"></div>
|
||||
<div class="text left-text-18"></div>
|
||||
<!-- center -->
|
||||
<div class="text center-text-1"></div>
|
||||
<div class="text center-text-2"></div>
|
||||
<div class="text center-text-3"></div>
|
||||
<div class="text center-text-4"></div>
|
||||
<div class="text center-text-5"></div>
|
||||
<!-- right -->
|
||||
<div class="text right-text-1"></div>
|
||||
<div class="text right-text-2"></div>
|
||||
<div class="text right-text-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
dialogVisible: false,
|
||||
formData: {},
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
getList() {},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../wsScreenWidescreen/img/systemEquip.png');
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
.table-container {
|
||||
color: #fff;
|
||||
background-color: #04112a80;
|
||||
}
|
||||
.dlg-box {
|
||||
position: absolute;
|
||||
.close-btn {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
background-image: url('../wsScreenWidescreen/img/close.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dlg-title {
|
||||
margin-top: -25px;
|
||||
margin-bottom: 45px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.box {
|
||||
color: #f3ea71;
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
.text {
|
||||
width: 37px;
|
||||
text-align: center;
|
||||
/* border: 1px solid #f3ea71; */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left-text-1 {
|
||||
top: 522px;
|
||||
left: 58px;
|
||||
}
|
||||
.left-text-2 {
|
||||
top: 174px;
|
||||
left: 261px;
|
||||
}
|
||||
.left-text-3 {
|
||||
top: 407px;
|
||||
left: 261px;
|
||||
}
|
||||
.left-text-4 {
|
||||
top: 564px;
|
||||
left: 261px;
|
||||
}
|
||||
.left-text-5 {
|
||||
top: 760px;
|
||||
left: 261px;
|
||||
}
|
||||
.left-text-6 {
|
||||
top: 305px;
|
||||
left: 563px;
|
||||
}
|
||||
.left-text-7 {
|
||||
top: 511px;
|
||||
left: 576px;
|
||||
}
|
||||
.left-text-8 {
|
||||
top: 603px;
|
||||
left: 576px;
|
||||
}
|
||||
.left-text-9 {
|
||||
top: 702px;
|
||||
left: 576px;
|
||||
}
|
||||
.left-text-10 {
|
||||
top: 337px;
|
||||
left: 707px;
|
||||
}
|
||||
.left-text-11 {
|
||||
top: 479px;
|
||||
left: 686px;
|
||||
}
|
||||
.left-text-12 {
|
||||
top: 509px;
|
||||
left: 686px;
|
||||
}
|
||||
.left-text-13 {
|
||||
top: 539px;
|
||||
left: 686px;
|
||||
}
|
||||
.left-text-14 {
|
||||
top: 588px;
|
||||
left: 690px;
|
||||
}
|
||||
.left-text-15 {
|
||||
top: 618px;
|
||||
left: 690px;
|
||||
}
|
||||
.left-text-16 {
|
||||
top: 672px;
|
||||
left: 694px;
|
||||
}
|
||||
.left-text-17 {
|
||||
top: 702px;
|
||||
left: 686px;
|
||||
}
|
||||
.left-text-18 {
|
||||
top: 732px;
|
||||
left: 686px;
|
||||
}
|
||||
.center-text-1 {
|
||||
top: 508px;
|
||||
left: 838px;
|
||||
}
|
||||
.center-text-2 {
|
||||
top: 227px;
|
||||
left: 1041px;
|
||||
}
|
||||
.center-text-3 {
|
||||
top: 761px;
|
||||
left: 1041px;
|
||||
}
|
||||
.center-text-4 {
|
||||
top: 509px;
|
||||
left: 1460px;
|
||||
}
|
||||
.center-text-5 {
|
||||
top: 658px;
|
||||
left: 1460px;
|
||||
}
|
||||
.right-text-1 {
|
||||
top: 525px;
|
||||
left: 1604px;
|
||||
}
|
||||
.right-text-2 {
|
||||
top: 503px;
|
||||
left: 1806px;
|
||||
}
|
||||
.right-text-3 {
|
||||
top: 482px;
|
||||
left: 2214px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog">
|
||||
<div class="title">
|
||||
工程在用装备情况
|
||||
</div>
|
||||
|
|
@ -104,6 +104,9 @@ export default {
|
|||
this.getEquipmentInUseInTheProject()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
changeSelect(){
|
||||
console.log(this.selectId)
|
||||
this.getEquipmentInUseInTheProject()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog">
|
||||
<img src="../../../../../assets/cityScreen/equiQuantityBg.png" style="width: 100%;height: 100%;" />
|
||||
<div class="title">
|
||||
装备数量价值
|
||||
|
|
@ -189,6 +189,9 @@ export default {
|
|||
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
getEquipmentQuantity(){
|
||||
equipmentQuantityValueApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
|
||||
console.log(response,'equipmentQuantityValueApi')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog">
|
||||
<div class="title">
|
||||
装备状态
|
||||
</div>
|
||||
|
|
@ -41,6 +41,9 @@ export default {
|
|||
this.InitEChartsOne()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
InitEChartsOne() {
|
||||
equipmentStatusApi({companyId:sessionStorage.getItem('companyId')}).then((response) => {
|
||||
console.log(response,"equipmentStatusApi")
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog">
|
||||
<div class="title">
|
||||
装备周转率
|
||||
</div>
|
||||
|
|
@ -51,6 +51,9 @@ export default {
|
|||
this.getEquipmentTurnoverRate()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
getEquipmentTurnoverRate(){
|
||||
equipmentTurnoverRateApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
|
||||
console.log(response,'equipmentTurnoverRateApi')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog">
|
||||
<div class="title">
|
||||
装备在用率
|
||||
</div>
|
||||
|
|
@ -44,9 +44,12 @@ export default {
|
|||
this.getEquipmentInServiceRate()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
getEquipmentInServiceRate(){
|
||||
equipmentInServiceRateApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
|
||||
console.log(response,'equipmentInServiceRateApi')
|
||||
console.log(response,'装备在用率')
|
||||
if(response.code==200){
|
||||
this.allRate = response.data[3].rate
|
||||
this.rate1 = response.data[0].rate
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog">
|
||||
<div class="title">
|
||||
维保预警
|
||||
</div>
|
||||
|
|
@ -58,6 +58,9 @@ export default {
|
|||
this.getMaintenanceAlarm()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
getMaintenanceAlarm(){
|
||||
maintenanceAlarmApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
|
||||
console.log(response,'maintenanceAlarmApi')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog">
|
||||
<div class="title">
|
||||
退役预警
|
||||
</div>
|
||||
|
|
@ -55,6 +55,9 @@ export default {
|
|||
this.getRetirementAlarm()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
getRetirementAlarm(){
|
||||
retirementAlarmApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
|
||||
console.log(response,'retirementAlarmApi')
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
<div class="page">
|
||||
<div class="main-view">
|
||||
<div class="left_view">
|
||||
<TopIcons style="width: 96%; height: 13%; margin: 0 auto"></TopIcons>
|
||||
<TopIcons style="width: 96%; height: 13%; margin: 0 auto" />
|
||||
<div style="width: 98%; height: 42%; margin: 0 auto; display: flex; align-items: center">
|
||||
<EquiQuantity style="width: 50%; height: 100%"></EquiQuantity>
|
||||
<EquiStatus style="width: 50%; height: 100%"></EquiStatus>
|
||||
<EquiQuantity style="width: 50%; height: 100%" @openDialog="openSystemEquip" />
|
||||
<EquiStatus style="width: 50%; height: 100%" @openDialog="openStatusMore" />
|
||||
</div>
|
||||
<div style="width: 98%; height: 42%; margin: 0 auto; display: flex; align-items: center">
|
||||
<Maintenance style="width: 50%; height: 100%"></Maintenance>
|
||||
<Retire style="width: 50%; height: 100%"></Retire>
|
||||
<Maintenance style="width: 50%; height: 100%" @openDialog="openWarning" />
|
||||
<Retire style="width: 50%; height: 100%" @openDialog="openRetirementWarning" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="center_view">
|
||||
|
|
@ -18,14 +18,21 @@
|
|||
<div class="right_view">
|
||||
<TopIconsTwo style="width: 96%; height: 13%; margin: 0 auto"></TopIconsTwo>
|
||||
<div style="width: 98%; height: 42%; margin: 0 auto; display: flex; align-items: center">
|
||||
<EquiUse style="width: 50%; height: 100%"></EquiUse>
|
||||
<EquiTurnover style="width: 50%; height: 100%"></EquiTurnover>
|
||||
<EquiUse style="width: 50%; height: 100%" @openDialog="openEquipItemMore"/>
|
||||
<EquiTurnover style="width: 50%; height: 100%" @openDialog="openEquipTurnroundRate" />
|
||||
</div>
|
||||
<div style="width: 98%; height: 42%; margin: 0 auto; display: flex; align-items: center">
|
||||
<EngineerUsing style="width: 100%; height: 100%"></EngineerUsing>
|
||||
<EngineerUsing style="width: 100%; height: 100%" @openDialog="openProEquip" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SystemEquip ref="systemEquip" />
|
||||
<EquipStatusMore ref="equipStatusMore" />
|
||||
<EquipWarning ref="equipWarning" />
|
||||
<RetirementWarning ref="retirementWarning" />
|
||||
<EquipTurnroundRate ref="equipTurnroundRate" />
|
||||
<ProEquip ref="proEquip" />
|
||||
<EquipItemMore ref="equipItemMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -40,6 +47,14 @@ import EquiTurnover from './components/equiTurnover/index'
|
|||
import EquiUse from './components/equiUse/index'
|
||||
import EngineerUsing from './components/engineerUsing/index'
|
||||
import CountryMap from '../components-old/countryMap.vue'
|
||||
import SystemEquip from './SystemEquip.vue'
|
||||
import EquipStatusMore from './EquipStatusMore.vue'
|
||||
import EquipWarning from './EquipWarning.vue'
|
||||
import RetirementWarning from './RetirementWarning.vue'
|
||||
import EquipTurnroundRate from './EquipTurnroundRate.vue'
|
||||
import ProEquip from './ProEquip.vue'
|
||||
import EquipItemMore from './EquipItemMore.vue'
|
||||
|
||||
export default {
|
||||
name: 'cityScreen',
|
||||
components: {
|
||||
|
|
@ -53,13 +68,42 @@ export default {
|
|||
EquiUse,
|
||||
EngineerUsing,
|
||||
CountryMap,
|
||||
SystemEquip,
|
||||
EquipStatusMore,
|
||||
EquipWarning,
|
||||
RetirementWarning,
|
||||
EquipTurnroundRate,
|
||||
ProEquip,
|
||||
EquipItemMore
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
methods: {
|
||||
openSystemEquip() {
|
||||
this.$refs.systemEquip.openDialog()
|
||||
},
|
||||
openStatusMore() {
|
||||
this.$refs.equipStatusMore.openDialog()
|
||||
},
|
||||
openWarning() {
|
||||
this.$refs.equipWarning.openDialog()
|
||||
},
|
||||
openRetirementWarning() {
|
||||
this.$refs.retirementWarning.openDialog()
|
||||
},
|
||||
openEquipTurnroundRate() {
|
||||
this.$refs.equipTurnroundRate.openDialog()
|
||||
},
|
||||
openProEquip() {
|
||||
this.$refs.proEquip.openDialog()
|
||||
},
|
||||
openEquipItemMore() {
|
||||
this.$refs.equipItemMore.openDialog(1)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog">
|
||||
<div class="select-view">
|
||||
<select v-model="selectId" @change="changeSelect" class="select-box">
|
||||
<option v-for="item in options" :key="item.value" :value="item.value">
|
||||
|
|
@ -103,6 +103,9 @@ export default {
|
|||
this.getEquipmentInUseInTheProject()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
changeSelect() {
|
||||
console.log(this.selectId)
|
||||
this.getEquipmentInUseInTheProject()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title"></div>
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog"></div>
|
||||
<div class="content-view">
|
||||
<div class="content-view-item" style="padding-top: 12px;">
|
||||
<img src="../../../../../assets/cityScreen/quantityIcon1.png"/>
|
||||
|
|
@ -198,6 +198,9 @@ export default {
|
|||
this.getEquipmentQuantity()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
getEquipmentQuantity() {
|
||||
equipmentQuantityValueApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
|
||||
console.log(response, 'equipmentQuantityValueApi')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title"></div>
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog"></div>
|
||||
<div class="content-view">
|
||||
<div id="lineChartFour" style="width: 100%; height: 85%"></div>
|
||||
<div class="text">备注说明：在用装备包含共享装备。</div>
|
||||
|
|
@ -37,6 +37,9 @@ export default {
|
|||
this.InitEChartsOne()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
InitEChartsOne() {
|
||||
equipmentStatusApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
|
||||
console.log(response, 'equipmentStatusApi')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title"></div>
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog"></div>
|
||||
<div class="content-view">
|
||||
<div class="tableHeader">
|
||||
<div class="header" style="width: 30%">专业</div>
|
||||
|
|
@ -47,6 +47,9 @@ export default {
|
|||
this.getEquipmentTurnoverRate()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
getEquipmentTurnoverRate() {
|
||||
equipmentTurnoverRateApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
|
||||
console.log(response, 'equipmentTurnoverRateApi')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title"></div>
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog"></div>
|
||||
<div class="content-view">
|
||||
<div class="all-box">
|
||||
<div style="font-size: 20px">{{ allRate }}%</div>
|
||||
|
|
@ -40,6 +40,9 @@ export default {
|
|||
this.getEquipmentInServiceRate()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
getEquipmentInServiceRate() {
|
||||
equipmentInServiceRateApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
|
||||
console.log(response, 'equipmentInServiceRateApi')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content-1">
|
||||
<div class="content-title">
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog">
|
||||
<div class="content-view-item">
|
||||
<span class="text">装备预警总数:</span>
|
||||
<span class="num"> {{ totalNum }}</span>
|
||||
|
|
@ -54,6 +54,9 @@ export default {
|
|||
this.getMaintenanceAlarm()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
getMaintenanceAlarm() {
|
||||
maintenanceAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
|
||||
console.log(response, 'maintenanceAlarmApi')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="content-title" style="cursor: pointer" @click="openDialog">
|
||||
<div class="content-view-item">
|
||||
<span class="label" style="">退役预警总数:</span>
|
||||
<span class="num">{{ totalNum }}</span>
|
||||
|
|
@ -54,6 +54,9 @@ export default {
|
|||
this.getRetirementAlarm()
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$emit('openDialog')
|
||||
},
|
||||
getRetirementAlarm() {
|
||||
retirementAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
|
||||
console.log(response, 'retirementAlarmApi')
|
||||
|
|
|
|||
|
|
@ -4,38 +4,45 @@
|
|||
<div class="left_view">
|
||||
<!-- <TopIcons /> -->
|
||||
<div class="left_1">
|
||||
<TopIcons/>
|
||||
<TopIcons />
|
||||
</div>
|
||||
<div class="left_2">
|
||||
<EquQuantity/>
|
||||
<EquQuantity @openDialog="openSystemEquip" />
|
||||
</div>
|
||||
<div class="left_5">
|
||||
<EquStatus/>
|
||||
<EquStatus @openDialog="openStatusMore" />
|
||||
</div>
|
||||
<div class="left_3">
|
||||
<Maintenance/>
|
||||
<Maintenance @openDialog="openWarning" />
|
||||
</div>
|
||||
<div class="left_6">
|
||||
<Retire/>
|
||||
<Retire @openDialog="openRetirementWarning" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="center_view">
|
||||
<CountryMap/>
|
||||
<CountryMap />
|
||||
</div>
|
||||
<div class="right_view">
|
||||
<div class="right_1">
|
||||
<TopIconsTwo/>
|
||||
<TopIconsTwo />
|
||||
</div>
|
||||
<div class="right_2">
|
||||
<EquUse/>
|
||||
<EquUse @openDialog="openEquipItemMore" />
|
||||
</div>
|
||||
<div class="right_3">
|
||||
<EquTurnover/>
|
||||
<EquTurnover @openDialog="openEquipTurnroundRate" />
|
||||
</div>
|
||||
<div class="right_4">
|
||||
<EngineerUsing/>
|
||||
<EngineerUsing @openDialog="openProEquip" />
|
||||
</div>
|
||||
</div>
|
||||
<SystemEquip ref="systemEquip" />
|
||||
<EquipStatusMore ref="equipStatusMore" />
|
||||
<EquipWarning ref="equipWarning" />
|
||||
<RetirementWarning ref="retirementWarning" />
|
||||
<EquipTurnroundRate ref="equipTurnroundRate" />
|
||||
<ProEquip ref="proEquip" />
|
||||
<EquipItemMore ref="equipItemMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -51,6 +58,13 @@ import EquUse from './components/equUse/index.vue'
|
|||
import EquTurnover from './components/equTurnover/index.vue'
|
||||
import EngineerUsing from './components/engineerUsing/index.vue'
|
||||
import autofit from 'autofit.js'
|
||||
import SystemEquip from '../cityScreen-old/SystemEquip.vue'
|
||||
import EquipStatusMore from '../cityScreen-old/EquipStatusMore.vue'
|
||||
import EquipWarning from '../cityScreen-old/EquipWarning.vue'
|
||||
import RetirementWarning from '../cityScreen-old/RetirementWarning.vue'
|
||||
import EquipTurnroundRate from '../cityScreen-old/EquipTurnroundRate.vue'
|
||||
import ProEquip from '../cityScreen-old/ProEquip.vue'
|
||||
import EquipItemMore from '../cityScreen-old/EquipItemMore.vue'
|
||||
|
||||
export default {
|
||||
name: 'cityScreen',
|
||||
|
|
@ -65,22 +79,50 @@ export default {
|
|||
TopIconsTwo,
|
||||
EquUse,
|
||||
EquTurnover,
|
||||
EngineerUsing
|
||||
EngineerUsing,
|
||||
SystemEquip,
|
||||
EquipStatusMore,
|
||||
EquipWarning,
|
||||
RetirementWarning,
|
||||
EquipTurnroundRate,
|
||||
ProEquip,
|
||||
EquipItemMore,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
autofit.init({
|
||||
designHeight: 1080,
|
||||
designWidth: 1920,
|
||||
renderDom: '#cityScreenContainer',
|
||||
resize: true
|
||||
resize: true,
|
||||
})
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
openSystemEquip() {
|
||||
this.$refs.systemEquip.openDialog()
|
||||
},
|
||||
openStatusMore() {
|
||||
this.$refs.equipStatusMore.openDialog()
|
||||
},
|
||||
openWarning() {
|
||||
this.$refs.equipWarning.openDialog()
|
||||
},
|
||||
openRetirementWarning() {
|
||||
this.$refs.retirementWarning.openDialog()
|
||||
},
|
||||
openEquipTurnroundRate() {
|
||||
this.$refs.equipTurnroundRate.openDialog()
|
||||
},
|
||||
openProEquip() {
|
||||
this.$refs.proEquip.openDialog()
|
||||
},
|
||||
openEquipItemMore() {
|
||||
this.$refs.equipItemMore.openDialog(1)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue