Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
lnn19986213 2024-06-20 09:51:58 +08:00
commit c988a20637
4 changed files with 564 additions and 104 deletions

View File

@ -58,13 +58,14 @@
</div> </div>
<div class="minTopTitle"></div> <div class="minTopTitle"></div>
<div class="minTopNum"> <div class="minTopNum">
<div <!-- <div
class="numItem" class="numItem"
v-for="(item, index) in minData.minTop" v-for="(item, index) in minData.minTop"
:key="index" :key="index"
> >
{{ item }} {{ item }}
</div> </div> -->
<FlipClock :list="minData.minTop"></FlipClock>
</div> </div>
<div style="overflow: hidden; margin-top: 20px"> <div style="overflow: hidden; margin-top: 20px">
<div class="minPie"> <div class="minPie">
@ -155,6 +156,7 @@ import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
import edxs from "./echart_analyze/edXS.vue"; import edxs from "./echart_analyze/edXS.vue";
import eP2 from "./echart_analyze/eP2.vue"; import eP2 from "./echart_analyze/eP2.vue";
import ylXZZC from "./echart_analyze/ylXZZC.vue"; import ylXZZC from "./echart_analyze/ylXZZC.vue";
import FlipClock from "./echart_analyze/FlipClock.vue";
import ViewDataimg from "@/assets/images/sjfx/sjfx.png"; import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png"; import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
@ -267,7 +269,8 @@ const data = reactive({
zccs2: ["100", "130", "220"], // zccs2: ["100", "130", "220"], //
}); });
const minData = reactive({ const minData = reactive({
minTop: ["4", "9", "1", "6", "2", "人"], minTop: 49162,
minTop1: ["4", "9", "1", "6", "2", "人"],
minPieData1: { minPieData1: {
wfgz: "1500", wfgz: "1500",
xstp: "1610", xstp: "1610",

View File

@ -0,0 +1,341 @@
<template>
<div class="flipbox">
<div class="clock" id="clock">
<div v-for="(digit, index) in digits" :key="index" class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
</div>
<div class="flip1"></div>
</div>
</template>
<script setup>
import { onMounted, onBeforeMount, ref, reactive, defineProps } from "vue";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const data = reactive({
list: [],
});
class Flipper {
constructor(config) {
this.config = Object.assign(
{
node: null,
frontText: "number0",
backText: "number1",
duration: 200,
},
config
);
this.nodeClass = {
flip: "flip",
front: "digital front",
back: "digital back",
};
this.frontNode = this.config.node.querySelector(".front");
this.backNode = this.config.node.querySelector(".back");
this.isFlipping = false;
this._init();
}
_init() {
this._setFront(this.config.frontText);
this._setBack(this.config.backText);
}
_setFront(className) {
this.frontNode.setAttribute(
"class",
this.nodeClass.front + " " + className
);
}
_setBack(className) {
this.backNode.setAttribute("class", this.nodeClass.back + " " + className);
}
_flip(type, front, back) {
if (this.isFlipping) return;
this.isFlipping = true;
this._setFront(front);
this._setBack(back);
let flipClass = this.nodeClass.flip;
if (type === "down") flipClass += " down";
this.config.node.setAttribute("class", flipClass + " go");
setTimeout(() => {
this.config.node.setAttribute("class", flipClass);
this.isFlipping = false;
this._setFront(back);
}, this.config.duration);
}
flipDown(front, back) {
this._flip("down", front, back);
}
}
function updateCounter(flippers, number) {
const strNumber = number.toString().padStart(5, "0");
for (let i = 0; i < flippers.length; i++) {
const currentDigit = strNumber[i];
const flipper = flippers[i];
flipper.flipDown(`number${flipper.currentDigit}`, `number${currentDigit}`);
flipper.currentDigit = currentDigit;
}
}
const digits = ref([0, 0, 0, 0, 0]);
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
const flips = document.querySelectorAll(".flip");
const flipObjs = [];
for (let i = 0; i < flips.length; i++) {
flipObjs.push(
new Flipper({
node: flips[i],
frontText: "number0",
backText: "number0",
})
);
flipObjs[i].currentDigit = 0;
}
const randomNumbers = [2345, 6542, data.list];
let index = 0;
const interval = setInterval(() => {
if (index >= randomNumbers.length) {
clearInterval(interval);
} else {
updateCounter(flipObjs, randomNumbers[index]);
index++;
}
}, 333);
}, 600);
});
</script>
<style scoped>
.flip {
display: inline-block;
position: relative;
width: 66px;
height: 100px;
line-height: 100px;
border: solid 2px rgba(0, 183, 255, 1);
border-radius: 2px;
background: #fff;
font-size: 46px;
color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
text-align: center;
font-family: "Helvetica Neue";
margin-right: 5px;
}
.flipbox {
display: flex;
}
.flip1 {
display: inline-block;
width: 66px;
height: 100px;
line-height: 100px;
font-size: 46px;
text-align: center;
font-family: "Helvetica Neue";
color: #fff;
background: rgba(7, 91, 123, 1);
border: solid 2px rgba(0, 183, 255, 1);
}
.flip .digital:before,
.flip .digital:after {
content: "";
position: absolute;
left: 0;
right: 0;
overflow: hidden;
box-sizing: border-box;
}
.flip .digital:before {
top: 0;
bottom: 50%;
border-radius: 2px 2px 0 0;
background: rgba(7, 91, 123, 1);
}
.flip .digital:after {
top: 50%;
bottom: 0;
border-radius: 0 0 2px 2px;
line-height: 0;
background: rgba(3, 150, 187, 1);
}
.flip.down .front:before {
z-index: 3;
}
.flip.down .back:after {
z-index: 2;
transform-origin: 50% 0%;
transform: perspective(160px) rotateX(180deg);
}
.flip.down .front:after,
.flip.down .back:before {
z-index: 1;
}
.flip.down.go .front:before {
transform-origin: 50% 100%;
animation: frontFlipDown 0.6s ease-in-out both;
box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.flip.down.go .back:after {
animation: backFlipDown 0.6s ease-in-out both;
}
.flip.up .front:after {
z-index: 3;
}
.flip.up .back:before {
z-index: 2;
transform-origin: 50% 100%;
transform: perspective(160px) rotateX(-180deg);
}
.flip.up .front:before,
.flip.up .back:after {
z-index: 1;
}
.flip.up.go .front:after {
transform-origin: 50% 0;
animation: frontFlipUp 0.6s ease-in-out both;
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.flip.up.go .back:before {
animation: backFlipUp 0.6s ease-in-out both;
}
@keyframes frontFlipDown {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(-180deg);
}
}
@keyframes backFlipDown {
0% {
transform: perspective(160px) rotateX(180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
@keyframes frontFlipUp {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(180deg);
}
}
@keyframes backFlipUp {
0% {
transform: perspective(160px) rotateX(-180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
.flip .number0:before,
.flip .number0:after {
content: "0";
}
.flip .number1:before,
.flip .number1:after {
content: "1";
}
.flip .number2:before,
.flip .number2:after {
content: "2";
}
.flip .number3:before,
.flip .number3:after {
content: "3";
}
.flip .number4:before,
.flip .number4:after {
content: "4";
}
.flip .number5:before,
.flip .number5:after {
content: "5";
}
.flip .number6:before,
.flip .number6:after {
content: "6";
}
.flip .number7:before,
.flip .number7:after {
content: "7";
}
.flip .number8:before,
.flip .number8:after {
content: "8";
}
.flip .number9:before,
.flip .number9:after {
content: "9";
}
.clock {
text-align: center;
}
</style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%; height: 260px"></div> <div ref="chart" style="width: 50%; height: 260px"></div>
</template> </template>
<script setup> <script setup>
@ -172,51 +172,51 @@ const getOption1 = () => {
const getOption = () => { const getOption = () => {
data.option = { data.option = {
// //
legend: [ // legend: [
{ // {
orient: "vertical", // orient: "vertical",
right: "5%", // right: "10%",
top: "center", // top: "15%",
type: "scroll", // type: "scroll",
height: "80%", // height: "80%",
itemWidth: 20, // // itemWidth: 20, //
itemHeight: 10, // // itemHeight: 10, //
itemGap: 20, // itemGap: 20,
// itemStyle: { // // itemStyle: {
// borderColor: "rgba(255,255,255,0.2)", // // // borderColor: "rgba(255,255,255,0.2)", //
// borderWidth: 10, // // // borderWidth: 10, //
// borderRadius: 20, // // borderRadius: 20,
// // },
// pageTextStyle: {
// color: "#ffffff",
// fontSize: 14,
// padding: 10,
// }, // },
pageTextStyle: { // textStyle: {
color: "#ffffff", // color: "#ffffff",
fontSize: 14, // fontSize: 14,
padding: 10, // padding: 10,
}, // rich: {
textStyle: { // name: {
color: "#ffffff", // width: 80,
fontSize: 14, // fontSize: 16,
padding: 10, // },
rich: { // },
name: { // },
width: 80, // data: data.list,
fontSize: 16,
},
},
},
data: data.list,
// // //
formatter: function (name) { // formatter: function (name) {
var target; // var target;
for (var i = 0, l = data.list.length; i < l; i++) { // for (var i = 0, l = data.list.length; i < l; i++) {
if (data.list[i].name == name) { // if (data.list[i].name == name) {
target = data.list[i].value; // target = data.list[i].value;
} // }
} // }
return `${name}${target}`; // return `${name}${target} `;
}, // },
}, // },
], // ],
tooltip: { tooltip: {
trigger: "item", trigger: "item",
@ -234,7 +234,7 @@ const getOption = () => {
type: "pie", type: "pie",
roseType: "radius", roseType: "radius",
radius: ["15%", "90%"], radius: ["15%", "90%"],
center: ["35%", "50%"], center: ["45%", "40%"],
label: { label: {
position: "inside", position: "inside",
formatter(item) { formatter(item) {
@ -276,7 +276,7 @@ const getOption = () => {
type: "pie", type: "pie",
roseType: "radius", roseType: "radius",
radius: ["15%", "92%"], radius: ["15%", "92%"],
center: ["35%", "50%"], center: ["45%", "40%"],
label: { label: {
show: false, show: false,
}, },

View File

@ -230,7 +230,22 @@
</div> </div>
</div> </div>
<ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2> <ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
<div class="bt">
<ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie> <ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
<div
class="btList"
ref="mainRef"
@mouseenter="stopAutoScroll"
@mouseleave="startAutoScroll"
>
<div class="btList_item" v-for="(item, index) in btList">
<div class="btList_item_color" :style="bt(index)"></div>
<div class="btList_item_value">
{{ item.name }}{{ item.value }}
</div>
</div>
</div>
</div>
<div class="table"> <div class="table">
<div class="table_choose"> <div class="table_choose">
<div <div
@ -1054,48 +1069,6 @@ const data = reactive({
], ],
}); });
// const tableData = ref([
// {
// company: "",
// address: "",
// finish: true,
// },
// {
// company: "",
// address: "",
// finish: true,
// },
// {
// company: "",
// address: "",
// finish: true,
// },
// {
// company: "",
// address: "",
// finish: false,
// },
// {
// company: "",
// address: "",
// finish: false,
// },
// {
// company: "",
// address: "",
// finish: false,
// },
// {
// company: "",
// address: "",
// finish: false,
// },
// {
// company: "",
// address: "",
// finish: false,
// },
// ]);
const jysyList = ref([ const jysyList = ref([
{ {
title: "县镇", title: "县镇",
@ -1233,9 +1206,25 @@ const getData = async () => {
"nl91100", "nl91100",
"nl100", "nl100",
]; ];
const ageBt = [
"nl110",
"nl1120",
"nl2130",
"nl3140",
"nl4150",
"nl5160",
"nl6170",
"nl7180",
"nl8190",
"nl91100",
"nl100",
];
ageGroupKeys.forEach((key) => { ageGroupKeys.forEach((key) => {
data.ageGroup[key] = res.data.rksj[key]; data.ageGroup[key] = res.data.rksj[key];
}); });
ageBt.forEach((key, index) => {
btList.value[index].value = res.data.rksj[key];
});
} }
// //
const ageRatioKeys = [ const ageRatioKeys = [
@ -1335,9 +1324,6 @@ const qyfyList = reactive([
img: qyfw4, img: qyfw4,
}, },
]); ]);
onBeforeMount(async () => {
getData();
});
// //
const showEc = (val) => { const showEc = (val) => {
@ -1428,6 +1414,107 @@ const showTab = (val) => {
break; break;
} }
}; };
//()
//
const colorList = [
{ color2: "rgba(90,255,223,1)" },
{ color2: "rgba(115,255,145,1)" },
{ color2: "rgba(153,255,179,1)" },
{ color2: "rgba(193,255,138,1)" },
{ color2: "rgba(255,207,74,1)" },
{ color2: "rgba(254,178,128,1)" },
{ color2: "rgba(151,176,255,1)" },
{ color2: "rgba(164,151,255,1)" },
{ color2: "rgba(159,110,254,1)" },
{ color2: "rgba(180,143,241,1)" },
{ color2: "rgba(76,174,254,1)" },
];
const bt = computed(() => {
return function (index) {
let str = `--i:${colorList[index].color2}`;
return str;
};
});
const btList = ref([
{
name: "1-10岁人口总数",
value: "",
},
{
name: "11-20岁人口总数",
value: "",
},
{
name: "21-30岁人口总数",
value: "",
},
{
name: "31-40岁人口总数",
value: "",
},
{
name: "41-50岁人口总数",
value: "",
},
{
name: "51-60岁人口总数",
value: "",
},
{
name: "61-70岁人口总数",
value: "",
},
{
name: "71-80岁人口总数",
value: "",
},
{
name: "81-90岁人口总数",
value: "",
},
{
name: "91-100岁人口总数",
value: "",
},
{
name: "100岁以上人口总数",
value: "",
},
]);
const mainRef = ref(null);
let isAutoScrolling = true;
const stopAutoScroll = () => {
isAutoScrolling = false;
};
const startAutoScroll = () => {
isAutoScrolling = true;
autoScroll();
};
const autoScroll = () => {
if (!isAutoScrolling) return;
const mainEl = mainRef.value;
mainEl.scrollTop += 1; //
if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
setTimeout(() => {
mainEl.scrollTo({ top: 0, behavior: "smooth" });
setTimeout(autoScroll, 2000); // 2
}, 1000); // 1
} else {
requestAnimationFrame(autoScroll);
}
};
onBeforeMount(async () => {
getData();
setTimeout(()=>{
startAutoScroll();
},1000)
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -2365,7 +2452,36 @@ const showTab = (val) => {
} }
} }
} }
//list
.bt {
display: flex;
align-items: center;
}
.btList {
width: 45%;
height: 200px;
overflow-y: auto;
.btList_item {
box-sizing: border-box;
width: 100%;
padding: 5px;
.btList_item_color {
width: 30px;
height: 10px;
background-color: var(--i);
border-radius: 3px;
}
.btList_item_value {
font-size: 18px;
margin-top: 5px;
color: #ffffff;
}
}
}
.btList::-webkit-scrollbar {
display: none;
}
.table { .table {
width: 94%; width: 94%;
margin-left: 5px; margin-left: 5px;