Figma：https://www.figma.com/proto/IchMiI47DiG11MM4O8Pp1M/%E5%95%86%E6%83%85%E5%B9%B3%E5%8F%B0-2023?page-id=0%3A1&type=design&node-id=445-4725&viewport=-252%2C-4423%2C0.28&scaling=scale-down&starting-point-node-id=445%3A4725&show-proto-sidebar=1

- **url**: `'/tipc/storage-ctrl/'`

- **obs01,04,06 API**: `'obs01','obs04','obs06'`
- request Payload

{  
    // obs01 沒有此參數
    // obs04 因為會選個別港口，前端預計會提供(01-response.values.code)
    // obs06 港口代號，櫃場代號(04-response.values.code)
    portCode: String // obs06 專屬欄位
    code: string
    
    
}

- responese

{ 
    currentPage: number
    list: [{
     time: string // 最新時間   
     chemicalUnitType: string // 行政院列管化學品 container / partialLiquid ( 貨櫃 / 液散貨 )
      values: [{
         value: number[] // 依照順序: '鋰', '氫氣', '異丙醇', '甲苯', '丙酮', '乙炔', '過氧化氫', '氯化鈉', '矽甲烷', '過氧化丁酮', '環氧乙烷', '環氧丙烷', '丙烯腈', '硝酸銨'
        overdue: number[] // 超過7天 順序同上
        name: string // 港口名
        code: string // 代號
      }]
    }]
    totalItem: number
    totalPage: number
}

const apiData =
{
    currentPage: 0
    totalItem: 0
    totalPage: 0
    list: [
             {
            values: [
              {
                value: [0, 0, 20, 5, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0],
                overdue: [0, 0, 20, 5, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0],
                name: '基隆港',
                code: 'KEL'
              },
              {
                value: [0, 0, 80, 50, 2, 2, 3, 0, 0, 0, 0, 0, 0, 0],
                overdue: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                name: '台北港',
                code: 'TPE'
              },
              {
                value: [0, 0, 18, 1, 1, 1, 5, 0, 0, 0, 0, 0, 0, 0],
                overdue: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                name: '台中港',
                code: 'TXG'
              },
              {
                value: [0, 0, 10, 3, 3, 2, 80, 0, 0, 0, 0, 0, 0, 0],
                overdue: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                name: '高雄港',
                code: 'KEL'
              }],
            chemicalUnitType: 'container', //貨櫃
            time: '2023-08-08 17:50:00'
          },
          {
            values: [
              {
                value: [0, 0, 22, 5, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0],
                overdue: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                name: '基隆港',
                code: 'KEL'
              },
              {
                value: [0, 0, 70, 60, 2, 2, 3, 0, 0, 0, 0, 0, 0, 0],
                overdue: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                name: '台北港',
                code: 'TPE'
              },
              {
                value: [0, 0, 15, 50, 1, 1, 5, 0, 0, 0, 0, 0, 0, 0],
                overdue: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                name: '台中港',
                code: 'TXG'
              },
              {
                value: [0, 0, 10, 3, 3, 2, 80, 0, 0, 0, 0, 0, 0, 0],
                overdue: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                name: '高雄港',
                code: 'KEL'
              }],
            chemicalUnitType: 'partialLiquid', // 液散櫃
            time:'2023-08-08 17:50:00'
          }
        ]
    }

- **location API**: `'location'`
- request Payload

{  

}

[
    {
    "name": "高雄港"
    "lat": 22.56489171599783,
    "lon": 120.3119614091226    
    }, 
    {
    "name": "基隆港",
    "lat": 25.1391787,
    "lon": 121.7507752     
    }, 
    {
    "name": "臺中港",
    "lat": 24.25050745560674,
    "lon": 120.500899326875
    },
    {
    "name": "聯興",
    "lat": 121.758415,
    "lon": 25.142875
    }, 
    {
    "name": "自營北櫃場",
    "lat": 121.750304,
    "lon": 25.150864
    }
]