|
|
@@ -45,6 +45,7 @@
|
|
|
placeholder="年份"
|
|
|
style="width: 150px;"
|
|
|
v-model="currentDate"
|
|
|
+ @change="selectYearHandler"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options"
|
|
|
@@ -55,12 +56,12 @@
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<el-row>
|
|
|
- <el-col :span="12" v-for="item in current_history" :key="item.label">
|
|
|
+ <el-col :span="12" v-for="item in year_history" :key="item.label">
|
|
|
<el-row>
|
|
|
- <el-col :span="8">
|
|
|
+ <el-col :span="10">
|
|
|
<label>{{item.label}}</label>
|
|
|
</el-col>
|
|
|
- <el-col :span="16">
|
|
|
+ <el-col :span="14">
|
|
|
<span class="content">{{item.text}}</span>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -68,26 +69,28 @@
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div style="margin-right:20px;">
|
|
|
- <echartsGradient style="margin-top:20px"/>
|
|
|
+ <echarts-gradient style="margin-top:20px"
|
|
|
+ :byMonthList="byMonthList"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getBaseInfo, getBaseStatInfo } from '@/api/tmn/index.js'
|
|
|
import equipment from './assets/equipment.svg'
|
|
|
-import echartsGradient from './echartsGradient.vue';
|
|
|
+import echartsGradient from '../../home/components/echartsGradient.vue';
|
|
|
export default {
|
|
|
name: 'rightEquipment',
|
|
|
props: {
|
|
|
- data: {
|
|
|
- default() {
|
|
|
- return {};
|
|
|
- }
|
|
|
- },
|
|
|
visible: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
+ },
|
|
|
+ rowData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => { }
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -95,61 +98,34 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ tmnName: '',
|
|
|
+ tmnBizcode: '',
|
|
|
+ waterName: '',
|
|
|
+ cusareaName: '',
|
|
|
+ waterAddress: '',
|
|
|
+ tmnstatusRunstatusContent: '',
|
|
|
+ tmnstatusRunstatus: '',
|
|
|
year_history: [{
|
|
|
label: '使用次数：',
|
|
|
- text:'50次'
|
|
|
- },{
|
|
|
+ text: '50次'
|
|
|
+ }, {
|
|
|
label: '使用人数：',
|
|
|
- text:'20人'
|
|
|
- },{
|
|
|
+ text: '20人'
|
|
|
+ }, {
|
|
|
label: '累计用水量：',
|
|
|
- text:'10000 m³ /s'
|
|
|
- },{
|
|
|
+ text: '10000 m³ /s'
|
|
|
+ }, {
|
|
|
label: '累计用电量：',
|
|
|
- text:'42,125°'
|
|
|
- }],
|
|
|
- current_history: [{
|
|
|
- label: '使用农户：',
|
|
|
- text:'张三'
|
|
|
- },{
|
|
|
- label: 'IC卡号：',
|
|
|
- text:'545454545454545'
|
|
|
- },{
|
|
|
- label: '当前流速：',
|
|
|
- text:'10000 m³ /s'
|
|
|
- },{
|
|
|
- label: '瞬时流量：',
|
|
|
- text:'10000 m³ /s'
|
|
|
- },{
|
|
|
- label: '已用时长：',
|
|
|
- text:'2小时30分钟'
|
|
|
- }],
|
|
|
- list:[{
|
|
|
- label: '设备名称：',
|
|
|
- text: '1号水电双计设备'
|
|
|
- },{
|
|
|
- label: '设备编号：',
|
|
|
- text: '54545415315569'
|
|
|
- },{
|
|
|
- label: '水源名称：',
|
|
|
- text: '001号水井'
|
|
|
- },{
|
|
|
- label: '所属区域：',
|
|
|
- text: '1号基地'
|
|
|
- },{
|
|
|
- label: '所在位置：',
|
|
|
- text: '河南省郑州市金水区瀚海北金商业写字楼B座'
|
|
|
- },{
|
|
|
- label: '在线状态：',
|
|
|
- text: '在线'
|
|
|
- },{
|
|
|
- label: '运行状态：',
|
|
|
- text: '开'
|
|
|
+ text: '42,125°'
|
|
|
}],
|
|
|
+ current_history: [],
|
|
|
+ list:[],
|
|
|
equipment,
|
|
|
dialogVisible: false,
|
|
|
currentDate: new Date().getFullYear(),
|
|
|
- options: []
|
|
|
+ options: [],
|
|
|
+ byMonthList: [],
|
|
|
+ tmnId: ''
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -161,8 +137,42 @@ export default {
|
|
|
this.dialogVisible = val;
|
|
|
}
|
|
|
},
|
|
|
+ rowData: {
|
|
|
+ deep: true,
|
|
|
+ handler(value) {
|
|
|
+ const { tmnId } = value
|
|
|
+ this.tmnId = tmnId
|
|
|
+ this.getBaseInfo()
|
|
|
+ this.getBaseStatInfoHandler()
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
+ selectYearHandler(value) {
|
|
|
+ this.currentDate = value
|
|
|
+ this.getBaseStatInfoHandler()
|
|
|
+ },
|
|
|
+ async getBaseStatInfoHandler() {
|
|
|
+ const respones = await getBaseStatInfo({
|
|
|
+ tmnId:this.tmnId,
|
|
|
+ year: this.currentDate
|
|
|
+ })
|
|
|
+ const value = respones?.data
|
|
|
+ this.byMonthList = value?.byMonthList
|
|
|
+ this.year_history = [{
|
|
|
+ label: '使用次数：',
|
|
|
+ text: value?.count || 0
|
|
|
+ }, {
|
|
|
+ label: '使用人数：',
|
|
|
+ text: `${value?.farmerCount || 0} 人`
|
|
|
+ }, {
|
|
|
+ label: '累计用水量：',
|
|
|
+ text: `${value?.waterNumTotal || 0} m³ /s`
|
|
|
+ }, {
|
|
|
+ label: '累计用电量：',
|
|
|
+ text: `${value?.elecNumTotal || 0} °`
|
|
|
+ }]
|
|
|
+ },
|
|
|
setYearList() {
|
|
|
let currentYear = new Date().getFullYear()
|
|
|
for (let i = 0; i < 5; i++) {
|
|
|
@@ -173,6 +183,57 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
+ async getBaseInfo() {
|
|
|
+ const response = await getBaseInfo({
|
|
|
+ tmnId: this.tmnId
|
|
|
+ })
|
|
|
+ const value = response?.data
|
|
|
+ this.tmnName = value?.tmnName;
|
|
|
+ this.tmnBizcode = value?.tmnBizcode;
|
|
|
+ this.waterName = value?.waterName;
|
|
|
+ this.cusareaName = value?.cusareaName;
|
|
|
+ this.waterAddress = value?.waterAddress;
|
|
|
+ this.tmnstatusRunstatusContent = value?.tmnstatusRunstatusContent;
|
|
|
+ this.tmnstatusRunstatus = value?.tmnstatusRunstatus;
|
|
|
+ this.list = [{
|
|
|
+ label: '设备名称：',
|
|
|
+ text: this.tmnName || '-'
|
|
|
+ }, {
|
|
|
+ label: '设备编号：',
|
|
|
+ text: this.tmnBizcode || '-'
|
|
|
+ }, {
|
|
|
+ label: '水源名称：',
|
|
|
+ text: this.waterName || '-'
|
|
|
+ }, {
|
|
|
+ label: '所属区域：',
|
|
|
+ text: this.cusareaName || '-'
|
|
|
+ }, {
|
|
|
+ label: '所在位置：',
|
|
|
+ text: this.waterAddress || '-'
|
|
|
+ }, {
|
|
|
+ label: '在线状态：',
|
|
|
+ text: this.tmnstatusRunstatus || '-'
|
|
|
+ }, {
|
|
|
+ label: '运行状态：',
|
|
|
+ text: this.tmnstatusRunstatusContent || '-'
|
|
|
+ }]
|
|
|
+ this.current_history = [{
|
|
|
+ label: '使用农户：',
|
|
|
+ text: value?.farmerName || '-'
|
|
|
+ }, {
|
|
|
+ label: 'IC卡号：',
|
|
|
+ text: value?.cardNo || '-'
|
|
|
+ }, {
|
|
|
+ label: '当前流速：',
|
|
|
+ text: '-'
|
|
|
+ }, {
|
|
|
+ label: '瞬时流量：',
|
|
|
+ text: '-'
|
|
|
+ }, {
|
|
|
+ label: '已用时长：',
|
|
|
+ text: value?.useTime || '-'
|
|
|
+ }]
|
|
|
+ },
|
|
|
handleClose() {
|
|
|
this.$emit('update:visible', false);
|
|
|
},
|
