Browse Source

Merge remote-tracking branch 'origin/demo_' into demo_

2 years ago
parent
commit
d8d3ac51fa

+ 3 - 3
src/views/remote/opc-log/RemoteOpcLog.vue

@@ -135,10 +135,10 @@ export default {
             return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
           }
         },
-        {
+        /*    {
           title: '点位名称',
           dataIndex: 'sbName'
-        },
+        }, */
         {
           title: '点位',
           dataIndex: 'positionNum'
@@ -253,7 +253,7 @@ export default {
             getCheckboxProps: record => ({
               props: {
                 disabled: false,
-                name: record.id
+                name: record.id + ''
               }
             })
           }

+ 128 - 9
src/views/remote/opc-log/modules/Detail.vue

@@ -8,28 +8,42 @@
       </a-col>
     </a-row>
     <detail-list title="" :col="2">
-      <detail-list-item term="设备id">{{ model.sbId }}</detail-list-item>
+      <detail-list-item term="点位id">{{ model.sbId }}</detail-list-item>
       <detail-list-item term="点位名称">{{ model.sbName }}</detail-list-item>
       <detail-list-item term="点位">{{ model.positionNum }}</detail-list-item>
-      <detail-list-item term="类型">
-        {{ BaseTool.Object.getField(map,model.type) }}</detail-list-item>
+      <detail-list-item term="类型">{{ BaseTool.Object.getField(map,model.type) }}</detail-list-item>
       <detail-list-item term="描述">{{ model.description }}</detail-list-item>
       <detail-list-item term="系数">{{ model.ratio }}</detail-list-item>
       <detail-list-item term="单位">{{ model.unit }}</detail-list-item>
-      <detail-list-item term="备注">{{ model.remark }}</detail-list-item>
+      <!--      <detail-list-item term="备注">{{ model.remark }}</detail-list-item>-->
       <detail-list-item term="年">{{ model.year }}</detail-list-item>
       <detail-list-item term="月">{{ model.month }}</detail-list-item>
       <detail-list-item term="日">{{ model.day }}</detail-list-item>
-      <detail-list-item term="时">{{ model.hour }}</detail-list-item>
+      <!--      <detail-list-item term="时">{{ model.hour }}</detail-list-item>
       <detail-list-item term="实时数值">{{ model.result }}</detail-list-item>
       <detail-list-item term="创建人">{{ model.createdUserId }}</detail-list-item>
       <detail-list-item term="更新人">{{ model.updateUserId }}</detail-list-item>
-      <detail-list-item term="更新日期">{{ model.updateTime }}</detail-list-item>
+      <detail-list-item term="更新日期">{{ model.updateTime }}</detail-list-item>-->
     </detail-list>
+    <div style="width: 100%">
+      <div id="container"></div>
+    </div>
+    <div>
+      <a-table
+        bordered
+        :data-source="chartsData"
+        :columns="columns"
+        tableLayout="auto"
+        :scroll="{x: 1, y: BaseTool.Constant.scrollY }"
+        rowKey="time">
+
+      </a-table>
+    </div>
   </a-card>
 </template>
 
 <script>
+import { Chart } from '@antv/g2'
 import DetailList from '@/components/tools/DetailList'
 const DetailListItem = DetailList.Item
 
@@ -37,6 +51,7 @@ export default {
   name: 'RemoteDegreeLogDetail',
   components: {
     DetailList,
+    Chart,
     DetailListItem
   },
   data () {
@@ -56,7 +71,7 @@ export default {
         'result': null,
         'ratio': null,
         'unit': null,
-        'year': null,
+        'time': null,
         'month': null,
         'day': null,
         'hour': null,
@@ -64,24 +79,128 @@ export default {
         'createdUserId': null,
         'updateUserId': null,
         'updateTime': null
-      }
+      },
+      // 表头
+      chart: null, // 创建一个chart变量
+      chartsData: [],
+      columns: [
+        {
+          title: '时间',
+          dataIndex: 'time'
+        },
+        {
+          title: '数值',
+          dataIndex: 'value'
+        }
+      ]
     }
   },
   created () {
     // 下拉框map
     this.map = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REMOTE_OPC)
-
   },
   methods: {
     base (record) {
       this.visible = true
       this.modalTitle = '详情'
       this.model = record
+      this.chartsData = JSON.parse(record.dataJsonStr)
+      this.getCharts(this.chartsData)
+    },
+    getCharts (data) {
+      this.chart && this.chart.destroy()// 防止点击搜索按钮新增一个
+      const data1 = [
+        { time: '1991', value: 3 },
+        { time: '1992', value: 4 },
+        { time: '1993', value: 3.5 },
+        { time: '1994', value: 5 },
+        { time: '1995', value: 4.9 },
+        { time: '1996', value: 6 },
+        { time: '1997', value: 7 },
+        { time: '1998', value: 9 },
+        { time: '1999', value: 13 }
+      ]
+
+      // 初始化,指定容器DOM id、高度
+      this.chart = new Chart({
+        container: 'container',
+        autoFit: true,
+        width: 1600, // 图标宽度
+        height: 400, // 图表高度
+        padding: [40, 40, 40, 40]// 图表内边距,依次为:上,右,下,左
+      })
+
+      // data 数据
+      this.chart.data(data)
+      // scale 度量配置, 生成坐标轴刻度值
+
+      // tooltip 提示信息,是指当鼠标悬停在图形上时,以提示框的形式展示该点的数据
+      this.chart.tooltip({
+        showCrosshairs: true, // 展示 Tooltip 辅助线
+        shared: true
+      })
+
+      // 几何图形 Geometry;
+      // 使用 line 绘制折线图
+      // 使用 position 通道将对应的变量映射到 x 和 y 位置空间上;
+      // 使用label 展示value值;
+      // this.chart.line().position('time*value').label('value')
+      this.chart.line().position('time*value')
+      // 使用 point 绘制点
+      // 使用 position 将对应的变量映射到 x 和 y 位置空间上;
+      this.chart.point().position('time*value')
+      this.chart.render()
     },
     handleCancel () {
       this.visible = false
       this.confirmLoading = false
+      this.$emit('ok')
     }
   }
 }
 </script>
+
+<style lang="less" scoped>
+.extra-wrapper {
+  line-height: 55px;
+  padding-right: 24px;
+
+  .extra-item {
+    display: inline-block;
+    margin-right: 24px;
+
+    a {
+      margin-left: 24px;
+    }
+  }
+}
+
+.antd-pro-pages-dashboard-analysis-twoColLayout {
+  position: relative;
+  display: flex;
+  display: block;
+  flex-flow: row wrap;
+}
+
+.antd-pro-pages-dashboard-analysis-salesCard {
+  height: calc(100% - 24px);
+  /deep/ .ant-card-head {
+    position: relative;
+  }
+}
+
+.dashboard-analysis-iconGroup {
+  i {
+    margin-left: 16px;
+    color: rgba(0,0,0,.45);
+    cursor: pointer;
+    transition: color .32s;
+    color: black;
+  }
+}
+.analysis-salesTypeRadio {
+  position: absolute;
+  right: 54px;
+  bottom: 12px;
+}
+</style>

+ 2 - 2
src/views/remote/opc-log/modules/RemoteOpcLogSelectModal.vue

@@ -115,10 +115,10 @@ export default {
           title: 'id',
           dataIndex: 'sbId'
         },
-        {
+        /*{
           title: '点位名称',
           dataIndex: 'sbName'
-        },
+        },*/
         {
           title: '点位',
           dataIndex: 'positionNum',