Bläddra i källkod

系统集成报告页面

LXXXY 5 år sedan
förälder
incheckning
f63a431cbc

+ 13 - 0
src/api/point/config.js

@@ -0,0 +1,13 @@
+export const baseUrl = '/api';
+// export const api = '/ScanBuilding';
+// export const sass = 'sass';
+// export const physics = '/data-platform-3';
+// export const business = '/business-space'
+// export const venders = '/venders'
+// export const zone = {
+//   GeneralZone: 'zone-general', //默认分区
+//   PowerSupplyZone: 'zone-power-supply', //供电分区
+//   LightingZone: 'zone-lighting', //照明分区
+//   AirConditioningZone: 'metaspace', //空调分区
+//   TenantZone: 'zone-tenant' //租赁分区
+// }

+ 41 - 0
src/api/point/fetch.js

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import axios from 'axios'
+import vueAxios from 'vue-axios'
+import { Message } from 'element-ui';
+
+Vue.use(vueAxios, axios)
+    //创建实例
+
+const service = axios.create({
+    timeout: 3000000, //请求时间超出
+    withCredentials: true, //是否跨站点访问控制请求
+})
+
+//request拦截
+service.interceptors.request.use(config => {
+    return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+})
+
+//response拦截器
+service.interceptors.response.use(
+    response => {
+        // let resp = response.data;
+        // let result = resp.result || resp.Result
+        return response
+        // if (result == 'success' || result == 'Success') {
+        //     return response
+        // } else {
+        //     let msg = resp.message ? resp.message : resp.ResultMsg? resp.ResultMsg: resp.Message;
+        //     Message.error({ message: msg });
+        // }        
+    },
+    error => {
+        console.log('err' + error)
+        return Promise.reject(error)
+    }
+)
+
+export default service

+ 54 - 0
src/api/point/httpUtil.js

@@ -0,0 +1,54 @@
+import { Message } from 'element-ui';
+import fetch from './fetch'
+import storage from '@/framework/utils/storage'
+
+function successResponse(vm, response, success, failed) {
+    let resp = response.data;
+    let result = resp.result ? resp.result : resp.Result;
+    if (result === 'success') {
+        if (success) {
+            success(resp);
+        }
+    } else {
+        let msg = resp.message ? resp.message : resp.ResultMsg || resp.resultMsg || resp.Message;
+        Message.error({ message: msg });
+        if (failed) {
+            failed(resp);
+        }
+    }
+
+}
+
+function errorResponse(vm, response, err) {
+    let json = JSON.parse(JSON.stringify(response))
+    console.error(response)
+    if (json.response) {
+        Message.error({ message: `接口:${json.response.config.url}请求错误,错误状态为:${json.response.status}` })
+    } else {
+        console.error(vm, response, err)
+        Message.error({ message: '请求错误' });
+    }
+}
+
+export default {
+    getJson: function(url, data, success, failed, err) {
+        let ProjectId = storage.get("global_project_selected")
+        let userName = storage.get("user_name")
+        let vm = this;
+        fetch({ url: url, method: 'get', params: data, headers: {'ProjectId': ProjectId, 'Comming': 'adm' ,'Account': userName}}).then((response) => {
+            successResponse(vm, response, success, failed)
+        }).catch(error => {
+            errorResponse(vm, error, err);
+        });
+    },
+    postJson: function(url, data, success, failed, err) {
+        let ProjectId = storage.get("global_project_selected")
+        let userName = storage.get("user_name")
+        let vm = this;
+        fetch({ url: url, method: 'post', data: data, headers: {'ProjectId': ProjectId, 'Comming': 'adm' ,'Account': userName} }).then((response) => {
+            successResponse(vm, response, success, failed)
+        }).catch(error => {
+            errorResponse(vm, error, err);
+        });
+    }
+}

+ 92 - 0
src/api/point/request.js

@@ -0,0 +1,92 @@
+import fetch from './fetch'
+import { api } from './config.js'
+import http from './httpUtil'
+
+//系统集成统计环形图
+export function getIntegrateStatisticsToLoop(param, success) {
+    let url = `/pointconfig/datasource/queryWithCount`
+    let data = param
+    http.postJson(url, data, success)
+}
+
+//系统集成统计条形
+export function getIntegrateStatisticsToBar(param, success) {
+    let url = `/pointconfig/datasource/queryWithCount`
+    let data = param
+    http.postJson(url, data, success)
+}
+
+//表号功能号总览
+export function getTabFunNumOverview(param, success) {
+    let url = `/ScanBuilding/service/user/query`
+    let data = param
+    data = {
+        "Comming": 'revit',
+        "ProjId": 'Pj4201050001',
+        "UserId": 'test',
+        "PageNum": 1,
+        "PageSize": 10,
+        "Filter": ""
+    }
+    http.postJson(url, data, success)
+}
+
+//表号功能号对应历史数据
+export function getHistoryData(param, success) {
+    let url = `/ScanBuilding/service/user/query`
+    let data = param
+    data = {
+        "Comming": 'revit',
+        "ProjId": 'Pj4201050001',
+        "UserId": 'test',
+        "PageNum": 1,
+        "PageSize": 10,
+        "Filter": ""
+    }
+    http.postJson(url, data, success)
+}
+
+//获取表号功能号的源数据
+export function getTabFunNumSourceData(param, success) {
+    let url = `/ScanBuilding/service/user/query`
+    let data = param
+    data = {
+        "Comming": 'revit',
+        "ProjId": 'Pj4201050001',
+        "UserId": 'test',
+        "PageNum": 1,
+        "PageSize": 10,
+        "Filter": ""
+    }
+    http.postJson(url, data, success)
+}
+
+//获取表号功能号对应的对象实例
+export function getTabFunNumObjInstance(param, success) {
+    let url = `/ScanBuilding/service/user/query`
+    let data = param
+    data = {
+        "Comming": 'revit',
+        "ProjId": 'Pj4201050001',
+        "UserId": 'test',
+        "PageNum": 1,
+        "PageSize": 10,
+        "Filter": ""
+    }
+    http.postJson(url, data, success)
+}
+
+//添加表号功能号
+export function addTabFunNum(param, success) {
+    let url = `/ScanBuilding/service/user/query`
+    let data = param
+    data = {
+        "Comming": 'revit',
+        "ProjId": 'Pj4201050001',
+        "UserId": 'test',
+        "PageNum": 1,
+        "PageSize": 10,
+        "Filter": ""
+    }
+    http.postJson(url, data, success)
+}

+ 63 - 0
src/components/point/report/addTabFunNum.vue

@@ -0,0 +1,63 @@
+<template>
+  <!-- 新增表号-功能号 -->
+  <div id="addTabFunNum">
+    <el-form :model='form' label-width="150px">
+      <el-form-item label="表号-功能号">
+        <el-input v-model="form.tabFunNum"></el-input>
+      </el-form-item>
+      <el-form-item label="设定采集间隔时间">
+        <el-input v-model="form.intervalTime" placeholder="设定时间不能小于10s"></el-input>
+      </el-form-item>
+      <el-form-item label="值单位">
+        <el-select v-model="form.unit" placeholder="请选择">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="取直公式">
+        <el-input type="textarea" placeholder="请输入取值公式" v-model="form.formula"></el-input>
+      </el-form-item>
+      <el-form-item label="">
+        <el-button type="primary" @click="add()">新增</el-button>
+        <el-button @click="$emit('closeDrawer')">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  data() {
+    return {
+      form: {
+        tabFunNum: 'xx-xxx',//表号-功能号
+        intervalTime: '',//采集间隔时间
+        formula: 'xxxxxxxxxx',//取值公式
+        unit: ''//值单位
+      },
+      //下拉框选项
+      options: [
+        {
+          value: '选项1',
+          label: '选项1'
+        }, {
+          value: '选项2',
+          label: '选项2'
+        },
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('layout', ['projectId', 'userId'])
+  },
+  methods: {
+    //添加
+    add() {
+
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

+ 130 - 0
src/components/point/report/dataSource.vue

@@ -0,0 +1,130 @@
+<template>
+    <!-- 子系统点位(数据来源) -->
+    <div id="dataSource">
+        <div class="data-item"  v-for="form in forms" :key="form.id">
+            <el-form :model="form" label-width="150px">
+                <el-form-item label="数据源名称:">
+                    {{form.name}}
+                </el-form-item>
+                <el-form-item label="值单位说明:">
+                    {{form.explain}}
+                </el-form-item>
+                <el-form-item label="原始点位值:">
+                    {{form.value}}
+                </el-form-item>
+                <el-form-item label="原始点位描述:">
+                    {{form.describe}}
+                </el-form-item>
+                <el-form-item label="位置标签:">
+                    {{form.locationLabel}}
+                </el-form-item>
+                <el-form-item label="原始值处理规则详情:">
+                    {{form.ruleDetail}}
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+import {
+    getTabFunNumSourceData
+} from '@/api/point/request'
+
+export default {
+    data() {
+        return {
+            forms: [
+                // {
+                //     id: '1',                     ID
+                //     name: 'test',                数据源名称
+                //     explain: '说明',             值单位说明
+                //     value: '测试值',             原始点位值
+                //     describe: '测试描述',        原始点位描述
+                //     locationLabel: '位置标签',   位置标签
+                //     ruleDetail: '规则详情'       原始值处理规则详情
+                // }
+            ]
+        }
+    },
+    methods: {
+        loadDataSource() {
+            getTabFunNumSourceData({tabFunNum: this.tabFunNum}, res => {
+                // this.forms = res;
+                this.forms = [
+                    {
+                        id: '1',
+                        name: 'test',
+                        explain: '说明',
+                        value: '测试值',
+                        describe: '测试描述',
+                        locationLabel: '位置标签',
+                        ruleDetail: '规则详情'
+                    },{
+                        id: '2',
+                        name: 'test1',
+                        explain: '说明',
+                        value: '测试值',
+                        describe: '测试描述',
+                        locationLabel: '位置标签',
+                        ruleDetail: '规则详情'
+                    },{
+                        id: '3',
+                        name: 'test2',
+                        explain: '说明',
+                        value: '测试值',
+                        describe: '测试描述',
+                        locationLabel: '位置标签',
+                        ruleDetail: '规则详情'
+                    },{
+                        id: '4',
+                        name: 'test2',
+                        explain: '说明',
+                        value: '测试值',
+                        describe: '测试描述',
+                        locationLabel: '位置标签',
+                        ruleDetail: '规则详情'
+                    },{
+                        id: '5',
+                        name: 'test2',
+                        explain: '说明',
+                        value: '测试值',
+                        describe: '测试描述',
+                        locationLabel: '位置标签',
+                        ruleDetail: '规则详情'
+                    },
+                ];
+            });
+        }
+    },
+    props: {
+        tabFunNum: String
+    },
+    computed:{
+        ...mapGetters('layout', ['projectId', 'userId'])
+    },
+    mounted() {
+        this.loadDataSource();
+    },
+    watch: {
+        tabFunNum() {
+            this.loadDataSource();
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+#dataSource{
+    height:100%;
+    overflow:auto;
+}
+.data-item{
+    margin: 15px 10px;
+    box-shadow: 2px 2px 2px 2px #aaa;
+    background-color: white;
+    padding: 10px 10px;
+}
+</style>

+ 156 - 0
src/components/point/report/historyChart.vue

@@ -0,0 +1,156 @@
+<template>
+    <!-- 历史数据 -->
+    <div id="historyChart">
+        <!-- 精度选择 -->
+        <div class="query-area">
+            <span>当下分精度下采集数量:{{ chartData.count }}</span>
+            <el-select v-model="selectValue" style="float:right;margin-right:10px;" @change='loadTable()'>
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+        </div>
+        <!-- 图表 -->
+        <div class="chart-area" ref="chart">
+
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+import {
+    getHistoryData
+} from '@/api/point/request'
+import echarts from 'echarts'
+
+export default {
+    data() {
+        return {
+            lineChart: null,//折线表
+            selectValue: '1',//下拉框默认值
+            options: [//精度
+                {value: '1', label:  '天'},
+                {value: '7', label:  '周'},
+                {value: '30', label:  '月'},
+            ],
+            //数据表
+            chartData: {
+                count: 100,//总数
+                data: [
+                    {date: '2019/02/01', value: 100},//横坐标标识 纵坐标值
+                    {date: '2019/02/02', value: 200},
+                    {date: '2019/02/03', value: 300},
+                    {date: '2019/02/04', value: 150},
+                ]
+            }
+        }
+    },
+    props:{
+        tabFunNum: String//表号功能号
+    },
+    methods: {
+        //加载表格
+        loadTable(){
+            getHistoryData({tabFunNum:this.tabFunNum},res => {
+                // this.chartData = res;
+                //折线图参数
+                let lineChartOption = {
+                    tooltip: {
+                        trigger: 'axis',
+                        position: function (pt) {
+                            return [pt[0], '10%'];
+                        }
+                    },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: this.chartData.data.map(item => item.date)
+                    },
+                    yAxis: {
+                        type: 'value',
+                        boundaryGap: [0, '100%']
+                    },
+                    dataZoom: [{
+                        type: 'inside',
+                        start: 80,
+                        end: 100
+                    }, {
+                        start: 0,
+                        end: 10,
+                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+                        handleSize: '80%',
+                        handleStyle: {
+                            color: '#fff',
+                            shadowBlur: 3,
+                            shadowColor: 'rgba(0, 0, 0, 0.6)',
+                            shadowOffsetX: 2,
+                            shadowOffsetY: 2
+                        }
+                    }],
+                    series: [
+                        {
+                            name:'历史数据',
+                            type:'line',
+                            smooth:true,
+                            symbol: 'none',
+                            sampling: 'average',
+                            itemStyle: {
+                                color: 'rgb(182,194,154)'
+                            },
+                            areaStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgb(182,194,154)'
+                                }, {
+                                    offset: 1,
+                                    color: 'rgb(138,151,123)'
+                                }])
+                            },
+                            data: this.chartData.data.map(item => item.value)
+                        }
+                    ]
+                };
+                this.lineChart.setOption(lineChartOption);
+            });
+            
+        },
+        init() {
+            this.lineChart = echarts.init(this.$refs.chart);
+            this.loadTable();
+        },
+    },
+    computed: {
+        ...mapGetters('layout', ['projectId', 'userId'])
+    },
+    mounted() {
+        //实例化
+        this.init();
+        let that = this;
+        //图表大小随窗口变化
+        window.onresize = () => {
+            that.lineChart.resize();
+        }
+    },
+    watch: {
+        //切换时更新数据
+        tabFunNum() {
+            this.loadTable();
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+#historyChart{
+    height:100%;
+    width:100%;
+    padding:10px 5px;
+}
+.query-area{
+    height:40px;
+    line-height:40px;
+}
+.chart-area{
+    height:450px;
+}
+</style>

+ 263 - 0
src/components/point/report/integrateStatistics.vue

@@ -0,0 +1,263 @@
+<template>
+  <div id="integrateStatistics">
+    <!-- 环形表 -->
+    <div class="statistics-chart">
+      <div class="chart-title">表号功能号总数量:</div>
+      <hr style="width:90%" />
+      <div ref="loopchart" class="chart"></div>
+      <hr style="width:80%" />
+      <div style="padding:15px 10%;line-height:2;">
+        1点位对多表号功能号:{{ pointData[0] }}
+        <br />
+        多点为对1表号功能号:{{ pointData[1] }}
+        <el-button
+          @click="showOverview"
+          type="info"
+          icon="el-icon-arrow-right"
+          circle
+          style="margin:-25px 0 0 50px;"
+        ></el-button>
+      </div>
+    </div>
+    <!-- 图形图 -->
+    <div class="statistics-chart" style="border-top:5px solid #eee;">
+      <div class="chart-title">表号功能号总数量:{{ originalPoint }}</div>
+      <hr style="width:90%" />
+      <div ref="barchart" class="chart" :style="{height:barChartData.length * 120 + 'px'}"></div>
+    </div>
+    <!-- 点位/表号共更好对应总览 -->
+    <pointTabOverview ref="overviewDialog"></pointTabOverview>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+
+//echarts
+import echarts from "echarts";
+import "echarts/lib/chart/bar";
+import "echarts/lib/component/tooltip";
+import "echarts/lib/component/title";
+
+import {
+  getIntegrateStatisticsToLoop,
+  getIntegrateStatisticsToBar
+} from "@/api/point/request";
+import pointTabOverview from "./pointTabOverview";
+
+export default {
+  data() {
+    return {
+      //环形图
+      loopChart: null,
+      //条形图1
+      barChart: null,
+      //图标数据
+      loopChartData: [],
+      barChartData: [],
+      //表号功能号
+      pointData: [1111, 2222],
+      //原始点数量
+      originalPoint: null
+    };
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId", "userId"])
+  },
+  methods: {
+    //加载图表数据
+    loadChart() {
+      //获取环形图数据
+      getIntegrateStatisticsToBar({}, res => {
+        this.loopChartData = [
+          { value: 567, name: "已对实例数量" },
+          { value: 324, name: "可断数量" }
+        ];
+
+        //环形图参数
+        let loopOption = {
+          tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b}: {c} ({d}%)"
+          },
+          legend: {
+            orient: "vertical",
+            x: "5%",
+            y: "top",
+            data: this.loopChartData.map(item => item.name)
+          },
+          graphic: {
+            elements: [
+              {
+                type: "text",
+                left: "center",
+                top: "center",
+                style: {
+                  text: (() => {
+                    let s = 0;
+                    this.loopChartData.map(item => {
+                      s += item["value"];
+                    });
+                    return s + "\n总数";
+                  })(),
+                  textAlign: "center",
+                  fontSize: 20,
+                  fontWeight: 300
+                }
+              }
+            ]
+          },
+          series: [
+            {
+              name: "实例总数",
+              type: "pie",
+              radius: ["50%", "70%"],
+              avoidLabelOverlap: false,
+              label: {
+                normal: {
+                  show: false,
+                  position: "outside"
+                },
+                emphasis: {
+                  show: true,
+                  textStyle: {
+                    fontSize: "15",
+                    fontWeight: "bold"
+                  }
+                }
+              },
+              labelLine: {
+                normal: {
+                  show: true
+                }
+              },
+              data: this.loopChartData
+            }
+          ]
+        };
+
+        //实例化
+        this.loopChart = echarts.init(this.$refs.loopchart);
+        //设置参数并加载
+        this.loopChart.setOption(loopOption);
+      });
+
+      //获取条形图数据
+      getIntegrateStatisticsToLoop({}, res => {
+        this.barChartData = res.Content;
+
+        this.originalPoint = (() => {
+          let sum = 0;
+          this.barChartData.map(item => {
+            sum += item["Equipmenttypestandard"];
+            sum += item["Equipmenttypenotstandard"];
+          });
+          return sum;
+        })();
+
+        //条形图参数
+        let barOption = {
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              // 坐标轴指示器,坐标轴触发有效
+              type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
+            }
+          },
+          legend: {
+            data: ["已接入", "未接入"]
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: "value",
+              position: "top"
+            }
+          ],
+          yAxis: [
+            {
+              type: "category",
+              axisTick: { show: false },
+              data: this.barChartData.map(item => item.Name)
+            }
+          ],
+          series: [
+            {
+              name: "已接入",
+              type: "bar",
+              label: {
+                normal: {
+                  show: true,
+                  position: "inside"
+                }
+              },
+              data: this.barChartData.map(item => item.Equipmenttypestandard)
+            },
+            {
+              name: "未接入",
+              type: "bar",
+              stack: "总量",
+              label: {
+                normal: {
+                  show: true
+                }
+              },
+              data: this.barChartData.map(item => item.Equipmenttypenotstandard)
+            }
+          ]
+        };
+
+        /* 条形图高度随数量变化,延时初始化 */
+        let that = this;
+        setTimeout(() => {
+          that.barChart = echarts.init(that.$refs.barchart);
+          that.barChart.setOption(barOption);
+        }, 100);
+      });
+    },
+    //点位/表号
+    showOverview() {
+      this.$refs.overviewDialog.loadOverviewData();
+    },
+    init() {
+      this.loadChart();
+    }
+  },
+  mounted() {
+    this.init();
+    //图表随窗口变化
+    let that = this;
+    window.onresize = () => {
+      that.loopChart.resize();
+      that.barChart.resize();
+    };
+  },
+  components: {
+    pointTabOverview
+  }
+};
+</script>
+
+<style lang="less" scoped>
+#integrateStatistics {
+  border-top: 5px solid #eee;
+}
+.statistics-chart {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+.chart-title {
+  padding: 5px 5%;
+  font-size: 16px;
+  font-weight: 500;
+}
+.chart {
+  min-height: 250px;
+  height: auto;
+  width: 100%;
+}
+</style>

+ 134 - 0
src/components/point/report/objectInstance.vue

@@ -0,0 +1,134 @@
+<template>
+    <!-- 对象实例 -->
+    <div id="objectInstance">
+        <div class="obj-item" v-for="form in forms" :key="form.id">
+            <el-form :model="form" label-width="150px">
+                <el-form-item label="对象类型:">
+                    {{form.objType}}
+                </el-form-item>
+                <el-form-item label="对象实例本地名称:">
+                    {{form.localName}}
+                </el-form-item>
+                <el-form-item label="对象实例本地编码:">
+                    {{form.localNum}}
+                </el-form-item>
+                <el-form-item label="对象实例ID:">
+                    {{form.instanceId}}
+                </el-form-item>
+                <el-form-item label="信息点名称:">
+                    {{form.mesPointName}}
+                </el-form-item>
+                <el-form-item label="对应值:">
+                    {{form.mesPointVal}}
+                </el-form-item>
+                <el-form-item label="对象实例位置图:">
+                    <img :src="form.instanceMap" class="instanceMap" />
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+import {
+    getTabFunNumObjInstance
+} from '@/api/point/request'
+export default {
+    data() {
+        return {
+            forms: [
+                // {
+                //     id: '1',                 ID
+                //     objType: 'type1' ,       对象类型
+                //     localName: 'name1',      对象实例本地名称
+                //     localNum: 'num1',        对象实例本地编码
+                //     instanceId: 'id1',       对象实例ID
+                //     mesPointName: 'name1',   信息点名称
+                //     mesPointVal: 'value1',   对应值
+                //     instanceMap: 'm'         对象实例位置图
+                // }
+            ]
+        }
+    },
+    methods: {
+        loadObjectInstance() {
+            getTabFunNumObjInstance({}, res => {
+                // this.forms = res;
+                this.forms = [
+                    {
+                        id: '1',
+                        objType: 'type1',
+                        localName: 'name1',
+                        localNum: 'num1',
+                        instanceId: 'id1',
+                        mesPointName: 'name1',
+                        mesPointVal: 'value1',
+                        instanceMap: 'm'
+                    },{
+                        id: '2',
+                        objType: 'type2',
+                        localName: 'name1',
+                        localNum: 'num1',
+                        instanceId: 'id1',
+                        mesPointName: 'name1',
+                        mesPointVal: 'value1',
+                        instanceMap: 'm'
+                    },{
+                        id: '3',
+                        objType: 'type3',
+                        localName: 'name1',
+                        localNum: 'num1',
+                        instanceId: 'id1',
+                        mesPointName: 'name1',
+                        mesPointVal: 'value1',
+                        instanceMap: 'm'
+                    },{
+                        id: '4',
+                        objType: 'type4',
+                        localName: 'name1',
+                        localNum: 'num1',
+                        instanceId: 'id1',
+                        mesPointName: 'name1',
+                        mesPointVal: 'value1',
+                        instanceMap: 'm'
+                    },
+                ]
+            })
+        }
+    },
+    mounted() {
+        this.loadObjectInstance();
+    },
+    props: {
+        tabFunNum: String//表号功能号
+    },
+    computed:{
+        ...mapGetters('layout', ['projectId', 'userId'])
+    },
+     watch: {
+        //切换时更新数据
+        tabFunNum() {
+            this.loadObjectInstance();
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+#objectInstance{
+    height:100%;
+    overflow:auto;
+}
+.instanceMap{
+    height:100px;
+    width:100px;
+}
+.obj-item{
+    margin: 15px 10px;
+    box-shadow: 2px 2px 2px 2px #aaa;
+    background-color: white;
+    padding: 10px 10px;
+}
+</style>

+ 92 - 0
src/components/point/report/pointTabOverview.vue

@@ -0,0 +1,92 @@
+<template>
+  <!-- 点位/表号共更好对应总览 -->
+  <div id="pointTabOverview">
+    <!-- 对话框 -->
+    <el-dialog title="点位/表号共更好对应总览" :visible.sync="dialogVisiable">
+      <el-tabs v-model="activeName">
+        <!-- 一对多数据 -->
+        <el-tab-pane label="一对多" name="otm">
+          <el-table :data="oTMData" style="width: 100%">
+            <el-table-column prop="name" label="点位名称" show-overflow-tooltip min-width="100"></el-table-column>
+            <el-table-column prop="dataSource" label="数据源" show-overflow-tooltip min-width="100"></el-table-column>
+            <el-table-column prop="TableNum" label="表号功能号" show-overflow-tooltip min-width="100">
+              <template slot-scope="scope">
+                <div v-for="(item, index) in scope.row.TableNum" :key="index" style="border-bottom: 1px solid #eee;">{{ item }}</div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <!-- 多对一数据 -->
+        <el-tab-pane label="多对一" name="mto">
+          <el-table :data="mTOData" style="width: 100%">
+            <el-table-column prop="name" label="点位名称" show-overflow-tooltip min-width="100">
+              <template slot-scope="scope">
+                <div v-for="(item, index) in scope.row.name" :key="index" style="border-bottom: 1px solid #eee;">{{ item }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="dataSource" label="数据源" show-overflow-tooltip min-width="100"></el-table-column>
+            <el-table-column prop="TableNum" label="表号功能号" show-overflow-tooltip min-width="100"></el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: "otm", //默认展示一对多
+      dialogVisiable: false, //显示对话
+      mTOData: null, //多对一数据
+      oTMData: null //一对多数据
+    };
+  },
+  methods: {
+    //加载数据
+    loadOverviewData() {
+      this.dialogVisiable = true;
+
+      this.mTOData = [
+        {
+          name: ["测试1", "测试2", "测试3"],
+          dataSource: "source 1",
+          TableNum: "XX-XX"
+        },
+        {
+          name: ["测试1", "测试2"],
+          dataSource: "source 1",
+          TableNum: "XX-XX2"
+        },
+        {
+          name: ["测试1", "测试2", "测试3", "测试4"],
+          dataSource: "source 1",
+          TableNum: "XX-XX3"
+        }
+      ];
+
+      this.oTMData = [
+        {
+          name: "测试2",
+          dataSource: "source 1",
+          TableNum: ["11-11", "2-2", "11-11", "11-11"]
+        },
+        {
+          name: "测试1",
+          dataSource: "source 1",
+          TableNum: ["11-11", "2-2", "11-11", "11-11"]
+        },
+        {
+          name: "测试3",
+          dataSource: "source 1",
+          TableNum: ["11-11", "2-2", "11-11", "11-11"]
+        }
+      ];
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+</style>

+ 205 - 0
src/components/point/report/tabFunNumOverview.vue

@@ -0,0 +1,205 @@
+<template>
+    <div id="tabFunNumOverview">
+        <!-- 查询 新增 -->
+        <div class="query-area">
+            <el-input :placeholder="`请输入表号功能号`" v-model="tabFunNum" @keyup.enter.native="getOverViewList()" style="width:240px;">
+                <i slot="suffix" class="el-input__icon el-icon-search" @click="getOverViewList()"></i>
+            </el-input>
+
+            <el-button size="mini" @click="handleDrawer({},3)" style="float: right;">新增自定义</el-button>
+        </div>
+        <!-- 数据表格 -->
+        <div class="table-area">
+            <el-table :data="tableData" style="width: 100%" height="calc(100% - 40px)" v-loading="loading" :header-cell-style="headerStyle">
+                <el-table-column prop='TableNum' label='表号-功能号' show-overflow-tooltip min-width="100"></el-table-column>
+                <el-table-column prop='CoValue' label='对应值(单位)' show-overflow-tooltip min-width="120">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.CoValue }}</span>
+                        <i @click="handleDrawer(scope.row, 0)" class="el-icon-s-data"></i>
+                    </template>
+                </el-table-column>
+                <el-table-column prop='GetTime' label='获取时间' show-overflow-tooltip>
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.GetTime }}</span>
+                        <i class="el-icon-refresh" @click="refreshThisRow(scope.row)"></i>
+                    </template>
+                </el-table-column>
+                <el-table-column prop='SubSysPoint' label='涉及子系统点位(数据来源)' show-overflow-tooltip min-width="150">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.SubSysPoint }}</span>
+                        <i @click="handleDrawer(scope.row, 1)" class="el-icon-coin"></i>
+                    </template>
+                </el-table-column>
+                <el-table-column prop='ObjInstance' label='涉及的对象实例(应用到)' show-overflow-tooltip min-width="150">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.ObjInstance }}</span>
+                        <i @click="handleDrawer(scope.row, 2)" class="el-icon-coin"></i>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <!-- 分页 -->
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="currentPage"
+                :page-sizes="pageSizes"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="allTableData.length">
+            </el-pagination>
+        </div>
+        <!-- 对话框和抽屉统一放在drawers中 -->
+        <!-- 对话框 -->
+        <el-dialog :title="'< ' + drawers[0].objId + ' > 的历史数据'" :visible.sync="drawers[0].drawer">
+            <historyChart :tabFunNum='drawers[0].objId'></historyChart>
+        </el-dialog>
+        <!-- 抽屉 -->
+        <el-drawer :title="'< ' + drawers[1].objId + ' > 的子系统点位'" :visible.sync="drawers[1].drawer" :direction="drawers[1].direction" size="50%">
+            <dataSource :tabFunNum='drawers[1].objId'></dataSource>
+        </el-drawer>
+        <el-drawer :title="'< ' + drawers[2].objId + ' > 的对象实例'" :visible.sync="drawers[2].drawer" :direction="drawers[2].direction" size="50%">
+            <objectInstance :tabFunNum='drawers[2].objId'></objectInstance>
+        </el-drawer>
+        <el-drawer title="新增表号功能号" :visible.sync="drawers[3].drawer" :direction="drawers[3].direction" size="50%">
+            <addTabFunNum @closeDrawer="closeDrawer()"></addTabFunNum>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import {
+    getTabFunNumOverview
+} from '@/api/point/request'
+
+import historyChart from './historyChart'
+import dataSource from './dataSource'
+import objectInstance from './objectInstance'
+import addTabFunNum from './addTabFunNum'
+
+export default {
+    data() {
+        return {
+            //表格头样式
+            headerStyle: {
+                backgroundColor: '#e1e4e5',
+                color: '#2b2b2b',
+                lineHeight: '30px'
+            },
+            allTableData: [],//所有表格数据
+            pageSizes:[5,10,20,50],
+            pageSize:10,
+            currentPage:1,
+            loading: false,//加载
+            tabFunNum: null,//表号功能号
+            //抽屉
+            drawers: [
+                {drawer: false, direction: 'rtl', objId:''},
+                {drawer: false, direction: 'rtl', objId:''},
+                {drawer: false, direction: 'rtl', objId:''},
+                {drawer: false, direction: 'rtl', objId:''}
+            ]
+            
+        }
+    },
+    methods:{
+        //抽屉处理
+        handleDrawer(row, index){
+            if(index != 3)
+                this.drawers[index].objId = row.TableNum;
+            this.drawers[index].drawer = true;
+        },
+        //获取统计数据
+        getOverViewList(){
+            this.loading = true;
+            getTabFunNumOverview({}, res => {
+                // this.tableData = res;
+                this.allTableData = [
+                    {TableNum: 'DK1', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
+                    {TableNum: 'DK2', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
+                    {TableNum: 'DK3', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
+                    {TableNum: 'DK4', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
+                    {TableNum: 'DK5', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
+                    {TableNum: 'DK6', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
+                    {TableNum: 'DK7', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
+                    {TableNum: 'DK8', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
+                    {TableNum: 'DK9', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
+                    {TableNum: 'DK10', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
+                    {TableNum: 'DK11', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
+                    {TableNum: 'DK12', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
+                    {TableNum: 'DK13', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
+                    {TableNum: 'DK14', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
+                    {TableNum: 'DK15', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'}
+                ];
+                this.loading = false;
+            });        
+        },
+        //刷新当前行数据
+        refreshThisRow(row){
+            let index = this.tableData.indexOf(row);
+            getTabFunNumOverview({}, res => {
+                this.tableData[index].GetTime = new Date().getTime();
+            });
+        },
+        //分页更换size
+        handleSizeChange(val){
+            this.pageSize = val;
+        },
+        //分页更换页
+        handleCurrentChange(val){
+            this.currentPage = val;
+        },
+        //子组件关闭抽屉
+        closeDrawer(){
+            this.drawers[3].drawer = false;
+        },
+        init() {
+            this.getOverViewList();
+        }
+    },
+    mounted() {
+        this.init();
+    },
+    computed: {
+        ...mapGetters('layout', ['projectId', 'userId']),
+        //根绝分页,获取要展示的tableData
+        tableData: function() {
+            return this.allTableData.slice(
+            (this.currentPage - 1) * this.pageSize,
+            (this.currentPage * this.pageSize < this.allTableData.length)? this.currentPage * this.pageSize : this.allTableData.length );
+        
+        }
+    },
+    components: {
+        historyChart,
+        dataSource,
+        objectInstance,
+        addTabFunNum
+    }
+}
+</script>
+
+<style lang="less" scoped>
+#tabFunNumOverview{
+    border-top:5px solid #eee;
+    height:calc(100% - 5px);
+    width:100%;
+    overflow:hidden;
+}
+.query-area{
+    margin:4px 8px;
+}
+.table-area{
+    height:calc(100% - 40px);
+}
+.table-area i{
+    text-align:right;
+    font-size:16px;
+    cursor: pointer;
+    float:right;
+    line-height:22.4px;
+}
+/deep/ .el-drawer__body{
+    height:90%;
+}
+</style>

+ 45 - 22
src/views/point/report/index.vue

@@ -1,36 +1,59 @@
 <template>
     <div>
-      <das-board>
-        <template v-slot:plan>
-          <span>{{plan?plan:"yyyy-mm-dd"}}</span>
-        </template>
-        <template v-slot:finish>
-          <span>{{finish?finish:"yyyy-mm-dd"}}</span>
-        </template>
-        <template v-slot:onLine>
-          <span>{{onLine?onLine:"yyyy-mm-dd"}}</span>
-        </template>
-        <template v-slot:explain>
-          <span>{{explain?explain:"yyyy-mm-dd"}}</span>
-        </template>
-      </das-board>
+      <div class="contain-block" style="width:calc(40% - 20px);margin-right:20px;">
+        <span class="contain-title-leftblock">系统集成统计</span>
+        <div class="contain-data" ><integrateStatistics ref="chart"></integrateStatistics></div>
+      </div>
+      <div class="contain-block">
+        <span class="contain-title-leftblock">表号功能号总览</span>
+        <div class="contain-data"><tabFunNumOverview ref="table"></tabFunNumOverview></div>
+      </div>
     </div>
 </template>
 
 <script>
-import dasBoard from "@/views/dasboard/index";
+
+import integrateStatistics from '@/components/point/report/integrateStatistics'
+import tabFunNumOverview from '@/components/point/report/tabFunNumOverview'
+
 export default {
     components: {
-      dasBoard
+      integrateStatistics,
+      tabFunNumOverview
     },
     data() {
         return {
-          plan: "2019-8-5",
-          finish: "2019-9-24",
-          onLine: "2019-10-31",
-          explain: "表号功能号检索查看,点位信息维护"
+
         }
     },
-    mounted() {}
+    methods:{
+
+    },
+    mounted() {
+
+    }
 }
-</script>
+</script>
+
+<style lang="less" scoped>
+  .contain-block{
+    float:left;
+    height:100%;
+    background:white;
+    width:60%;
+  }
+  .contain-title-leftblock{
+    height:30px;
+    line-height:30px;
+    border-left:8px solid black;
+    display:inline-block;
+    margin:8px 8px;
+    font-weight:600;
+    padding-left:8px;
+    cursor: default;
+  }
+  .contain-data{
+    overflow:auto;
+    height:calc(100% - 50px);
+  }
+</style>