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> |
<template> |
||||
<div class='board_record'> |
<div class='content'> |
||||
TODO |
<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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import request from "@/utils/request"; |
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 { |
export default { |
||||
name: 'boardRecord', |
name: 'smartAnalysis', |
||||
components: { |
components: { |
||||
|
vuescroll, |
||||
|
WgtTitle |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
form: { |
||||
|
deviceName: '', |
||||
|
deviceState: [1, 0] |
||||
|
}, |
||||
|
page: { |
||||
|
pageNum: 0, |
||||
|
pageSize: 20 |
||||
|
}, |
||||
|
total: 0, |
||||
|
list: [], |
||||
|
scrollOptions, |
||||
|
date:'' |
||||
} |
} |
||||
}, |
}, |
||||
created() { |
created() { |
||||
|
|
||||
}, |
}, |
||||
mounted(){ |
mounted() { |
||||
|
this.bindList(); |
||||
|
this.date = moment().format('YYYY-MM-DD') |
||||
}, |
}, |
||||
methods: { |
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> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<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> |
</style> |
||||
|
|||||
Loading…
Reference in new issue