vue 中 引用 js 文件中的数据

隐身守侯 提交于 2019-12-05 02:33:11

vue 

<script>
  import samplingData from './data';
  export default {
    components: { samplingData },
    data() {
      return {
        listData: samplingData, // 请求本地数据
      };
    },
  }
</script>

data.js

const samplingData = [
  // 窗口人员工作台
  {
    type: 'typeTable',
    tableTitle: '我的流程',
    columnType: ['index'],
    routerPath: '/mine-flow',
    columns: [
      { label: '流程标题', prop: 'lcbt' },
      { label: '发起人', prop: 'fqr' },
      { label: '流程节点', prop: 'lcjd' },
      { label: '发起时间', prop: 'fqsj' }
    ],
    rows: [
      {
        lcbt: '仪器检定(噪声仪)',
        fqr: '张三',
        lcjd: '待确认',
        fqsj: '2018-10-15  10:10:10'
      },
      {
        lcbt: '仪器检定/校准(颗粒物采样器)',
        fqr: '张三',
        lcjd: '待确认',
        fqsj: '2018-10-15  10:10:10'
      },
      {
        lcbt: '仪器检定/校准(pH计)',
        fqr: '张三',
        lcjd: '待分析',
        fqsj: '2018-10-15  10:10:10'
      },
      {
        lcbt: '仪器检定/校准(INOX采样器)',
        fqr: '李四',
        lcjd: '待确认',
        fqsj: '2018-10-15  10:10:10'
      },
      {
        lcbt: '仪器申购(中流量采样器)',
        fqr: '李四',
        lcjd: '待验收',
        fqsj: '2018-10-15  10:10:10'
      }
    ]
  },
  {
    type: 'typeChart', // 图表
    chartType: 'ring', // 环形
    tableTitle: '图表1',
    chartData: {
      columns: ['类型', '占比率'],
      rows: [
        { 类型: '地表水', 占比率: 40 },
        { 类型: '废水', 占比率: 25 },
        { 类型: '环境空气', 占比率: 18 },
        { 类型: '废弃', 占比率: 12 },
        { 类型: '固废气体', 占比率: 5 }
      ]
    },
    colors: ['#32B8F0', '#F1D308', '#2CDA59', '#EF2C2B', '#999999'],
    layou: { x: 1, y: 20, w: 1, h: 20, i: '2', component: 'button-counter-0' },
    // x x轴位置 整数,y y轴位置 整数,w 宽度,h 高度,i 唯一标识符,
    chartSettings: {
      radius: [60, 100],
      legendLimit: false,
      offsetY: 140
    }
  },
  {
    type: 'typeTable', // 表格
    tableTitle: '表格2',
    tableColumnsTask: [
      { label: '采样批编号', prop: 'cypbh' },
      { label: '采样任务名称', prop: 'cyrwmc' },
      { label: '计划采样时间', prop: 'jhcysj' },
      { label: '实际采样时间', prop: 'sjcysj' },
      { label: '计划样品数量', prop: 'jhypsl' },
      { label: '实际样品数量', prop: 'sjypsl' },
      { label: '状态', prop: 'zt' },
      { label: '任务优先级', prop: 'rwyxj' }
    ],
    httpDataOptions: [
      {
        cypbh: '2019-0101',
        cyrwmc: '垃圾处理厂采样(宝安、龙岗)',
        jhcysj: '2019-01-01',
        sjcysj: '-----',
        jhypsl: '30',
        sjypsl: '20',
        zt: '待采样',
        rwyxj: 1
      },
      {
        cypbh: '2019-0102',
        cyrwmc: '垃圾处理厂采样(龙岗)',
        jhcysj: '2019-01-01',
        sjcysj: '-----',
        jhypsl: '10',
        sjypsl: '10',
        zt: '待采样',
        rwyxj: 2
      },
      {
        cypbh: '2019-0102',
        cyrwmc: '宝安人民医院废水采样',
        jhcysj: '2019-01-02',
        sjcysj: '2019-01-02',
        jhypsl: '12',
        sjypsl: '12',
        zt: '待复核',
        rwyxj: 3
      },
      {
        cypbh: '002337',
        cyrwmc: '河流水质采样(龙岗河、坪山河)',
        jhcysj: '2019-01-03',
        sjcysj: '2019-01-03',
        jhypsl: '12',
        sjypsl: '14',
        zt: '待复核',
        rwyxj: 3
      },
      {
        cypbh: '002338',
        cyrwmc: '水库水质采样',
        jhcysj: '2019-01-03',
        sjcysj: '2019-01-03',
        jhypsl: '6',
        sjypsl: '6',
        zt: '待复核',
        rwyxj: 3
      }
    ]
  },
  {
    type: 'typeChart', // 图表
    chartType: 'histogram', // 柱状图
    tableTitle: '待分析项目数',
    chartData: {
      columns: ['时限/小时', '数量/个'],
      rows: [
        { '时限/小时': '4', '数量/个': 70 },
        { '时限/小时': '8', '数量/个': 58 },
        { '时限/小时': '16', '数量/个': 38 },
        { '时限/小时': '32', '数量/个': 15 },
        { '时限/小时': '其他', '数量/个': 15 }
      ]
    },
    colors: ['#FF6F6F'],
    extend: {
      series: {
        label: { show: true, position: 'top' }
      },
      xAxis: {
        name: '时限/小时',
        nameLocation: 'end'
      },
      yAxis: {
        name: '数量/个',
        position: 'left'
      },
      grid: {
        left: '3%',
        right: '14%'
      }
    }
  }
];
export default samplingData;

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!