Skip to content

bdc / bdcjg-web

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

样式调整

1 parent eb96e55d
Inline Side-by-side
Showing 9 changed files with 402 additions and 365 deletions
......@@ -3,47 +3,47 @@
</template>
<script>
import Chart from "./Chart";
import work from "@/api/work";
export default {
data() {
return {
cdata: {
category: [],
lineData: [],
barData: [],
},
};
},
components: {
Chart,
},
mounted() {
window.addEventListener("resize", () => {
import Chart from "./Chart";
import work from "@/api/work";
export default {
data () {
return {
cdata: {
category: [],
lineData: [],
barData: [],
},
};
},
components: {
Chart,
},
mounted () {
window.addEventListener("resize", () => {
this.submitViews();
});
this.submitViews();
});
this.submitViews();
},
methods: {
async submitViews() {
try {
let { result: res } = await work.submitViews("A20");
this.cdata.category = [];
this.cdata.barData = [];
this.cdata.lineData = [];
res.map((item) => {
return (
this.cdata.category.push(item.areaName),
this.cdata.barData.push(item.successCount),
this.cdata.lineData.push(item.failureCount)
);
});
} catch (error) {
// this.$refs.msg.messageShow();
}
},
},
};
methods: {
async submitViews () {
try {
let { result: res } = await work.submitViews("A20");
this.cdata.category = [];
this.cdata.barData = [];
this.cdata.lineData = [];
res.map((item) => {
return (
this.cdata.category.push(item.areaName),
this.cdata.barData.push(item.successCount),
this.cdata.lineData.push(item.failureCount)
);
});
} catch (error) {
// this.$refs.msg.messageShow();
}
},
},
};
</script>
<style lang="scss" scoped></style>
......
......@@ -7,257 +7,257 @@
ref="centreLeft2ChartRef"
width="100%"
height="100%"
:options="options"
></Echart>
:options="options"></Echart>
</template>
<script>
import Echart from "@/common/echart";
import { mapGetters } from "vuex";
export default {
data() {
return {
options: {},
max: "100", //最大value值
min: "1", // 最小value值
key: 0,
mapjson: "",
};
},
components: {
Echart,
},
created() {},
props: {
cdata: {
type: Array,
default: () => [],
import Echart from "@/common/echart";
import { mapGetters } from "vuex";
export default {
data () {
return {
options: {},
max: "100", //最大value值
min: "1", // 最小value值
key: 0,
mapjson: "",
};
},
},
mounted() {
components: {
Echart,
},
created () { },
props: {
cdata: {
type: Array,
default: () => [],
},
},
mounted () {
window.addEventListener("resize", () => {
this.key++;
});
window.addEventListener("resize", () => {
this.key++;
});
this.getDistrictcode();
},
watch: {
cdata: {
handler(newData) {
let _this = this;
// 设置点的位置(经纬度)
const geoCoordMap = {
汉台区: [107.03187, 33.06774, 20],
南郑区: [106.94024, 33.00299, 20],
城固县: [107.33367, 33.15661, 20],
洋县: [107.545837, 33.222739, 20],
西乡县: [107.76867, 32.98411, 20],
镇巴县: [107.89648, 32.53487, 20],
勉县: [106.673221, 33.153553, 20],
留坝县: [106.92233, 33.61606, 20],
佛坪县: [107.98974, 33.52496, 20],
宁强县: [106.25958, 32.82881, 20],
略阳县: [106.15399, 33.33009, 20],
};
this.options = {
showLegendSymbol: true,
tooltip: {
trigger: "item",
textStyle: {
fontSize: 14,
lineHeight: 22,
},
position: (point) => {
// 固定在顶部
return [point[0] + 50, point[1] - 20];
},
// 如果需要自定义 tooltip样式，需要使用formatter
formatter: (params) => {
return `<div style="">${params.name}:${
params.value + "个"
}</div>`;
},
},
visualMap: {
min: 0,
max: _this.max,
bottom: "13%",
left: 50,
splitNumber: 6,
seriesIndex: [0],
itemWidth: 20, // 每个图元的宽度
itemGap: 2, // 每两个图元之间的间隔距离，单位为px
pieces: [
// 自定义每一段的范围，以及每一段的文字
{ gte: 100, label: "100以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 50, lte: 6000, label: "20-100", color: "#3375e4" },
{ gte: 20, lte: 2000, label: "1-200", color: "#6797ef" },
{ gte: 1, lte: 1000, label: "1-20", color: "#96b5ef" },
],
textStyle: {
color: "#737373",
},
watch: {
cdata: {
handler (newData) {
let _this = this;
// 设置点的位置(经纬度)
const geoCoordMap = {
汉台区: [107.03187, 33.06774, 20],
南郑区: [106.94024, 33.00299, 20],
城固县: [107.33367, 33.15661, 20],
洋县: [107.545837, 33.222739, 20],
西乡县: [107.76867, 32.98411, 20],
镇巴县: [107.89648, 32.53487, 20],
勉县: [106.673221, 33.153553, 20],
留坝县: [106.92233, 33.61606, 20],
佛坪县: [107.98974, 33.52496, 20],
宁强县: [106.25958, 32.82881, 20],
略阳县: [106.15399, 33.33009, 20],
};
this.options = {
showLegendSymbol: true,
tooltip: {
trigger: "item",
textStyle: {
fontSize: 14,
lineHeight: 22,
},
position: (point) => {
// 固定在顶部
return [point[0] + 50, point[1] - 20];
},
// 如果需要自定义 tooltip样式，需要使用formatter
formatter: (params) => {
return `<div style="">${params.name}:${params.value + "个"
}</div>`;
},
},
},
geo: {
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: "", // 自定义扩展图表类型
top: "15%",
left: "10%",
map: "汉中市",
itemStyle: {
normal: {
//阴影
areaColor: "#5689FD ",
shadowColor: "#21371d",
borderWidth: 0,
shadowOffsetX: 2,
shadowOffsetY: 25,
visualMap: {
min: 0,
max: _this.max,
bottom: "13%",
left: 50,
splitNumber: 6,
seriesIndex: [0],
itemWidth: 20, // 每个图元的宽度
itemGap: 2, // 每两个图元之间的间隔距离，单位为px
pieces: [
// 自定义每一段的范围，以及每一段的文字
{ gte: 100, label: "100以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 50, lte: 6000, label: "20-100", color: "#3375e4" },
{ gte: 20, lte: 2000, label: "1-200", color: "#6797ef" },
{ gte: 1, lte: 1000, label: "1-20", color: "#96b5ef" },
],
textStyle: {
color: "#737373",
},
},
},
series: [
{
type: "map",
geo: {
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: "汉中市", // 自定义扩展图表类型
mapType: "", // 自定义扩展图表类型
top: "15%",
left: "10%",
map: "汉中市",
itemStyle: {
normal: {
areaColor: "rgba(19,54,162,.5)",
borderColor: "rgba(0,242,252,.5)",
borderWidth: 2,
shadowBlur: 1,
borderColor: "rgb(155, 200, 200)",
shadowColor: "#44f2fc",
//阴影
areaColor: "#5689FD ",
shadowColor: "#21371d",
borderWidth: 0,
shadowOffsetX: 2,
shadowOffsetY: 25,
},
},
label: {
formatter: (params) => {
return `${params.name}\n${params.value + "个"}`;
},
show: true,
position: "insideRight",
textStyle: {
fontSize: 14,
color: "#efefef",
},
series: [
{
type: "map",
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: "汉中市", // 自定义扩展图表类型
top: "15%",
left: "10%",
itemStyle: {
normal: {
areaColor: "rgba(19,54,162,.5)",
borderColor: "rgba(0,242,252,.5)",
borderWidth: 2,
shadowBlur: 1,
borderColor: "rgb(155, 200, 200)",
shadowColor: "#44f2fc",
},
},
emphasis: {
label: {
formatter: (params) => {
return `${params.name}\n${params.value + "个"}`;
},
show: true,
position: "insideRight",
textStyle: {
color: "#fff",
fontSize: 14,
color: "#efefef",
},
emphasis: {
textStyle: {
color: "#fff",
},
},
},
data: newData,
},
data: newData,
},
],
};
// 重新选择区域
this.handleMapRandomSelect();
},
],
};
// 重新选择区域
this.handleMapRandomSelect();
},
immediate: true,
deep: true,
},
},
computed: {
...mapGetters(["sidebar", "dicData"]),
logoName() {
return (
this.dicData["sysCode"] &&
this.dicData["sysCode"].filter((item) => item.DCODE == "areaMap")
);
},
},
methods: {
// 根据行政区代码匹配行政区
getDistrictcode() {
console.log("this.logoName.DNAME", this.logoName.DNAME);
if ((this.logoName.DNAME = "map610700")) {
this.mapjson = "hanzhong";
require(`@/common/map/${this.mapjson}.js`);
}
immediate: true,
deep: true,
},
},
// 开启定时器
startInterval() {
const _self = this;
// 应通过接口获取配置时间，暂时写死5s
const time = 2000;
if (this.intervalId !== null) {
clearInterval(this.intervalId);
}
this.intervalId = setInterval(() => {
this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea();
}, time);
computed: {
...mapGetters(["sidebar", "dicData"]),
logoName () {
return (
this.dicData["sysCode"] && this.dicData["sysCode"].filter((item) => { return item.DCODE == "areaMap" })
);
},
},
// 重新随机选中地图区域
reSelectMapRandomArea() {
const length = 9;
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
let index = Math.floor(Math.random() * length);
while (index === this.preSelectMapIndex || index >= length) {
index = Math.floor(Math.random() * length);
}
map.dispatchAction({
type: "mapUnSelect",
seriesIndex: 0,
dataIndex: this.preSelectMapIndex,
});
map.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index,
});
map.dispatchAction({
type: "mapSelect",
seriesIndex: 0,
dataIndex: index,
});
this.preSelectMapIndex = index;
} catch (error) {
console.log(error);
methods: {
// 根据行政区代码匹配行政区
getDistrictcode () {
this.mapjson = ""
if ((this.logoName[0].DNAME == "hanzhong")) {
this.mapjson = "hanzhong";
require(`@/common/map/${this.mapjson}.js`);
} else {
this.mapjson = "yushu";
require(`@/common/map/${this.mapjson}.js`);
}
});
},
handleMapRandomSelect() {
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
const _self = this;
setTimeout(() => {
_self.reSelectMapRandomArea();
}, 0);
// 移入区域，清除定时器、取消之前选中并选中当前
map.on("mouseover", function (params) {
clearInterval(_self.intervalId);
},
// 开启定时器
startInterval () {
const _self = this;
// 应通过接口获取配置时间，暂时写死5s
const time = 2000;
if (this.intervalId !== null) {
clearInterval(this.intervalId);
}
this.intervalId = setInterval(() => {
this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea();
}, time);
},
// 重新随机选中地图区域
reSelectMapRandomArea () {
const length = 9;
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
let index = Math.floor(Math.random() * length);
while (index === this.preSelectMapIndex || index >= length) {
index = Math.floor(Math.random() * length);
}
map.dispatchAction({
type: "mapUnSelect",
seriesIndex: 0,
dataIndex: _self.preSelectMapIndex,
dataIndex: this.preSelectMapIndex,
});
map.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index,
});
map.dispatchAction({
type: "mapSelect",
seriesIndex: 0,
dataIndex: params.dataIndex,
dataIndex: index,
});
_self.preSelectMapIndex = params.dataIndex;
});
// 移出区域重新随机选中地图区域，并开启定时器
map.on("globalout", function () {
_self.reSelectMapRandomArea();
_self.startInterval();
});
this.startInterval();
} catch (error) {
console.log(error);
}
});
this.preSelectMapIndex = index;
} catch (error) {
console.log(error);
}
});
},
handleMapRandomSelect () {
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
const _self = this;
setTimeout(() => {
_self.reSelectMapRandomArea();
}, 0);
// 移入区域，清除定时器、取消之前选中并选中当前
map.on("mouseover", function (params) {
clearInterval(_self.intervalId);
map.dispatchAction({
type: "mapUnSelect",
seriesIndex: 0,
dataIndex: _self.preSelectMapIndex,
});
map.dispatchAction({
type: "mapSelect",
seriesIndex: 0,
dataIndex: params.dataIndex,
});
_self.preSelectMapIndex = params.dataIndex;
});
// 移出区域重新随机选中地图区域，并开启定时器
map.on("globalout", function () {
_self.reSelectMapRandomArea();
_self.startInterval();
});
this.startInterval();
} catch (error) {
console.log(error);
}
});
},
},
},
};
};
</script>
<style></style>
......
......@@ -505,4 +505,17 @@ tr:hover {
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: transparent !important;
}
\ No newline at end of file
}
// 提示框
.el-message-box {
background-color: #031a46;
border: 1px solid #5f82c7;
.el-message-box__title{
color: white;
}
.el-message-box__content{
color: white;
}
}
......
......@@ -198,4 +198,5 @@
.btnColRight {
box-sizing: border-box;
text-align: right;
}
\ No newline at end of file
}
......
......@@ -19,131 +19,136 @@
</template>
<script>
import columnarsmat from "@/components/Echart/Columnarsmat";
import Rose from "@/components/Echart/Rose";
import work from "@/api/work";
export default {
data () {
return {
config: {
headerBGC: '#016AC5',
oddRowBGC: '#154295',
evenRowBGC: '#154295',
header: ['序号', '用途', '性质', '面积'],
data: [],
key: 0
import columnarsmat from "@/components/Echart/Columnarsmat";
import Rose from "@/components/Echart/Rose";
import work from "@/api/work";
export default {
data () {
return {
config: {
headerBGC: '#016AC5',
oddRowBGC: '#154295',
evenRowBGC: '#154295',
header: ['序号', '用途', '性质', '面积'],
data: [],
key: 0
}
}
}
},
components: { columnarsmat, Rose },
mounted () {
this.addhousetotal();
// scroll(tableref.value.$refs.bodyWrapper);//设置滚动
},
methods: {
async addhousetotal () {
try {
let { result: res } = await work.addhousetotal();
res.map((item, index) => {
return (
this.config.data.push([index, item.fwyt, item.fwxz, item.mj])
)
});
} catch (error) {
console.log("error", error);
},
components: { columnarsmat, Rose },
mounted () {
this.addhousetotal();
// scroll(tableref.value.$refs.bodyWrapper);//设置滚动
},
methods: {
async addhousetotal () {
try {
let { result: res } = await work.addhousetotal();
res.map((item, index) => {
return (
this.config.data.push([index, item.fwyt, item.fwxz, item.mj])
)
});
} catch (error) {
console.log("error", error);
}
}
}
}
}
</script>
<style lang="scss" scoped>
/deep/.row-item:not(:last-child) {
margin-bottom: .026rem;
}
.rightcard {
width: 32%;
display: flex;
height: calc(100vh - 114px);
flex-direction: column;
.cardhead {
font-size: .1042rem;
font-weight: bold;
color: #02D9FD;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: .0625rem;
text-align: center;
/deep/.row-item:not(:last-child) {
margin-bottom: 0.026rem;
}
.cardcontent {
width: 100%;
height: 100%;
display: -webkit-box;
overflow: hidden;
.rightcard {
width: 32%;
display: flex;
height: calc(100vh - 114px);
flex-direction: column;
.nodata {
font-size: .1042rem;
color: #02D9FD;
.cardhead {
font-size: 0.1042rem;
font-weight: bold;
margin: auto;
margin-top: 120px;
color: #02d9fd;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 0.0625rem;
text-align: center;
}
}
.cardCon {
padding: .0521rem .026rem;
position: relative;
text-align: center;
width: 100%;
}
.cardcontent {
width: 100%;
height: 100%;
display: -webkit-box;
overflow: hidden;
.nodata {
font-size: 0.1042rem;
color: #02d9fd;
font-weight: bold;
margin: auto;
margin-top: 120px;
}
}
.card1 {
height: 33%;
background: url("~@/image/xjgyfwxx.png") no-repeat;
background-size: 100% 100%;
.cardCon {
padding: 0.0521rem 0.026rem;
position: relative;
text-align: center;
width: 100%;
}
.board {
width: 90%;
margin: 0 auto;
height: 1.1031rem;
margin-top: .0521rem;
/deep/.header{
font-size: .0738rem;
.card1 {
height: 33%;
background: url("~@/image/xjgyfwxx.png") no-repeat;
background-size: 100% 100%;
/deep/.dv-scroll-board {
.header {
height: 0.1875rem;
align-items: center;
}
}
/deep/.rows{
.ceil{
font-size: .0738rem;
color: #6BC1FC
}
.board {
width: 90%;
margin: 0 auto;
height: 1.1031rem;
margin-top: 0.0521rem;
/deep/.header {
font-size: 0.0738rem;
}
/deep/.rows {
.ceil {
font-size: 0.0738rem;
color: #6bc1fc;
}
}
}
}
}
.card2 {
height: 33%;
background: url("~@/image/djywl.png") no-repeat;
background-size: 100% 100%;
padding: .3825rem 0 0 0;
}
.card2 {
height: 33%;
background: url("~@/image/djywl.png") no-repeat;
background-size: 100% 100%;
padding: 0.3825rem 0 0 0;
}
.card3 {
height: 33%;
flex: 1;
background: url("~@/image/djlxzl.png") no-repeat;
background-size: 100% 100%;
padding-bottom: 0;
.card3 {
height: 33%;
flex: 1;
background: url("~@/image/djlxzl.png") no-repeat;
background-size: 100% 100%;
padding-bottom: 0;
.cardhead {
top: .0417rem;
.cardhead {
top: 0.0417rem;
}
}
}
.cardhead {
position: absolute;
.cardhead {
position: absolute;
}
}
}
</style>
......
......@@ -15,8 +15,8 @@
</div>
<div class="from-clues-content">
<div class="contentbox">
<base-set v-show="isshow" :userInfo="userData" />
<password-edit v-show="!isshow" :userInfo="userData" />
<base-set v-if="isshow" :userInfo="userData" />
<password-edit v-if="!isshow" :userInfo="userData" />
</div>
</div>
</div>
......
......@@ -176,4 +176,11 @@
top: 15px;
right: 30px;
}
/deep/.el-dialog__header {
text-align: center;
margin-bottom: 10px;
.el-dialog__title {
color: white;
}
}
</style>
......
......@@ -114,7 +114,7 @@
{ required: true, message: "请输入用户名", trigger: "blur" },
],
},
title: "",
title: "修改",
visible: false,
showLoginName: false,
sexList: [{ lable: "0", value: "0", name: "男" }, { lable: "1", value: "1", name: "女" }],
......@@ -230,4 +230,14 @@
/deep/.el-form-item__label {
color: #fff;
}
/deep/.el-dialog__body {
padding-top: 20px;
}
/deep/.el-dialog__header {
text-align: center;
margin-bottom: 10px;
.el-dialog__title {
color: white;
}
}
</style>
......
......@@ -316,4 +316,5 @@
.btnColRight {
margin-top: 20px;
}
</style>
......