Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
e58720db by xiaomiao
Options

优化代码

1 parent ec4ff21e
Inline Side-by-side
Showing 17 changed files with 185 additions and 213 deletions
......@@ -3,69 +3,69 @@
</template>
<script>
import tdTheme from './theme.json' // 引入默认主题
import '../map/hanzhong.js'
import tdTheme from "./theme.json"; // 引入默认主题
import "../map/hanzhong.js";
export default {
name: 'echart',
name: "echart",
props: {
className: {
type: String,
default: 'chart'
default: "chart",
},
id: {
type: String,
default: 'chart'
default: "chart",
},
width: {
type: String,
default: '100%'
default: "100%",
},
height: {
type: String,
default: '2.5rem'
default: "2.5rem",
},
options: {
type: Object,
default: () => ({})
}
default: () => ({}),
},
},
data () {
data() {
return {
chart: null
}
chart: null,
};
},
watch: {
options: {
handler (options) {
handler(options) {
// 设置true清空echart缓存
this.chart.setOption(options, true)
window.addEventListener('resize',()=>{
this.chart.resize()
})
},
deep: true
this.chart.setOption(options, true);
window.addEventListener("resize", () => {
if (this.chart) {
this.chart.resize();
}
});
},
deep: true,
},
},
mounted () {
this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
mounted() {
this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
this.initChart();
},
beforeDestroy () {
this.chart.dispose()
this.chart = null
beforeDestroy() {
this.chart.dispose();
this.chart = null;
},
methods: {
initChart () {
initChart() {
// 初始化echart
this.chart = this.$echarts.init(this.$el, 'tdTheme')
function nowSize(val,initWidth=1920){
return val * (nowClientWidth/initWidth);
}
this.chart.setOption(this.options, true)
}
this.chart = this.$echarts.init(this.$el, "tdTheme");
function nowSize(val, initWidth = 1920) {
return val * (nowClientWidth / initWidth);
}
}
this.chart.setOption(this.options, true);
},
},
};
</script>
......
<template>
<!-- 柱状图 -->
<Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
<!--上报统计柱状图 -->
<Echart
:options="options"
id="bottomLeftChart"
height="100%"
width="100%"
></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
data () {
data() {
return {
options: {},
};
......@@ -22,16 +27,13 @@ export default {
},
watch: {
cdata: {
handler (newData) {
handler(newData) {
this.options = {
legend: {
data: ["成功", "失败"],
icon: "circle",
textStyle: {
color: "#B4B4B4",
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
top: "10%",
right: "5%",
},
grid: {
left: "5%",
......@@ -72,23 +74,46 @@ export default {
name: "成功",
type: "bar",
stack: "总量",
barWidth: 10,
barWidth: 18,
label: {
show: true,
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
},
itemStyle: {
normal: {
// 这里设置圆角
color: "#16F4D2",
}
},
},
data: newData.barData,
},
{
name: "失败",
type: "bar",
stack: "总量",
label: {
show: true,
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
},
itemStyle: {
normal: {
// 这里设置圆角
color: "#C99E68"
color: "#C99E68",
},
},
data: newData.lineData,
......
<template>
<!-- 柱状图 -->
<!--登记类型总量柱状图 -->
<Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class="" ></Echart>
</template>
......@@ -27,7 +27,7 @@ export default {
grid: {
// 让图表占满容器
top: "20%",
left: "12%",
left: "10%",
right: "5%",
bottom: "16%",
},
......
<template>
<!-- 登记类型总量 -->
<Chart :cdata="cdata" />
</template>
......
<template>
<Echart :options="options" id="centreLeft1Chart" :key="key" height="1.0417rem" width="80%"></Echart>
<Echart
:options="options"
id="centreLeft1Chart"
:key="key"
height="1.0417rem"
width="80%"
></Echart>
</template>
<script>
import Echart from '@/common/echart'
import Echart from "@/common/echart";
export default {
components: {
Echart,
},
data() {
return {
key:0
}
key: 0,
};
},
props: {
cdata: {
type: Object,
default: () => ({})
default: () => ({}),
},
},
watch: {
cdata: {
handler (newData) {
console.log("newData",newData);
handler(newData) {
let pieColors = ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de"];
let richColor = {};
pieColors.forEach((item, idx) => {
richColor[`color${idx}`] = {
fontSize: 10,
color: item,
};
});
let chartData = [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
];
this.options = {
grid: {
right:"1%",
bottom:"4%"
},
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#8378ea",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
series: [
{
name: "业务量",
name: "Access From",
type: "pie",
radius: [20,100],
roseType: "area",
data: newData.seriesData
radius: ["54%", "70%"],
avoidLabelOverlap: true,
label: {
formatter: (params) => {
// console.log(params)
return `{color${params.dataIndex}|${params.name}(${params.value})}`;
},
rich: richColor,
},
labelLine: {
lineStyle: {
width: 3,
},
},
data: newData.seriesData,
}
],
}
this.key++
};
this.key++;
},
immediate: true,
deep: true
}
}
deep: true,
},
},
};
</script>
<style lang="scss" scoped>
#centreLeft1Chart {
margin-bottom: .0521rem;
margin-left:60px;
margin-bottom: 0.0521rem;
margin-left: .3125rem;
}
</style>
......
......@@ -8,7 +8,7 @@
import Chart from "./Chart";
import work from "@/api/work";
export default {
data () {
data() {
return {
cdata: {
seriesData: [],
......@@ -18,40 +18,44 @@ export default {
components: {
Chart,
},
mounted () {
mounted() {
this.getdjywltotal();
window.addEventListener("resize", () => {
this.cdata.seriesData = [];
this.getdjywltotal();
});
},
methods: {
// 获取登记业务量玫瑰图数据
async getdjywltotal () {
this.cdata.seriesData=[]
async getdjywltotal() {
if (this.cdata.seriesData.length == 0) {
try {
let p = {
DJLX: "",
QLLX: "",
XZQDM: "",
};
this.cdata.seriesData = [];
let res = await work.getdjywltotal(p);
// 遍历修改数组键，作为echars图表的参数
if(this.cdata.seriesData.length == 0){
res.result.map((item) => {
return (
this.cdata.seriesData.push({ "name": item.AREACODE, "value": item.ywtotal })
return this.cdata.seriesData.push({
name: item.AREACODE,
value: item.ywtotal,
});
)
});
} catch (error) {
console.log(error);
}
// 遍历修改数组键，作为echars图表的参数
} catch (error) {
console.log(error);
}
}
},
},
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
......
......@@ -129,7 +129,6 @@ export default {
if (!this.heightNumSetting) {
let _this = this
if (this.heightNum) {
console.log("this.heightNum``",this.heightNum);
_this.$nextTick(() => {
window.addEventListener('resize', () => {
......
<template>
<div
class="ScaleBox"
ref="ScaleBox"
:style="{
width: width + 'px',
height: height + 'px',
}"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: "ScaleBox",
props: {},
data() {
return {
scale: 0,
width: 1920,
height: 1080,
};
},
mounted() {
this.setScale();
window.addEventListener("resize", this.debounce(this.setScale));
},
methods: {
getScale() {
// 固定好16：9的宽高比，计算出最合适的缩放比
const { width, height } = this;
const wh = window.innerHeight / height;
const ww = window.innerWidth / width;
console.log(ww < wh ? ww : wh);
return ww < wh ? ww : wh;
},
setScale() {
// 获取到缩放比例，设置它
this.scale = this.getScale();
if (this.$refs.ScaleBox) {
this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
}
},
debounce(fn, delay) {
const delays = delay || 500;
let timer;
return function () {
const th = this;
const args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delays);
};
},
},
};
</script>
<style lang="scss">
#ScaleBox {
--scale: 1;
}
.ScaleBox {
position: absolute;
transform: scale(var(--scale)) translate(-50%, -50%);
display: flex;
flex-direction: column;
transform-origin: 0 0;
left: 50%;
top: 50%;
transition: 0.1s;
z-index: 999;
// background: rgba(255, 0, 0, 0.3);
}
</style>
......@@ -129,7 +129,7 @@ export default {
position: relative;
text-align: center;
width: 100%;
height: 25%;
height: 22%;
}
.carda {
background: url("~@/image/sthj.png") no-repeat;
......@@ -137,7 +137,7 @@ export default {
position: relative;
text-align: center;
width: 100%;
height: 25%;
height: 22%;
}
// .card1 {
......@@ -192,8 +192,8 @@ export default {
font-weight: 700;
width: .195rem;
height: .2475rem;
font-size: .1863rem;
font-size: .1867rem;
font-size: .2863rem;
font-size: .2867rem;
}
}
......
......@@ -44,16 +44,12 @@ export default {
async addhousetotal () {
try {
let {result:res}= await work.addhousetotal();
console.log("resultssssssssssss",res);
res.map((item,index) => {
console.log("item",item);
console.log("index",index);
return (
this.config.data.push([index,item.fwyt,item.fwxz,item.mj])
)
});
console.log("this.config.data",this.config.data);
} catch (error) {
console.log("error",error);
}
......@@ -115,6 +111,15 @@ export default {
margin: 0 auto;
height: 1.1031rem;
margin-top: .0521rem;
/deep/.header{
font-size: .0738rem;
}
/deep/.rows{
.ceil{
font-size: .0738rem;
color: #6BC1FC
}
}
}
}
......
......@@ -7,7 +7,6 @@
</template>
<script>
import "@/utils/flexible.js";
import ScaleBox from "./box.vue";
import drawMixin from "@/utils/drawMixin";
import leftcard from "./leftcard";
import centercard from "./centercard";
......@@ -22,8 +21,7 @@ export default {
components: {
leftcard,
centercard,
rightcard,
ScaleBox,
rightcard
},
mounted () {
// this.timeFn();
......
......@@ -343,7 +343,6 @@ export default {
},
// 上移下移
moveUpward (index, row) {
console.log("row上移", row);
realMove(row.dictid, "UP", this.tableData);
let id = findParents(this.tableData, row.dictid);
......@@ -351,7 +350,6 @@ export default {
this.key++;
},
moveDown (index, row) {
console.log("row下移", row);
realMove(row.dictid, "DOWN", this.tableData);
let id = findParents(this.tableData, row.dictid);
this.keyList = id;
......
......@@ -188,7 +188,8 @@ export default {
// }
// })
// },
// updateInfo() {
// 更新信息
updateInfo() {
// this.$refs.form.validate((valid) => {
// if (valid) {
// putAction(`${api.users}/${this.form.id}`, this.form).then((res) => {
......@@ -201,14 +202,14 @@ export default {
// })
// }
// })
// }
}
}
}
</script>
<style scoped lang="scss">
.user-info {
margin: 36px 200px;
margin: .1875rem 1.0417rem;
background: #ffffff;
max-height: 90%;
overflow-y: auto;
......
<template>
<div class="information from-clues">
<div class="from-clues-header">
<el-form ref="ruleForm" :model="form" label-width="100px">
<el-form ref="ruleForm" label-width="100px">
<el-form-item>
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
<el-col :span="3" class="btnColRight">
<btn nativeType="cx" @click="information()">基本信息</btn>
<btn nativeType="cx" @click="password()">修改秘密</btn>
<btn nativeType="cx" @click="information">基本信息</btn>
<btn nativeType="cx" @click="password">修改密码</btn>
</el-col>
</el-row>
</el-form>
</div>
<div class="from-clues-content">
<div class="contentbox">
<base-set :user-info="userData" v-show="isshow" />
<password-edit :user-info="userData" v-show="!isshow" />
<base-set v-show="isshow" />
<password-edit v-show="!isshow" />
</div>
</div>
<edit-dialog ref="dialogForm" />
<authorizationdiglog ref="rolesForm" />
</div>
</template>
<script>
import "@/utils/flexible.js";
import BaseSet from "./base-set.vue";
import PasswordEdit from "./password-edit.vue";
export default {
......@@ -53,6 +52,7 @@ export default {
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
.information{
.btnColRight{
......@@ -76,7 +76,7 @@ export default {
}
}
.contentbox{
height: 650px;
height: 3.0854rem;
}
}
......
......@@ -79,16 +79,17 @@ export default {
// }
},
mounted() {},
// methods: {
// validatorConfirmPassword(rule, value, callback) {
// const { newPassword } = this.form
// if (value !== newPassword) {
// callback('两次输入密码不一致')
// } else {
// callback()
// }
// },
// updatePassword() {
methods: {
validatorConfirmPassword(rule, value, callback) {
const { newPassword } = this.form
if (value !== newPassword) {
callback('两次输入密码不一致')
} else {
callback()
}
},
// 确认修改
updatePassword() {
// this.$refs.form.validate((valid) => {
// if (valid) {
// const params = Object.assign({}, this.form, { id: this.userId })
......@@ -101,8 +102,8 @@ export default {
// })
// }
// })
// }
// }
}
}
}
</script>
......
......@@ -24,7 +24,6 @@
@p-current-change="handleCurrentChange"
:column="tableData.columns"
:data="tableData.data"
:key="key"
:expand-row-keys="keyList" row-key="dictid"
>
</lb-table>
......