ngc项目需要注意的点

1、else做好处理，         

  this.$message.error((res.extras === null ? '' : res.extras) + (res.errors === null ? '' : res.errors))不适用于每一个函数中的else做处理

2、列表无数据必须做暂无数据处理

3、动态获取列表表头和信息在一个接口里面写

1）在el-table-clumn中做v-for循环数组，数组和tableData的数组在一个接口里面获取

4、做列表查询的时候，有select框的时候，例如：

注意！！！searchForm.deviceName是赋为获取列值表的第一个数据

 //=============templete
      <el-select
        v-model="searchForm.deviceName"
        placeholder="选择设备名称"
        clearable
      >
        <el-option
          v-for="item in deviceNameList"
          :key="item.deviceName"
          :label="item.deviceName"
          :value="item.deviceName"
        />
      </el-select>


    //==============js
     searchForm: {
        deviceName: ''
      },
     deviceNameList: [],

    getSelectData() {
      this.$api.ngcConfiguration.queryDeviceList()
        .then(res => {
          if (res.statusCode === 200) {
            if (res.data && res.data.length > 0) {
              this.deviceNameList = res.data
              this.searchForm.deviceName = res.data[0].deviceName // 返回的第一个值附上给deviceName
              this.getRealTimeAlarmList()
            } else {
              this.deviceNameList = [] // 如果没有值，列表就为空
            }
          } else {
            this.$message.error((res.extras === null ? '' : res.extras) + (res.errors === null ? '' : res.errors))
          }
        })
    },

5、<el-table v-if="titleData.length>0"  如果加上这个if判断有数据就会显示没有数据页面就空了，去掉if判断之后没有数据，页面会显示暂无数据

6、align-content: center 起到的作用：

        align-content: center; 是一个 CSS 属性，用于控制 flex 容器中的多行内容在交叉轴方向上的对齐方式。

具体作用如下：
-- 当 flex 容器中的多行内容的高度小于容器的高度时，align-content: center; 会使多行内容在交叉轴方向上居中对齐。
-- 当 flex 容器中的多行内容的高度大于容器的高度时，align-content: center; 会使整个多行内容在容器内居中对齐，会在多行内容上下分别留有相同的空白区域。

需要注意的是，align-content 属性仅在 flex 容器具有多行内容时才生效，而在单行内容时是无效的。另外，align-content 还有其他取值，如 flex-start、flex-end、space-between、space-around 等，可以根据需要选择不同的取值来调整多行内容的对齐方式。

7、在写布局的时候有页面存在echarts的时候，要做好布局echarts设置100%，不能写固定值，不然echarts会跳出框框。

8、写表格的时候，时间应该写个固定的宽度，超过宽度隐藏

遗留的问题：

1、svg图：绑点画图，以及怎么在页面上挂载上。

2、菜单权限

3、Signalr通讯需要注意的事项：

1）安装

npm install @microsoft/signalr

2）在页面中引用

const signalR = require('@microsoft/signalr')

3）在页面中使用

<script>
const signalR = require('@microsoft/signalr')
export default {
  name: 'ScreenDisplay',
  data() {
    return {
      isConnect: false, // 是否连接
      serverData: [],  
      longLinkApi: 'http://xxxxxxxx:xxxx/xxxxxxxx',// 长链接实时接收数据
      longLinkReceiveMsg: 'LargeScreenReceiveMessage',
      longLinkSendingMsg: 'LargeScreenSendMessage',
      connectionId: '', // 长链接id
    }
  },

  beforeDestroy() {
    this.isConnect = false // 页面销毁前断开连接
  },
  destroyed() {
    this.connection.stop() //页面销毁让连接彻底断开
  },
  created() {
    this.init(this.connection, this.longLinkApi, this.longLinkReceiveMsg, this.longLinkSendingMsg)
  },

  methods：{
     this.init(this.connection, this.longLinkApi, this.longLinkReceiveMsg, this.longLinkSendingMsg)


  }


// 方法
</script>