wangyifang
/
patrol-wzgl-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

驾驶舱

Browse Source
master
lion 3 months ago
parent 397fdf2fbb
commit 8643f174aa
2 changed files with 392 additions and 236 deletions
Show Stats Download Patch File Download Diff File

492
src/views/jsc/components/WarehouseTable.vue
Unescape View File

@ -1,67 +1,158 @@
<template>
<div class="warehouse-table">
<!-- <div class="warehouse-table-title">年度物资动态</div> -->
<!-- Element-UI 表格 -->
<el-table :data="currentPageData" style="width: 100%" height="200" :row-class-name="getRowClass"
:cell-style="{background: 'transparent', border: 'none'}" :header-cell-class-name="'headerRow'">
<el-table-column show-overflow-tooltip prop="type" width="80" label="出入库" align="center" />
<el-table-column show-overflow-tooltip prop="zichanmingcheng" width="120" label="物资名称" align="left" />
<el-table-column show-overflow-tooltip prop="total" width="80" label="数量" align="center" />
<el-table-column show-overflow-tooltip prop="suozaicangku_text" width="100" label="仓库" align="left" />
<el-table-column show-overflow-tooltip prop="riqi" label="时间" width="100" align="left" />
</el-table>
<!-- 四个角的三角形 -->
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
<div>
<div class="title">最新入库</div>
<div class="warehouse-table">
<!-- <div class="warehouse-table-title">年度物资动态</div> -->
<!-- Element-UI 表格 -->
<el-table
:data="currentPageData"
style="width: 100%"
height="200"
:row-class-name="getRowClass"
:cell-style="{ background: 'transparent', border: 'none' }"
:header-cell-class-name="'headerRow'"
>
<!-- <el-table-column show-overflow-tooltip prop="type" width="80" label="出入库" align="center" /> -->
<el-table-column
show-overflow-tooltip
prop="zichanmingcheng"
width="120"
label="物资名称"
align="left"
/>
<el-table-column
show-overflow-tooltip
prop="total"
width="80"
label="数量"
align="center"
/>
<el-table-column
show-overflow-tooltip
prop="suozaicangku_text"
width="100"
label="仓库"
align="left"
/>
<el-table-column show-overflow-tooltip prop="riqi" label="时间" width="100" align="left" />
</el-table>
<!-- 四个角的三角形 -->
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
<div class="title">最新出库</div>
<div class="warehouse-table">
<!-- <div class="warehouse-table-title">年度物资动态</div> -->
<!-- Element-UI 表格 -->
<el-table
:data="currentPageData2"
style="width: 100%"
height="200"
:row-class-name="getRowClass"
:cell-style="{ background: 'transparent', border: 'none' }"
:header-cell-class-name="'headerRow'"
>
<!-- <el-table-column show-overflow-tooltip prop="type" width="80" label="出入库" align="center" /> -->
<el-table-column
show-overflow-tooltip
prop="zichanmingcheng"
width="120"
label="物资名称"
align="left"
/>
<el-table-column
show-overflow-tooltip
prop="total"
width="80"
label="数量"
align="center"
/>
<el-table-column
show-overflow-tooltip
prop="suozaicangku_text"
width="100"
label="仓库"
align="left"
/>
<el-table-column show-overflow-tooltip prop="riqi" label="时间" width="100" align="left" />
</el-table>
<!-- 四个角的三角形 -->
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
</div>
</template>
<script>
import {
soCharts
} from '@/api/charts.js'
export default {
name: 'WarehouseTable',
data() {
return {
// 模拟数据源，可根据实际接口返回调整结构
tableData: [],
pageSize: 3, // 每页显示 3 条数据
currentPage: 1, // 当前页码
timer: null // 定时器标识
}
},
computed: {
// 计算当前页数据
currentPageData() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
return this.tableData.slice(start, end)
},
// 计算总页数
totalPages() {
return Math.ceil(this.tableData.length / this.pageSize)
}
import { soCharts } from '@/api/charts.js'
export default {
name: 'WarehouseTable',
data() {
return {
// 模拟数据源，可根据实际接口返回调整结构
tableData: [], //入库
tableData2: [], //出库
pageSize: 3, // 每页显示 3 条数据
currentPage: 1, // 当前页码
timer: null, // 定时器标识
currentPage2: 1, // 当前页码
timer2: null // 定时器标识
}
},
computed: {
// 计算当前页数据
currentPageData() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
return this.tableData.slice(start, end)
},
mounted() {
// 初始化定时器，3 秒切换一次
this.getChartData()
// this.startTimer()
// 计算总页数
totalPages() {
return Math.ceil(this.tableData.length / this.pageSize)
},
beforeDestroy() {
// 组件销毁前清除定时器，避免内存泄漏
this.clearTimer()
currentPageData2() {
const start = (this.currentPage2 - 1) * this.pageSize
const end = start + this.pageSize
return this.tableData2.slice(start, end)
},
methods: {
async getChartData() {
const so = await soCharts()
// 出入库
let arr = []
so.map(item => {
totalPages2() {
return Math.ceil(this.tableData2.length / this.pageSize)
}
},
mounted() {
// 初始化定时器，3 秒切换一次
this.getChartData()
// this.startTimer()
},
beforeDestroy() {
// 组件销毁前清除定时器，避免内存泄漏
this.clearTimer()
this.clearTimer2()
},
methods: {
async getChartData() {
const so = await soCharts()
// 出入库
const arr = [] // ruku
const arr2 = [] //chuku
so.map(item => {
if (item.jieyongshuliang) {
arr2.push({
suozaicangku_text: item.suozaicangku_text,
type: item.jieyongshuliang ? '出库' : '入库',
total: item.jieyongshuliang ? item.jieyongshuliang : item.rukushuliang,
zichanmingcheng: item.zichanmingcheng,
fenlei_text: item.fenlei_text,
riqi: item.riqi ? item.riqi : item.created_at.substring(0, 10)
})
} else {
arr.push({
suozaicangku_text: item.suozaicangku_text,
type: item.jieyongshuliang ? '出库' : '入库',
@ -70,161 +161,186 @@
fenlei_text: item.fenlei_text,
riqi: item.riqi ? item.riqi : item.created_at.substring(0, 10)
})
})
this.tableData = arr
if (this.tableData.length > 0) {
this.startTimer()
}
},
// 切换到下一页
nextPage() {
this.currentPage = this.currentPage % this.totalPages + 1
},
// 启动定时器
startTimer() {
this.timer = setInterval(() => {
this.nextPage()
}, 3000)
},
// 清除定时器
clearTimer() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
},
// 根据行数据返回对应的类名
getRowClass({
row
}) {
if (row.type === '出库') {
return 'outbound-row';
} else if (row.type === '入库') {
return 'inbound-row';
}
return '';
})
this.tableData = arr
this.tableData2 = arr2
if (this.tableData.length > 0) {
this.startTimer()
}
if (this.tableData2.length > 0) {
this.startTimer2()
}
},
// 切换到下一页
nextPage() {
this.currentPage = (this.currentPage % this.totalPages) + 1
},
nextPage2() {
this.currentPage2 = (this.currentPage2 % this.totalPages2) + 1
},
// 启动定时器
startTimer() {
this.timer = setInterval(() => {
this.nextPage()
}, 3000)
},
startTimer2() {
this.timer2 = setInterval(() => {
this.nextPage2()
}, 3000)
},
// 清除定时器
clearTimer() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
},
clearTimer2() {
if (this.timer2) {
clearInterval(this.timer2)
this.timer2 = null
}
},
// 根据行数据返回对应的类名
getRowClass({ row }) {
if (row.type === '出库') {
return 'outbound-row'
} else if (row.type === '入库') {
return 'inbound-row'
}
return ''
}
}
}
</script>
<style scoped lang="scss">
.warehouse-table {
width: 100%;
position: relative;
/* 可根据实际调整宽度 */
margin: 0 auto;
border: 1px solid #6dcde6;
box-shadow: inset 0 0 10px 2px #6dcde6;
padding: 20px;
margin-bottom: 20px;
}
.title {
color: #6dcde6;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.warehouse-table {
width: 100%;
position: relative;
/* 可根据实际调整宽度 */
margin: 0 auto;
border: 1px solid #6dcde6;
box-shadow: inset 0 0 10px 2px #6dcde6;
padding: 10px;
margin-bottom: 10px;
}
/* 四角三角形基础样式 */
.corner {
position: absolute;
width: 0;
height: 0;
border-style: solid;
z-index: 10;
/* 确保显示在表格内容上方 */
}
/* 四角三角形基础样式 */
.corner {
position: absolute;
width: 0;
height: 0;
border-style: solid;
z-index: 10;
/* 确保显示在表格内容上方 */
}
/* 左上角 */
.top-left {
top: 3px;
left: 3px;
border-width: 10px 10px 0 0;
border-color: #6dcde6 transparent transparent transparent;
}
/* 左上角 */
.top-left {
top: 3px;
left: 3px;
border-width: 10px 10px 0 0;
border-color: #6dcde6 transparent transparent transparent;
}
/* 右上角 */
.top-right {
top: 3px;
right: 3px;
border-width: 0 10px 10px 0;
border-color: transparent #6dcde6 transparent transparent;
}
/* 右上角 */
.top-right {
top: 3px;
right: 3px;
border-width: 0 10px 10px 0;
border-color: transparent #6dcde6 transparent transparent;
}
/* 左下角 */
.bottom-left {
bottom: 3px;
left: 3px;
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent #6dcde6;
}
/* 左下角 */
.bottom-left {
bottom: 3px;
left: 3px;
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent #6dcde6;
}
/* 右下角 */
.bottom-right {
bottom: 3px;
right: 3px;
border-width: 0 0 10px 10px;
border-color: transparent transparent #6dcde6 transparent;
}
/* 右下角 */
.bottom-right {
bottom: 3px;
right: 3px;
border-width: 0 0 10px 10px;
border-color: transparent transparent #6dcde6 transparent;
}
::v-deep .el-table {
background: transparent !important;
}
::v-deep .el-table {
background: transparent !important;
}
::v-deep .el-table tr {
background: transparent !important;
}
::v-deep .el-table tr {
background: transparent !important;
}
::v-deep .headerRow {
background: transparent !important;
color: #fff;
border: none !important;
}
::v-deep .headerRow {
background: transparent !important;
color: #fff;
border: none !important;
}
/* 出库行样式 */
::v-deep .el-table .outbound-row {
background-color: #084d82 !important;
/* 浅红色背景 */
color: #2fb9d6 !important;
/* 红色文字 */
}
/* 出库行样式 */
::v-deep .el-table .outbound-row {
background-color: #084d82 !important;
/* 浅红色背景 */
color: #2fb9d6 !important;
/* 红色文字 */
}
/* 入库行样式 */
::v-deep .el-table .inbound-row {
background-color: #37548c !important;
/* 浅绿色背景 */
color: #ef830f !important;
/* 绿色文字 */
}
/* 入库行样式 */
::v-deep .el-table .inbound-row {
background-color: #37548c !important;
/* 浅绿色背景 */
color: #ef830f !important;
/* 绿色文字 */
}
::v-deep .el-table .el-table__cell {
padding: 10px 0;
}
::v-deep .el-table .el-table__cell {
padding: 10px 0;
}
::v-deep .el-table__body {
border-collapse: separate !important;
border-spacing: 0 5px !important;
table-layout: auto !important;
}
::v-deep .el-table__body {
border-collapse: separate !important;
border-spacing: 0 5px !important;
table-layout: auto !important;
}
::v-deep .el-table,
.el-table__expanded-cell {
background-color: transparent !important;
}
::v-deep .el-table,
.el-table__expanded-cell {
background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
background-color: transparent;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
background-color: transparent;
}
/* 移除表格边框 */
// ::v-deep .el-table, .el-table__header-wrapper, .el-table__body-wrapper {
// border: none !important;
// }
/* 移除表格边框 */
// ::v-deep .el-table, .el-table__header-wrapper, .el-table__body-wrapper {
// border: none !important;
// }
// ::v-deep .el-table__header th {
// border-bottom: none !important;
// }
// ::v-deep .el-table__header th {
// border-bottom: none !important;
// }
// ::v-deep .el-table__body td {
// border-bottom: none !important;
// }
</style>
// ::v-deep .el-table__body td {
// border-bottom: none !important;
// }
</style>

136
src/views/jsc/index.vue
Unescape View File

@ -15,8 +15,8 @@
<div class="jscC-center-left">
<!-- <Pie3DChart :data="upList"></Pie3DChart> -->
<div class="jscC-center-left-title">
<span>重要防汛物资</span>
<div>
<span>市级重要防汛物资</span>
<!-- <div>
<span
:class="['custom-btn', { active: activeType === '市级' }]"
@click="onTypeClick('市级')"
@ -27,31 +27,65 @@
@click="onTypeClick('全市')"
>全市</span
>
</div>
</div> -->
</div>
<div class="jscC-center-left-content">
<div v-if="activeType === '市级'" v-for="item in upList">
<div v-for="item in upList">
<img :src="item.img" alt="" />
<span>{{ item.name }}：</span>
<span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
</div>
<div v-if="activeType === '全市'" v-for="item in upListByFloodMaterials">
<!-- <div v-if="activeType === '全市'" v-for="item in upListByFloodMaterials">
<img :src="item.img" alt="" />
<span>{{ item.name }}：</span>
<span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
</div> -->
</div>
<div class="jscC-center-left-title">
<span>全市重要防汛物资</span>
<!-- <div>
<span
:class="['custom-btn', { active: activeType === '市级' }]"
@click="onTypeClick('市级')"
>市级</span
>
<span
:class="['custom-btn', { active: activeType === '全市' }]"
@click="onTypeClick('全市')"
>全市</span
>
</div> -->
</div>
<div class="jscC-center-left-content">
<!-- <div v-if="activeType === '市级'" v-for="item in upList">
<img :src="item.img" alt="" />
<span>{{ item.name }}：</span>
<span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
</div> -->
<div v-for="item in upListByFloodMaterials">
<img :src="item.img" alt="" />
<span>{{ item.name }}：</span>
<span>{{ item.value }}{{ item.unit ? item.unit : '' }}</span>
</div>
</div>
<div class="jscC-center-top">
<!-- <div class="jscC-center-top">
<div class="jscC-center-left-title">年度物资动态</div>
<WarehouseTable></WarehouseTable>
</div>
</div> -->
</div>
<div class="jscC-center-center">
<echartsMap ref="echartsMap" />
</div>
<div class="jscC-center-right">
<div class="chart-header">
<div class="jscC-center-top">
<!-- <div class="jscC-center-left-title">最新出库</div> -->
<WarehouseTable></WarehouseTable>
</div>
<!-- <div class="chart-header">
<div class="chart-title">已办任务</div>
<div class="time-tabs">
<span
@ -64,8 +98,7 @@
</span>
</div>
</div>
<Bar3DChart :x-data="chartXData" :y-data="chartYData" />
<!-- <Pie3DChart></Pie3DChart> -->
<Bar3DChart :x-data="chartXData" :y-data="chartYData" /> -->
</div>
</div>
<div class="jscC-bottom">
@ -137,25 +170,30 @@ export default {
id: 'yingjidiaodu_count',
unit: '次'
},
// {
// label: '队伍数量',
// value: 0,
// id: 'team_count',
// unit: '个'
// },
// {
// label: '队伍出动人次',
// value: 0,
// id: 'team_article_total',
// unit: '人次'
// },
{
label: '队伍数量',
value: 0,
id: 'team_count',
unit: '个'
},
{
label: '队伍出动人次',
label: '本年度物资调动',
value: 0,
id: 'team_article_total',
unit: '人次'
id: 'stock_outbounds_count',
unit: '次'
},
{
label: '正在出动抢险队伍',
label: '本年度队伍出动',
value: 0,
id: 'team_raxing_count',
unit: '个'
},
id: 'team_articles_count',
unit: '次'
}
// {
// label: '装备总数',
// value: 0,
@ -183,14 +221,6 @@ export default {
label: '出库管理',
path: '/outbounds/index'
},
{
label: '统计报表',
path: '/reports/stocks'
},
{
label: '应急防御',
path: '/books/index'
},
{
label: '盘点管理',
path: '/inventorys/stocktaking'
@ -202,6 +232,14 @@ export default {
{
label: '应急调令',
path: '/workOrder/index'
},
{
label: '应急防御',
path: '/books/index'
},
{
label: '统计报表',
path: '/reports/stocks'
}
],
// 分类
@ -476,19 +514,19 @@ export default {
}
},
// 用户点击切换
onTypeClick(type) {
if (this.activeType !== type) {
this.activeType = type
}
this.clearAutoSwitch()
this.userInteracted = true
// 10秒后恢复自动切换
if (this.resumeTimer) clearTimeout(this.resumeTimer)
this.resumeTimer = setTimeout(() => {
this.userInteracted = false
this.startAutoSwitch()
}, 10000)
},
// onTypeClick(type) {
// if (this.activeType !== type) {
// this.activeType = type
// }
// this.clearAutoSwitch()
// this.userInteracted = true
// // 10秒后恢复自动切换
// if (this.resumeTimer) clearTimeout(this.resumeTimer)
// this.resumeTimer = setTimeout(() => {
// this.userInteracted = false
// this.startAutoSwitch()
// }, 10000)
// },
// 获取统计数据
// 获取已办任务
async getFinishData() {
@ -560,6 +598,9 @@ export default {
// 顶部数据
this.topObj.map(item => {
item.value = home.top[item.id]
if(item.id=='stock_outbounds_count'){
item.value = home.top['stock_count']+home.top['outbounds_count']
}
})
this.xData = []
@ -579,7 +620,7 @@ export default {
item.img = this.imgList[item.name]
})
this.upListByFloodMaterials = this.mergeAndRename(res.upListByFloodMaterials)
this.startAutoSwitch()
// this.startAutoSwitch()
},
mergeAndRename(arr) {
const resultMap = new Map()
@ -762,7 +803,7 @@ export default {
}
&-content {
width: 450px;
width: 400px;
display: flex;
flex-wrap: wrap;
@ -813,7 +854,6 @@ export default {
align-items: center;
justify-content: center;
gap: 20px;
.chart-title {
color: #6dcde6;
font-size: 16px;

Write Preview
Loading…
Cancel
Save