优化代码
Showing
17 changed files
with
185 additions
and
213 deletions
| ... | @@ -3,69 +3,69 @@ | ... | @@ -3,69 +3,69 @@ |
| 3 | </template> | 3 | </template> |
| 4 | 4 | ||
| 5 | <script> | 5 | <script> |
| 6 | import tdTheme from './theme.json' // 引入默认主题 | 6 | import tdTheme from "./theme.json"; // 引入默认主题 |
| 7 | import '../map/hanzhong.js' | 7 | import "../map/hanzhong.js"; |
| 8 | 8 | ||
| 9 | export default { | 9 | export default { |
| 10 | name: 'echart', | 10 | name: "echart", |
| 11 | props: { | 11 | props: { |
| 12 | className: { | 12 | className: { |
| 13 | type: String, | 13 | type: String, |
| 14 | default: 'chart' | 14 | default: "chart", |
| 15 | }, | 15 | }, |
| 16 | id: { | 16 | id: { |
| 17 | type: String, | 17 | type: String, |
| 18 | default: 'chart' | 18 | default: "chart", |
| 19 | }, | 19 | }, |
| 20 | width: { | 20 | width: { |
| 21 | type: String, | 21 | type: String, |
| 22 | default: '100%' | 22 | default: "100%", |
| 23 | }, | 23 | }, |
| 24 | height: { | 24 | height: { |
| 25 | type: String, | 25 | type: String, |
| 26 | default: '2.5rem' | 26 | default: "2.5rem", |
| 27 | }, | 27 | }, |
| 28 | options: { | 28 | options: { |
| 29 | type: Object, | 29 | type: Object, |
| 30 | default: () => ({}) | 30 | default: () => ({}), |
| 31 | } | 31 | }, |
| 32 | }, | 32 | }, |
| 33 | data () { | 33 | data() { |
| 34 | return { | 34 | return { |
| 35 | chart: null | 35 | chart: null, |
| 36 | } | 36 | }; |
| 37 | }, | 37 | }, |
| 38 | watch: { | 38 | watch: { |
| 39 | options: { | 39 | options: { |
| 40 | handler (options) { | 40 | handler(options) { |
| 41 | // 设置true清空echart缓存 | 41 | // 设置true清空echart缓存 |
| 42 | this.chart.setOption(options, true) | 42 | this.chart.setOption(options, true); |
| 43 | window.addEventListener('resize',()=>{ | 43 | window.addEventListener("resize", () => { |
| 44 | this.chart.resize() | 44 | if (this.chart) { |
| 45 | }) | 45 | this.chart.resize(); |
| 46 | }, | ||
| 47 | deep: true | ||
| 48 | } | 46 | } |
| 47 | }); | ||
| 48 | }, | ||
| 49 | deep: true, | ||
| 50 | }, | ||
| 49 | }, | 51 | }, |
| 50 | mounted () { | 52 | mounted() { |
| 51 | this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题 | 53 | this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题 |
| 52 | this.initChart(); | 54 | this.initChart(); |
| 53 | }, | 55 | }, |
| 54 | beforeDestroy () { | 56 | beforeDestroy() { |
| 55 | this.chart.dispose() | 57 | this.chart.dispose(); |
| 56 | this.chart = null | 58 | this.chart = null; |
| 57 | }, | 59 | }, |
| 58 | methods: { | 60 | methods: { |
| 59 | initChart () { | 61 | initChart() { |
| 60 | // 初始化echart | 62 | // 初始化echart |
| 61 | this.chart = this.$echarts.init(this.$el, 'tdTheme') | 63 | this.chart = this.$echarts.init(this.$el, "tdTheme"); |
| 62 | function nowSize(val,initWidth=1920){ | 64 | function nowSize(val, initWidth = 1920) { |
| 63 | return val * (nowClientWidth/initWidth); | 65 | return val * (nowClientWidth / initWidth); |
| 64 | } | ||
| 65 | this.chart.setOption(this.options, true) | ||
| 66 | |||
| 67 | |||
| 68 | } | ||
| 69 | } | 66 | } |
| 70 | } | 67 | this.chart.setOption(this.options, true); |
| 68 | }, | ||
| 69 | }, | ||
| 70 | }; | ||
| 71 | </script> | 71 | </script> | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <!-- 柱状图 --> | 2 | <!--上报统计柱状图 --> |
| 3 | <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart> | 3 | <Echart |
| 4 | :options="options" | ||
| 5 | id="bottomLeftChart" | ||
| 6 | height="100%" | ||
| 7 | width="100%" | ||
| 8 | ></Echart> | ||
| 4 | </template> | 9 | </template> |
| 5 | 10 | ||
| 6 | <script> | 11 | <script> |
| 7 | import Echart from "@/common/echart"; | 12 | import Echart from "@/common/echart"; |
| 8 | export default { | 13 | export default { |
| 9 | data () { | 14 | data() { |
| 10 | return { | 15 | return { |
| 11 | options: {}, | 16 | options: {}, |
| 12 | }; | 17 | }; |
| ... | @@ -22,16 +27,13 @@ export default { | ... | @@ -22,16 +27,13 @@ export default { |
| 22 | }, | 27 | }, |
| 23 | watch: { | 28 | watch: { |
| 24 | cdata: { | 29 | cdata: { |
| 25 | handler (newData) { | 30 | handler(newData) { |
| 26 | this.options = { | 31 | this.options = { |
| 27 | legend: { | 32 | tooltip: { |
| 28 | data: ["成功", "失败"], | 33 | trigger: "axis", |
| 29 | icon: "circle", | 34 | axisPointer: { |
| 30 | textStyle: { | 35 | type: "shadow", |
| 31 | color: "#B4B4B4", | ||
| 32 | }, | 36 | }, |
| 33 | top: "10%", | ||
| 34 | right: "5%", | ||
| 35 | }, | 37 | }, |
| 36 | grid: { | 38 | grid: { |
| 37 | left: "5%", | 39 | left: "5%", |
| ... | @@ -72,23 +74,46 @@ export default { | ... | @@ -72,23 +74,46 @@ export default { |
| 72 | name: "成功", | 74 | name: "成功", |
| 73 | type: "bar", | 75 | type: "bar", |
| 74 | stack: "总量", | 76 | stack: "总量", |
| 75 | barWidth: 10, | 77 | barWidth: 18, |
| 78 | label: { | ||
| 79 | show: true, | ||
| 80 | formatter: function (params) { | ||
| 81 | if (params.value > 0) { | ||
| 82 | return params.value; | ||
| 83 | } else { | ||
| 84 | return ''; | ||
| 85 | } | ||
| 86 | } | ||
| 87 | }, | ||
| 76 | itemStyle: { | 88 | itemStyle: { |
| 77 | normal: { | 89 | normal: { |
| 78 | // 这里设置圆角 | 90 | // 这里设置圆角 |
| 79 | color: "#16F4D2", | 91 | color: "#16F4D2", |
| 80 | } | 92 | }, |
| 81 | }, | 93 | }, |
| 82 | data: newData.barData, | 94 | data: newData.barData, |
| 95 | |||
| 83 | }, | 96 | }, |
| 84 | { | 97 | { |
| 85 | name: "失败", | 98 | name: "失败", |
| 86 | type: "bar", | 99 | type: "bar", |
| 87 | stack: "总量", | 100 | stack: "总量", |
| 101 | label: { | ||
| 102 | show: true, | ||
| 103 | formatter: function (params) { | ||
| 104 | if (params.value > 0) { | ||
| 105 | return params.value; | ||
| 106 | } else { | ||
| 107 | return ''; | ||
| 108 | } | ||
| 109 | } | ||
| 110 | |||
| 111 | |||
| 112 | }, | ||
| 88 | itemStyle: { | 113 | itemStyle: { |
| 89 | normal: { | 114 | normal: { |
| 90 | // 这里设置圆角 | 115 | // 这里设置圆角 |
| 91 | color: "#C99E68" | 116 | color: "#C99E68", |
| 92 | }, | 117 | }, |
| 93 | }, | 118 | }, |
| 94 | data: newData.lineData, | 119 | data: newData.lineData, | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <!-- 柱状图 --> | 2 | <!--登记类型总量柱状图 --> |
| 3 | <Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class="" ></Echart> | 3 | <Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class="" ></Echart> |
| 4 | </template> | 4 | </template> |
| 5 | 5 | ||
| ... | @@ -27,7 +27,7 @@ export default { | ... | @@ -27,7 +27,7 @@ export default { |
| 27 | grid: { | 27 | grid: { |
| 28 | // 让图表占满容器 | 28 | // 让图表占满容器 |
| 29 | top: "20%", | 29 | top: "20%", |
| 30 | left: "12%", | 30 | left: "10%", |
| 31 | right: "5%", | 31 | right: "5%", |
| 32 | bottom: "16%", | 32 | bottom: "16%", |
| 33 | }, | 33 | }, | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <Echart :options="options" id="centreLeft1Chart" :key="key" height="1.0417rem" width="80%"></Echart> | 2 | <Echart |
| 3 | :options="options" | ||
| 4 | id="centreLeft1Chart" | ||
| 5 | :key="key" | ||
| 6 | height="1.0417rem" | ||
| 7 | width="80%" | ||
| 8 | ></Echart> | ||
| 3 | </template> | 9 | </template> |
| 4 | <script> | 10 | <script> |
| 5 | import Echart from '@/common/echart' | 11 | import Echart from "@/common/echart"; |
| 6 | export default { | 12 | export default { |
| 7 | components: { | 13 | components: { |
| 8 | Echart, | 14 | Echart, |
| 9 | }, | 15 | }, |
| 10 | data() { | 16 | data() { |
| 11 | return { | 17 | return { |
| 12 | key:0 | 18 | key: 0, |
| 13 | } | 19 | }; |
| 14 | }, | 20 | }, |
| 15 | props: { | 21 | props: { |
| 16 | cdata: { | 22 | cdata: { |
| 17 | type: Object, | 23 | type: Object, |
| 18 | default: () => ({}) | 24 | default: () => ({}), |
| 19 | }, | 25 | }, |
| 20 | }, | 26 | }, |
| 21 | watch: { | 27 | watch: { |
| 22 | cdata: { | 28 | cdata: { |
| 23 | handler (newData) { | 29 | handler(newData) { |
| 24 | console.log("newData",newData); | 30 | let pieColors = ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de"]; |
| 31 | let richColor = {}; | ||
| 32 | pieColors.forEach((item, idx) => { | ||
| 33 | richColor[`color${idx}`] = { | ||
| 34 | fontSize: 10, | ||
| 35 | color: item, | ||
| 36 | }; | ||
| 37 | }); | ||
| 38 | |||
| 39 | let chartData = [ | ||
| 40 | { value: 1048, name: "Search Engine" }, | ||
| 41 | { value: 735, name: "Direct" }, | ||
| 42 | { value: 580, name: "Email" }, | ||
| 43 | { value: 484, name: "Union Ads" }, | ||
| 44 | { value: 300, name: "Video Ads" }, | ||
| 45 | ]; | ||
| 25 | this.options = { | 46 | this.options = { |
| 26 | grid: { | ||
| 27 | right:"1%", | ||
| 28 | bottom:"4%" | ||
| 29 | }, | ||
| 30 | color: [ | 47 | color: [ |
| 31 | "#37a2da", | 48 | "#37a2da", |
| 32 | "#32c5e9", | 49 | "#32c5e9", |
| 33 | "#9fe6b8", | 50 | "#9fe6b8", |
| 34 | "#ffdb5c", | 51 | "#ffdb5c", |
| 35 | "#ff9f7f", | 52 | "#ff9f7f", |
| 53 | "#8378ea", | ||
| 36 | "#fb7293", | 54 | "#fb7293", |
| 37 | "#e7bcf3", | 55 | "#e7bcf3", |
| 38 | "#8378ea" | 56 | |
| 39 | ], | 57 | ], |
| 40 | tooltip: { | ||
| 41 | trigger: "item", | ||
| 42 | formatter: "{a} <br/>{b} : {c} ({d}%)" | ||
| 43 | }, | ||
| 44 | toolbox: { | ||
| 45 | show: true | ||
| 46 | }, | ||
| 47 | calculable: true, | ||
| 48 | series: [ | 58 | series: [ |
| 49 | { | 59 | { |
| 50 | name: "业务量", | 60 | name: "Access From", |
| 51 | type: "pie", | 61 | type: "pie", |
| 52 | radius: [20,100], | 62 | radius: ["54%", "70%"], |
| 53 | roseType: "area", | 63 | avoidLabelOverlap: true, |
| 54 | data: newData.seriesData | 64 | label: { |
| 65 | formatter: (params) => { | ||
| 66 | // console.log(params) | ||
| 67 | return `{color${params.dataIndex}|${params.name}(${params.value})}`; | ||
| 68 | }, | ||
| 69 | rich: richColor, | ||
| 70 | }, | ||
| 71 | labelLine: { | ||
| 72 | lineStyle: { | ||
| 73 | width: 3, | ||
| 74 | }, | ||
| 75 | }, | ||
| 76 | data: newData.seriesData, | ||
| 55 | } | 77 | } |
| 56 | ], | 78 | ], |
| 57 | 79 | }; | |
| 58 | } | 80 | this.key++; |
| 59 | this.key++ | ||
| 60 | }, | 81 | }, |
| 61 | immediate: true, | 82 | immediate: true, |
| 62 | deep: true | 83 | deep: true, |
| 63 | } | 84 | }, |
| 64 | } | 85 | }, |
| 65 | }; | 86 | }; |
| 66 | </script> | 87 | </script> |
| 67 | 88 | ||
| 68 | <style lang="scss" scoped> | 89 | <style lang="scss" scoped> |
| 69 | #centreLeft1Chart { | 90 | #centreLeft1Chart { |
| 70 | margin-bottom: .0521rem; | 91 | margin-bottom: 0.0521rem; |
| 71 | margin-left:60px; | 92 | margin-left: .3125rem; |
| 72 | } | 93 | } |
| 73 | </style> | 94 | </style> | ... | ... |
| ... | @@ -8,7 +8,7 @@ | ... | @@ -8,7 +8,7 @@ |
| 8 | import Chart from "./Chart"; | 8 | import Chart from "./Chart"; |
| 9 | import work from "@/api/work"; | 9 | import work from "@/api/work"; |
| 10 | export default { | 10 | export default { |
| 11 | data () { | 11 | data() { |
| 12 | return { | 12 | return { |
| 13 | cdata: { | 13 | cdata: { |
| 14 | seriesData: [], | 14 | seriesData: [], |
| ... | @@ -18,40 +18,44 @@ export default { | ... | @@ -18,40 +18,44 @@ export default { |
| 18 | components: { | 18 | components: { |
| 19 | Chart, | 19 | Chart, |
| 20 | }, | 20 | }, |
| 21 | mounted () { | 21 | mounted() { |
| 22 | this.getdjywltotal(); | 22 | this.getdjywltotal(); |
| 23 | window.addEventListener("resize", () => { | 23 | window.addEventListener("resize", () => { |
| 24 | this.cdata.seriesData = []; | ||
| 24 | this.getdjywltotal(); | 25 | this.getdjywltotal(); |
| 25 | }); | 26 | }); |
| 26 | }, | 27 | }, |
| 27 | methods: { | 28 | methods: { |
| 28 | // 获取登记业务量玫瑰图数据 | 29 | // 获取登记业务量玫瑰图数据 |
| 29 | async getdjywltotal () { | 30 | async getdjywltotal() { |
| 30 | this.cdata.seriesData=[] | 31 | if (this.cdata.seriesData.length == 0) { |
| 31 | try { | 32 | try { |
| 32 | let p = { | 33 | let p = { |
| 33 | DJLX: "", | 34 | DJLX: "", |
| 34 | QLLX: "", | 35 | QLLX: "", |
| 35 | XZQDM: "", | 36 | XZQDM: "", |
| 36 | }; | 37 | }; |
| 38 | this.cdata.seriesData = []; | ||
| 37 | let res = await work.getdjywltotal(p); | 39 | let res = await work.getdjywltotal(p); |
| 38 | // 遍历修改数组键,作为echars图表的参数 | 40 | if(this.cdata.seriesData.length == 0){ |
| 39 | res.result.map((item) => { | 41 | res.result.map((item) => { |
| 40 | return ( | 42 | return this.cdata.seriesData.push({ |
| 41 | this.cdata.seriesData.push({ "name": item.AREACODE, "value": item.ywtotal }) | 43 | name: item.AREACODE, |
| 44 | value: item.ywtotal, | ||
| 45 | }); | ||
| 42 | 46 | ||
| 43 | ) | ||
| 44 | }); | 47 | }); |
| 45 | } catch (error) { | ||
| 46 | console.log(error); | ||
| 47 | } | 48 | } |
| 49 | // 遍历修改数组键,作为echars图表的参数 | ||
| 48 | 50 | ||
| 49 | 51 | ||
| 52 | } catch (error) { | ||
| 53 | console.log(error); | ||
| 54 | } | ||
| 55 | } | ||
| 50 | }, | 56 | }, |
| 51 | }, | 57 | }, |
| 52 | }; | 58 | }; |
| 53 | </script> | 59 | </script> |
| 54 | 60 | ||
| 55 | <style lang="scss" scoped> | 61 | <style lang="scss" scoped></style> |
| 56 | |||
| 57 | </style> | ... | ... |
| ... | @@ -129,7 +129,6 @@ export default { | ... | @@ -129,7 +129,6 @@ export default { |
| 129 | if (!this.heightNumSetting) { | 129 | if (!this.heightNumSetting) { |
| 130 | let _this = this | 130 | let _this = this |
| 131 | if (this.heightNum) { | 131 | if (this.heightNum) { |
| 132 | console.log("this.heightNum``",this.heightNum); | ||
| 133 | _this.$nextTick(() => { | 132 | _this.$nextTick(() => { |
| 134 | 133 | ||
| 135 | window.addEventListener('resize', () => { | 134 | window.addEventListener('resize', () => { | ... | ... |
src/views/home/dataView/2wd.vue
deleted
100644 → 0
File mode changed
src/views/home/dataView/box.vue
deleted
100644 → 0
| 1 | <template> | ||
| 2 | <div | ||
| 3 | class="ScaleBox" | ||
| 4 | ref="ScaleBox" | ||
| 5 | :style="{ | ||
| 6 | width: width + 'px', | ||
| 7 | height: height + 'px', | ||
| 8 | }" | ||
| 9 | > | ||
| 10 | <slot></slot> | ||
| 11 | </div> | ||
| 12 | </template> | ||
| 13 | |||
| 14 | <script> | ||
| 15 | export default { | ||
| 16 | name: "ScaleBox", | ||
| 17 | props: {}, | ||
| 18 | data() { | ||
| 19 | return { | ||
| 20 | scale: 0, | ||
| 21 | width: 1920, | ||
| 22 | height: 1080, | ||
| 23 | }; | ||
| 24 | }, | ||
| 25 | mounted() { | ||
| 26 | this.setScale(); | ||
| 27 | window.addEventListener("resize", this.debounce(this.setScale)); | ||
| 28 | }, | ||
| 29 | methods: { | ||
| 30 | getScale() { | ||
| 31 | // 固定好16:9的宽高比,计算出最合适的缩放比 | ||
| 32 | const { width, height } = this; | ||
| 33 | const wh = window.innerHeight / height; | ||
| 34 | const ww = window.innerWidth / width; | ||
| 35 | console.log(ww < wh ? ww : wh); | ||
| 36 | return ww < wh ? ww : wh; | ||
| 37 | }, | ||
| 38 | setScale() { | ||
| 39 | // 获取到缩放比例,设置它 | ||
| 40 | this.scale = this.getScale(); | ||
| 41 | if (this.$refs.ScaleBox) { | ||
| 42 | this.$refs.ScaleBox.style.setProperty("--scale", this.scale); | ||
| 43 | } | ||
| 44 | }, | ||
| 45 | debounce(fn, delay) { | ||
| 46 | const delays = delay || 500; | ||
| 47 | let timer; | ||
| 48 | return function () { | ||
| 49 | const th = this; | ||
| 50 | const args = arguments; | ||
| 51 | if (timer) { | ||
| 52 | clearTimeout(timer); | ||
| 53 | } | ||
| 54 | timer = setTimeout(function () { | ||
| 55 | timer = null; | ||
| 56 | fn.apply(th, args); | ||
| 57 | }, delays); | ||
| 58 | }; | ||
| 59 | }, | ||
| 60 | }, | ||
| 61 | }; | ||
| 62 | </script> | ||
| 63 | |||
| 64 | <style lang="scss"> | ||
| 65 | #ScaleBox { | ||
| 66 | --scale: 1; | ||
| 67 | } | ||
| 68 | .ScaleBox { | ||
| 69 | position: absolute; | ||
| 70 | transform: scale(var(--scale)) translate(-50%, -50%); | ||
| 71 | display: flex; | ||
| 72 | flex-direction: column; | ||
| 73 | transform-origin: 0 0; | ||
| 74 | left: 50%; | ||
| 75 | top: 50%; | ||
| 76 | transition: 0.1s; | ||
| 77 | z-index: 999; | ||
| 78 | // background: rgba(255, 0, 0, 0.3); | ||
| 79 | } | ||
| 80 | </style> |
| ... | @@ -129,7 +129,7 @@ export default { | ... | @@ -129,7 +129,7 @@ export default { |
| 129 | position: relative; | 129 | position: relative; |
| 130 | text-align: center; | 130 | text-align: center; |
| 131 | width: 100%; | 131 | width: 100%; |
| 132 | height: 25%; | 132 | height: 22%; |
| 133 | } | 133 | } |
| 134 | .carda { | 134 | .carda { |
| 135 | background: url("~@/image/sthj.png") no-repeat; | 135 | background: url("~@/image/sthj.png") no-repeat; |
| ... | @@ -137,7 +137,7 @@ export default { | ... | @@ -137,7 +137,7 @@ export default { |
| 137 | position: relative; | 137 | position: relative; |
| 138 | text-align: center; | 138 | text-align: center; |
| 139 | width: 100%; | 139 | width: 100%; |
| 140 | height: 25%; | 140 | height: 22%; |
| 141 | } | 141 | } |
| 142 | 142 | ||
| 143 | // .card1 { | 143 | // .card1 { |
| ... | @@ -192,8 +192,8 @@ export default { | ... | @@ -192,8 +192,8 @@ export default { |
| 192 | font-weight: 700; | 192 | font-weight: 700; |
| 193 | width: .195rem; | 193 | width: .195rem; |
| 194 | height: .2475rem; | 194 | height: .2475rem; |
| 195 | font-size: .1863rem; | 195 | font-size: .2863rem; |
| 196 | font-size: .1867rem; | 196 | font-size: .2867rem; |
| 197 | } | 197 | } |
| 198 | } | 198 | } |
| 199 | 199 | ... | ... |
| ... | @@ -44,16 +44,12 @@ export default { | ... | @@ -44,16 +44,12 @@ export default { |
| 44 | async addhousetotal () { | 44 | async addhousetotal () { |
| 45 | try { | 45 | try { |
| 46 | let {result:res}= await work.addhousetotal(); | 46 | let {result:res}= await work.addhousetotal(); |
| 47 | console.log("resultssssssssssss",res); | ||
| 48 | res.map((item,index) => { | 47 | res.map((item,index) => { |
| 49 | console.log("item",item); | ||
| 50 | console.log("index",index); | ||
| 51 | return ( | 48 | return ( |
| 52 | this.config.data.push([index,item.fwyt,item.fwxz,item.mj]) | 49 | this.config.data.push([index,item.fwyt,item.fwxz,item.mj]) |
| 53 | ) | 50 | ) |
| 54 | 51 | ||
| 55 | }); | 52 | }); |
| 56 | console.log("this.config.data",this.config.data); | ||
| 57 | } catch (error) { | 53 | } catch (error) { |
| 58 | console.log("error",error); | 54 | console.log("error",error); |
| 59 | } | 55 | } |
| ... | @@ -115,6 +111,15 @@ export default { | ... | @@ -115,6 +111,15 @@ export default { |
| 115 | margin: 0 auto; | 111 | margin: 0 auto; |
| 116 | height: 1.1031rem; | 112 | height: 1.1031rem; |
| 117 | margin-top: .0521rem; | 113 | margin-top: .0521rem; |
| 114 | /deep/.header{ | ||
| 115 | font-size: .0738rem; | ||
| 116 | } | ||
| 117 | /deep/.rows{ | ||
| 118 | .ceil{ | ||
| 119 | font-size: .0738rem; | ||
| 120 | color: #6BC1FC | ||
| 121 | } | ||
| 122 | } | ||
| 118 | } | 123 | } |
| 119 | } | 124 | } |
| 120 | 125 | ... | ... |
| ... | @@ -7,7 +7,6 @@ | ... | @@ -7,7 +7,6 @@ |
| 7 | </template> | 7 | </template> |
| 8 | <script> | 8 | <script> |
| 9 | import "@/utils/flexible.js"; | 9 | import "@/utils/flexible.js"; |
| 10 | import ScaleBox from "./box.vue"; | ||
| 11 | import drawMixin from "@/utils/drawMixin"; | 10 | import drawMixin from "@/utils/drawMixin"; |
| 12 | import leftcard from "./leftcard"; | 11 | import leftcard from "./leftcard"; |
| 13 | import centercard from "./centercard"; | 12 | import centercard from "./centercard"; |
| ... | @@ -22,8 +21,7 @@ export default { | ... | @@ -22,8 +21,7 @@ export default { |
| 22 | components: { | 21 | components: { |
| 23 | leftcard, | 22 | leftcard, |
| 24 | centercard, | 23 | centercard, |
| 25 | rightcard, | 24 | rightcard |
| 26 | ScaleBox, | ||
| 27 | }, | 25 | }, |
| 28 | mounted () { | 26 | mounted () { |
| 29 | // this.timeFn(); | 27 | // this.timeFn(); | ... | ... |
| ... | @@ -343,7 +343,6 @@ export default { | ... | @@ -343,7 +343,6 @@ export default { |
| 343 | }, | 343 | }, |
| 344 | // 上移下移 | 344 | // 上移下移 |
| 345 | moveUpward (index, row) { | 345 | moveUpward (index, row) { |
| 346 | console.log("row上移", row); | ||
| 347 | 346 | ||
| 348 | realMove(row.dictid, "UP", this.tableData); | 347 | realMove(row.dictid, "UP", this.tableData); |
| 349 | let id = findParents(this.tableData, row.dictid); | 348 | let id = findParents(this.tableData, row.dictid); |
| ... | @@ -351,7 +350,6 @@ export default { | ... | @@ -351,7 +350,6 @@ export default { |
| 351 | this.key++; | 350 | this.key++; |
| 352 | }, | 351 | }, |
| 353 | moveDown (index, row) { | 352 | moveDown (index, row) { |
| 354 | console.log("row下移", row); | ||
| 355 | realMove(row.dictid, "DOWN", this.tableData); | 353 | realMove(row.dictid, "DOWN", this.tableData); |
| 356 | let id = findParents(this.tableData, row.dictid); | 354 | let id = findParents(this.tableData, row.dictid); |
| 357 | this.keyList = id; | 355 | this.keyList = id; | ... | ... |
| ... | @@ -188,7 +188,8 @@ export default { | ... | @@ -188,7 +188,8 @@ export default { |
| 188 | // } | 188 | // } |
| 189 | // }) | 189 | // }) |
| 190 | // }, | 190 | // }, |
| 191 | // updateInfo() { | 191 | // 更新信息 |
| 192 | updateInfo() { | ||
| 192 | // this.$refs.form.validate((valid) => { | 193 | // this.$refs.form.validate((valid) => { |
| 193 | // if (valid) { | 194 | // if (valid) { |
| 194 | // putAction(`${api.users}/${this.form.id}`, this.form).then((res) => { | 195 | // putAction(`${api.users}/${this.form.id}`, this.form).then((res) => { |
| ... | @@ -201,14 +202,14 @@ export default { | ... | @@ -201,14 +202,14 @@ export default { |
| 201 | // }) | 202 | // }) |
| 202 | // } | 203 | // } |
| 203 | // }) | 204 | // }) |
| 204 | // } | 205 | } |
| 205 | } | 206 | } |
| 206 | } | 207 | } |
| 207 | </script> | 208 | </script> |
| 208 | 209 | ||
| 209 | <style scoped lang="scss"> | 210 | <style scoped lang="scss"> |
| 210 | .user-info { | 211 | .user-info { |
| 211 | margin: 36px 200px; | 212 | margin: .1875rem 1.0417rem; |
| 212 | background: #ffffff; | 213 | background: #ffffff; |
| 213 | max-height: 90%; | 214 | max-height: 90%; |
| 214 | overflow-y: auto; | 215 | overflow-y: auto; | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="information from-clues"> | 2 | <div class="information from-clues"> |
| 3 | <div class="from-clues-header"> | 3 | <div class="from-clues-header"> |
| 4 | <el-form ref="ruleForm" :model="form" label-width="100px"> | 4 | <el-form ref="ruleForm" label-width="100px"> |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 6 | <Breadcrumb /> | 6 | <Breadcrumb /> |
| 7 | </el-form-item> | 7 | </el-form-item> |
| 8 | <el-row class="mb-5"> | 8 | <el-row class="mb-5"> |
| 9 | <el-col :span="3" class="btnColRight"> | 9 | <el-col :span="3" class="btnColRight"> |
| 10 | <btn nativeType="cx" @click="information()">基本信息</btn> | 10 | <btn nativeType="cx" @click="information">基本信息</btn> |
| 11 | <btn nativeType="cx" @click="password()">修改秘密</btn> | 11 | <btn nativeType="cx" @click="password">修改密码</btn> |
| 12 | </el-col> | 12 | </el-col> |
| 13 | </el-row> | 13 | </el-row> |
| 14 | </el-form> | 14 | </el-form> |
| 15 | </div> | 15 | </div> |
| 16 | <div class="from-clues-content"> | 16 | <div class="from-clues-content"> |
| 17 | <div class="contentbox"> | 17 | <div class="contentbox"> |
| 18 | <base-set :user-info="userData" v-show="isshow" /> | 18 | <base-set v-show="isshow" /> |
| 19 | <password-edit :user-info="userData" v-show="!isshow" /> | 19 | <password-edit v-show="!isshow" /> |
| 20 | </div> | 20 | </div> |
| 21 | </div> | 21 | </div> |
| 22 | <edit-dialog ref="dialogForm" /> | ||
| 23 | <authorizationdiglog ref="rolesForm" /> | ||
| 24 | </div> | 22 | </div> |
| 25 | </template> | 23 | </template> |
| 26 | <script> | 24 | <script> |
| 25 | import "@/utils/flexible.js"; | ||
| 27 | import BaseSet from "./base-set.vue"; | 26 | import BaseSet from "./base-set.vue"; |
| 28 | import PasswordEdit from "./password-edit.vue"; | 27 | import PasswordEdit from "./password-edit.vue"; |
| 29 | export default { | 28 | export default { |
| ... | @@ -53,6 +52,7 @@ export default { | ... | @@ -53,6 +52,7 @@ export default { |
| 53 | </script> | 52 | </script> |
| 54 | 53 | ||
| 55 | <style scoped lang="scss"> | 54 | <style scoped lang="scss"> |
| 55 | @import "~@/styles/mixin.scss"; | ||
| 56 | @import "~@/styles/public.scss"; | 56 | @import "~@/styles/public.scss"; |
| 57 | .information{ | 57 | .information{ |
| 58 | .btnColRight{ | 58 | .btnColRight{ |
| ... | @@ -76,7 +76,7 @@ export default { | ... | @@ -76,7 +76,7 @@ export default { |
| 76 | } | 76 | } |
| 77 | } | 77 | } |
| 78 | .contentbox{ | 78 | .contentbox{ |
| 79 | height: 650px; | 79 | height: 3.0854rem; |
| 80 | } | 80 | } |
| 81 | } | 81 | } |
| 82 | 82 | ... | ... |
| ... | @@ -79,16 +79,17 @@ export default { | ... | @@ -79,16 +79,17 @@ export default { |
| 79 | // } | 79 | // } |
| 80 | }, | 80 | }, |
| 81 | mounted() {}, | 81 | mounted() {}, |
| 82 | // methods: { | 82 | methods: { |
| 83 | // validatorConfirmPassword(rule, value, callback) { | 83 | validatorConfirmPassword(rule, value, callback) { |
| 84 | // const { newPassword } = this.form | 84 | const { newPassword } = this.form |
| 85 | // if (value !== newPassword) { | 85 | if (value !== newPassword) { |
| 86 | // callback('两次输入密码不一致') | 86 | callback('两次输入密码不一致') |
| 87 | // } else { | 87 | } else { |
| 88 | // callback() | 88 | callback() |
| 89 | // } | 89 | } |
| 90 | // }, | 90 | }, |
| 91 | // updatePassword() { | 91 | // 确认修改 |
| 92 | updatePassword() { | ||
| 92 | // this.$refs.form.validate((valid) => { | 93 | // this.$refs.form.validate((valid) => { |
| 93 | // if (valid) { | 94 | // if (valid) { |
| 94 | // const params = Object.assign({}, this.form, { id: this.userId }) | 95 | // const params = Object.assign({}, this.form, { id: this.userId }) |
| ... | @@ -101,8 +102,8 @@ export default { | ... | @@ -101,8 +102,8 @@ export default { |
| 101 | // }) | 102 | // }) |
| 102 | // } | 103 | // } |
| 103 | // }) | 104 | // }) |
| 104 | // } | 105 | } |
| 105 | // } | 106 | } |
| 106 | } | 107 | } |
| 107 | </script> | 108 | </script> |
| 108 | 109 | ... | ... |
| ... | @@ -24,7 +24,6 @@ | ... | @@ -24,7 +24,6 @@ |
| 24 | @p-current-change="handleCurrentChange" | 24 | @p-current-change="handleCurrentChange" |
| 25 | :column="tableData.columns" | 25 | :column="tableData.columns" |
| 26 | :data="tableData.data" | 26 | :data="tableData.data" |
| 27 | :key="key" | ||
| 28 | :expand-row-keys="keyList" row-key="dictid" | 27 | :expand-row-keys="keyList" row-key="dictid" |
| 29 | > | 28 | > |
| 30 | </lb-table> | 29 | </lb-table> | ... | ... |
-
Please register or sign in to post a comment