diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} \ No newline at end of file diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} \ No newline at end of file diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue new file mode 100644 index 0000000..58a493d --- /dev/null +++ b/src/views/dashboard/components/switch.vue @@ -0,0 +1,77 @@ + + + + \ No newline at end of file diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} \ No newline at end of file diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue new file mode 100644 index 0000000..58a493d --- /dev/null +++ b/src/views/dashboard/components/switch.vue @@ -0,0 +1,77 @@ + + + + \ No newline at end of file diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue new file mode 100644 index 0000000..c543e97 --- /dev/null +++ b/src/views/dashboard/devicePanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} \ No newline at end of file diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue new file mode 100644 index 0000000..58a493d --- /dev/null +++ b/src/views/dashboard/components/switch.vue @@ -0,0 +1,77 @@ + + + + \ No newline at end of file diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue new file mode 100644 index 0000000..c543e97 --- /dev/null +++ b/src/views/dashboard/devicePanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index b0e4466..41cb204 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,24 @@ @@ -28,11 +46,15 @@ diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} \ No newline at end of file diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue new file mode 100644 index 0000000..58a493d --- /dev/null +++ b/src/views/dashboard/components/switch.vue @@ -0,0 +1,77 @@ + + + + \ No newline at end of file diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue new file mode 100644 index 0000000..c543e97 --- /dev/null +++ b/src/views/dashboard/devicePanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index b0e4466..41cb204 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,24 @@ @@ -28,11 +46,15 @@ diff --git a/src/views/dashboard/managementPanel.vue b/src/views/dashboard/managementPanel.vue new file mode 100644 index 0000000..13d930c --- /dev/null +++ b/src/views/dashboard/managementPanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} \ No newline at end of file diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue new file mode 100644 index 0000000..58a493d --- /dev/null +++ b/src/views/dashboard/components/switch.vue @@ -0,0 +1,77 @@ + + + + \ No newline at end of file diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue new file mode 100644 index 0000000..c543e97 --- /dev/null +++ b/src/views/dashboard/devicePanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index b0e4466..41cb204 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,24 @@ @@ -28,11 +46,15 @@ diff --git a/src/views/dashboard/managementPanel.vue b/src/views/dashboard/managementPanel.vue new file mode 100644 index 0000000..13d930c --- /dev/null +++ b/src/views/dashboard/managementPanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/supplierPanel.vue b/src/views/dashboard/supplierPanel.vue new file mode 100644 index 0000000..9dcf0df --- /dev/null +++ b/src/views/dashboard/supplierPanel.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} \ No newline at end of file diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue new file mode 100644 index 0000000..58a493d --- /dev/null +++ b/src/views/dashboard/components/switch.vue @@ -0,0 +1,77 @@ + + + + \ No newline at end of file diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue new file mode 100644 index 0000000..c543e97 --- /dev/null +++ b/src/views/dashboard/devicePanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index b0e4466..41cb204 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,24 @@ @@ -28,11 +46,15 @@ diff --git a/src/views/dashboard/managementPanel.vue b/src/views/dashboard/managementPanel.vue new file mode 100644 index 0000000..13d930c --- /dev/null +++ b/src/views/dashboard/managementPanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/supplierPanel.vue b/src/views/dashboard/supplierPanel.vue new file mode 100644 index 0000000..9dcf0df --- /dev/null +++ b/src/views/dashboard/supplierPanel.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/welcome.vue b/src/views/dashboard/welcome.vue new file mode 100644 index 0000000..170ab32 --- /dev/null +++ b/src/views/dashboard/welcome.vue @@ -0,0 +1,39 @@ + + + + + + diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} \ No newline at end of file diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue new file mode 100644 index 0000000..58a493d --- /dev/null +++ b/src/views/dashboard/components/switch.vue @@ -0,0 +1,77 @@ + + + + \ No newline at end of file diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue new file mode 100644 index 0000000..c543e97 --- /dev/null +++ b/src/views/dashboard/devicePanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index b0e4466..41cb204 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,24 @@ @@ -28,11 +46,15 @@ diff --git a/src/views/dashboard/managementPanel.vue b/src/views/dashboard/managementPanel.vue new file mode 100644 index 0000000..13d930c --- /dev/null +++ b/src/views/dashboard/managementPanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/supplierPanel.vue b/src/views/dashboard/supplierPanel.vue new file mode 100644 index 0000000..9dcf0df --- /dev/null +++ b/src/views/dashboard/supplierPanel.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/welcome.vue b/src/views/dashboard/welcome.vue new file mode 100644 index 0000000..170ab32 --- /dev/null +++ b/src/views/dashboard/welcome.vue @@ -0,0 +1,39 @@ + + + + + + diff --git a/src/views/example/chartExample.vue b/src/views/example/chartExample.vue new file mode 100644 index 0000000..d427424 --- /dev/null +++ b/src/views/example/chartExample.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/package.json b/package.json index eda1da9..9928fd9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clipboard": "^2.0.8", "console": "^0.7.2", "core-js": "^3.6.5", + "echarts": "^5.4.0", "element-ui": "^2.15.7", "file-saver": "^2.0.5", "js-base64": "^3.7.2", diff --git a/src/api/request/http.js b/src/api/request/http.js index f6a0288..9a49dc5 100644 --- a/src/api/request/http.js +++ b/src/api/request/http.js @@ -1,27 +1,42 @@ import axios from 'axios' import { Message } from 'element-ui' -import store from '../../store' import { getToken } from '@/utils/auth' +import store from '@/store' const instance = axios.create({ - baseURL: 'http://111.198.10.15:21403' + baseURL: process.env.BASE_API, // api 的 base_url + timeout: 50000 // 请求超时时间 }) // 请求守卫 instance.interceptors.request.use(config => { config.headers.token = getToken() return config }) -instance.interceptors.response.use(res => { - console.log(res, '=======response======') - const { code, data, message } = res.data - if (code === 200) { - console.log('200 =============') - return data || code +instance.interceptors.response.use(response => { + /** + * code为非200是抛错 可结合自己业务进行修改 + */ + const res = response.data + // 如果是文件 + if (res instanceof Blob) { + return response + } else if (res.code !== 200) { + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 401 || res.code === 50012 || res.code === 50014) { + store.dispatch('FedLogOut').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + } else { + Message({ + showClose: true, + message: res.message, + type: 'error', + duration: 3000 + }) + return Promise.reject(res) + } } else { - console.log('!=200 ============') - // 对非正常请求进行处理 - Message.error(message) - return '' + return res.data } }, err => { diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue new file mode 100644 index 0000000..483b9da --- /dev/null +++ b/src/components/echart/index.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue new file mode 100644 index 0000000..1658675 --- /dev/null +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -0,0 +1,256 @@ + + + + diff --git a/src/components/echart/lineChart/simpleLineChart.vue b/src/components/echart/lineChart/simpleLineChart.vue new file mode 100644 index 0000000..a365dbb --- /dev/null +++ b/src/components/echart/lineChart/simpleLineChart.vue @@ -0,0 +1,251 @@ + + + + diff --git a/src/components/echart/theme.json b/src/components/echart/theme.json new file mode 100644 index 0000000..ce81aba --- /dev/null +++ b/src/components/echart/theme.json @@ -0,0 +1,490 @@ +{ + "color": [ + "#2d8cf0", + "#19be6b", + "#ff9900", + "#E46CBB", + "#9A66E4", + "#ed3f14" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2d8cf0", + "#19be6b", + "#f5ae4a", + "#9189d5", + "#56cae2", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#fff" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999" + }, + "emphasis": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#fff" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc", + "width": 1 + }, + "crossStyle": { + "color": "#ccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eee" + } + } + } + } +} diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue index ad214c5..4d04aea 100644 --- a/src/components/mycomponent/dialog/productListAddDialog.vue +++ b/src/components/mycomponent/dialog/productListAddDialog.vue @@ -25,9 +25,9 @@ @@ -90,10 +90,10 @@ - + 是 - + 否 @@ -102,15 +102,37 @@
+ + + + + + + + + + + + + + + + + + + + - +
@@ -147,7 +169,7 @@ import { Message } from 'element-ui' import { SelectList } from '@/api/product/brand' import { C_list, C_paramsList } from '@/api/product/category' -import { add, update } from '@/api/product/product' +import { add, productDetail, update } from '@/api/product/product' import RedStar from '@/components/mycomponent/redStar' export default { @@ -162,10 +184,10 @@ return { dialogStatus: false, myHeaders: { token: getToken() }, - uploadUrl: this.baseConfig.baseUrl + '/file/uploadFile', - imageUrl: '', + imageUrl: this.baseConfig.baseUrl + '/static/', categoryList: [], brandList: [], + defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径 rules: { productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }], productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }], @@ -196,8 +218,6 @@ }, paramValueList: [ // { paramName: '名称', paramOrder: 1, paramRequire: 1, paramValue: '' }, - // { paramName: '数量', paramOrder: 2, paramRequire: 1, paramValue: '' }, - // { paramName: '单位', paramOrder: 3, paramRequire: 1, paramValue: '' } ] } }, @@ -213,32 +233,39 @@ methods: { initDialog(type, row) { if (type === 'edit') { - this.addInfo = { - productCode: row.productCode, - productName: row.productName, - brandId: row.brandId, - categoryId: row.categoryId, - productPackageSize: row.productPackageSize, - productStatus: row.productStatus, - productWeight: row.productWeight, - productEdition: row.productEdition, - internationalCode: row.internationalCode, - productColor: row.productColor, - productMaterialQuality: row.productMaterialQuality, - productNetworkMode: row.productNetworkMode, - productPicture: row.productPicture - } - if (row.categoryId) { - this.fetchParams(row.categoryId) + if (row.id) { + productDetail({ id: row.id }).then(data => { + this.addInfo = { + id: data.id, + productCode: data.productCode, + productName: data.productName, + brandId: data.brandId, + categoryId: data.categoryId, + productPackageSize: data.productPackageSize, + productStatus: data.productStatus, + productWeight: data.productWeight, + productEdition: data.productEdition, + internationalCode: data.internationalCode, + productColor: data.productColor, + productMaterialQuality: data.productMaterialQuality, + productNetworkMode: data.productNetworkMode, + productPicture: data.productPicture ? this.imageUrl + data.productPicture : '', + paramValueList: data.paramValues + } + // 如果有类型，去获取类型的参数 + // if (this.addInfo.categoryId) { + // this.fetchParams(this.addInfo.categoryId) + // } + }) } } else { + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) this.resetForm() } this.dialogStatus = true }, - close() { - this.$emit('close') - }, // 获取品牌列表 fetchBrandList() { SelectList().then(res => { @@ -255,16 +282,75 @@ this.categoryList = res.data }) }, - // 获取品类参数列表 - fetchParams(categoryId) { - C_paramsList(categoryId).then(res => { - if (res.code === 200) { - this.paramValueList = res.data.map(item => { - return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: '' } - }) + // 图片上传 + uploadFile(file) { + console.log('uploadFile:' + file.file.name) + // 转base64 + this.getBase64(file.file).then(resBase64 => { + this.addInfo.productPicture = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息 + }) + }, + // 上传前判断文件格式及大小 + beforeAvatarUpload(file) { + const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') + let res = true + console.log(file.size) + const isLt2M = file.size / 1024 < 200 + if (!isJPG) { + this.$message.error('上传图片只能是 JPG 或 PNG 格式!') + res = false + } + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 200KB!') + res = false + } + return res + }, + // 上传成功后回显 + handleAvatarSuccess(response, file) { + console.log('handleSuccess') + // const base_url = process.env.BASE_API + '/static/' + // if (response.code === 200) { + // this.photo = base_url + response.data + // } else { + // this.$message.warning(response.message) + // } + }, + getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + let fileResult = '' + reader.readAsDataURL(file) + // 开始转 + reader.onload = function() { + fileResult = reader.result + } + // 转 失败 + reader.onerror = function(error) { + reject(error) + } + // 转 结束 咱就 resolve 出去 + reader.onloadend = function() { + resolve(fileResult) } }) }, + // 获取品类参数列表 + fetchParams(categoryId) { + if (categoryId) { + C_paramsList(categoryId).then(res => { + if (res.code === 200) { + if (res.data.length > 0) { + this.paramValueList = res.data.map(item => { + const value = this.addInfo.paramValueList.filter(param => param.paramId === item.id) + const paramValue = value.length > 0 ? value[0].paramValue : '' + return { paramId: item.id, paramName: item.paramName, paramOrder: item.paramOrder, paramRequire: item.paramRequire, paramValue: paramValue } + }) + } + } + }) + } + }, // 重置表单 resetForm() { this.addInfo = { @@ -279,55 +365,42 @@ internationalCode: '', productColor: '', productMaterialQuality: '', - productPicture: '' + productPicture: '', + paramValueList: [] } this.paramValueList = [] }, - // 照片上传 - handleAvatarSuccess(res, file) { - console.log(res, file) - this.imageUrl = URL.createObjectURL(file.raw) - console.log(this.imageUrl) - this.addInfo.productPicture = res.data.fileName - console.log(this.addInfo.productPicture) - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg' - const isLt2M = file.size / 1024 / 1024 < 2 - if (!isJPG) { - this.$message.error('上传头像图片只能是 JPG 格式!') - } - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 2MB!') - } - return isJPG && isLt2M + close() { + this.dialogStatus = false }, // 新增 save() { - this.addInfo.paramValueList = this.paramValueList.map(item => { - return { - paramId: item.paramId, - paramName: item.paramName, - paramValue: item.paramValue + this.$refs['dataForm'].validate((valid) => { + const index = this.addInfo.productPicture.indexOf(this.imageUrl) + if (index > -1) { + this.addInfo.productPicture = this.addInfo.productPicture.substring(this.imageUrl.length) } - }) - if (this.title === '新增产品') { - add(this.addInfo).then(res => { - if (res.code === 200) { + this.addInfo.paramValueList = this.paramValueList.map(item => { + return { + paramId: item.paramId, + paramName: item.paramName, + paramValue: item.paramValue + } + }) + if (this.title === '新增产品') { + add(this.addInfo).then(res => { Message.success('保存成功') this.$emit('refresh') - this.close() - } - }) - } else { - update(this.addInfo).then(res => { - if (res.code === 200) { + this.dialogStatus = false + }) + } else { + update(this.addInfo).then(res => { Message.success('更新成功') this.$emit('refresh') - this.close() - } - }) - } + this.dialogStatus = false + }) + } + }) } } } @@ -412,6 +485,28 @@ height: 178px; display: block; } +//.avatar-uploader .el-upload { +// margin-left: 12px; +// margin-top: 10px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +//} +//.avatar-uploader .el-upload:hover { +// border-color: #409EFF; +//} +//.avatar-uploader-icon { +// font-size: 28px; +// color: #8c939d; +// width: 178px; +// height: 238px; +// line-height: 238px; +// text-align: center; +//} +.avatar { + margin: 10px; + display: block; +} \ No newline at end of file diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue new file mode 100644 index 0000000..58a493d --- /dev/null +++ b/src/views/dashboard/components/switch.vue @@ -0,0 +1,77 @@ + + + + \ No newline at end of file diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue new file mode 100644 index 0000000..c543e97 --- /dev/null +++ b/src/views/dashboard/devicePanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index b0e4466..41cb204 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,16 +1,24 @@ @@ -28,11 +46,15 @@ diff --git a/src/views/dashboard/managementPanel.vue b/src/views/dashboard/managementPanel.vue new file mode 100644 index 0000000..13d930c --- /dev/null +++ b/src/views/dashboard/managementPanel.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/supplierPanel.vue b/src/views/dashboard/supplierPanel.vue new file mode 100644 index 0000000..9dcf0df --- /dev/null +++ b/src/views/dashboard/supplierPanel.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/views/dashboard/welcome.vue b/src/views/dashboard/welcome.vue new file mode 100644 index 0000000..170ab32 --- /dev/null +++ b/src/views/dashboard/welcome.vue @@ -0,0 +1,39 @@ + + + + + + diff --git a/src/views/example/chartExample.vue b/src/views/example/chartExample.vue new file mode 100644 index 0000000..d427424 --- /dev/null +++ b/src/views/example/chartExample.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/views/product/productList.vue b/src/views/product/productList.vue index 7eb8d2f..1e62903 100644 --- a/src/views/product/productList.vue +++ b/src/views/product/productList.vue @@ -4,16 +4,11 @@
产品型号 - + 产品名称 - + 产品品类 - +
@@ -106,13 +100,16 @@ }, data() { return { + listQuery: { + productCode: '', + productName: '', + categoryId: '' + }, categoryList: [], // 品类列表 - productCategory: '', // 产品品类 - productType: '', // 产品型号 - productName: '', // 产品名称 dataInfo: {}, // 当前行的数据 limit: 10, // 当前的行数 offset: 1, // 当前页 + total: 0, isShowDialog: false, isShowDetail: false, isBindShow: false, @@ -126,29 +123,19 @@ } }, computed: { - total() { - const index = this.tableData.total / this.limit + page() { + const index = this.total / this.limit return Math.ceil(index) } }, watch: { limit(newVls) { - if (!this.productName) { - this.searchClick(newVls, this.offset) - } else { - this.getProductList(newVls, this.offset) - } + this.limit = newVls + this.getProductList() }, offset(newVls) { - console.log(!this.productName, this.productName) - this.getProductList(this.limit, newVls) - // if (this.productName) { - // console.log('112233') - // this.searchClick() - // } else { - // console.log('223344') - // this.getProductList(this.limit, newVls) - // } + this.offset = newVls + this.getProductList() } }, mounted() { @@ -169,13 +156,10 @@ this.dialogTitle = '新增产品' this.$refs.addProduct.initDialog('add') }, - addDialogClose() { - this.isShowDialog = false - }, - getProductList(limit, offset) { - listPage(`limit=${limit}&offset=${offset}`, this.queryInfo).then(res => { - console.log(res) - this.tableData = res + getProductList() { + listPage(`limit=${this.limit}&offset=${this.offset}`, this.listQuery).then(res => { + this.tableData = res.rows + this.total = res.total }) }, setLimit(crrentSize) { @@ -186,9 +170,7 @@ }, // 刷新 refresh() { - this.$nextTick(() => { - this.getProductList(this.limit, this.offset) - }) + this.getProductList() }, // 编辑 handleClick(row) { @@ -208,16 +190,8 @@ }, // 搜索 searchClick() { - this.queryInfo = { - productName: this.productName, - productCode: this.productType, - categoryId: this.productCategory - } - if (this.offset == 1) { - this.refresh() - } else { - this.offset = 1 - } + this.offset = 1 + this.refresh() }, // 重置 reset() { @@ -327,7 +301,4 @@ text-align: center; } -::v-deep .el-table__row.success-row { - background-color: lightgray; -}