From 90020572d7922536f94df74bcee1ccc3393dd097 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期四, 21 十二月 2023 19:27:17 +0800
Subject: [PATCH] 重庆项目页面布局
---
public/chongqingPublicSecurity/chongqing_bg.png | 0
src/views/ChongqingPublicSecurity/components/TimeWeather.vue | 144 +++++
public/chongqingPublicSecurity/left-top-bg.png | 0
src/views/ChongqingPublicSecurity/components/NuclearMiningCount.vue | 168 ++++++
src/views/ChongqingPublicSecurity/index.vue | 84 +++
src/views/ChongqingPublicSecurity/components/KeyPersonnelManage.vue | 43 +
src/views/ChongqingPublicSecurity/components/SnapFrame.vue | 69 ++
src/components/ChongqingPublicSecurity/BackgroundLayout.vue | 179 +++++++
src/views/ChongqingPublicSecurity/components/PopulationDistributionChart.vue | 368 ++++++++++++++
src/router/index.js | 2
src/views/ChongqingPublicSecurity/components/chart.js | 320 ++++++++++++
src/views/ChongqingPublicSecurity/components/TopRightBlock.vue | 100 ++++
12 files changed, 1,476 insertions(+), 1 deletions(-)
diff --git a/public/chongqingPublicSecurity/chongqing_bg.png b/public/chongqingPublicSecurity/chongqing_bg.png
new file mode 100644
index 0000000..2c468fb
--- /dev/null
+++ b/public/chongqingPublicSecurity/chongqing_bg.png
Binary files differ
diff --git a/public/chongqingPublicSecurity/left-top-bg.png b/public/chongqingPublicSecurity/left-top-bg.png
new file mode 100644
index 0000000..8b56fd1
--- /dev/null
+++ b/public/chongqingPublicSecurity/left-top-bg.png
Binary files differ
diff --git a/src/components/ChongqingPublicSecurity/BackgroundLayout.vue b/src/components/ChongqingPublicSecurity/BackgroundLayout.vue
new file mode 100644
index 0000000..1450843
--- /dev/null
+++ b/src/components/ChongqingPublicSecurity/BackgroundLayout.vue
@@ -0,0 +1,179 @@
+<template>
+ <div class="chongqing-layout">
+ <div class="top">
+ <div class="top-left">
+ <slot name="topBlock1"></slot>
+ </div>
+ <div class="top-middle">
+ <div class="chongqing-title">鍏ㄦ櫙鏁版嵁灞曠ず</div>
+ </div>
+ <div class="top-right">
+ <slot name="topBlock2"></slot>
+ </div>
+ </div>
+ <div class="bottom">
+ <div class="bottom-left">
+ <div class="left-top-Block">
+ <slot name="leftBlock1"></slot>
+ </div>
+ <div class="left-bottom-Block">
+ <slot name="leftBlock2"></slot>
+ </div>
+ </div>
+ <div class="bottom-middle">
+ <slot name="middleBlock1"></slot>
+ </div>
+ <div class="bottom-right">
+ <div class="right-top-Block">
+ <slot name="rightBlock1"></slot>
+ </div>
+ <div class="right-bottom-Block">
+ <slot name="rightBlock2"></slot>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script></script>
+
+<style scoped lang="scss">
+/** 涓� */
+// 涓婅竟鍥哄畾楂�
+$topBlockHeight: 60px;
+// 涓婂乏鍖哄煙瀹�
+$topLeftWidth: 24%;
+// 涓婁腑鍖哄煙瀹�
+$topMiddleWidth: 29%;
+// 涓婂彸鍖哄煙瀹�
+$topRightWidth: 47%;
+// 涓� 宸﹀彸涓婅竟璺�
+$topLeftMarginTop: 15px;
+// 涓� 宸﹀彸楂樺害
+$topLeftHeight: calc(100% - $topLeftMarginTop);
+// 宸﹀彸杈硅窛
+$leftRightMargin: 40px;
+// 宸﹀彸鍐呰竟璺�
+$leftRightPadding: 30px;
+// 涓嬭竟璺�
+$bottomMargin: 40px;
+// 涓婁笅鍐呰竟璺�
+$topBottomPadding: 40px;
+
+/** 涓� */
+// 涓嬭竟鍥哄畾楂樺害
+$bottomBlockHeight: calc(100vh - $topBlockHeight - $bottomMargin);
+// 涓嬪乏渚у尯鍩熷
+$bottomLeftWidth: 29%;
+// 涓棿鍖哄煙瀹�
+$bottomMiddleWidth: 42%;
+// 鍙充晶鍖哄煙瀹�
+$bottomRightWidth: 29%;
+// 鍏叡杈硅窛
+$commonMargin: 40px;
+// 涓� 宸︿笂楂樺害
+$leftTopBlockHeight: 30%;
+// 涓� 宸︿笅楂樺害
+$leftBottomBlockHeight: calc(70% - $commonMargin);
+// 涓� 涓珮搴�
+$leftMiddleBlockHeight: calc(100% - $commonMargin);
+// 涓� 鍙充笂楂樺害
+$rightTopBlockHeight: 48%;
+// 涓� 鍙充笅楂樺害
+$rightBottomBlockHeight: calc(52% - $commonMargin);
+
+$borderColor: #194871;
+$borderWidth: 2px;
+
+.chongqing-layout {
+ background-image: url("/chongqingPublicSecurity/chongqing_bg.png");
+ background-position-x: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ height: 100vh;
+ width: 100vw;
+ &.debug {
+ & > div {
+ border: 1px solid red;
+ & > div {
+ border: 1px solid red;
+ }
+ }
+ }
+}
+
+.top {
+ height: $topBlockHeight;
+ margin: 0 $leftRightMargin;
+ display: flex;
+ align-items: center;
+ background: rgba(3, 10, 14, 0.7);
+ .top-left {
+ width: $topLeftWidth;
+ height: $topLeftHeight;
+ margin-top: $topLeftMarginTop;
+ padding-left: $leftRightPadding;
+ border-top: $borderWidth solid $borderColor;
+ border-right: $borderWidth solid $borderColor;
+ }
+ .top-middle {
+ width: $topMiddleWidth;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-bottom: $borderWidth solid $borderColor;
+ .chongqing-title {
+ text-align: center;
+ font-size: 36px;
+ color: #e49d19;
+ font-weight: bold;
+ font-family: "Arial Negreta", "Arial Normal", "Arial";
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ background-image: linear-gradient(to top, #4ca0ee, #b5e7f3 70%);
+ }
+ }
+
+ .top-right {
+ width: $topRightWidth;
+ height: $topLeftHeight;
+ margin-top: $topLeftMarginTop;
+ border-top: $borderWidth solid $borderColor;
+ border-left: $borderWidth solid $borderColor;
+ padding-right: $leftRightPadding;
+ }
+}
+.bottom {
+ height: $bottomBlockHeight;
+ margin: 0 $leftRightMargin;
+ padding: $topBottomPadding $leftRightPadding;
+ display: flex;
+ .bottom-left {
+ width: $bottomLeftWidth;
+ }
+ .bottom-middle {
+ width: $bottomMiddleWidth;
+ height: $leftMiddleBlockHeight;
+ margin-right: $commonMargin;
+ }
+ .bottom-right {
+ width: $bottomRightWidth;
+ }
+}
+
+.left-top-Block {
+ height: $leftTopBlockHeight;
+}
+.left-bottom-Block {
+ height: $leftBottomBlockHeight;
+}
+
+.right-top-Block {
+ height: $rightTopBlockHeight;
+}
+.right-bottom-Block {
+ height: $rightBottomBlockHeight;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index d739c6f..e732cd5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,6 @@
import Vue from "vue";
import VueRouter from "vue-router";
-import HomeView from "../views/cockpitPage/index.vue";
+import HomeView from "../views/ChongqingPublicSecurity/index.vue";
Vue.use(VueRouter);
diff --git a/src/views/ChongqingPublicSecurity/components/KeyPersonnelManage.vue b/src/views/ChongqingPublicSecurity/components/KeyPersonnelManage.vue
new file mode 100644
index 0000000..4970f98
--- /dev/null
+++ b/src/views/ChongqingPublicSecurity/components/KeyPersonnelManage.vue
@@ -0,0 +1,43 @@
+<template>
+ <div class="keyPersonnelManage">
+ <div class="label-box">閲嶇偣浜哄憳绠＄悊</div>
+ </div>
+</template>
+
+<script>
+export default {
+ components: {},
+ props: {},
+ data() {
+ return {
+ dataObj: {
+ total: 256,
+ disposeOf: 254,
+ noDisposeOf: 2,
+ },
+ src: "/chongqingPublicSecurity/left-top-bg.png",
+ };
+ },
+ mounted() {},
+ watch: {},
+ methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.keyPersonnelManage {
+ width: 100%;
+ height: calc(100% - 30px);
+ margin-top: 35px;
+ background: rgba(3, 10, 14, 0.7);
+ border: 1px solid #194871;
+ .label-box {
+ height: 40px;
+ line-height: 40px;
+ padding: 0 30px;
+ font-size: 20px;
+ color: #01c2ff;
+ background: #20426a;
+ }
+}
+</style>
diff --git a/src/views/ChongqingPublicSecurity/components/NuclearMiningCount.vue b/src/views/ChongqingPublicSecurity/components/NuclearMiningCount.vue
new file mode 100644
index 0000000..6a16af4
--- /dev/null
+++ b/src/views/ChongqingPublicSecurity/components/NuclearMiningCount.vue
@@ -0,0 +1,168 @@
+<template>
+ <div class="nuclearMiningCount">
+ <div class="label-box">涓�鏍囦笁瀹炴牳閲�</div>
+ <div class="total-box">
+ <div class="data-total">
+ <div class="common-title commonColor">鏁版嵁鎬婚噺:</div>
+ <div class="common-value totalColor">{{ dataObj.total }}</div>
+ </div>
+ <div class="disposeOf disposeOfColor">
+ <div class="common-title">宸插缃�:</div>
+ <div class="common-value">{{ dataObj.disposeOf }}</div>
+ </div>
+ <div class="no-disposeOf no-disposeOfColor">
+ <div class="common-title">鏈缃�:</div>
+ <div class="common-value">{{ dataObj.noDisposeOf }}</div>
+ </div>
+ </div>
+ <div class="count-box">
+ <div class="count-view">
+ <div class="common-left">
+ <div class="left">
+ <div class="top-label commonColor">鐤戜技杩佸叆鏁�</div>
+ <div class="bottom-value commonVlueColor">256</div>
+ </div>
+ <div class="right">
+ <el-image :src="src"></el-image>
+ </div>
+ </div>
+ <div class="common-right">
+ <div class="left">
+ <div class="top-label commonColor">鐤戜技杩佸嚭鏁�</div>
+ <div class="bottom-value commonVlueColor">3</div>
+ </div>
+ <div class="right">
+ <el-image :src="src"></el-image>
+ </div>
+ </div>
+ </div>
+ <div class="count-view">
+ <div class="common-left">
+ <div class="left">
+ <div class="top-label commonColor">棰戠箒澶滃綊鏁�</div>
+ <div class="bottom-value commonVlueColor">92</div>
+ </div>
+ <div class="right">
+ <el-image :src="src"></el-image>
+ </div>
+ </div>
+ <div class="common-right">
+ <div class="left">
+ <div class="top-label commonColor">鏄间紡澶滃嚭鏁�</div>
+ <div class="bottom-value commonVlueColor">56</div>
+ </div>
+ <div class="right">
+ <el-image :src="src"></el-image>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ components: {},
+ props: {},
+ data() {
+ return {
+ dataObj: {
+ total: 256,
+ disposeOf: 254,
+ noDisposeOf: 2,
+ },
+ src: "/chongqingPublicSecurity/left-top-bg.png",
+ };
+ },
+ mounted() {},
+ watch: {},
+ methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.nuclearMiningCount {
+ width: 100%;
+ height: 100%;
+ background: rgba(3, 10, 14, 0.7);
+ border: 1px solid #194871;
+ .label-box {
+ height: 40px;
+ line-height: 40px;
+ padding: 0 30px;
+ font-size: 20px;
+ color: #01c2ff;
+ background: #20426a;
+ }
+ .total-box {
+ height: 50px;
+ display: flex;
+ align-items: center;
+ .data-total,
+ .disposeOf,
+ .no-disposeOf {
+ width: 33.3%;
+ margin-left: 30px;
+ display: flex;
+ align-items: center;
+ .common-title {
+ height: 50px;
+ line-height: 50px;
+ }
+ .common-value {
+ font-size: 22px;
+ margin-left: 10px;
+ font-weight: 700;
+ }
+ }
+ }
+ .count-box {
+ margin-left: 30px;
+ height: calc(100% - 140px);
+ .count-view {
+ margin-top: 15px;
+ margin-right: 30px;
+ height: 50%;
+ display: flex;
+ .common-left,
+ .common-right {
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(to top, #00344b, #001d2f 30%);
+ border: 1px solid #0e9cff;
+ margin-right: 20px;
+ padding-left: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ overflow: hidden;
+ .left {
+ .top-label {
+ margin-top: 10px;
+ font-size: 13px;
+ }
+ .bottom-value {
+ font-size: 30px;
+ font-weight: 700;
+ }
+ }
+ }
+ }
+ }
+}
+.commonColor {
+ color: #a8d6ff;
+}
+.totalColor {
+ color: #f0a205;
+}
+.disposeOfColor {
+ color: #1dd4ff;
+}
+.no-disposeOfColor {
+ color: #fa2808;
+}
+.commonVlueColor {
+ color: #21e8e1;
+}
+</style>
diff --git a/src/views/ChongqingPublicSecurity/components/PopulationDistributionChart.vue b/src/views/ChongqingPublicSecurity/components/PopulationDistributionChart.vue
new file mode 100644
index 0000000..3b41085
--- /dev/null
+++ b/src/views/ChongqingPublicSecurity/components/PopulationDistributionChart.vue
@@ -0,0 +1,368 @@
+<template>
+ <div class="population-distribution">
+ <div class="title">
+ <div class="left-box">浜哄彛鍒嗗竷</div>
+ </div>
+ <!-- 楗煎浘 -->
+ <div class="container">
+ <div class="chartsGl" ref="charts"></div>
+ <!-- 楗煎浘涓嬮潰鐨勫簳搴� -->
+ <div class="buttomCharts"></div>
+ </div>
+ </div>
+</template>
+
+<script>
+//寮曞叆echart
+import * as echarts from "echarts";
+import "echarts-gl";
+
+import { getPie3D, getParametricEquation } from "./chart"; //宸ュ叿绫籮s锛岄〉闈㈣矾寰勮嚜宸变慨鏀�
+
+export default {
+ name: "Zysjg",
+ data() {
+ return {
+ optionData: [
+ {
+ name: "甯搁┗浜哄彛", //鍚嶇О
+ value: 23, //鍊�
+ itemStyle: {
+ //棰滆壊
+ color: "rgba(44, 247, 18, 0.8)",
+ },
+ },
+ {
+ name: "闄岀敓浜�",
+ value: 46.2,
+ itemStyle: {
+ color: "rgba(67, 190, 252, 0.7)",
+ },
+ },
+ {
+ name: "鎼浣忔埛",
+ value: 10,
+ itemStyle: {
+ color: "rgba(253, 223, 52,0.6)",
+ },
+ },
+ {
+ name: "鏂板叆浣忔埛",
+ value: 20.8,
+ itemStyle: {
+ color: "rgba(3, 40, 250,0.4)",
+ },
+ },
+ ],
+ statusChart: null,
+ option: {},
+ selectPeriod: 1,
+ };
+ },
+ created() {
+ // this.setLabel();
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.init();
+ //鏍规嵁绐楀彛鍙樺寲鑷姩璋冭妭鍥捐〃澶у皬
+ const that = this;
+ window.onresize = function () {
+ that.changeSize();
+ };
+ });
+ },
+ methods: {
+ // 鍒濆鍖杔abel鏍峰紡
+ setLabel() {
+ this.optionData.forEach((item, index) => {
+ item.label = {
+ show: true,
+ position: "center",
+ formatter: ["{b|{b}}", "{d|{d}%}"].join("\n"), // 鐢╘n鏉ユ崲琛�
+ rich: {
+ b: {
+ fontSize: 22,
+ color: "#fff",
+ textShadowColor: "#1c90a6",
+ textShadowOffsetX: 0,
+ textShadowOffsetY: 2,
+ textShadowBlur: 5,
+ },
+ d: {
+ // color: color[index],
+ align: "left",
+ },
+ },
+ };
+ });
+ },
+ //鍒濆鍖栨瀯寤�
+ init() {
+ //鏋勫缓3d楗肩姸鍥�
+ let chartDom = this.$refs["charts"];
+ this.statusChart = echarts.init(chartDom);
+ // let myChart = this.$echarts.init(document.getElementById("charts"));
+ // 浼犲叆鏁版嵁鐢熸垚 option ; getPie3D(鏁版嵁锛岄�忔槑鐨勭┖蹇冨崰姣旓紙璋冭妭涓棿绌哄績鑼冨洿鐨�0灏辨槸鏅�氶ゼ1灏卞緢闀傜┖锛�)
+ this.option = getPie3D(this.optionData, 0.85, 160, 25, 15);
+
+ //灏嗛厤缃」璁剧疆杩涘幓
+ this.statusChart.setOption(this.option);
+ //榧犳爣绉诲姩涓婂幓鐗规晥鏁堟灉
+ // this.bindListen(myChart);
+ this.option.series.push({
+ name: "鐢垫鐘舵��", //鑷繁鏍规嵁鍦烘櫙淇敼
+ backgroundColor: "transparent",
+ type: "pie",
+ label: {
+ opacity: 1,
+ show: true,
+ position: "center",
+ formatter: ["{d|{d}%}", "{b|{b}}"].join("\n"), // 鐢╘n鏉ユ崲琛�
+ rich: {
+ d: {
+ fontSize: 22,
+ color: "#fff",
+ textShadowColor: "#1c90a6",
+ textShadowOffsetX: 0,
+ textShadowOffsetY: 2,
+ textShadowBlur: 5,
+ },
+ b: {
+ color: "#fff",
+ align: "center",
+ },
+ },
+ },
+ startAngle: -40, // 璧峰瑙掑害锛屾敮鎸佽寖鍥碵0, 360]銆�
+ clockwise: false, // 楗煎浘鐨勬墖鍖烘槸鍚︽槸椤烘椂閽堟帓甯冦�備笂杩拌繖涓ら」閰嶇疆涓昏鏄负浜嗗榻�3d鐨勬牱寮�
+ radius: ["20%", "50%"],
+ // center: ["50%", "50%"],
+ data: this.optionData,
+ itemStyle: {
+ opacity: 0, //杩欓噷蹇呴』鏄�0锛屼笉鐒�2d鐨勫浘浼氳鐩栧湪琛ㄩ潰
+ },
+ });
+ this.statusChart.setOption(this.option);
+ },
+ // 鐩戝惉榧犳爣浜嬩欢锛屽疄鐜伴ゼ鍥鹃�変腑鏁堟灉锛堝崟閫夛級锛岃繎浼煎疄鐜伴珮浜紙鏀惧ぇ锛夋晥鏋溿��
+ bindListen(myChart) {
+ let that = this;
+ let selectedIndex = "";
+ let hoveredIndex = "";
+ // 鐩戝惉鐐瑰嚮浜嬩欢锛屽疄鐜伴�変腑鏁堟灉锛堝崟閫夛級
+ myChart.on("click", function (params) {
+ // 浠� option.series 涓鍙栭噸鏂版覆鏌撴墖褰㈡墍闇�鐨勫弬鏁帮紝灏嗘槸鍚﹂�変腑鍙栧弽銆�
+ let isSelected =
+ !that.option.series[params.seriesIndex].pieStatus.selected;
+ let isHovered =
+ that.option.series[params.seriesIndex].pieStatus.hovered;
+ let k = that.option.series[params.seriesIndex].pieStatus.k;
+ let startRatio =
+ that.option.series[params.seriesIndex].pieData.startRatio;
+ let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+ // 濡傛灉涔嬪墠閫変腑杩囧叾浠栨墖褰紝灏嗗叾鍙栨秷閫変腑锛堝 option 鏇存柊锛�
+ if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+ that.option.series[selectedIndex].parametricEquation =
+ getParametricEquation(
+ that.option.series[selectedIndex].pieData.startRatio,
+ that.option.series[selectedIndex].pieData.endRatio,
+ false,
+ false,
+ k,
+ that.option.series[selectedIndex].pieData.value
+ );
+ that.option.series[selectedIndex].pieStatus.selected = false;
+ }
+ // 瀵瑰綋鍓嶇偣鍑荤殑鎵囧舰锛屾墽琛岄�変腑/鍙栨秷閫変腑鎿嶄綔锛堝 option 鏇存柊锛�
+ that.option.series[params.seriesIndex].parametricEquation =
+ getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ that.option.series[params.seriesIndex].pieData.value
+ );
+ that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+ // 濡傛灉鏈鏄�変腑鎿嶄綔锛岃褰曚笂娆￠�変腑鐨勬墖褰㈠搴旂殑绯诲垪鍙� seriesIndex
+ isSelected ? (selectedIndex = params.seriesIndex) : null;
+ // 浣跨敤鏇存柊鍚庣殑 option锛屾覆鏌撳浘琛�
+ myChart.setOption(that.option);
+ });
+ // 鐩戝惉 mouseover锛岃繎浼煎疄鐜伴珮浜紙鏀惧ぇ锛夋晥鏋�
+ myChart.on("mouseover", function (params) {
+ // 鍑嗗閲嶆柊娓叉煋鎵囧舰鎵�闇�鐨勫弬鏁�
+ let isSelected;
+ let isHovered;
+ let startRatio;
+ let endRatio;
+ let k;
+ // 濡傛灉瑙﹀彂 mouseover 鐨勬墖褰㈠綋鍓嶅凡楂樹寒锛屽垯涓嶅仛鎿嶄綔
+ if (hoveredIndex === params.seriesIndex) {
+ return;
+ // 鍚﹀垯杩涜楂樹寒鍙婂繀瑕佺殑鍙栨秷楂樹寒鎿嶄綔
+ } else {
+ // 濡傛灉褰撳墠鏈夐珮浜殑鎵囧舰锛屽彇娑堝叾楂樹寒鐘舵�侊紙瀵� option 鏇存柊锛�
+ if (hoveredIndex !== "") {
+ // 浠� option.series 涓鍙栭噸鏂版覆鏌撴墖褰㈡墍闇�鐨勫弬鏁帮紝灏嗘槸鍚﹂珮浜缃负 false銆�
+ isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+ isHovered = false;
+ startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+ endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+ k = that.option.series[hoveredIndex].pieStatus.k;
+ // 瀵瑰綋鍓嶇偣鍑荤殑鎵囧舰锛屾墽琛屽彇娑堥珮浜搷浣滐紙瀵� option 鏇存柊锛�
+ that.option.series[hoveredIndex].parametricEquation =
+ getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ that.option.series[hoveredIndex].pieData.value
+ );
+ that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+ // 灏嗘鍓嶈褰曠殑涓婃閫変腑鐨勬墖褰㈠搴旂殑绯诲垪鍙� seriesIndex 娓呯┖
+ hoveredIndex = "";
+ }
+ // 濡傛灉瑙﹀彂 mouseover 鐨勬墖褰笉鏄�忔槑鍦嗙幆锛屽皢鍏堕珮浜紙瀵� option 鏇存柊锛�
+ if (
+ params.seriesName !== "mouseoutSeries" &&
+ params.seriesName !== "pie2d"
+ ) {
+ // 浠� option.series 涓鍙栭噸鏂版覆鏌撴墖褰㈡墍闇�鐨勫弬鏁帮紝灏嗘槸鍚﹂珮浜缃负 true銆�
+ isSelected =
+ that.option.series[params.seriesIndex].pieStatus.selected;
+ isHovered = true;
+ startRatio =
+ that.option.series[params.seriesIndex].pieData.startRatio;
+ endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+ k = that.option.series[params.seriesIndex].pieStatus.k;
+ // 瀵瑰綋鍓嶇偣鍑荤殑鎵囧舰锛屾墽琛岄珮浜搷浣滐紙瀵� option 鏇存柊锛�
+ that.option.series[params.seriesIndex].parametricEquation =
+ getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ that.option.series[params.seriesIndex].pieData.value + 5
+ );
+ that.option.series[params.seriesIndex].pieStatus.hovered =
+ isHovered;
+ // 璁板綍涓婃楂樹寒鐨勬墖褰㈠搴旂殑绯诲垪鍙� seriesIndex
+ hoveredIndex = params.seriesIndex;
+ }
+ // 浣跨敤鏇存柊鍚庣殑 option锛屾覆鏌撳浘琛�
+ myChart.setOption(that.option);
+ }
+ });
+ // 淇鍙栨秷楂樹寒澶辫触鐨� bug
+ myChart.on("globalout", function () {
+ // 鍑嗗閲嶆柊娓叉煋鎵囧舰鎵�闇�鐨勫弬鏁�
+ let isSelected;
+ let isHovered;
+ let startRatio;
+ let endRatio;
+ let k;
+ if (hoveredIndex !== "") {
+ // 浠� option.series 涓鍙栭噸鏂版覆鏌撴墖褰㈡墍闇�鐨勫弬鏁帮紝灏嗘槸鍚﹂珮浜缃负 true銆�
+ isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+ isHovered = false;
+ k = that.option.series[hoveredIndex].pieStatus.k;
+ startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+ endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+ // 瀵瑰綋鍓嶇偣鍑荤殑鎵囧舰锛屾墽琛屽彇娑堥珮浜搷浣滐紙瀵� option 鏇存柊锛�
+ that.option.series[hoveredIndex].parametricEquation =
+ that.getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ that.option.series[hoveredIndex].pieData.value
+ );
+ that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+ // 灏嗘鍓嶈褰曠殑涓婃閫変腑鐨勬墖褰㈠搴旂殑绯诲垪鍙� seriesIndex 娓呯┖
+ hoveredIndex = "";
+ }
+ // 浣跨敤鏇存柊鍚庣殑 option锛屾覆鏌撳浘琛�
+ myChart.setOption(that.option);
+ });
+ },
+ // 鑷�傚簲瀹介珮
+ changeSize() {
+ this.statusChart.resize();
+ },
+ // 鍛ㄦ湡鐐瑰嚮鍥炶皟
+ selectPeriodClick(val) {
+ this.selectPeriod = val;
+ },
+ },
+};
+</script>
+<style lang="scss" scoped>
+//楗煎浘(澶栭潰鐨勫鍣�)
+.container {
+ width: 90%;
+ height: calc(100% - 20px);
+ padding-top: 15px;
+}
+//楗煎浘鐨勫ぇ灏�
+.chartsGl {
+ height: 100%;
+ width: 100%;
+ // background: rgba(3, 40, 250, 0.3);
+}
+//楗煎浘搴曞骇锛堟垜涔熸兂缁欎綘浠簳搴у浘鐗� 鍙槸鎴戜笉鐭ラ亾鍜嬬粰锛�
+.buttomCharts {
+ // background: center top url("../imgs/u111.png") no-repeat;
+ background-size: 100% 100%;
+ height: 95px;
+ width: 204px;
+ margin-top: -141px;
+ margin-left: 21%;
+}
+
+.title {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 40px;
+ width: 100%;
+ background: #20426a;
+ font-size: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: #01c2ff;
+ .left-box {
+ margin-left: 20px;
+ }
+ .right-box {
+ margin-right: 20px;
+ display: flex;
+ .common {
+ margin-left: 10px;
+ height: 50px;
+ line-height: 50px;
+ cursor: pointer;
+ }
+ }
+}
+.fontsize20 {
+ font-size: 20px;
+}
+.fontsize16 {
+ font-size: 16px;
+}
+.population-distribution {
+ overflow-y: auto;
+ padding: 10px;
+ height: 100%;
+ box-sizing: border-box;
+ border: 1px solid #40a1f7;
+ position: relative;
+ background: rgba(3, 10, 14, 0.7);
+}
+</style>
diff --git a/src/views/ChongqingPublicSecurity/components/SnapFrame.vue b/src/views/ChongqingPublicSecurity/components/SnapFrame.vue
new file mode 100644
index 0000000..0319c49
--- /dev/null
+++ b/src/views/ChongqingPublicSecurity/components/SnapFrame.vue
@@ -0,0 +1,69 @@
+<template>
+ <div class="snapFrame">
+ <div class="top-title-box">
+ <div class="common-view">浜鸿劯鎶撴媿</div>
+ <div class="common-view">杞﹁締鎶撴媿</div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ components: {},
+ props: {},
+ data() {
+ return {
+ dataObj: {
+ total: 256,
+ disposeOf: 254,
+ noDisposeOf: 2,
+ },
+ };
+ },
+ mounted() {},
+ watch: {},
+ methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.snapFrame {
+ width: 100%;
+ height: calc(100% - 40px);
+ background: rgba(3, 10, 14, 0.7);
+ border: 1px solid #194871;
+ margin-top: 50px;
+ position: relative;
+ .top-title-box {
+ height: 40px;
+ width: calc(100% - 40px);
+ position: absolute;
+ top: -20px;
+ left: 40px;
+ display: flex;
+ .common-view {
+ width: 40%;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ margin-right: 45px;
+ border: 1px solid #0e9cff;
+ background: linear-gradient(to top, #00344b, #001d2f 60%);
+ color: #01c2ff;
+ font-size: 22px;
+ }
+ }
+}
+.commonColor {
+ color: #fff;
+}
+.totalColor {
+ color: #f0a205;
+}
+.carTotalfColor {
+ color: #1dd4ff;
+}
+.commonVlueColor {
+ color: #01c2ff;
+}
+</style>
diff --git a/src/views/ChongqingPublicSecurity/components/TimeWeather.vue b/src/views/ChongqingPublicSecurity/components/TimeWeather.vue
new file mode 100644
index 0000000..ae3378c
--- /dev/null
+++ b/src/views/ChongqingPublicSecurity/components/TimeWeather.vue
@@ -0,0 +1,144 @@
+<template>
+ <div class="time-weather">
+ <div class="weather">
+ <div class="left">5鈩�</div>
+ <div class="icon-view">
+ <i class="el-icon-sunny"></i>
+ </div>
+ <div class="text-view">
+ <div>鏅磋浆澶氫簯</div>
+ <div>Beijing</div>
+ </div>
+ </div>
+ <div class="divider-view">
+ <el-divider direction="vertical"></el-divider>
+ </div>
+ <div class="timer">
+ <div>{{ nowTime }}</div>
+ </div>
+ <div class="date">
+ <div>{{ nowWeek }}</div>
+ <div>{{ nowDate }}</div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ components: {},
+ props: {
+ totalObject: {
+ type: Object,
+ default: () => {
+ return {};
+ },
+ },
+ },
+ data() {
+ return {
+ nowTime: "", // 鏃堕棿
+ nowDate: "", // 鏃ユ湡
+ nowWeek: "", // 鏄熸湡
+ timer: null,
+ };
+ },
+ mounted() {
+ this.getNowTime();
+ },
+ watch: {},
+ beforeDestroy() {
+ clearInterval(this.timer);
+ this.timer = null;
+ },
+ methods: {
+ // 鑾峰彇褰撳墠鏃ユ湡鏃堕棿
+ getNowTime() {
+ let speed = 1000;
+ let that = this;
+ let theNowTime = function () {
+ that.timeNumber();
+ };
+ this.timer = setInterval(theNowTime, speed);
+ },
+ timeNumber() {
+ let today = new Date();
+ this.nowDate =
+ today.getFullYear() +
+ "-" +
+ this.twoDigits(today.getMonth() + 1) +
+ "-" +
+ this.twoDigits(today.getDate());
+ this.nowTime =
+ this.twoDigits(today.getHours()) +
+ ":" +
+ this.twoDigits(today.getMinutes()) +
+ ":" +
+ this.twoDigits(today.getSeconds());
+ let week = new Date().getDay();
+ let weeks = [
+ "Sunday",
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday",
+ ];
+
+ this.nowWeek = weeks[week];
+ },
+ twoDigits(val) {
+ if (val < 10) return "0" + val;
+ return val;
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.time-weather {
+ width: 100%;
+ height: 100%;
+ color: #1dd4ff;
+ background: rgba(3, 10, 14, 0.9);
+ display: flex;
+ align-items: center;
+ .weather {
+ width: 33%;
+ display: flex;
+ align-items: center;
+ .left {
+ font-size: 28px;
+ }
+ .icon-view {
+ font-size: 26px;
+ margin-left: 6px;
+ }
+ .text-view {
+ font-size: 12px;
+ margin-left: 6px;
+ color: #127c97;
+ }
+ }
+ .timer {
+ width: 33%;
+ font-size: 28px;
+ display: flex;
+ justify-content: center;
+ }
+ .date {
+ font-size: 12px;
+ margin-left: 6px;
+ color: #127c97;
+ }
+}
+.divider-view {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ .el-divider {
+ background-color: #1dd4ff;
+ height: calc(100% - 20px);
+ }
+}
+</style>
diff --git a/src/views/ChongqingPublicSecurity/components/TopRightBlock.vue b/src/views/ChongqingPublicSecurity/components/TopRightBlock.vue
new file mode 100644
index 0000000..3540bca
--- /dev/null
+++ b/src/views/ChongqingPublicSecurity/components/TopRightBlock.vue
@@ -0,0 +1,100 @@
+<template>
+ <div class="topRightBlock">
+ <div class="menu-list">
+ <div
+ v-for="item in menuList"
+ class="menu-label"
+ :class="selectMenu === item.id ? 'colorSel' : 'colorWhite'"
+ @click="selectPeriodClick(item.id)"
+ >
+ {{ item.value }}
+ </div>
+ </div>
+ <div class="info-view">
+ <el-badge is-dot class="item">
+ <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
+ </el-badge>
+ <div class="info-title">楂樻柊鍒嗗眬</div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ components: {},
+ props: {},
+ data() {
+ return {
+ menuList: [
+ { id: 1, value: "鍏ㄦ櫙鏁版嵁" },
+ { id: 2, value: "甯冩帶涓氬姟" },
+ { id: 3, value: "娌诲畨涓氬姟" },
+ { id: 4, value: "渚︽煡涓氬姟" },
+ { id: 5, value: "璁惧绠＄悊" },
+ ],
+ selectMenu: 1,
+ size: "medium",
+ squareUrl:
+ "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
+ };
+ },
+ mounted() {},
+ watch: {},
+ methods: {
+ selectPeriodClick(val) {
+ this.selectMenu = val;
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+$marginTop: 15px;
+.topRightBlock {
+ width: 100%;
+ height: 100%;
+ color: #cdcfd0;
+ background: rgba(3, 10, 14, 0.9);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .menu-list {
+ margin-top: $marginTop;
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ .menu-label {
+ margin-left: 55px;
+ cursor: pointer;
+ }
+ }
+ .info-view {
+ margin-top: $marginTop;
+ display: flex;
+ align-items: center;
+ .info-title {
+ margin-left: 20px;
+ font-size: 18px;
+ }
+ }
+}
+.colorSel {
+ color: #64c9e3;
+ font-weight: 550;
+}
+.colorWhite {
+ color: #cdcfd0;
+}
+
+::v-deep {
+ .el-badge__content,
+ .el-progress {
+ background-color: #4caf50;
+ border: 2px solid #1f2935;
+ }
+ .el-badge__content.is-dot {
+ height: 10px;
+ width: 10px;
+ }
+}
+</style>
diff --git a/src/views/ChongqingPublicSecurity/components/chart.js b/src/views/ChongqingPublicSecurity/components/chart.js
new file mode 100644
index 0000000..f2e87b8
--- /dev/null
+++ b/src/views/ChongqingPublicSecurity/components/chart.js
@@ -0,0 +1,320 @@
+/**
+ * 缁樺埗3d鍥� 閰嶇疆鏋勫缓 pieData 楗煎浘鏁版嵁 internalDiameterRatio:閫忔槑鐨勭┖蹇冨崰姣�
+ * @param pieData 鎬绘暟鎹�
+ * @param internalDiameterRatio:閫忔槑鐨勭┖蹇冨崰姣�
+ * @param distance 瑙嗚鍒颁富浣撶殑璺濈
+ * @param alpha 鏃嬭浆瑙掑害
+ * @param pieHeight 绔嬩綋鐨勯珮搴�
+ * @param opacity 楗兼垨鑰呯幆鐨勯�忔槑搴�
+ */
+const getPie3D = (
+ pieData,
+ internalDiameterRatio,
+ distance,
+ alpha,
+ pieHeight,
+ opacity = 1
+) => {
+ let that = this;
+ let series = [];
+ let sumValue = 0;
+ let startValue = 0;
+ let endValue = 0;
+ let legendData = [];
+ let legendBfb = [];
+ let k = 1 - internalDiameterRatio;
+
+ pieData.sort((a, b) => {
+ return b.value - a.value;
+ });
+ // 涓烘瘡涓�涓ゼ鍥炬暟鎹紝鐢熸垚涓�涓� series-surface(鍙傛暟鏇查潰) 閰嶇疆
+ for (let i = 0; i < pieData.length; i++) {
+ sumValue += pieData[i].value;
+ let seriesItem = {
+ //绯荤粺鍚嶇О
+ name:
+ typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
+ type: "surface",
+ //鏄惁涓哄弬鏁版洸闈紙鏄級
+ parametric: true,
+ //鏇查潰鍥剧綉鏍肩嚎锛堝惁锛変笂闈竴鏍逛竴鏍圭殑
+ wireframe: {
+ show: false,
+ },
+ pieData: pieData[i],
+ pieStatus: {
+ selected: false,
+ hovered: false,
+ k: k,
+ },
+ //璁剧疆楗煎浘鍦ㄥ鍣ㄤ腑鐨勪綅缃�(鐩墠娌″彂鐜板暐鐢�)
+ center: ["80%", "100%"],
+ radius: "60%",
+ // label: label,
+ };
+
+ //鏇查潰鐨勯鑹层�佷笉閫忔槑搴︾瓑鏍峰紡銆�
+ if (typeof pieData[i].itemStyle !== "undefined") {
+ const itemStyle = {};
+ itemStyle.color =
+ typeof pieData[i].itemStyle.color !== "undefined"
+ ? pieData[i].itemStyle.color
+ : opacity;
+ itemStyle.opacity =
+ typeof pieData[i].itemStyle.opacity !== "undefined"
+ ? pieData[i].itemStyle.opacity
+ : opacity;
+ seriesItem.itemStyle = itemStyle;
+ }
+ series.push(seriesItem);
+ }
+
+ // 浣跨敤涓婁竴娆￠亶鍘嗘椂锛岃绠楀嚭鐨勬暟鎹拰 sumValue锛岃皟鐢� getParametricEquation 鍑芥暟锛�
+ // 鍚戞瘡涓� series-surface 浼犲叆涓嶅悓鐨勫弬鏁版柟绋� series-surface.parametricEquation锛屼篃灏辨槸瀹炵幇姣忎竴涓墖褰€��
+ legendData = [];
+ legendBfb = [];
+ for (let i = 0; i < series.length; i++) {
+ endValue = startValue + series[i].pieData.value;
+ series[i].pieData.startRatio = startValue / sumValue;
+ series[i].pieData.endRatio = endValue / sumValue;
+ series[i].parametricEquation = getParametricEquation(
+ series[i].pieData.startRatio,
+ series[i].pieData.endRatio,
+ false,
+ false,
+ k,
+ series[i].pieData.value
+ );
+ startValue = endValue;
+ let bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
+ legendData.push({
+ name: series[i].name,
+ value: bfb,
+ });
+ legendBfb.push({
+ name: series[i].name,
+ value: bfb,
+ });
+ }
+ //(绗簩涓弬鏁板彲浠ヨ缃綘杩欎釜鐜舰鐨勯珮浣庣▼搴�)
+ let boxHeight = getHeight3D(series, pieHeight); //閫氳繃浼犲弬璁惧畾3d楗�/鐜殑楂樺害
+ // 鍑嗗寰呰繑鍥炵殑閰嶇疆椤癸紝鎶婂噯澶囧ソ鐨� legendData銆乻eries 浼犲叆銆�
+ let option = {
+ //鍥句緥缁勪欢
+ legend: {
+ // data: legendData,
+ //鍥句緥鍒楄〃鐨勫竷灞�鏈濆悜銆�
+ orient: "horizontal",
+ center: 0,
+ bottom: 0,
+ //鍥句緥鏂囧瓧姣忛」涔嬮棿鐨勯棿闅�
+ itemGap: 15,
+ textStyle: {
+ color: "#A1E2FF",
+ fontSize: "12px",
+ },
+ itemHeight: 10, // 淇敼icon鍥惧舰澶у皬
+ itemWidth: 10, // 淇敼icon鍥惧舰澶у皬
+ show: true,
+ // icon: "circle",
+ //鏍煎紡鍖栧浘渚嬫枃鏈紙鎴戞槸鏁板�间粈涔堟樉绀轰粈涔堬級
+ // formatter: function (name) {
+ // var target;
+ // for (var i = 0, l = pieData.length; i < l; i++) {
+ // if (pieData[i].name == name) {
+ // target = pieData[i].value;
+ // }
+ // }
+ // return `${name}: ${target}`;
+ // },
+ // // 杩欎釜鍙互鏄剧ず鐧惧垎姣旈偅绉嶏紙鍙互鏍规嵁浣犳兂瑕佺殑鏉ラ厤缃級
+ formatter: function (param) {
+ let item = legendBfb.filter((item) => item.name == param)[0];
+ // let bfs = that.fomatFloat(item.value * 100, 1) + "%";
+ console.log(item.name);
+ // return `${item.name} :${bfs}`;
+ return `${item.name}`;
+ },
+ },
+ labelLine: {
+ show: true,
+ lineStyle: {
+ color: "#7BC0CB",
+ },
+ },
+ label: {
+ show: true,
+ position: "outside",
+ formatter: "{b} \n{c} {d}%",
+ },
+ //绉诲姩涓婂幓鎻愮ず鐨勬枃鏈唴瀹�(鎴戞病鏉ュ緱鍙婃敼 浣犱滑鍙互鏍规嵁闇�姹傛敼)
+ tooltip: {
+ backgroundColor: "#033b77",
+ borderColor: "#21f2c4",
+ textStyle: {
+ color: "#fff",
+ fontSize: 13,
+ },
+ formatter: (params) => {
+ if (
+ params.seriesName !== "mouseoutSeries" &&
+ params.seriesName !== "pie2d"
+ ) {
+ let bfb = (
+ (option.series[params.seriesIndex].pieData.endRatio -
+ option.series[params.seriesIndex].pieData.startRatio) *
+ 100
+ ).toFixed(1);
+ return (
+ `${params.seriesName}<br/>` +
+ `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+ `${bfb}`
+ );
+ }
+ },
+ },
+ //杩欎釜鍙互鍙樺舰
+ xAxis3D: {
+ min: -1,
+ max: 1,
+ },
+ yAxis3D: {
+ min: -1,
+ max: 1,
+ },
+ zAxis3D: {
+ min: -1,
+ max: 1,
+ },
+ //姝ゅ鏄慨鏀规牱寮忕殑閲嶇偣
+ grid3D: {
+ show: false,
+ boxHeight: boxHeight, //鍦嗙幆鐨勯珮搴�
+ //杩欐槸楗煎浘鐨勪綅缃�
+ // top: "-20.5%",
+ // left: "-4%",
+ viewControl: {
+ //3d鏁堟灉鍙互鏀惧ぇ銆佹棆杞瓑锛岃鑷繁鍘绘煡鐪嬪畼鏂归厤缃�
+ alpha, //瑙掑害(杩欎釜寰堥噸瑕� 璋冭妭瑙掑害鐨�)
+ distance, //璋冩暣瑙嗚鍒颁富浣撶殑璺濈锛岀被浼艰皟鏁磟oom(杩欐槸鏁翠綋澶у皬)
+ rotateSensitivity: 0, //璁剧疆涓�0鏃犳硶鏃嬭浆
+ zoomSensitivity: 0, //璁剧疆涓�0鏃犳硶缂╂斁
+ panSensitivity: 0, //璁剧疆涓�0鏃犳硶骞崇Щ
+ autoRotate: false, //鑷姩鏃嬭浆
+ },
+ },
+ series: series,
+ };
+ return option;
+};
+
+/**
+ * 鐢熸垚鎵囧舰鐨勬洸闈㈠弬鏁版柟绋嬶紝鐢ㄤ簬 series-surface.parametricEquation
+ */
+const getParametricEquation = (
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ h
+) => {
+ // 璁＄畻
+ const midRatio = (startRatio + endRatio) / 2;
+ const startRadian = startRatio * Math.PI * 2;
+ const endRadian = endRatio * Math.PI * 2;
+ const midRadian = midRatio * Math.PI * 2;
+ // 濡傛灉鍙湁涓�涓墖褰紝鍒欎笉瀹炵幇閫変腑鏁堟灉銆�
+ if (startRatio === 0 && endRatio === 1) {
+ isSelected = false;
+ }
+ // 閫氳繃鎵囧舰鍐呭緞/澶栧緞鐨勫�硷紝鎹㈢畻鍑鸿緟鍔╁弬鏁� k锛堥粯璁ゅ�� 1/3锛�
+ k = typeof k !== "undefined" ? k : 1 / 3;
+ // 璁＄畻閫変腑鏁堟灉鍒嗗埆鍦� x 杞淬�亂 杞存柟鍚戜笂鐨勪綅绉伙紙鏈�変腑锛屽垯浣嶇Щ鍧囦负 0锛�
+ const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+ const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+ // 璁＄畻楂樹寒鏁堟灉鐨勬斁澶ф瘮渚嬶紙鏈珮浜紝鍒欐瘮渚嬩负 1锛�
+ const hoverRate = isHovered ? 1.05 : 1;
+ // 杩斿洖鏇查潰鍙傛暟鏂圭▼
+ return {
+ u: {
+ min: -Math.PI,
+ max: Math.PI * 3,
+ step: Math.PI / 32,
+ },
+ v: {
+ min: 0,
+ max: Math.PI * 2,
+ step: Math.PI / 20,
+ },
+ x: function (u, v) {
+ if (u < startRadian) {
+ return (
+ offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+ );
+ }
+ if (u > endRadian) {
+ return (
+ offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+ );
+ }
+ return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+ },
+ y: function (u, v) {
+ if (u < startRadian) {
+ return (
+ offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+ );
+ }
+ if (u > endRadian) {
+ return (
+ offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+ );
+ }
+ return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+ },
+ z: function (u, v) {
+ if (u < -Math.PI * 0.5) {
+ return Math.sin(u);
+ }
+ if (u > Math.PI * 2.5) {
+ return Math.sin(u) * h * 0.1;
+ }
+ return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+ },
+ };
+};
+
+/**
+ * 鑾峰彇3d楗煎浘鐨勬渶楂樻墖鍖虹殑楂樺害
+ */
+const getHeight3D = (series, height) => {
+ series.sort((a, b) => {
+ return b.pieData.value - a.pieData.value;
+ });
+ return (height * 25) / series[0].pieData.value;
+};
+
+/**
+ * 鑷畾涔夎绠楃殑鏂规硶: 鏍煎紡鍖栨诞鐐规暟
+ */
+const fomatFloat = (num, n) => {
+ let f = parseFloat(num);
+ if (isNaN(f)) {
+ return false;
+ }
+ f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 骞�
+ let s = f.toString();
+ let rs = s.indexOf(".");
+ // 鍒ゅ畾濡傛灉鏄暣鏁帮紝澧炲姞灏忔暟鐐瑰啀琛�0
+ if (rs < 0) {
+ rs = s.length;
+ s += ".";
+ }
+ while (s.length <= rs + n) {
+ s += "0";
+ }
+ return s;
+};
+
+export { getPie3D, getParametricEquation };
diff --git a/src/views/ChongqingPublicSecurity/index.vue b/src/views/ChongqingPublicSecurity/index.vue
new file mode 100644
index 0000000..439c41d
--- /dev/null
+++ b/src/views/ChongqingPublicSecurity/index.vue
@@ -0,0 +1,84 @@
+<template>
+ <BackgroundLayout>
+ <template #topBlock1>
+ <TimeWeather />
+ </template>
+ <template #topBlock2>
+ <TopRightBlock />
+ </template>
+ <template #leftBlock1>
+ <NuclearMiningCount />
+ </template>
+ <template #leftBlock2>
+ <KeyPersonnelManage />
+ </template>
+ <template #rightBlock1>
+ <PopulationDistributionChart />
+ </template>
+ <template #rightBlock2>
+ <SnapFrame />
+ </template>
+ </BackgroundLayout>
+</template>
+
+<script>
+import BackgroundLayout from "@/components/ChongqingPublicSecurity/BackgroundLayout";
+import TimeWeather from "@/views/ChongqingPublicSecurity/components/TimeWeather";
+import TopRightBlock from "@/views/ChongqingPublicSecurity/components/TopRightBlock";
+import NuclearMiningCount from "@/views/ChongqingPublicSecurity/components/NuclearMiningCount";
+import KeyPersonnelManage from "@/views/ChongqingPublicSecurity/components/KeyPersonnelManage";
+import PopulationDistributionChart from "@/views/ChongqingPublicSecurity/components/PopulationDistributionChart";
+import SnapFrame from "@/views/ChongqingPublicSecurity/components/SnapFrame";
+export default {
+ components: {
+ BackgroundLayout,
+ TimeWeather,
+ TopRightBlock,
+ NuclearMiningCount,
+ KeyPersonnelManage,
+ PopulationDistributionChart,
+ SnapFrame,
+ },
+ props: {},
+ data() {
+ return {};
+ },
+ mounted() {
+ this.getDashboard();
+ },
+ watch: {},
+ methods: {
+ async getDashboard() {
+ // await getDashboard()
+ // .then((res) => {
+ // console.log(res);
+ // // 宸︿笂鏁板�肩粺璁℃暟鎹�
+ // this.setLeftBlock1(res.data);
+ // // 鏈哄櫒寮�鏈虹巼鏁版嵁
+ // this.setleftBlock2(res.data);
+ // // 宸︿腑鏁版嵁缁熻鍊�
+ // this.setLeftBlock3(res.data);
+ // // 璁㈠崟瀹屾垚姣旂巼
+ // this.setLeftBlock4(res.data);
+ // // 宸ュ崟杩涘害缁熻
+ // this.setLeftBlock5(res.data);
+ // // 浜哄憳鐢熸晥鏁堢巼姣� 浜哄憳鎶�鑳�
+ // this.setLeftBlock6(res.data);
+ // // 璁惧璐熻嵎瀵规瘮
+ // this.setRightBlock1(res.data);
+ // // 鐗╂枡闇�姹傜粺璁�
+ // this.setRightBlock2(res.data);
+ // // 杞﹂棿姝ｅ搧鐜�
+ // this.setRightBlock3(res.data);
+ // })
+ // .finally(() => {
+ // setTimeout(() => {
+ // this.getDashboard();
+ // }, 300000);
+ // });
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss"></style>
--
Gitblit v1.8.0