27 changed files with 3173 additions and 100 deletions
@ -0,0 +1,146 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
export const chartOption ={ |
|||
color: ["#2AD9FD"], |
|||
xAxis: { |
|||
name: "日", |
|||
type: "category", |
|||
// boundaryGap: ["15%", "15%"],
|
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
align: "right", |
|||
fontSize: 15, |
|||
padding: [0, -15, 0, 0], |
|||
}, |
|||
boundaryGap: false, |
|||
data: ['00:00','02:00','04:00','06:00'], |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#668598", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: [{ |
|||
name: "雨量日计", |
|||
type: "value", |
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
// align: "right",
|
|||
fontSize: 15, |
|||
// padding: [0, -15, 0, 0],
|
|||
}, |
|||
// nameGap: 24,
|
|||
splitLine: { |
|||
lineStyle: { |
|||
type: [6, 9], |
|||
color: "rgba(255,255,255, .3)", |
|||
// dashOffset: [10, 10],
|
|||
// cap: 21,
|
|||
// width: 2
|
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
formatter: "{value}", |
|||
}, |
|||
},{ |
|||
name: "雨量累计", |
|||
type: "value", |
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
// align: "right",
|
|||
fontSize: 15, |
|||
// padding: [0, -15, 0, 0],
|
|||
}, |
|||
// nameGap: 24,
|
|||
splitLine: { |
|||
lineStyle: { |
|||
type: [6, 9], |
|||
color: "rgba(255,255,255, .3)", |
|||
// dashOffset: [10, 10],
|
|||
// cap: 21,
|
|||
// width: 2
|
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
formatter: "{value}", |
|||
}, |
|||
}], |
|||
grid: { |
|||
left: 33, |
|||
top: 33, |
|||
bottom: 24, |
|||
right: 36, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
backgroundColor: "rgba(0,0,0,0.36)", |
|||
borderWidth: 0, |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
formatter: "{b}：{c}", |
|||
}, |
|||
legend: { |
|||
textStyle: { |
|||
color: '#2AD9FD' |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [1,2,3,4], |
|||
type: "line", |
|||
showSymbol: false, |
|||
smooth: true, |
|||
name: '计数', |
|||
lineStyle: { |
|||
color: "#2AD9FD", |
|||
}, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgb(90, 227, 255, .9)", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(42,217,253,0)", |
|||
}, |
|||
]), |
|||
}, |
|||
}, { |
|||
data: [1,2,3,4], |
|||
type: "line", |
|||
showSymbol: false, |
|||
smooth: true, |
|||
name: '计数', |
|||
lineStyle: { |
|||
color: "#2AD9FD", |
|||
}, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgb(90, 227, 255, .9)", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(42,217,253,0)", |
|||
}, |
|||
]), |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
File diff suppressed because it is too large
@ -1,34 +1,315 @@ |
|||
<template> |
|||
<div class='board_record'> |
|||
TODO |
|||
<div class='content'> |
|||
<div class="left"> |
|||
|
|||
<WgtTitle :title="'设备列表'"></WgtTitle> |
|||
<el-form :model="form" class="formSearch keep-ratio" size="mini"> |
|||
<el-form-item> |
|||
<el-col :span="11"> |
|||
<el-input v-model="form.deviceName" size="medium" placeholder="设备名称" class="direction"></el-input> |
|||
</el-col> |
|||
<el-col :span="10" :offset="1"> |
|||
<el-checkbox-group v-model="form.deviceState" style="height:26px"> |
|||
<el-checkbox :label="1">在线</el-checkbox> |
|||
<el-checkbox :label="0">异常</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
</el-form-item> |
|||
<el-form-item style="display: flex; justify-content: center;"> |
|||
<el-button class="btnInfoBoard" type="add" @click.native="onSearch()">搜索</el-button> |
|||
<el-button type="publish" @click.native="onResetSearch()">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="body"> |
|||
<vuescroll :ops="scrollOptions"> |
|||
<div class="device keep-ratio" v-for="(item, index) of list"> |
|||
<div>{{ item.deviceName }}</div> |
|||
<el-tooltip :content="(item.deviceState == 0 || item.deviceState == null) ? '异常' : '在线'" placement="top"> |
|||
<img src="@/assets/jihe/images/offline.svg" class="state" |
|||
v-if="item.deviceState == '0' || item.deviceState == null"> |
|||
<img src="@/assets/jihe/images/online.svg" class="state" v-else> |
|||
</el-tooltip> |
|||
</div> |
|||
<div v-if="list.length === 0" style="color: #fff; text-align: center; line-height: 60px"> |
|||
暂无数据 |
|||
</div> |
|||
</vuescroll> |
|||
</div> |
|||
<div class="footer"> |
|||
<ElPagination @current-change="bindList" @size-change="onSizeChange" width="'100%'" |
|||
:page-sizes="[10, 20, 30, 40, 50]" :page-size="page.pageSize" :current-page.sync="page.pageNum" |
|||
layout="total, prev, pager, next" :total="total" class="Pagination"> |
|||
</ElPagination> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="top"> |
|||
<div class="search"> |
|||
<el-date-picker |
|||
size="small" |
|||
type="date" |
|||
class="selectDate" |
|||
v-model="date" |
|||
style="width: 140px" |
|||
placeholder="请选择" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="bottom"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import request from "@/utils/request"; |
|||
import vuescroll from "vuescroll"; |
|||
import scrollOptions from "@/common/scrollbar.js"; |
|||
import { Message } from "element-ui"; |
|||
import WgtTitle from "@screen/pages/perception/widgets/title"; |
|||
export default { |
|||
name: 'boardRecord', |
|||
name: 'smartAnalysis', |
|||
components: { |
|||
|
|||
vuescroll, |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
form: { |
|||
deviceName: '', |
|||
deviceState: [1, 0] |
|||
}, |
|||
page: { |
|||
pageNum: 0, |
|||
pageSize: 20 |
|||
}, |
|||
total: 0, |
|||
list: [], |
|||
scrollOptions, |
|||
date:'' |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
mounted(){ |
|||
|
|||
mounted() { |
|||
this.bindList(); |
|||
this.date = moment().format('YYYY-MM-DD') |
|||
}, |
|||
methods: { |
|||
onSizeChange(pageSize) { |
|||
this.page.pageSize = pageSize; |
|||
this.bindList(); |
|||
}, |
|||
bindList() { |
|||
const params = { |
|||
...this.form, ...this.page, |
|||
}; |
|||
if (params.deviceState.length === 2) { |
|||
delete params.deviceState; |
|||
} else { |
|||
params.deviceState = params.deviceState.join('') |
|||
} |
|||
if (params.deviceName === '') { |
|||
delete params.deviceName |
|||
} |
|||
request({ |
|||
url: 'business/device/selectDeviceNameList', |
|||
method: 'get', |
|||
params |
|||
}).then(result => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.list = result.rows; |
|||
this.total = result.total; |
|||
}) |
|||
}, |
|||
onResetSearch() { |
|||
this.form = { |
|||
deviceName: '', |
|||
deviceState: [1, 0] |
|||
}; |
|||
this.pageNum = 0; |
|||
this.bindList(); |
|||
}, |
|||
onSearch() { |
|||
this.pageNum = 0; |
|||
this.bindList(); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.board_record { |
|||
.content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
background-color: #101d23; |
|||
padding: 20px; |
|||
|
|||
.left { |
|||
width: 400px; |
|||
background-color: #112533; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.body { |
|||
flex: 1; |
|||
height: 0; |
|||
padding: 0 10px 10px; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 10px; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
flex: 1; |
|||
margin-left: 30px; |
|||
} |
|||
} |
|||
|
|||
::v-deep .formSearch { |
|||
padding: 20px 20px 0; |
|||
|
|||
.el-form-item__label { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.direction { |
|||
::v-deep .el-input { |
|||
.el-input__inner { |
|||
font-size: 14px !important; |
|||
padding: 8px 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.device { |
|||
padding: 7.5px 15px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.device:hover { |
|||
background-color: #1d647f; |
|||
} |
|||
|
|||
.state { |
|||
width: 18px; |
|||
height: 18px; |
|||
} |
|||
.top{ |
|||
.search{ |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.Pagination { |
|||
// color: #fff; |
|||
|
|||
::v-deep { |
|||
|
|||
>button, |
|||
>ul li { |
|||
background: #064258; |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
color: #fff; |
|||
} |
|||
|
|||
>button { |
|||
padding: 0 3px; |
|||
border: 1px solid #00b3cc; |
|||
} |
|||
|
|||
>ul li { |
|||
background: linear-gradient(180deg, #004960 0%, #004b62 100%); |
|||
margin: 0 1.5px; |
|||
|
|||
&.active { |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
} |
|||
} |
|||
|
|||
.el-pagination__total { |
|||
color: #fff; |
|||
} |
|||
|
|||
.el-pagination__sizes { |
|||
.el-select { |
|||
.el-input { |
|||
width: 81px; |
|||
|
|||
.el-input__inner { |
|||
font-size: 12px; |
|||
height: 23px; |
|||
background-color: #064258 !important; |
|||
} |
|||
} |
|||
|
|||
.el-input__suffix { |
|||
.el-input__icon { |
|||
line-height: 23px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-pagination__jump { |
|||
margin-left: 10px; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
|
|||
.el-input { |
|||
width: 27px; |
|||
margin: 0 3px; |
|||
|
|||
.el-input__inner { |
|||
font-size: 12px; |
|||
background-color: #064258 !important; |
|||
border-radius: 2px 2px 2px 2px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn-next { |
|||
margin-left: 6px; |
|||
} |
|||
|
|||
.btn-prev { |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-pagination__total { |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.selectDate { |
|||
width: 89px; |
|||
border: 1px solid #00b3cc; |
|||
|
|||
::v-deep { |
|||
.el-input__prefix{ |
|||
top:-4px; |
|||
} |
|||
.el-input__inner { |
|||
|
|||
background-color: #064258 !important; |
|||
border-width: 0px !important; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue