5 |
26 | 🔧【系統維修中！】
6 |
7 | mdi-alert
8 |
9 |
20 |
25 | 感謝您新增資訊！
4 |感謝您補充資訊！
4 |
3 |
4 |
13 |
14 |
15 |
16 |
38 |
39 |
58 |
--------------------------------------------------------------------------------
/src/lib/useAlert.ts:
--------------------------------------------------------------------------------
1 | import { reactive } from 'vue'
2 |
3 | enum AlertLevel {
4 | info = 'info',
5 | warn = 'warn',
6 | error = 'error'
7 | }
8 |
9 | type Alert = {
10 | level: AlertLevel,
11 | title: string,
12 | dismissText: string
13 | }
14 |
15 | type AlertState = {
16 | alert: Alert | null,
17 | timeout?: number
18 | }
19 |
20 | // Global alert state - simple reactive object without provide/inject
21 | const alertState = reactive({
22 | alert: null as Alert | null,
23 | timeout: undefined as number | undefined
24 | })
25 |
26 | export const useAlertState = () => {
27 | const alertActions = {
28 | showAlert (title: string, timeouts = 3000, level: AlertLevel = AlertLevel.warn, dismissText = '此錯誤訊息將在3秒後消失。') {
29 | alertState.alert = {
30 | title,
31 | level,
32 | dismissText
33 | }
34 |
35 | if (alertState.timeout) {
36 | window.clearTimeout(alertState.timeout)
37 | }
38 |
39 | alertState.timeout = window.setTimeout(() => {
40 | alertState.alert = null
41 | alertState.timeout = undefined
42 | }, timeouts)
43 | },
44 |
45 | dismissAlert () {
46 | alertState.alert = null
47 |
48 | if (alertState.timeout) {
49 | window.clearTimeout(alertState.timeout)
50 | alertState.timeout = undefined
51 | }
52 | }
53 | }
54 |
55 | return [alertState, alertActions] as const
56 | }
57 |
--------------------------------------------------------------------------------
/public/images/marker-EXISTING_INCOMPLETE.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/components/ContactModal.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 | 知道了
11 |
12 | ⚠️你的手機無法新增可疑工廠
6 |
7 | 很抱歉，你的 iPhone iOS 操作系統無法成功在本網站上傳照片。
8 | 請改用電腦新增可疑工廠照片或是至「系統設定」升級 iOS操作系統版本到至少 13.4 以上。瀏覽地圖功能則不受影響。
9 |
3 |
4 |
19 |
20 |
21 |
22 |
42 |
43 |
63 |
--------------------------------------------------------------------------------
/src/components/AppAlert.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 | 
6 |
7 |
8 | 有任何回報相關問題
11 |
12 |
18 |
6 |
7 |
8 | 有任何回報相關問題
9 | 歡迎聯絡
10 |
11 |
12 |
13 | 地球公民基金會
14 | TEL: 02-23920371
15 | Email: cet@cet-taiwan.org
16 |
3 |
4 | 
5 |
10 |
11 |
12 |
27 |
28 |
72 |
--------------------------------------------------------------------------------
/src/styles/openlayer.scss:
--------------------------------------------------------------------------------
1 | // Openlayer style overwrites
2 | @import './variables';
3 |
4 |
5 | .ol-control {
6 | background: white;
7 | cursor: pointer;
8 |
9 | &:hover {
10 | background: none;
11 | }
12 |
13 | button,
14 | button:hover,
15 | button:focus {
16 | cursor: pointer;
17 | background: none;
18 | }
19 |
20 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
21 | }
22 |
23 | .ol-zoom, .ol-fit-location, .ol-map-search {
24 | color: $primary-color;
25 |
26 | border-radius: 9px;
27 | left: 21px;
28 |
29 | &:hover {
30 | background-color: #f5f5f5;
31 | }
32 | }
33 |
34 | .ol-zoom {
35 | top: auto;
36 | bottom: 100px;
37 |
38 | .ol-zoom-in,
39 | .ol-zoom-out {
40 | border-radius: 0;
41 | background: none;
42 |
43 | &:hover, &:active, &:visited {
44 | background: none;
45 | }
46 | }
47 |
48 | .ol-zoom-in {
49 | border-bottom: solid 1px white;
50 | padding-bottom: 11px;
51 | }
52 | }
53 |
54 | .ol-fit-location {
55 | bottom: 185px;
56 |
57 | &.ol-control button {
58 | padding: 2px;
59 | }
60 | }
61 |
62 | .ol-map-search {
63 | top: 26px;
64 | }
65 |
66 | .ol-control button {
67 | display: flex;
68 | align-items: center;
69 | justify-content: center;
70 |
71 | width: 2rem;
72 | height: 2rem;
73 |
74 | padding: 8px;
75 |
76 | img {
77 | width: 100%;
78 | }
79 | }
80 |
81 | .ol-rotate{
82 | left: 21px;
83 | right: auto;
84 | bottom: 235px;
85 | top: auto;
86 |
87 | &:hover {
88 | background-color: #f5f5f5;
89 | }
90 |
91 | .ol-compass {
92 | color: $primary-color;
93 | margin-top: -5px;
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/src/components/ImgurFallbackImage.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
9 | {{ alert.title }}
7 | {{ alert.dismissText }}
8 |
3 |
4 |
31 |
32 |
33 |
34 |
54 |
55 |
69 |
--------------------------------------------------------------------------------
/src/components/AppModal.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
30 | 關於回報系統
6 |7 | 農地違章工廠舉報系統為協助民眾回報揭露農地違章工廠資訊，並非實際完成舉報。 8 |
9 | 10 |11 | 地球公民基金會將整理資料進行部分案件追蹤，完成舉報者可於「已舉報」案件查見。 12 |
13 | 14 |15 | 105.05.20 前的違章工廠我們將持續收集資訊，但本系統優先針對新增建與中高污染違章工廠進行舉報。 16 |
17 | 18 |19 | 本系統感謝 g0v.tw 社群朋友共同開發。 20 |
21 | 22 |23 | 既有疑似違章工廠資料來源為 2019 年 7 月 30 日取自內政部國土測繪圖資雲網站。 24 |
25 | 26 |27 | 全站使用者貢獻資料以 CC BY 姓名標示 3.0 釋出，標註「© 農地違章工廠舉報小幫手貢獻者」，原始碼以 MIT 開放授權公開在 GitHub 上 28 |
29 |
6 |
7 |
12 |
13 |
14 |
34 |
35 |
92 |
--------------------------------------------------------------------------------
/src/components/AppSelect.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
11 |
3 |
15 |
16 |
17 |
18 |
46 |
47 |
90 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | node: true
5 | },
6 | plugins: ['testing-library', 'jest-dom'],
7 | 'extends': [
8 | 'plugin:vue/essential',
9 | '@vue/standard',
10 | '@vue/typescript/recommended',
11 | 'plugin:@typescript-eslint/recommended-requiring-type-checking',
12 | 'plugin:testing-library/vue',
13 | 'plugin:jest-dom/recommended'
14 | ],
15 | rules: {
16 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
17 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
18 | quotes: 'off',
19 | '@typescript-eslint/quotes': ['error', 'single'],
20 | '@typescript-eslint/explicit-function-return-type': 'off',
21 | 'semi': 'off',
22 | '@typescript-eslint/semi': ['error', 'never'],
23 | 'no-unused-expressions': 'off',
24 | 'no-use-before-define': 'warn',
25 | '@typescript-eslint/no-unused-expressions': 'error',
26 | '@typescript-eslint/member-delimiter-style': ['error', { multiline: { delimiter: 'comma', requireLast: false }, singleline: { delimiter: 'comma', requireLast: false }, overrides: { interface: { multiline: { delimiter: 'none' } } } }],
27 | '@typescript-eslint/no-explicit-any': 'warn',
28 | '@typescript-eslint/no-unsafe-argument': 'warn',
29 | '@typescript-eslint/no-unsafe-assignment': 'warn',
30 | '@typescript-eslint/no-unsafe-call': 'warn',
31 | '@typescript-eslint/no-unsafe-member-access': 'warn',
32 | '@typescript-eslint/no-unsafe-return': 'warn',
33 | '@typescript-eslint/no-unused-vars': 'warn',
34 | '@typescript-eslint/require-await': 'off', // TODO: can remove on 11/25
35 | '@typescript-eslint/ban-types': 'warn',
36 | '@typescript-eslint/no-floating-promises': 'warn',
37 | 'vue/return-in-computed-property': 'warn',
38 | '@typescript-eslint/no-misused-promises': 'warn',
39 | '@typescript-eslint/no-non-null-asserted-optional-chain': 'warn',
40 | },
41 | parser: 'vue-eslint-parser',
42 | parserOptions: {
43 | parser: '@typescript-eslint/parser',
44 | project: 'tsconfig.json',
45 | tsconfigRootDir: __dirname,
46 | sourceType: 'module',
47 | extraFileExtensions: ['.vue']
48 | },
49 | overrides: [
50 | {
51 | files: [
52 | '**/__tests__/*.{j,t}s?(x)'
53 | ],
54 | env: {
55 | jest: true
56 | }
57 | }
58 | ]
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/SwitchMapModeButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
27 |
28 |
29 |
30 |
51 |
52 |
101 |
--------------------------------------------------------------------------------
/src/components/SafetyModal.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
12 |
13 | 
14 |
21 |
22 | 
23 |
28 |
29 | 
30 |
33 |
34 | 
35 |
38 |
39 | 
40 |
43 |
44 |
45 |
46 | 安全須知
8 |9 | 請參考以下建議，前往違章工廠拍照蒐證 10 |
11 |
14 | 15 | 場勘 16 |
17 |18 | 假裝路過，檢查有無監視器；尋找適合拍照的隱蔽處 19 |
20 |
23 | 藏身
24 |25 | 盡量避開監視器、他人視線；盡量在隱蔽處拍照（例如：車上、民宅內、樹叢間、遠方） 26 |
27 |
30 | 避嫌
31 |假如地點不夠隱密，請用手機拍照，降低他人戒心
32 |
35 | 速離
36 |拍到1張清晰照片即可離去
37 |
40 | 應變
41 |假如有人上前問話，請表現得「充滿好奇心」，試著跟對方聊天（例如：好奇水電師傅的施工技術），再伺機離開。
42 |
3 |
4 |
29 |
30 |
31 |
32 |
64 |
65 |
103 |
--------------------------------------------------------------------------------
/public/img/icons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
53 |
--------------------------------------------------------------------------------
/src/components/AppButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
54 |
55 |
172 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | import type { Feature } from 'ol'
2 | import type { Geometry } from 'ol/geom'
3 |
4 | /* eslint-disable quote-props */
5 | export const FACTORY_TYPE = [
6 | { value: '2-1', text: '金屬: 沖床、銑床、車床、鏜孔' },
7 | { value: '2-2', text: '金屬: 焊接、鑄造、熱處理' },
8 | { value: '2-3', text: '金屬: 金屬表面處理、噴漆' },
9 | { value: '3', text: '塑膠加工、射出' },
10 | { value: '4', text: '橡膠加工' },
11 | { value: '5', text: '非金屬礦物（石材）' },
12 | { value: '6', text: '食品' },
13 | { value: '7', text: '皮革' },
14 | { value: '8', text: '紡織' },
15 | { value: '9', text: '其他' }
16 | ] as const
17 | export type FactoryType = (typeof FACTORY_TYPE)[number]['value']
18 |
19 | export type FactoryDisplayStatusType = 'default' | 0 | 1 | 2 | 3
20 |
21 | export const defaultFactoryDisplayStatuses = [
22 | 'default', 0, 1, 2, 3
23 | ] as FactoryDisplayStatusType[]
24 |
25 | type DocumentDisplayStatus = '已檢舉' | '已排程稽查' | '陳述意見期' | '已勒令停工' | '已發函斷電' | '已排程拆除' | '已拆除' | '等待新事證'
26 |
27 | type FactoryDisplayStatus = {
28 | type: FactoryDisplayStatusType,
29 | name: string,
30 | documentDisplayStatuses: ('疑似工廠' | DocumentDisplayStatus)[],
31 | color: string
32 | }
33 | export const FactoryDisplayStatuses: FactoryDisplayStatus[] = [
34 | {
35 | type: 'default',
36 | name: '未處理',
37 | documentDisplayStatuses: ['疑似工廠'],
38 | color: '#A22A29'
39 | },
40 | {
41 | type: 0,
42 | name: '處理中',
43 | documentDisplayStatuses: ['已檢舉', '已排程稽查', '陳述意見期', '已勒令停工'],
44 | color: '#457287'
45 | },
46 | {
47 | type: 1,
48 | name: '已斷電',
49 | documentDisplayStatuses: ['已發函斷電', '已排程拆除'],
50 | color: '#364516'
51 | },
52 | {
53 | type: 2,
54 | name: '已拆除',
55 | documentDisplayStatuses: ['已拆除'],
56 | color: '#A1A1A1'
57 | },
58 | {
59 | type: 3,
60 | name: '無法處理',
61 | documentDisplayStatuses: ['等待新事證'],
62 | color: '#E0E0E0'
63 | }
64 | ]
65 |
66 | const FactoryDisplayStatusMap = FactoryDisplayStatuses.reduce((acc, c) => {
67 | return {
68 | ...acc,
69 | [c.type]: c
70 | }
71 | }, {}) as {
72 | [key in FactoryDisplayStatusType]: FactoryDisplayStatus
73 | }
74 |
75 | export const getDisplayStatusText = (status: FactoryDisplayStatusType) => {
76 | return FactoryDisplayStatusMap[status].name
77 | }
78 |
79 | export const getDisplayStatusColor = (status: FactoryDisplayStatusType) => {
80 | return FactoryDisplayStatusMap[status].color
81 | }
82 |
83 | export type FactoryImage = {
84 | id: string,
85 | image_path: string,
86 | url: string
87 | }
88 |
89 | export type FactoryData = {
90 | id: string,
91 | display_number: string,
92 | lat: number,
93 | lng: number,
94 | name: string,
95 | landcode: string,
96 | townname: string,
97 | sectname: string,
98 | sectcode: string,
99 | source: string,
100 | type: FactoryType,
101 | images: FactoryImage[],
102 | // TODO: can be one of https://docs.djangoproject.com/en/2.2/ref/settings/#datetime-input-formats
103 | // eslint-disable-next-line
104 | reported_at: null | string,
105 | data_complete: boolean,
106 | before_release: boolean,
107 | document_display_status: DocumentDisplayStatus | null,
108 | feature?: any,
109 | follow_ups_for_user: {
110 | note: string,
111 | created_at: string
112 | }[],
113 | wont_fix: boolean
114 | }
115 |
116 | export type FactoriesResponse = Array
5 |
7 |我同意加入回報
23 |
24 |
25 | 我不同意，請帶我離開這個頁面
26 |
27 |
28 | 歡迎來到農地違章工廠回報系統！
6 |7 |
需要大家回報以下工廠之照片及資訊：
8 | 9 |10 |
-
11 |
- 2016.05.20後新增的農地違章工廠 12 |
- 中高污染工廠 13 |
以上資訊將由地球公民基金會彙整後，向政府舉報並追蹤拆除進度。
17 | 18 | 19 | 行動前請同意資料貢獻授權條款與隱私條款。本網站由地球公民基金會與 g0v.tw 社群共同開發。 20 | 21 | 22 |
3 |
13 |
14 |
15 |
16 |
64 |
65 |
152 |
--------------------------------------------------------------------------------
/src/components/__tests__/TutorialModal.spec.ts:
--------------------------------------------------------------------------------
1 | import { render, screen, fireEvent } from '@testing-library/vue'
2 | import TutorialModal from '../TutorialModal.vue'
3 |
4 | // Mock vue-carousel since it might cause issues in testing
5 | jest.mock('vue-carousel', () => ({
6 | Carousel: {
7 | name: 'Carousel',
8 | render (h: any) {
9 | return h('div', { ref: 'carousel' }, (this as any).$slots.default)
10 | },
11 | props: ['per-page', 'paginationActiveColor', 'paginationColor', 'paginationPadding'],
12 | methods: {
13 | goToPage: jest.fn()
14 | }
15 | },
16 | Slide: {
17 | name: 'Slide',
18 | render (h: any) {
19 | return h('div', (this as any).$slots.default)
20 | }
21 | }
22 | }))
23 |
24 | const renderTutorialModal = (props = {}) => {
25 | return render(TutorialModal as any, {
26 | propsData: {
27 | open: true,
28 | ...props
29 | }
30 | })
31 | }
32 |
33 | describe('TutorialModal', () => {
34 | beforeEach(() => {
35 | // Reset any mocks before each test
36 | jest.clearAllMocks()
37 | })
38 |
39 | test('show the corresponding page', async () => {
40 | expect.assertions(6)
41 |
42 | renderTutorialModal()
43 |
44 | // Show the 使用說明 page by default
45 | expect(screen.getByRole('heading', { name: '使用說明' })).toBeInTheDocument()
46 | expect(screen.queryByTestId('back-button')).not.toBeInTheDocument()
47 |
48 | // Show the 新增違章工廠 page when users click the "add" button
49 | await fireEvent.click(screen.getByText(/如何新增一筆.*違章工廠的資料？/))
50 | expect(screen.getAllByRole('heading', { name: /^新增違章工廠/i })).toHaveLength(7)
51 |
52 | // Show the 使用說明 page when users click the "back" button in the 新增違章工廠 page
53 | await fireEvent.click(screen.getByTestId('back-button'))
54 | expect(screen.getByRole('heading', { name: '使用說明' })).toBeInTheDocument()
55 |
56 | // Show the 補充工廠資訊 page when users click the "update" button
57 | await fireEvent.click(screen.getByText(/如何在一筆資料裡.*補充更多資訊？/))
58 | expect(screen.getAllByRole('heading', { name: /^補充工廠資訊/i })).toHaveLength(4)
59 |
60 | // Show the 使用說明 page when users click the "back" button in the 補充工廠資訊 page
61 | await fireEvent.click(screen.getByTestId('back-button'))
62 | expect(screen.getByRole('heading', { name: '使用說明' })).toBeInTheDocument()
63 | })
64 |
65 | test('close the modal and reset the page to 使用說明 when users click the close icon', async () => {
66 | expect.assertions(2)
67 |
68 | // Arrange
69 | const dismissMock = jest.fn()
70 |
71 | renderTutorialModal({
72 | dismiss: dismissMock
73 | })
74 |
75 | // Act
76 | await fireEvent.click(screen.getByText(/如何新增一筆.*違章工廠的資料？/))
77 | await fireEvent.click(screen.getByTestId('modal-close'))
78 |
79 | // Assert
80 | expect(screen.getByRole('heading', { name: '使用說明' })).toBeInTheDocument()
81 | expect(dismissMock).toHaveBeenCalled()
82 | })
83 |
84 | test('modal is not visible when open prop is false', () => {
85 | renderTutorialModal({ open: false })
86 |
87 | // Modal should not be visible when open is false
88 | const modalContainer = screen.getByTestId('modal-container')
89 | expect(modalContainer).not.toHaveClass('open')
90 | })
91 |
92 | test('modal is visible when open prop is true', () => {
93 | renderTutorialModal({ open: true })
94 |
95 | // Modal should be visible when open is true
96 | const modalContainer = screen.getByTestId('modal-container')
97 | expect(modalContainer).toHaveClass('open')
98 | })
99 |
100 | test('back button is only visible on add and update pages', async () => {
101 | renderTutorialModal()
102 |
103 | // Back button should not be visible on home page
104 | expect(screen.queryByTestId('back-button')).not.toBeInTheDocument()
105 |
106 | // Navigate to add page
107 | await fireEvent.click(screen.getByText(/如何新增一筆.*違章工廠的資料？/))
108 | expect(screen.getByTestId('back-button')).toBeInTheDocument()
109 |
110 | // Go back to home
111 | await fireEvent.click(screen.getByTestId('back-button'))
112 | expect(screen.queryByTestId('back-button')).not.toBeInTheDocument()
113 |
114 | // Navigate to update page
115 | await fireEvent.click(screen.getByText(/如何在一筆資料裡.*補充更多資訊？/))
116 | expect(screen.getByTestId('back-button')).toBeInTheDocument()
117 | })
118 | })
119 |
--------------------------------------------------------------------------------
/src/lib/hooks.ts:
--------------------------------------------------------------------------------
1 | import { ref, Ref, reactive } from 'vue'
2 | import { useGA } from './useGA'
3 | import { isNotSupportedIOS } from './browserCheck'
4 |
5 | export const useModal = (defaultOpen = false): [Ref農地範圍 •
25 |農地範圍 •
69 |
3 |
4 |
41 |
42 |
43 |
44 |
108 |
109 |
186 |
--------------------------------------------------------------------------------
/src/components/ImageUploadForm.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
40 | API 設定
6 | 7 |
8 |
9 |
17 |
18 | 留空將使用預設值：{{ defaultUrl }}
19 |
20 |
21 |
22 |
34 |
35 |
36 | 目前使用的 API 網址：
37 | {{ currentUrl }}
38 |
39 |
3 |
4 |
34 | 35 |
67 |
68 |
69 |
70 |
126 |
127 |
160 |
--------------------------------------------------------------------------------
/src/components/ImageUploadModal.vue:
--------------------------------------------------------------------------------
1 |
2 | 上傳工廠照片
5 | 6 |請至少上傳一張工廠照片。
7 | 8 |工廠照片
9 | 10 |
11 |
12 |
16 |
17 |
18 | 上傳中...
19 |
20 | 上傳成功
21 | mdi-checkbox-marked-circle
22 |
23 | 上傳錯誤
24 |
25 |
26 |
27 |
32 |
33 |
28 | ![]()
29 |
30 |
31 | 34 | 35 |
聯絡資訊（非必填）
36 | 37 |
38 | 如果對於照片有疑問，
39 | 我們會透過以下提供的資訊聯絡你。
40 | 如不願揭露自己身份，可跳過不填。
41 |
聯絡人暱稱
44 | 45 |聯絡方式 (email或電話)
53 | 54 |工廠照片
4 | 5 |
6 |
10 |
11 |
7 | ![]()
8 |
9 |
12 | 聯絡資訊（非必填）
13 | 如果對於照片有疑問，我們會透過您提供的資訊聯絡你。
14 |
15 |
16 | 稱呼
17 |聯絡資料
23 |
29 |
30 | {{ formState.uploading ? '上傳中' : '上傳照片' }}
31 |
32 |
33 |
3 |
4 |
9 |
10 |
44 |
45 |
46 |
47 |
115 |
116 |
180 |
--------------------------------------------------------------------------------
/src/components/ConfirmFactory.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
43 |
12 |
22 |
23 | 使用說明
13 | 14 |15 | 如果系統無法讀取你的位置， 16 | 請至手機系統設定開啟位置權限。 17 |
18 | 19 | 20 | 21 |
24 |
25 |
26 |
27 | ![]()
29 |
30 |
31 |
32 |
33 | 新增違章工廠({{index + 1}}/7)
28 |
34 |
35 |
36 | ![]()
38 |
39 |
40 |
41 |
42 | 補充工廠資訊({{index + 1}}/4)
37 |
3 |
4 |
58 | 59 |
81 |
82 |
83 |
84 |
142 |
143 |
196 |
--------------------------------------------------------------------------------
/src/api/index.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import { FactoryPostData, FactoryData, FactoriesResponse, FactoryImage, ReportRecord } from '@/types'
3 | import EXIF from '@disfactory/exif-js'
4 | import { currentBaseURL } from '@/lib/apiConfig'
5 | import { watch } from 'vue'
6 |
7 | const instance = axios.create({
8 | headers: {
9 | 'Content-Type': 'application/json'
10 | }
11 | })
12 |
13 | // Update base URL whenever currentBaseURL changes
14 | const updateBaseURL = () => {
15 | instance.defaults.baseURL = currentBaseURL.value
16 | }
17 |
18 | // Set initial base URL and watch for changes
19 | updateBaseURL()
20 | watch(currentBaseURL, updateBaseURL)
21 |
22 | type ImageResponse = {
23 | token: string
24 | }
25 |
26 | export type UploadedImages = {
27 | token: string,
28 | src: string // used for preview images
29 | }[]
30 |
31 | // Image upload provider configuration
32 | type ImageUploadProvider = 'imgur' | 'backend'
33 | const IMAGE_UPLOAD_PROVIDER: ImageUploadProvider = (process.env.VUE_APP_IMAGE_UPLOAD_PROVIDER as ImageUploadProvider) || 'imgur'
34 | const IMAGE_UPLOAD_URL = process.env.VUE_APP_IMAGE_UPLOAD_URL || ''
35 |
36 | export async function getFactories (range: number, lng: number, lat: number): Promise確認及補充工廠資訊
5 | 6 |請確認工廠地點及照片，並補充工廠資訊。
7 | 8 |工廠地點
9 | 10 |11 | 返回步驟(1/3)編輯 12 |
13 | 14 |
15 |
36 |
37 |
16 |
23 |
24 |
25 |
35 |
26 | 經度：{{ appState.factoryLocation[0].toFixed(7) }}
27 |
28 | 緯度：{{ appState.factoryLocation[1].toFixed(7) }}
29 |
32 | 以上經緯度版本為WGS84 33 |
34 |工廠照片
38 | 39 |40 | 返回步驟(2/3)編輯 41 |
42 | 43 |
44 |
48 |
49 |
45 | ![]()
46 |
47 | 聯絡人暱稱
50 | 51 |{{ formState.nickname || '未填寫' }}
52 | 53 |聯絡方式 (email或電話)
54 | 55 |{{ formState.contact || '未填寫' }}
56 | 57 |58 | 59 |
其他工廠資訊（非必填）
60 | 61 |提供明確的工廠資訊能夠幫助我們更快速的填寫公文。
62 | 63 |工廠描述
64 | 65 |工廠外部文字
68 | 69 |工廠類型
72 | 73 |
11 |
12 | 使用教學
13 |
14 |
15 | 安全須知
16 |
17 |
18 | 聯絡我們
19 |
20 |
21 | 常見問題
22 |
23 |
24 | 關於回報系統
25 |
26 |
27 | 問題回報
28 |
29 |
30 |
3 |
4 |
5 | 補充照片
7 |
8 | {{ updateFormAppTitle }}
9 |
10 |
38 |
39 |
40 |
41 | 補充照片
42 |
43 |
46 |
47 |
48 | 取消
49 |
50 |
51 |
52 | 補充照片尚未完成
53 | 放棄補充照片的話，你將遺失所有未新增的資料。下次需重新上傳照片
54 |
55 | 繼續編輯
56 | 確定放棄
57 |
58 |
59 |
60 |
61 |
62 |
93 |
111 |
112 |
113 |
114 |
304 |
305 |
337 |
--------------------------------------------------------------------------------
/src/components/Map.vue:
--------------------------------------------------------------------------------
1 |
2 |
94 |
107 | {{ updateFormButton }}
108 |
109 |
110 |
95 |
96 | mdi-close
97 |
98 |
99 |
100 |
106 | {{ updateFormTitle }}
101 | 102 |
3 |
4 |
5 |
12 |
13 |
27 |
28 |
29 |
274 |
275 |
376 |
--------------------------------------------------------------------------------
14 |
17 |
18 |
19 |
20 |
21 |
26 |
{{ updateFormTitle }}
80 | 81 |