[update] 井口数据监控
This commit is contained in:
danshihao
Vendored
+1
-1
@@ -237,7 +237,7 @@
|
||||
background: linear-gradient(180deg, #0094FF 0%, #2EE4FD 100%);
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: pink;
|
||||
background: transparent;
|
||||
}
|
||||
/* 滚动条优化 end */
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 334 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1023 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 656 B |
Binary file not shown.
|
After Width: | Height: | Size: 413 B |
Binary file not shown.
|
After Width: | Height: | Size: 375 B |
Binary file not shown.
|
After Width: | Height: | Size: 500 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
+183
-5
@@ -84,10 +84,29 @@
|
||||
}
|
||||
|
||||
/* 表格样式begin */
|
||||
.ant-table-thead > tr > th {
|
||||
background: linear-gradient( 180deg, rgba(0,148,255,0.1) 0%, rgba(0,148,255,0.2) 100%) !important;
|
||||
.ant-table .ant-table-header,
|
||||
.ant-table .ant-table-thead {
|
||||
background: @component-background linear-gradient(180deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0.2) 100%) no-repeat;
|
||||
background-size: 100% 40px;
|
||||
}
|
||||
/* 表格样式nd */
|
||||
.ant-table.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
|
||||
.ant-table .ant-table-tbody {
|
||||
background: @component-background linear-gradient(180deg, #001B36 0%, rgba(0,148,255,0.2) 100%);
|
||||
}
|
||||
.ant-table .ant-table-thead > tr > th,
|
||||
.ant-table .ant-table-fixed-left table,
|
||||
.ant-table .ant-table-fixed-right table,
|
||||
.ant-table .ant-table-fixed .ant-table-thead {
|
||||
background: transparent;
|
||||
}
|
||||
.ant-table .ant-table-placeholder {
|
||||
background: transparent;
|
||||
}
|
||||
.ant-table .ant-table-header table {
|
||||
border-radius: 0;
|
||||
}
|
||||
.ant-table td { white-space: nowrap; }
|
||||
/* 表格样式end */
|
||||
|
||||
/* 复选框begin */
|
||||
.ant-checkbox-inner,
|
||||
@@ -96,6 +115,16 @@
|
||||
}
|
||||
/* 复选框end */
|
||||
|
||||
/* 搜索框begin */
|
||||
.input-search-suffix {
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.input-search-suffix > img {
|
||||
width: 14px;
|
||||
}
|
||||
/* 输入框end */
|
||||
|
||||
/* 下拉框begin */
|
||||
.ant-select-selection--multiple .ant-select-selection__choice {
|
||||
color: @text-color;
|
||||
@@ -115,6 +144,27 @@
|
||||
background-color: @primary-2;
|
||||
color: @text-color;
|
||||
}
|
||||
// 箭头
|
||||
.ant-select-arrow {
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
.ant-select-arrow::after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: url("~@/assets/images/componentImg/arrow.png") no-repeat center center;
|
||||
background-size: 100%;
|
||||
transform: rotate(0deg);
|
||||
transition: transform .3s;
|
||||
}
|
||||
.ant-select-open .ant-select-arrow::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
/* 下拉框end */
|
||||
|
||||
/* 表单禁用样式begin */
|
||||
@@ -133,13 +183,141 @@
|
||||
/* 表单禁用样式end */
|
||||
|
||||
/* 部分组件begin */
|
||||
// 弹出抽屉底部自定义
|
||||
// 弹框底部自定义
|
||||
.drawer-bootom-button {
|
||||
background-color: @component-background !important;
|
||||
border-top-color: @border-color-split !important;
|
||||
}
|
||||
.ant-modal-close:focus, .ant-modal-close:hover,
|
||||
.ant-drawer-close:focus, .ant-drawer-close:hover{
|
||||
color: #fff;
|
||||
color: @text-color;
|
||||
}
|
||||
.ant-empty-normal {
|
||||
color: @text-color !important;
|
||||
}
|
||||
|
||||
// 组件背景
|
||||
.ant-input,
|
||||
.ant-select-selection
|
||||
{
|
||||
background: url("~@assets/images/componentImg/input.png") no-repeat center center !important;
|
||||
background-size: 110% calc(@btn-height-base + 2px) !important;
|
||||
}
|
||||
// 搜索按钮
|
||||
.search-btn {
|
||||
border: none !important;
|
||||
width: 88px !important;
|
||||
background: url("~@assets/images/componentImg/btn.png") no-repeat center center !important;
|
||||
background-size: 100% @btn-height-base !important;
|
||||
font-size: 0;
|
||||
}
|
||||
.search-btn-icon {
|
||||
margin-right: 3px;
|
||||
margin-bottom: 3px;
|
||||
width: 14px;
|
||||
}
|
||||
.search-btn-text {
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 16px;
|
||||
}
|
||||
/* 部分组件end */
|
||||
|
||||
.ml-8 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mr-12 {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
// 分割线
|
||||
.divider-vertical {
|
||||
width: 1px;
|
||||
margin: 0 20px;
|
||||
background-color: rgba(108, 128, 151, 0.3);
|
||||
}
|
||||
|
||||
// 一行的内容
|
||||
.info-row {
|
||||
display: flex;
|
||||
}
|
||||
.info-row.info-row-inline {
|
||||
display: inline-flex;
|
||||
}
|
||||
.info-row:not(:last-child):not(.info-row-inline) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.info-row .info-label {
|
||||
flex: auto;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 16px;
|
||||
}
|
||||
.info-row .info-label::after {
|
||||
content: '：'
|
||||
}
|
||||
.info-row .info-value {
|
||||
text-align: right;
|
||||
flex: auto;
|
||||
font-family: Rubik, Rubik, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: @text-color;
|
||||
line-height: 16px;
|
||||
}
|
||||
.over-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
// 运行
|
||||
.working::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #2BFF82;
|
||||
}
|
||||
// 停止
|
||||
.cease::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #FF5353;
|
||||
}
|
||||
|
||||
.ant-btn.primary-btn,
|
||||
.ant-btn.primary-btn:hover,
|
||||
.ant-btn.primary-btn:focus {
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #0094FF;
|
||||
color: @text-color;
|
||||
}
|
||||
.ant-btn.danger-btn,
|
||||
.ant-btn.danger-btn:hover,
|
||||
.ant-btn.danger-btn:focus {
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #FF5353;
|
||||
color: @text-color;
|
||||
}
|
||||
@@ -20,4 +20,8 @@ module.exports = {
|
||||
// 表格相关
|
||||
'table-selected-row-bg': 'rgba(0, 148, 255, 0.30)', // 勾选行背景色
|
||||
'table-expanded-row-bg': 'rgba(0, 148, 255, 0.10)', // 扩展行背景色
|
||||
|
||||
// 高度调整
|
||||
'btn-height-base': '36px',
|
||||
'input-height-base': '36px'
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@primary-color: #0094FF;
|
||||
/* 背景色 */
|
||||
@component-background: #001B36;
|
||||
@background-color-base: #001B36AA;
|
||||
@@ -19,3 +20,7 @@
|
||||
/* 表格相关 */
|
||||
@table-selected-row-bg: rgba(0, 148, 255, 0.30);
|
||||
@table-expanded-row-bg: rgba(0, 148, 255, 0.10);
|
||||
|
||||
/* 按钮 */
|
||||
@btn-height-base: 36px;
|
||||
@input-height-base: 36px;
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<a-card :bordered="false" class="common-card">
|
||||
<!-- 标题 -->
|
||||
<div slot="title" class="card-title"><slot name="title">{{ title }}</slot></div>
|
||||
<!-- 标题右侧 -->
|
||||
<slot name="extra" slot="extra"></slot>
|
||||
<!-- 内容 -->
|
||||
<slot></slot>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CommonCard',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@assets/less/common.less";
|
||||
.common-card {
|
||||
height: 100%;
|
||||
border-bottom: 1px @primary-color solid;
|
||||
|
||||
/deep/ .ant-card-head {
|
||||
background-image: url("~@/assets/images/componentImg/header-bg-side.png"),
|
||||
url("~@/assets/images/componentImg/header-bg-center.png"),
|
||||
url("~@/assets/images/componentImg/header-bg-side.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left, center, right;
|
||||
background-size: 1px 100%, calc(100% - 2px) 100%, 1px 100%;
|
||||
border: none;
|
||||
min-height: 43px;
|
||||
height: 43px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
/deep/ .ant-card-head-title {
|
||||
padding: 0;
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: @text-color;
|
||||
line-height: 36px;
|
||||
text-shadow: 1px 1px 0 rgba(21,154,255,0.7), 1px 1px 0 #000000;
|
||||
}
|
||||
/deep/ .ant-card-head-title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: url("~@/assets/images/componentImg/header-dot.png") no-repeat left center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .ant-card-body {
|
||||
padding: 13px 20px 20px !important;
|
||||
}
|
||||
/deep/ .ant-card-extra {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: @text-color;
|
||||
line-height: 16px;
|
||||
text-shadow: 1px 1px 0px rgba(21,154,255,0.7), 1px 1px 0px #000000;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<a-row type="flex">
|
||||
<a-col flex="1">
|
||||
<div class="info-row" v-for="(item, index) in leftData" :key="item.id || (item.label + index)">
|
||||
<div class="info-label" :title="item.label">{{ item.label }}</div>
|
||||
<div class="info-value over-text" :title="item.value">{{ item.value }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col flex="1px" class="divider-vertical"></a-col>
|
||||
<a-col flex="1">
|
||||
<div class="info-row" v-for="(item, index) in rightData" :key="item.id || (item.label + index)">
|
||||
<div class="info-label" :title="item.label">{{ item.label }}</div>
|
||||
<div class="info-value over-text" :title="item.value">{{ item.value }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CommonCardInfo',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
leftData () {
|
||||
return this.data.filter((item, index) => index % 2 === 0)
|
||||
},
|
||||
rightData () {
|
||||
return this.data.filter((item, index) => index % 2 !== 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<!-- v-if配合使用需要加上组件内唯一key,否则可能不会销毁 -->
|
||||
<div :style="{ width, height, overflow: showNotData ? 'hidden' : 'visible' }" class="outside">
|
||||
<!-- 响应式的echarts-->
|
||||
<div :class="bordered ? 'chart-border' : ''" :style="{ width: '100%', height }">
|
||||
<!-- <common-empty v-if="showNotData" class="inside"/>-->
|
||||
<a-list :data-source="[]" v-if="showNotData" class="inside" />
|
||||
<div ref="myChart" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import debounce from 'lodash/debounce'
|
||||
// import { exportChart } from '@/utils/demand/charts'
|
||||
|
||||
export default {
|
||||
name: 'ResponsiveChart',
|
||||
// components: { CommonEmpty },
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
// 禁用自动初始化（手动调用initMyChart初始化）
|
||||
disabledAutoInit: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 绑定事件的属性
|
||||
* 格式：[{ eventType: '', eventFn: () => {} }]
|
||||
* eventType - echarts支持的事件类型 如 click
|
||||
* eventFn - 事件回调函数
|
||||
*/
|
||||
bindEventOption: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
// 是否需要边框
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 是否有数据
|
||||
showNotData: true,
|
||||
myChart: null,
|
||||
// 重置大小防抖的方法(防抖返回的新函数，保存用于注销)
|
||||
updateMyChartSizeDebounce: null
|
||||
}
|
||||
},
|
||||
// 挂载后绑定监听事件 初始化实例
|
||||
mounted () {
|
||||
!this.disabledAutoInit && this.initMyChart()
|
||||
this.updateMyChartSizeDebounce = debounce(this.updateMyChartSize, 300)
|
||||
window.addEventListener('resize', this.updateMyChartSizeDebounce)
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.updateMyChartSize()
|
||||
})
|
||||
})
|
||||
},
|
||||
activated () {
|
||||
console.log('actived')
|
||||
this.updateMyChartSize()
|
||||
},
|
||||
// 销毁前取消监听事件 销毁实例
|
||||
beforeDestroy () {
|
||||
this.disposeMyChart()
|
||||
window.removeEventListener('resize', this.updateMyChartSizeDebounce)
|
||||
},
|
||||
methods: {
|
||||
// 初始化echarts实例
|
||||
initMyChart () {
|
||||
if (this.myChart) {
|
||||
console.error('请勿重复初始化图表，如需重复请先销毁图表')
|
||||
return
|
||||
}
|
||||
this.myChart = echarts.init(this.$refs.myChart)
|
||||
// 绑定事件
|
||||
if (this.bindEventOption.length) {
|
||||
// 先遍历一遍确认数据正确
|
||||
this.bindEventOption.forEach(item => {
|
||||
if (!(item.eventType && item.eventFn && (item.eventFn instanceof Function))) {
|
||||
throw new Error('ResponsiveChart 组件传入的 bindEventOption 数据格式错误')
|
||||
}
|
||||
})
|
||||
// 进行事件绑定
|
||||
this.bindEventOption.forEach(item => {
|
||||
this.myChart.on(item.eventType, item.eventFn)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取echarts实例
|
||||
getMyChart () {
|
||||
return this.myChart
|
||||
},
|
||||
// 更新echarts图表大小
|
||||
updateMyChartSize () {
|
||||
this.myChart && this.myChart.resize()
|
||||
},
|
||||
/**
|
||||
* 更新echarts实例配置
|
||||
* @param {Object} option - echarts配置对象
|
||||
* @param {boolean} [notMerge=true] - 是否不合并之前的数据
|
||||
*/
|
||||
updateMyChartOption (option = {}, notMerge = true) {
|
||||
console.log('update option:', option)
|
||||
this.myChart && this.myChart.setOption(option, notMerge)
|
||||
this.showNotData = !Object.keys(option).length
|
||||
},
|
||||
// 销毁echarts实例
|
||||
disposeMyChart () {
|
||||
this.myChart && this.myChart.dispose()
|
||||
this.myChart = null
|
||||
},
|
||||
// 导出
|
||||
exportChartPng (filename) {
|
||||
const dataURL = this.myChart.getDataURL()
|
||||
this.downloadChart(dataURL, filename)
|
||||
return dataURL
|
||||
},
|
||||
// 下载
|
||||
downloadChart (dataURL, fileName) {
|
||||
const link = document.createElement('a')
|
||||
link.style.display = 'none'
|
||||
link.href = dataURL
|
||||
link.setAttribute('download', fileName + '.png')
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 暂无数据居中效果
|
||||
.outside {
|
||||
position: relative;
|
||||
}
|
||||
.inside {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.chart-border {
|
||||
padding: 20px;
|
||||
border: 1px solid #E5E6EB;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,10 @@
|
||||
<div class="user-wrapper" :class="theme">
|
||||
<span class="action">
|
||||
<a class="logout_title" target="_blank" href="#">
|
||||
<a-icon type="question-circle-o"></a-icon> 帮助
|
||||
<div class="operate" title="帮助">
|
||||
<img :src="require(`@assets/images/icon/help.png`)" alt="help" class="operate-img">
|
||||
<span class="operate-text">帮助</span>
|
||||
</div>
|
||||
</a>
|
||||
</span>
|
||||
<!-- <header-notice class="action"/>-->
|
||||
@@ -18,7 +21,10 @@
|
||||
<!-- </span>-->
|
||||
<a-dropdown>
|
||||
<span class=" small-action">
|
||||
<a-icon type="user"></a-icon><span v-if="isDesktop()"> {{ nickname() }}</span>
|
||||
<div class="operate" :title="nickname()">
|
||||
<img :src="require(`@assets/images/icon/user.png`)" alt="user" class="operate-img">
|
||||
<span v-if="isDesktop()" class="operate-text">{{ nickname() }}</span>
|
||||
</div>
|
||||
</span>
|
||||
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
|
||||
<!-- <a-menu-item key="0">-->
|
||||
@@ -255,6 +261,7 @@ export default {
|
||||
/* update-begin author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
|
||||
|
||||
.user-wrapper {
|
||||
height: 48px;
|
||||
color: @primary-color;
|
||||
}
|
||||
.user-wrapper .search-input {
|
||||
@@ -287,4 +294,30 @@ export default {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.operate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0;
|
||||
height: 48px;
|
||||
|
||||
.operate-img {
|
||||
width: 20px;
|
||||
}
|
||||
.operate-text {
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: @primary-color;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-left: 8px;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+3
-1
@@ -71,7 +71,9 @@ Viewer.setDefaults({
|
||||
title: false,
|
||||
toolbar: false
|
||||
})
|
||||
|
||||
Vue.prototype.global = {
|
||||
emptyLine: '—'
|
||||
}
|
||||
SSO.init(() => {
|
||||
main()
|
||||
})
|
||||
|
||||
@@ -1,13 +1,864 @@
|
||||
<template>
|
||||
<div>1</div>
|
||||
<a-spin :spinning="loading">
|
||||
<!-- 查询区域 -->
|
||||
<div class="mb-20">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row type="flex">
|
||||
<a-col flex="auto">
|
||||
<a-form-item label="油井">
|
||||
<a-select class="search-input" v-model="queryParam.wellSite" placeholder="请选择所属井场">
|
||||
<a-select-option v-for="item in wellSiteList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
<a-select class="search-input" style="margin-left: 8px;" v-model="queryParam.singleWell" placeholder="请选择单井">
|
||||
<a-select-option v-for="item in singleWellList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
<span class="search-operate-btns">
|
||||
<a-button class="search-btn" type="primary" @click="searchQuery">
|
||||
<img :src="require('@assets/images/icon/search.png')" alt="查询" class="search-btn-icon">
|
||||
<span class="search-btn-text">查询</span>
|
||||
</a-button>
|
||||
</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col flex="220px">
|
||||
<!-- <a-input-search placeholder="请输入井口名称" v-model="queryParam.phone" class="search-input" />-->
|
||||
<a-input class="search-input" placeholder="请输入井口名称" v-model="queryParam.phone">
|
||||
<span slot="suffix" class="input-search-suffix" @click="searchQuery">
|
||||
<img :src="require('@assets/images/icon/search-primary.png')" alt="查询">
|
||||
</span>
|
||||
</a-input>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-row :gutter="20" type="flex" class="mb-20">
|
||||
<a-col :xl="12" :xxl="6">
|
||||
<div class="flex-column">
|
||||
<div class="mb-20">
|
||||
<common-card title="油井基础信息">
|
||||
<common-card-info :data="data.oilWells || []"/>
|
||||
</common-card>
|
||||
</div>
|
||||
<div>
|
||||
<common-card title="含水和动液面">
|
||||
<common-card-info :data="data.waterContentAndDynamicLiquidLevel || []"/>
|
||||
</common-card>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :xl="12" :xxl="6">
|
||||
<common-card title="油井实时参数">
|
||||
<common-card-info :data="data.oilWellsRealTimeParameters || []"/>
|
||||
</common-card>
|
||||
</a-col>
|
||||
<a-col :xl="12" :xxl="6">
|
||||
<common-card title="油井生产数据">
|
||||
<!-- 泵型图 -->
|
||||
<div class="pump-type mb-20">
|
||||
<div class="pump-type-title">泵型：常规泵</div>
|
||||
<div class="pump-type-remarks">备注：-----</div>
|
||||
</div>
|
||||
<common-card-info :data="data.oilWellProductionData || []"/>
|
||||
</common-card>
|
||||
</a-col>
|
||||
<a-col :xl="12" :xxl="6">
|
||||
<common-card title="油井工作状态">
|
||||
<div slot="extra" class="info-row">
|
||||
<div class="info-label">工作状态</div>
|
||||
<div class="info-value">
|
||||
<span class="working mr-12">运行</span>
|
||||
<span class="cease">停止</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="working-status-container">
|
||||
<div class="working-status-title">名称：华h62-1</div>
|
||||
<div class="working-status-img">
|
||||
<img :src="isWorking ? working : suspend" alt="油井工作状态">
|
||||
</div>
|
||||
<div class="working-status-btns">
|
||||
<a-button class="primary-btn">远程启井</a-button>
|
||||
<a-button class="danger-btn">远程停井</a-button>
|
||||
<a-button class="primary-btn">频率控制</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</common-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="20" type="flex" class="mb-20">
|
||||
<a-col :xl="8">
|
||||
<common-card title="实时示功图">
|
||||
<div slot="extra" class="indicator-diagram-extra">
|
||||
<span class="time">2022-03-01 10:21:16</span>
|
||||
<div class="divider-vertical"></div>
|
||||
<span class="info-row info-row-inline">
|
||||
<span class="info-label">冲程</span>
|
||||
<span class="info-value">3.06m</span>
|
||||
</span>
|
||||
<div class="divider-vertical"></div>
|
||||
<span class="info-row info-row-inline">
|
||||
<span class="info-label">冲次</span>
|
||||
<span class="info-value">4.96次/分</span>
|
||||
</span>
|
||||
</div>
|
||||
<responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="200px"/>
|
||||
</common-card>
|
||||
</a-col>
|
||||
<a-col :xl="8">
|
||||
<common-card title="功图计产监控">
|
||||
<responsive-chart ref="productionMonitoring" key="productionMonitoring" height="200px"/>
|
||||
</common-card>
|
||||
</a-col>
|
||||
<a-col :xl="8">
|
||||
<common-card title="载荷分布图">
|
||||
<responsive-chart ref="loadDistribution" key="loadDistribution" height="200px"/>
|
||||
</common-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- <div class="mb-20">-->
|
||||
<!-- <a-table-->
|
||||
<!-- bordered-->
|
||||
<!-- ref="table"-->
|
||||
<!-- size="middle"-->
|
||||
<!-- rowKey="id"-->
|
||||
<!-- :scroll="{x:'100%', y:120}"-->
|
||||
<!-- :columns="columns"-->
|
||||
<!-- :dataSource="dataSource"-->
|
||||
<!-- :pagination="false">-->
|
||||
<!-- <template slot="text" slot-scope="text">-->
|
||||
<!-- <a-tooltip>-->
|
||||
<!-- <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>-->
|
||||
<!-- <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>-->
|
||||
<!-- </a-tooltip>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<!-- <span slot="action" slot-scope="text, record">-->
|
||||
<!-- <a @click="handleConfirm(record)" class="confirm mr-10">确认</a>-->
|
||||
<!-- <a @click="handleShow(record)" class="show">查看</a>-->
|
||||
<!-- </span>-->
|
||||
<!-- </a-table>-->
|
||||
<!-- </div>-->
|
||||
<div class='mb-20'>
|
||||
|
||||
<a-table
|
||||
style='display: inline-block; width: calc(100% - 110px)'
|
||||
bordered
|
||||
ref="table"
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:scroll="{y:120}"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false">
|
||||
<template slot="text" slot-scope="text">
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||||
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleConfirm(record)" class="confirm mr-10">确认</a>
|
||||
<a @click="handleShow(record)" class="show">查看</a>
|
||||
</span>
|
||||
</a-table>
|
||||
|
||||
<a-table
|
||||
bordered
|
||||
style='display: inline-block; width: 100px'
|
||||
ref="table"
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:scroll="{y:120}"
|
||||
:columns="[{
|
||||
title: '批量操作',
|
||||
dataIndex: 'actionBatch',
|
||||
scopedSlots: { customRender: 'actionBatch' },
|
||||
align: 'center',
|
||||
// fixed: 'right',
|
||||
// width: 100
|
||||
}]"
|
||||
:dataSource="this.dataSource.length ? [{}]: []"
|
||||
:pagination="false">
|
||||
<div slot="actionBatch" class="action-batch">
|
||||
<a href='javascript:' class='all-alarms'></a>
|
||||
</div>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonCard from '@comp/CommonCard'
|
||||
import CommonCardInfo from '@comp/CommonCardInfo'
|
||||
import ResponsiveChart from '@comp/ResponsiveChart'
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'WellheadDataMonitoring'
|
||||
name: 'WellheadDataMonitoring',
|
||||
components: { ResponsiveChart, CommonCardInfo, CommonCard },
|
||||
data () {
|
||||
return {
|
||||
// 是否工作中
|
||||
isWorking: true,
|
||||
// 工作中图片
|
||||
suspend: require('@/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif'),
|
||||
// 暂停中图片
|
||||
working: require('@/assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
|
||||
loading: false,
|
||||
queryParam: {},
|
||||
wellSiteList: [],
|
||||
singleWellList: [],
|
||||
columns: [
|
||||
{
|
||||
dataIndex: 'a',
|
||||
title: '报警时间',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'b',
|
||||
title: '恢复时间',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'c',
|
||||
title: '报警设备',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'd',
|
||||
title: '报警设备',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'e',
|
||||
title: '报警描述',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'f',
|
||||
title: '报警类别',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'g',
|
||||
title: '确认时间',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'h',
|
||||
title: '确认人',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
align: 'center',
|
||||
width: '10%'
|
||||
}
|
||||
// {
|
||||
// title: '批量操作',
|
||||
// dataIndex: 'actionBatch',
|
||||
// customRender: (value, row, index) => {
|
||||
// console.log(value, row, index, 'aaaaaa')
|
||||
// const obj = {
|
||||
// children: (
|
||||
// <div>
|
||||
// <a href='javascript:' class='all-alarms'></a>
|
||||
// </div>
|
||||
// ),
|
||||
// attrs: {}
|
||||
// }
|
||||
// if (index === 0) {
|
||||
// obj.attrs.rowSpan = this.dataSource.length
|
||||
// } else {
|
||||
// obj.attrs.rowSpan = 0
|
||||
// }
|
||||
// return obj
|
||||
// },
|
||||
// // scopedSlots: { customRender: 'actionBatch' },
|
||||
// align: 'center',
|
||||
// fixed: 'right',
|
||||
// width: 100
|
||||
// }
|
||||
],
|
||||
dataSource: new Array(10).fill(0).map((_, i) => ({ id: i + '' })),
|
||||
data: {
|
||||
oilWells: [
|
||||
{ label: '油井名称', value: '华H62-1' },
|
||||
{ label: '所属井场', value: '华H62井场' },
|
||||
{ label: '机采类型', value: '抽油机' },
|
||||
{ label: '开采层位', value: '长_7_2' },
|
||||
{ label: '井型', value: '水平井' },
|
||||
{ label: '投产日期', value: '2020-03-27' }
|
||||
],
|
||||
waterContentAndDynamicLiquidLevel: [
|
||||
{ label: '实时含水', value: '11.1%' },
|
||||
{ label: '动液面套压', value: '1.55 MPa' },
|
||||
{ label: '小时含水率', value: '11.8%' },
|
||||
{ label: '动液面声速', value: '370 m/s' },
|
||||
{ label: '24小时含水率', value: '12.3%' },
|
||||
{ label: '动液面声速', value: '96 m' }
|
||||
],
|
||||
oilWellsRealTimeParameters: [
|
||||
{ label: '油压', value: '1.7 MPa' },
|
||||
{ label: '套压', value: '1.7 MPa' },
|
||||
{ label: 'A相电流', value: '18.51 A' },
|
||||
{ label: 'A相电压', value: '217.2 V' },
|
||||
{ label: 'B相电流', value: '15.85 A' },
|
||||
{ label: 'B相电压', value: '215.1 V' },
|
||||
{ label: 'C相电流', value: '16.46 A' },
|
||||
{ label: 'C相电压', value: '215.6 V' },
|
||||
{ label: '有功功率', value: '8.07 KW' },
|
||||
{ label: '无功功率', value: '-0.04 KW' },
|
||||
{ label: '功率因素', value: '0.99' },
|
||||
{ label: '输出频率', value: '52.41 Hz' },
|
||||
{ label: '最大载荷', value: '52.74 KN' },
|
||||
{ label: '最小载荷', value: '24.22 KN' },
|
||||
{ label: '冲程', value: '3.02 m' },
|
||||
{ label: '冲次', value: '5 次/分' }
|
||||
],
|
||||
oilWellProductionData: [
|
||||
{ label: '时率', value: '100 %' },
|
||||
{ label: '用电量', value: '0.00 kw.h' },
|
||||
{ label: '开井时长', value: '15时0分' },
|
||||
{ label: '油井工况', value: '功图错误' },
|
||||
{ label: '日产水量', value: '4.34 m³' },
|
||||
{ label: '泵深', value: '1340 m' },
|
||||
{ label: '日产液量', value: '19.09 m³' },
|
||||
{ label: '泵型', value: '常规泵' },
|
||||
{ label: '日产油量', value: '14.75 t' },
|
||||
{ label: '泵径', value: '57 mm' },
|
||||
{ label: '备注', value: '----' },
|
||||
{ label: '泵效', value: '20.05%' }
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initIndicatorDiagram()
|
||||
this.initProductionMonitoring()
|
||||
this.initLoadDistribution()
|
||||
},
|
||||
methods: {
|
||||
searchQuery () {
|
||||
|
||||
},
|
||||
searchReset () {
|
||||
|
||||
},
|
||||
handleConfirm () {
|
||||
|
||||
},
|
||||
handleShow () {
|
||||
|
||||
},
|
||||
// 初始化 实时示功图
|
||||
initIndicatorDiagram () {
|
||||
this.$refs.indicatorDiagram.updateMyChartOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
// type: 'cross',
|
||||
// label: {
|
||||
// backgroundColor: '#6a7985'
|
||||
// }
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['上冲程', '下冲程'],
|
||||
align: 'left',
|
||||
width: '80%',
|
||||
top: 0,
|
||||
right: 0,
|
||||
itemHeight: 2,
|
||||
itemWidth: 12,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.96)'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '30px',
|
||||
left: '0px',
|
||||
right: '10px',
|
||||
bottom: '0px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
name: '单位(m)',
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
color: '#6C8097',
|
||||
align: 'right',
|
||||
verticalAlign: 'top',
|
||||
padding: [8, 4, 0, 0]
|
||||
},
|
||||
data: [0, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300],
|
||||
boundaryGap: false,
|
||||
// 刻度线不显示
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
// 轴标签样式
|
||||
axisLabel: {
|
||||
color: '#86909C',
|
||||
hideOverlap: true,
|
||||
showMinLabel: false,
|
||||
showMaxLabel: false
|
||||
},
|
||||
// 轴线样式
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#19314B'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '载荷(KN)',
|
||||
// 名称样式
|
||||
nameTextStyle: {
|
||||
color: '#6C8097',
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
// 轴标签样式
|
||||
axisLabel: {
|
||||
color: '#6C8097'
|
||||
},
|
||||
// 轴线样式
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#152F49',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '上冲程',
|
||||
type: 'line',
|
||||
stack: 'upStroke',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
color: '#FF5353',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255,83,83,0.2)' },
|
||||
{ offset: 1, color: 'rgba(255,83,83,0)' }
|
||||
])
|
||||
},
|
||||
data: [40, 42, 25, 40, 42, 37, 39, 58, 42, 37, 40]
|
||||
},
|
||||
{
|
||||
name: '下冲程',
|
||||
type: 'line',
|
||||
stack: 'downStroke',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
color: '#0094FF',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0,148,255,0.2)' },
|
||||
{ offset: 1, color: 'rgba(0,148,255,0)' }
|
||||
])
|
||||
},
|
||||
data: [40, 25, 40, 50, 40, 60, 80, 45, 40, 50, 40]
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
// 初始化 功图计产监控
|
||||
initProductionMonitoring () {
|
||||
this.$refs.productionMonitoring.updateMyChartOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
// type: 'cross',
|
||||
// label: {
|
||||
// backgroundColor: '#6a7985'
|
||||
// }
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['产油量(t/d)', '产液量(m³/d)'],
|
||||
align: 'left',
|
||||
width: '80%',
|
||||
top: 0,
|
||||
right: 0,
|
||||
itemHeight: 2,
|
||||
itemWidth: 12,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.96)'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '30px',
|
||||
left: '0px',
|
||||
right: '10px',
|
||||
bottom: '0px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['01-31', '02-10', '02-15', '02-20', '02-25', '03-01'],
|
||||
boundaryGap: false,
|
||||
// 刻度线不显示
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
// 轴标签样式
|
||||
axisLabel: {
|
||||
color: '#86909C',
|
||||
hideOverlap: true
|
||||
// showMinLabel: false,
|
||||
// showMaxLabel: false
|
||||
},
|
||||
// 轴线样式
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#19314B'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '产油量(t/d) / 产液量(m³/d)',
|
||||
// 名称样式
|
||||
nameTextStyle: {
|
||||
color: '#6C8097',
|
||||
padding: [0, 0, 0, 110]
|
||||
},
|
||||
// 轴标签样式
|
||||
axisLabel: {
|
||||
color: '#6C8097'
|
||||
},
|
||||
// 轴线样式
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#152F49',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '产油量(t/d)',
|
||||
type: 'line',
|
||||
stack: 'oilProduction',
|
||||
color: '#2EE4FD',
|
||||
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII=',
|
||||
symbolSize: 15,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(46,228,253,0.2)' },
|
||||
{ offset: 1, color: 'rgba(46,228,253,0)' }
|
||||
])
|
||||
},
|
||||
data: [40, 42, 25, 40, 42, 37]
|
||||
},
|
||||
{
|
||||
name: '产液量(m³/d)',
|
||||
type: 'line',
|
||||
stack: 'liquidProduction',
|
||||
color: '#0094FF',
|
||||
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII=',
|
||||
symbolSize: 15,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0,148,255,0.2)' },
|
||||
{ offset: 1, color: 'rgba(0,148,255,0)' }
|
||||
])
|
||||
},
|
||||
data: [40, 25, 40, 50, 40, 60]
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
// 初始化 载荷分布图
|
||||
initLoadDistribution () {
|
||||
this.$refs.loadDistribution.updateMyChartOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
// type: 'cross',
|
||||
// label: {
|
||||
// backgroundColor: '#6a7985'
|
||||
// }
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['最大载荷(KN)', '最小载荷(KN)'],
|
||||
align: 'left',
|
||||
width: '80%',
|
||||
top: 0,
|
||||
right: 0,
|
||||
itemHeight: 2,
|
||||
itemWidth: 12,
|
||||
itemGap: 16,
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.96)'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '30px',
|
||||
left: '0px',
|
||||
right: '10px',
|
||||
bottom: '0px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [0.5, 1, 1, 1.5, 2, 2.5, 3],
|
||||
boundaryGap: false,
|
||||
// 刻度线不显示
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
// 轴标签样式
|
||||
axisLabel: {
|
||||
color: '#86909C',
|
||||
hideOverlap: true
|
||||
// showMinLabel: false,
|
||||
// showMaxLabel: false
|
||||
},
|
||||
// 轴线样式
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#19314B'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '载荷(KN)',
|
||||
// 名称样式
|
||||
nameTextStyle: {
|
||||
color: '#6C8097',
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
// 轴标签样式
|
||||
axisLabel: {
|
||||
color: '#6C8097'
|
||||
},
|
||||
// 轴线样式
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#152F49',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '最大载荷(KN)',
|
||||
type: 'line',
|
||||
stack: 'maxLoad',
|
||||
color: '#FF5353',
|
||||
data: [40, 42, 25, 40, 42, 37, 10]
|
||||
},
|
||||
{
|
||||
name: '最小载荷(KN)',
|
||||
type: 'line',
|
||||
stack: 'minLoad',
|
||||
color: '#FFC97A',
|
||||
data: [40, 25, 40, 50, 40, 60, 20]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
@import "~@/assets/less/modifyLessVars.less";
|
||||
.search-operate-btns {
|
||||
margin-left: 32px;
|
||||
}
|
||||
.search-input {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
& > div {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.pump-type {
|
||||
position: relative;
|
||||
background-image: url("~@assets/images/systemOverview/wellheadDataMonitoring/pump-type-bg.png");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
height: 84px;
|
||||
width: 364px;
|
||||
margin: 0 auto 20px;
|
||||
|
||||
&-title {
|
||||
position: absolute;
|
||||
left: 88px;
|
||||
top: 18px;
|
||||
font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: rgba(255,255,255,0.96);
|
||||
line-height: 18px;
|
||||
}
|
||||
&-remarks {
|
||||
position: absolute;
|
||||
left: 88px;
|
||||
top: 50px;
|
||||
font-family: Rubik, Rubik, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #D0DEEE;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 工作状态相关样式
|
||||
.working-status-container {
|
||||
height: 100%;
|
||||
|
||||
.working-status-title {
|
||||
background-size: 124px 16px;
|
||||
background: url("~@/assets/images/text-bg.png") no-repeat 0 6px;
|
||||
font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: rgba(255,255,255,0.96);
|
||||
line-height: 18px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.working-status-img {
|
||||
height: 178px;
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
margin: 12px auto 18px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.working-status-btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 实时示功图头部
|
||||
.indicator-diagram-extra {
|
||||
|
||||
.info-row .info-label,
|
||||
.info-row .info-value,
|
||||
.time {
|
||||
font-family: Rubik, Rubik, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #D0DEEE;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.info-row .info-value {
|
||||
color: #2EE4FD;
|
||||
}
|
||||
.divider-vertical {
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: rgba(108,128,151,0.3);
|
||||
margin: 0 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格样式
|
||||
|
||||
// 表头字体
|
||||
/deep/ .ant-table-thead tr > th {
|
||||
font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
// 表头边框错位
|
||||
/deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
|
||||
margin-right: -11px;
|
||||
}
|
||||
// 确认
|
||||
.confirm,
|
||||
.confirm:hover {
|
||||
color: #2BFF82;
|
||||
}
|
||||
// 查看
|
||||
.show,
|
||||
.show:hover {
|
||||
color: #2EE4FD;
|
||||
}
|
||||
.action-batch {
|
||||
height: 100px;
|
||||
}
|
||||
.all-alarms {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -30%);
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 100px;
|
||||
background: url("~@/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png");
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user