sl-sfy-safety/src/views/cameras/overview/overviewColumns.ts

import { h } from 'vue';
import { ElSwitch } from 'element-plus';
import type { BasicColumn } from '@/components/Table';
import connectedIcon from '@/assets/images/table/camera-netConnect.png';
import unConnectedIcon from '@/assets/images/table/camera-netUnconnect.png';
import { protocalTypeSelect } from './constant';
import useCameraOverview from './stores/useCameraOverview';
import { startCameraStream, stopCameraStream } from '@/api/camera/camera-overview';

const cameraOverview = useCameraOverview();
const { getState, getCameraItems } = cameraOverview;

export const columns: BasicColumn[] = [
  {
    label: '序号',
    minWidth: 60,
    type: 'index',
    fixed: 'left',
  },
  {
    label: '公司名称',
    prop: 'companyName',
    minWidth: 100,
  },
  {
    label: '名称',
    prop: 'name',
    minWidth: 100,
  },
  {
    label: 'IP地址',
    prop: 'cameraIp',
    minWidth: 140,
  },
  {
    label: '协议类型',
    prop: 'cameraType',
    minWidth: 120,
    render(record) {
      return h(
        'span',
        {},
        {
          default: () =>
            protocalTypeSelect.find((item) => item.value === record.row.cameraType)?.label,
        },
      );
    },
  },
  {
    label: '端口地址',
    prop: 'cameraPort',
    minWidth: 120,
  },
  {
    label: 'MAC地址',
    prop: 'cameraMac',
    minWidth: 140,
  },
  {
    label: '设备ID',
    prop: 'code',
    minWidth: 150,
  },
  {
    label: '车间场景',
    prop: 'workshopName',
    minWidth: 140,
  },
  {
    label: '工位场景',
    prop: 'workspaceName',
    minWidth: 140,
  },
  {
    label: '联网状态',
    prop: 'networkingState',
    render(record) {
      return h(
        'img',
        {
          src: record.row.networkingState === 0 ? connectedIcon : unConnectedIcon,
          style:
            'width: 20px; height: 20px; object-fit: fill; display: inline-block; line-height: 20px; vertical-align: middle;',
        },
        {},
      );
    },
    minWidth: 120,
    align: 'center',
    sortable: 'custom',
  },
  {
    label: '是否进入平台',
    prop: 'integrationState',
    render(record) {
      return h(
        ElSwitch,
        {
          modelValue: record.row.integrationState,
          onChange: (val) => {
            record.row.status = val;
            if (val === 0) {
              startCameraStream(record.row.id).then(() => {
                getState();
                getCameraItems();
              });
            } else {
              stopCameraStream(record.row.id).then(() => {
                getState();
                getCameraItems();
              });
            }
          },
          activeValue: 0,
          inactiveValue: 1,
        },
        {},
      );
    },
    minWidth: 140,
    align: 'center',
    sortable: 'custom',
  },
  {
    label: '备注',
    prop: 'remark',
    minWidth: 60,
  },
];