班组&能源基础

2023-10-24 15:16:20 +08:00
parent 9be57ad750
commit ac4565e587
37 changed files with 2029 additions and 74 deletions
--- a/src/views/energy/base/energyPlcConnect/components/energyPlcConnectAdd.vue
+++ b/src/views/energy/base/energyPlcConnect/components/energyPlcConnectAdd.vue
@@ -20,9 +20,6 @@
        @change="selectObj"
        clearable></el-cascader>
    </el-form-item>
-    <el-form-item label="对象备注" prop="remark">
-      <el-input v-model="form.remark"/>
-    </el-form-item>
  </el-form>
 </template>
 <script>
@@ -42,8 +39,7 @@ export default {
        id: '',
        plcId: '',
        bindObjectId: '',
-        bindObjectType: '',
-        remark: ''
+        bindObjectType: ''
      },
      objIds: [],// 回显数组
      plcList: [],
@@ -130,7 +126,6 @@ export default {
      this.form.plcId = ''
      this.form.bindObjectId = ''
      this.form.bindObjectType = ''
-      this.form.remark = ''
      this.objIds = []
      this.isEdit = false
    }
--- a/src/views/energy/base/energyPlcConnect/index.vue
+++ b/src/views/energy/base/energyPlcConnect/index.vue
@@ -61,10 +61,6 @@ const tableProps = [
    prop: 'objCode',
    label: '对象编码'
  },
-  {
-    prop: 'remark',
-    label: '对象备注'
-  },
  {
    prop: 'plcTableName', 
    label: '关联表名'
--- a/src/views/energy/base/energyQuantityRealtime/index.vue
+++ b/src/views/energy/base/energyQuantityRealtime/index.vue
@@ -38,8 +38,8 @@ const tableProps = [
    label: '统计对象'
  },
  {
-    prop: 'objRemark',
-    label: '对象备注'
+    prop: 'objCode',
+    label: '对象编码'
  },
  {
    prop: 'energyTypeName',
--- a/src/views/energy/monitoring/energyLimit/index.vue
+++ b/src/views/energy/monitoring/energyLimit/index.vue
@@ -55,9 +55,8 @@ const tableProps = [
    label: '监控对象'
  },
  {
-    prop: 'objectType',
-    label: '对象备注',
-    filter: publicFormatter('object_type')
+    prop: 'objCode',
+    label: '对象编码'
  },
  {
    prop: 'energyType',
--- a/src/views/energy/monitoring/energyOverlimitLog/index.vue
+++ b/src/views/energy/monitoring/energyOverlimitLog/index.vue
@@ -34,8 +34,8 @@ const tableProps = [
    label: '监控对象'
  },
  {
-    prop: 'objRemark',
-    label: '对象备注'
+    prop: 'objCode',
+    label: '对象编码'
  },
  {
    prop: 'energyType',
--- a/src/views/energy/monitoring/energyStatistics/components/energyStatisticsDet.vue
+++ b/src/views/energy/monitoring/energyStatistics/components/energyStatisticsDet.vue
@@ -54,8 +54,8 @@ const tableProps = [
    label: '所属对象'
  },
  {
-    prop: 'objRemark',
-    label: '对象备注'
+    prop: 'objCode',
+    label: '对象编码'
  },
  {
    prop: 'paramName',
--- a/src/views/energy/monitoring/energyStatistics/components/energyStatisticsDetAdd.vue
+++ b/src/views/energy/monitoring/energyStatistics/components/energyStatisticsDetAdd.vue
@@ -41,8 +41,8 @@ const tableProps = [
    label: '所属对象'
  },
  {
-    prop: 'objRemark',
-    label: '对象备注'
+    prop: 'objCode',
+    label: '对象编码'
  },
  {
    prop: 'paramName',
--- a/src/views/energy/monitoring/orderEnergy/components/barChart.vue
+++ b/src/views/energy/monitoring/orderEnergy/components/barChart.vue
@@ -0,0 +1,93 @@
+<template>
+  <div 
+    id="orderEnergyChart"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "BarChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(430)
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(430)
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('orderEnergyChart')
+      this.chart = echarts.init(this.chartDom)
+      console.log(this.chartData)
+      let xData = []
+      let yData = []
+      this.chartData && this.chartData.map(item =>{
+        xData.push(item.objName)
+        yData.push(item.useNum)
+      })
+      var option = {
+        color:['#288AFF'],
+        grid: {
+          left: '2%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisLabel: {
+            rotate: "45"
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yData,
+            type: 'bar',
+            barMaxWidth: 20,
+            label: {
+              show: true,
+              position: 'top'
+            }
+          }
+        ]
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>
--- a/src/views/energy/monitoring/orderEnergy/index.vue
+++ b/src/views/energy/monitoring/orderEnergy/index.vue
@@ -0,0 +1,269 @@
+<template>
+  <div class="orderEnergyContainer">
+    <div class="box1">
+      <!-- 搜索工作栏 -->
+      <search-bar
+        :formConfigs="formConfig"
+        ref="searchBarForm"
+        @headBtnClick="buttonClick"
+      />
+    </div>
+    <div class="box2">
+      <div class="boxTitle">
+        <span class="blueTitle"></span>
+        <span>工单信息</span>
+      </div>
+      <el-row>
+        <el-col :span='4'>
+          <div class="blodTip">工单名称</div>
+          <div class="lightTip">{{ orderMsg.name }}</div>
+        </el-col>
+        <el-col :span='4'>
+          <div class="blodTip">产品名称</div>
+          <div class="lightTip">{{orderMsg.productName }}</div>
+        </el-col>
+        <el-col :span='4'>
+          <div class="blodTip">计划完成数量</div>
+          <div class="lightTip">{{orderMsg.planQuantity }}</div>
+        </el-col>
+        <el-col :span='4'>
+          <div class="blodTip">实际开始时间</div>
+          <div class="lightTip">{{ parseTime(orderMsg.startProduceTime) }}</div>
+        </el-col>
+        <el-col :span='4'>
+          <div class="blodTip">实际完成时间</div>
+          <div class="lightTip">{{ parseTime(orderMsg.finishProduceTime) }}</div>
+        </el-col>
+        <el-col :span='4'>
+          <div class="blodTip">实际加工数量</div>
+          <div class="lightTip">{{orderMsg.actualQuantity }}</div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="box3">
+      <div class="boxTitle">
+        <span class="blueTitle"></span>
+        <span>能耗信息</span>
+      </div>
+      <div class="toggleTabBox">
+        <div :class="{ active: activeModule === 'dataList' }" @click="toggleTab('dataList')">数据列表</div>
+        <div :class="{ active: activeModule === 'barChart' }" @click="toggleTab('barChart')">柱状图</div>
+      </div>
+      <div>
+        <div  v-show="activeModule === 'dataList'">
+          <!-- 表格 -->
+          <base-table
+            :page="queryParams.pageNo"
+            :limit="queryParams.pageSize"
+            :table-props="tableProps"
+            :table-data="tableData"
+            :max-height="tableH"
+          />
+        </div>
+        <!-- 图形 -->
+        <div v-show="activeModule === 'barChart'">
+          <bar-chart ref="orderEnergyChart" :chartData="chartData"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const tableProps = [
+  {
+    prop: 'objName',
+    label: '对象名称'
+  },
+  {
+    prop: 'objCode',
+    label: '对象编码'
+  },
+  {
+    prop: 'energyType',
+    label: '能源类型'
+  },
+  {
+    prop: 'startNum',
+    label: '工单开始值'
+  },
+  {
+    prop: 'endNum',
+    label: '工单结束值/当前值'
+  },
+  {
+    prop: 'useNum',
+    label: '使用量'
+  }
+]
+import { getEnergyTypeListAll } from '@/api/base/energyType'
+import { orderList, workOrderList } from '@/api/base/orderManage'
+import { getWorkOrderMsg, getOrderEnergyData } from '@/api/monitoring/orderEnergy'
+import BarChart from "./components/barChart"
+export default {
+  name: 'OrderEnergy',
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'select',
+          label: '订单',
+          selectOptions: [],
+          param: 'energyTypeId'
+        },
+        {
+          type: 'select',
+          label: '工单',
+          selectOptions: [],
+          param: 'energyTypeId1'
+        },
+        {
+          type: 'select',
+          label: '能源类型',
+          selectOptions: [],
+          param: 'energyTypeId2',
+          filterable: true,
+          width: 120
+        },
+        {
+          type: 'select',
+          label: '对象维度',
+          selectOptions: this.getDictDatas(this.DICT_TYPE.OBJECT_TYPE),
+          labelField: 'label',
+          valueField: 'value',
+          param: 'energyTypeId3',
+          width: 100
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      tableProps,
+      tableData: [],
+      tableH: this.tableHeight(400),
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10000
+      },
+      orderMsg: {},
+      chartData: [],
+      activeModule: 'dataList'
+    }
+  },
+  components: { BarChart },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(400)
+    })
+    this.getListArr()
+  },
+  methods: {
+    getListArr() {
+      getEnergyTypeListAll().then(res => {
+        this.formConfig[2].selectOptions = res.data || []
+      })
+      orderList().then(res => {
+        console.log(res)
+      })
+      workOrderList().then(res => {
+        console.log(res)
+      })
+    },
+    buttonClick() {
+      getWorkOrderMsg({
+        "workOrderId": 1,
+        "objType": "3",
+        "energyTypeId": '1681183397517406210'
+      }).then(res => {
+        console.log(res)
+        this.orderMsg = res.data || {}
+        getOrderEnergyData({
+          "workOrderId": 1,
+          "objType": "3",
+          "energyTypeId": '1681183397517406210',
+          "startProduceTime": "1694239523000",
+          "finishProduceTime": "1694498723000"
+        }).then(res => {
+          console.log(res)
+          this.tableData = res.data || []
+          this.chartData = res.data || []
+        })
+      })
+    },
+    toggleTab(val) {
+      this.activeModule = val
+      if (this.activeModule === 'barChart') {
+        this.$nextTick((res) => {
+          this.$refs.orderEnergyChart.getChart()
+        })
+      }
+    },
+    headBtnClick() {}
+  }
+}
+</script>
+<style lang='scss' scoped>
+.orderEnergyContainer {
+  background-color: rgb(242, 244, 249);
+  .box1, .box2, .box3 {
+    background-color: #fff;
+    border-radius: 9px;
+  }
+  .box1 {
+    height: 64px;
+    padding: 12px 16px 0;
+  }
+  .box2 {
+    height: 122px;
+    margin: 8px 0;
+    padding: 16px;
+    .blodTip {
+      font-weight: 600;
+      color: rgba(0,0,0,0.85);
+      margin-bottom: 8px;
+    }
+    .lightTip {
+      font-weight: 400;
+      color: rgba(102,102,102,0.75);
+    }
+  }
+  .box3 {
+    padding: 16px;
+    height: calc(100vh - 330px);
+    .toggleTabBox {
+      display: inline-block;
+      div {
+        display: inline-block;
+        padding:0 8px 4px;
+        color: rgba(102, 102, 102, 0.5);
+        border-bottom: 2px solid rgba(242, 244, 249, 1);
+        cursor: pointer;
+      }
+      .active {
+        color: rgba(0,0,0,0.85);
+        border-bottom-color: #0B58FF;
+      }
+    }
+  }
+  .boxTitle {
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 400;
+    color: #000000;
+    margin:0 10px 20px 0;
+  }
+  .blueTitle {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 18px;
+    background-color: #0B58FF;
+    border-radius: 1px;
+    margin-right: 8px;
+    vertical-align: bottom;
+  }
+}
+</style>