From 5aec569c9d67c86819010171bc527afede505fe5 Mon Sep 17 00:00:00 2001 From: TreeWish <1131093754@qq.com> Date: 星期四, 23 二月 2023 18:51:48 +0800 Subject: [PATCH] 管网一张图对接接口数据 --- src/assets/img/Screen/leftBar.png | 0 src/assets/img/Screen/cunchu.png | 0 src/assets/img/Screen/contentBg.png | 0 src/components/Screen/top.vue | 2 src/assets/img/Screen/asideTitleBg.png | 0 src/components/chart/FileFormat.vue | 252 +++++++++++ src/components/Screen/left.vue | 338 ++++++++------- src/assets/img/Screen/numBg.png | 0 src/components/Screen/mapsdk.vue | 2 src/components/Screen/right.vue | 46 + src/components/chart/CountDataApply.vue | 188 ++++++++ src/components/chart/ServiceType.vue | 73 +- src/assets/img/Screen/rightBar.png | 0 src/main.js | 6 package.json | 1 src/assets/img/Screen/projectBg.png | 0 src/views/Thematic/index.vue | 16 src/components/chart/DataStorage.vue | 216 +++++++++ src/components/chart/ProjectCategory.vue | 136 ++++++ 19 files changed, 1,065 insertions(+), 211 deletions(-) diff --git a/package.json b/package.json index 12b8a37..593b600 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit" }, "dependencies": { + "@jiaminghi/data-view": "^2.10.0", "@terraformer/wkt": "^2.1.2", "@turf/turf": "^6.5.0", "animate.css": "^4.1.1", diff --git a/src/assets/img/Screen/asideTitleBg.png b/src/assets/img/Screen/asideTitleBg.png new file mode 100644 index 0000000..b86f3ab --- /dev/null +++ b/src/assets/img/Screen/asideTitleBg.png Binary files differ diff --git a/src/assets/img/Screen/contentBg.png b/src/assets/img/Screen/contentBg.png new file mode 100644 index 0000000..58b4f8e --- /dev/null +++ b/src/assets/img/Screen/contentBg.png Binary files differ diff --git a/src/assets/img/Screen/cunchu.png b/src/assets/img/Screen/cunchu.png new file mode 100644 index 0000000..376f3dd --- /dev/null +++ b/src/assets/img/Screen/cunchu.png Binary files differ diff --git a/src/assets/img/Screen/leftBar.png b/src/assets/img/Screen/leftBar.png new file mode 100644 index 0000000..e2dde16 --- /dev/null +++ b/src/assets/img/Screen/leftBar.png Binary files differ diff --git a/src/assets/img/Screen/numBg.png b/src/assets/img/Screen/numBg.png new file mode 100644 index 0000000..2b25fc5 --- /dev/null +++ b/src/assets/img/Screen/numBg.png Binary files differ diff --git a/src/assets/img/Screen/projectBg.png b/src/assets/img/Screen/projectBg.png new file mode 100644 index 0000000..bb10a91 --- /dev/null +++ b/src/assets/img/Screen/projectBg.png Binary files differ diff --git a/src/assets/img/Screen/rightBar.png b/src/assets/img/Screen/rightBar.png new file mode 100644 index 0000000..e25ee66 --- /dev/null +++ b/src/assets/img/Screen/rightBar.png Binary files differ diff --git a/src/components/Screen/left.vue b/src/components/Screen/left.vue index 2886037..cf51f3c 100644 --- a/src/components/Screen/left.vue +++ b/src/components/Screen/left.vue @@ -4,9 +4,19 @@ <img :src="leftImg" @click="ChangeLeft" /> </div> <div class="leftContainer" v-show="ChartDisplay"> - <div class="current1" id="leftCurrent1"></div> - <div class="current1" id="leftCurrent2"></div> - <div class="current1" id="leftCurrent3"></div> + <div class="current1" id="leftCurrent1"> + <div class="aside-title">鏁版嵁鐢宠娆℃暟</div> + <count-data-apply ></count-data-apply> + </div> + <div class="current1" id="leftCurrent2"> + <div class="aside-title">鏈嶅姟绫诲埆</div> + + <service-type></service-type> + </div> + <div class="current1" id="leftCurrent3"> + <div class="aside-title">瀛樺偍淇℃伅</div> + <data-storage></data-storage> + </div> </div> <div class="leftContainer" v-show="ProjectreeDisplay"> <project-tree></project-tree> @@ -14,10 +24,16 @@ </div> </template> <script> -import ProjectTree from './ProjectTree.vue' +import ProjectTree from "./ProjectTree.vue" +import countDataApply from "@/components/chart/CountDataApply.vue" +import ServiceType from "../chart/ServiceType.vue" +import DataStorage from "../chart/DataStorage.vue" export default { components: { - ProjectTree + ProjectTree, + countDataApply, + ServiceType, + DataStorage, }, data() { return { @@ -28,8 +44,8 @@ } }, mounted() { - this.OpenLeftInit(); - this.OpenLeftInitChart(); + this.OpenLeftInit() + // this.OpenLeftInitChart(); }, methods: { ChangeLeft() { @@ -39,7 +55,7 @@ } else { this.leftImg = require("../../assets/img/Screen/rightArrow.png") } - this.ChartDisplay = !this.ChartDisplay; + this.ChartDisplay = !this.ChartDisplay } if (this.leftMessage == "projectree") { @@ -48,109 +64,107 @@ } else { this.leftImg = require("../../assets/img/Screen/rightArrow.png") } - this.ProjectreeDisplay = !this.ProjectreeDisplay; + this.ProjectreeDisplay = !this.ProjectreeDisplay } - - this.$parent.ChangeWidth("left"); + this.$parent.ChangeWidth("left") }, //鎵撳紑澶у睆宸︿晶鐣岄潰 OpenLeftInit() { - this.ChartDisplay = true; - this.ProjectreeDisplay = false; - this.leftMessage = "init"; - this.OpenLeftInitChart(); - this.$parent.ChangeWidth("leftView"); - + this.ChartDisplay = true + this.ProjectreeDisplay = false + this.leftMessage = "init" + // this.OpenLeftInitChart(); + this.$parent.ChangeWidth("leftView") }, //鎵撳紑宸ョ▼鏍� OpenLeftProjectTree() { - this.ChartDisplay = false; - this.ProjectreeDisplay = true; - this.leftMessage = "projectree"; - this.$parent.ChangeWidth("leftTree"); + this.ChartDisplay = false + this.ProjectreeDisplay = true + this.leftMessage = "projectree" + this.$parent.ChangeWidth("leftTree") }, //澶у睆鐣岄潰鍥捐〃 OpenLeftInitChart() { //宸︿竴鍥� let option1 = { title: { - text: '椤圭洰鍒嗙被', + text: "椤圭洰鍒嗙被", padding: [10, 30], textStyle: { - color: '#fff', - fontSize: 15 + color: "#fff", + fontSize: 15, }, }, tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'shadow', + type: "shadow", }, }, grid: { - left: '2%', - right: '4%', - bottom: '0%', + left: "2%", + right: "4%", + bottom: "0%", containLabel: true, }, xAxis: { - type: 'value', + type: "value", boundaryGap: [0, 0.01], axisLine: { lineStyle: { - color: '#ccc', + color: "#ccc", }, }, axisLabel: { show: true, textStyle: { - color: '#fff', + color: "#fff", }, }, }, yAxis: { - type: 'category', + type: "category", data: [ - '绠¢亾绫�', - '绠$綉绫�', - '鍩哄缓绫�', - '鑸┖娴嬮噺', - '椋庨櫓鎺掓煡', - '宸ョ▼鍩硅', + "绠¢亾绫�", + "绠$綉绫�", + "鍩哄缓绫�", + "鑸┖娴嬮噺", + "椋庨櫓鎺掓煡", + "宸ョ▼鍩硅", ], axisLine: { lineStyle: { - color: '#ccc', + color: "#ccc", }, }, axisLabel: { show: true, textStyle: { - color: '#fff', + color: "#fff", }, }, }, series: [ { - name: '椤圭洰鍒嗙被', - type: 'bar', + name: "椤圭洰鍒嗙被", + type: "bar", barWidth: 20, data: [36, 45, 25, 15, 49, 33], itemStyle: { normal: { // 鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋� barBorderRadius: [0, 90, 90, 0], - color: (params) => { + color: params => { var colorList = [ - ['#00FCFF', '#008297'], - ['#0091FF', '#005EA4'], - ['#901698', '#F157EE'], - ['#40FBCB', '#009871'], - ['#FF515A', '#FFDD53'], - ['#6574E2', '#261164'], - ]; - var colorItem = colorList[params.dataIndex]; + ["#00FCFF", "#008297"], + ["#0091FF", "#005EA4"], + ["#901698", "#F157EE"], + ["#40FBCB", "#009871"], + ["#FF515A", "#FFDD53"], + ["#6574E2", "#261164"], + ] + var colorItem = colorList[params.dataIndex] return new this.$echarts.graphic.LinearGradient( 1, 0, @@ -167,68 +181,68 @@ }, ], false - ); + ) }, }, }, }, ], - }; - let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1")); - myChart1.setOption(option1); + } + let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1")) + myChart1.setOption(option1) window.addEventListener("resize", function () { - myChart1.resize(); - }); + myChart1.resize() + }) //宸︿簩鍥� let dataAxis = [ - '涓縿涓滅嚎绠¢亾宸ョ▼鍗楁', - '涓縿涓滅嚎绠¢亾宸ョ▼涓', - '骞垮窞绔�', - '鍞愬北LNG', - '鏂扮枂杩炴湪娌佺珯鍦�', - '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�', - ]; - let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1]; - let yMax = 500; - let dataShadow = []; + "涓縿涓滅嚎绠¢亾宸ョ▼鍗楁", + "涓縿涓滅嚎绠¢亾宸ョ▼涓", + "骞垮窞绔�", + "鍞愬北LNG", + "鏂扮枂杩炴湪娌佺珯鍦�", + "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�", + ] + let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1] + let yMax = 500 + let dataShadow = [] for (let i = 0; i < data.length; i++) { - dataShadow.push(yMax); + dataShadow.push(yMax) } let option2 = { title: { - text: '椤圭洰瀹屾垚搴�', + text: "椤圭洰瀹屾垚搴�", padding: [10, 30], textStyle: { - color: '#fff', - fontSize: 15 + color: "#fff", + fontSize: 15, }, }, tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'shadow', + type: "shadow", }, }, grid: { - left: '3%', - right: '0%', - bottom: '0%', + left: "3%", + right: "0%", + bottom: "0%", containLabel: true, }, xAxis: { - type: 'category', + type: "category", data: dataAxis, axisLabel: { show: true, textStyle: { - color: '#fff', + color: "#fff", }, formatter: function (params) { - var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆 - var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁� - var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟 - var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣 + var newParamsName = "" // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆 + var paramsNameNumber = params.length // 瀹為檯鏍囩鐨勪釜鏁� + var provideNumber = 4 // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟 + var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣 /** * 鍒ゆ柇鏍囩鐨勪釜鏁版槸鍚﹀ぇ浜庤瀹氱殑涓暟锛� 濡傛灉澶т簬锛屽垯杩涜鎹㈣澶勭悊 濡傛灉涓嶅ぇ浜庯紝鍗崇瓑浜庢垨灏忎簬锛屽氨杩斿洖鍘熸爣绛� */ @@ -236,25 +250,25 @@ if (paramsNameNumber > provideNumber) { /** 寰幆姣忎竴琛�,p琛ㄧず琛� */ for (var p = 0; p < rowNumber; p++) { - var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓� - var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆 - var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃� + var tempStr = "" // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓� + var start = p * provideNumber // 寮�濮嬫埅鍙栫殑浣嶇疆 + var end = start + provideNumber // 缁撴潫鎴彇鐨勪綅缃� // 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊� if (p == rowNumber - 1) { // 鏈�鍚庝竴娆′笉鎹㈣ - tempStr = params.substring(start, paramsNameNumber); + tempStr = params.substring(start, paramsNameNumber) } else { // 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛� - tempStr = params.substring(start, end) + '\n'; + tempStr = params.substring(start, end) + "\n" } - newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓� + newParamsName += tempStr // 鏈�缁堟嫾鎴愮殑瀛楃涓� } } else { // 灏嗘棫鏍囩鐨勫�艰祴缁欐柊鏍囩 - newParamsName = params; + newParamsName = params } //灏嗘渶缁堢殑瀛楃涓茶繑鍥� - return newParamsName; + return newParamsName }, }, }, @@ -264,7 +278,7 @@ }, splitLine: { - show: false + show: false, }, axisTick: { show: false, @@ -273,70 +287,69 @@ axisLabel: { show: true, textStyle: { - color: '#fff', + color: "#fff", }, }, }, dataZoom: [ { - type: 'inside', + type: "inside", }, ], series: [ { - type: 'bar', - barWidth: '40%', + type: "bar", + barWidth: "40%", showBackground: true, itemStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#83bff6' }, - { offset: 0.5, color: '#188df0' }, - { offset: 1, color: '#188df0' }, + { offset: 0, color: "#83bff6" }, + { offset: 0.5, color: "#188df0" }, + { offset: 1, color: "#188df0" }, ]), }, emphasis: { itemStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#2378f7' }, - { offset: 0.7, color: '#2378f7' }, - { offset: 1, color: '#83bff6' }, + { offset: 0, color: "#2378f7" }, + { offset: 0.7, color: "#2378f7" }, + { offset: 1, color: "#83bff6" }, ]), }, }, data: data, }, ], - }; - const zoomSize = 6; - let myChart2 = this.$echarts.init(document.getElementById('leftCurrent2')); - myChart2.on('click', function (params) { + } + const zoomSize = 6 + let myChart2 = this.$echarts.init(document.getElementById("leftCurrent2")) + myChart2.on("click", function (params) { myChart2.dispatchAction({ - type: 'dataZoom', + type: "dataZoom", startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], endValue: dataAxis[ - Math.min(params.dataIndex + zoomSize / 2, data.length - 1) + Math.min(params.dataIndex + zoomSize / 2, data.length - 1) ], - }); - }); + }) + }) - myChart2.setOption(option2); - window.addEventListener('resize', function () { - myChart2.resize(); - }); - + myChart2.setOption(option2) + window.addEventListener("resize", function () { + myChart2.resize() + }) //宸︿笁鍥� - var legendData = ['浜哄憳', '鍙樻洿鍚庝汉鍛�']; //鍥句緥 + var legendData = ["浜哄憳", "鍙樻洿鍚庝汉鍛�"] //鍥句緥 var indicator = [ - { name: '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�', max: 80 }, - { name: '鍞愬北LNG', max: 80 }, - { name: '涓縿涓滅嚎绠¢亾宸ョ▼鍗楁', max: 160 }, - { name: '涓縿涓滅嚎绠¢亾宸ョ▼涓', max: 100 }, - { name: '鏂扮枂杩炴湪娌佺珯鍦�', max: 40 }, - { name: '骞垮窞绔�', max: 40 }, - ]; + { name: "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�", max: 80 }, + { name: "鍞愬北LNG", max: 80 }, + { name: "涓縿涓滅嚎绠¢亾宸ョ▼鍗楁", max: 160 }, + { name: "涓縿涓滅嚎绠¢亾宸ョ▼涓", max: 100 }, + { name: "鏂扮枂杩炴湪娌佺珯鍦�", max: 40 }, + { name: "骞垮窞绔�", max: 40 }, + ] var dataArr = [ { value: [35, 30, 80, 70, 15, 15], @@ -344,11 +357,11 @@ itemStyle: { normal: { lineStyle: { - color: '#4A99FF', + color: "#4A99FF", // shadowColor: '#4A99FF', // shadowBlur: 10, }, - shadowColor: '#4A99FF', + shadowColor: "#4A99FF", shadowBlur: 10, }, }, @@ -356,7 +369,7 @@ normal: { // 鍗曢」鍖哄煙濉厖鏍峰紡 color: { - type: 'linear', + type: "linear", x: 0, //鍙� y: 0, //涓� x2: 1, //宸� @@ -364,15 +377,15 @@ colorStops: [ { offset: 0, - color: '#4A99FF', + color: "#4A99FF", }, { offset: 0.5, - color: 'rgba(0,0,0,0)', + color: "rgba(0,0,0,0)", }, { offset: 1, - color: '#4A99FF', + color: "#4A99FF", }, ], globalCoord: false, @@ -384,7 +397,7 @@ label: { show: true, formatter: function (params) { - return params.value; + return params.value }, }, }, @@ -394,11 +407,11 @@ itemStyle: { normal: { lineStyle: { - color: '#4BFFFC', + color: "#4BFFFC", // shadowColor: '#4BFFFC', // shadowBlur: 10, }, - shadowColor: '#4BFFFC', + shadowColor: "#4BFFFC", shadowBlur: 10, }, }, @@ -406,7 +419,7 @@ normal: { // 鍗曢」鍖哄煙濉厖鏍峰紡 color: { - type: 'linear', + type: "linear", x: 0, //鍙� y: 0, //涓� x2: 1, //宸� @@ -414,15 +427,15 @@ colorStops: [ { offset: 0, - color: '#4BFFFC', + color: "#4BFFFC", }, { offset: 0.5, - color: 'rgba(0,0,0,0)', + color: "rgba(0,0,0,0)", }, { offset: 1, - color: '#4BFFFC', + color: "#4BFFFC", }, ], globalCoord: false, @@ -434,19 +447,19 @@ label: { show: true, formatter: function (params) { - return params.value; + return params.value }, }, }, - ]; - var colorArr = ['#4A99FF', '#4BFFFC']; //棰滆壊 + ] + var colorArr = ["#4A99FF", "#4BFFFC"] //棰滆壊 let option3 = { title: { - text: '浜哄憳鍙樺姩', + text: "浜哄憳鍙樺姩", padding: [10, 30], textStyle: { - color: '#fff', - fontSize: 15 + color: "#fff", + fontSize: 15, }, }, color: colorArr, @@ -454,7 +467,7 @@ // shape: 'circle', name: { textStyle: { - color: '#fff', + color: "#fff", fontSize: 12, }, }, @@ -469,49 +482,42 @@ show: true, areaStyle: { // 鍒嗛殧鍖哄煙鐨勬牱寮忚缃�� - color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层�� + color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层�� }, }, axisLine: { //鎸囧悜澶栧湀鏂囨湰鐨勫垎闅旂嚎鏍峰紡 lineStyle: { - color: '#153269', + color: "#153269", }, }, splitLine: { lineStyle: { - color: '#113865', // 鍒嗛殧绾块鑹� + color: "#113865", // 鍒嗛殧绾块鑹� width: 1, // 鍒嗛殧绾跨嚎瀹� }, }, }, series: [ { - type: 'radar', + type: "radar", symbolSize: 4, // symbol: 'angle', data: dataArr, }, ], - }; + } - let myChart3 = this.$echarts.init(document.getElementById('leftCurrent3')); - myChart3.setOption(option3); - window.addEventListener('resize', function () { - myChart3.resize(); - }); - + let myChart3 = this.$echarts.init(document.getElementById("leftCurrent3")) + myChart3.setOption(option3) + window.addEventListener("resize", function () { + myChart3.resize() + }) }, - - - - - - }, } </script> -<style lang="scss"> +<style lang="less"> .current { height: 100%; width: 100%; @@ -536,7 +542,7 @@ .leftContainer { height: 100%; - width: calc(100% - 36px); + width: calc(100% - 7px); display: flex; flex-direction: column; @@ -549,6 +555,14 @@ background: url(../../assets/img/Screen/chartbg.png); background-size: 100% 100%; background-repeat: no-repeat; + overflow: hidden; + } + .content { + width: 100%; + background: url(../../assets/img/Screen/contentBg.png); + background-size: 100% 100%; + background-repeat: no-repeat; + } } } diff --git a/src/components/Screen/mapsdk.vue b/src/components/Screen/mapsdk.vue index 553eb8b..c3c0699 100644 --- a/src/components/Screen/mapsdk.vue +++ b/src/components/Screen/mapsdk.vue @@ -127,7 +127,7 @@ } </script> -<style scoped lang="scss"> +<style scoped lang="less"> .ParentCentermapdiv { display: fixed; height: 100%; diff --git a/src/components/Screen/right.vue b/src/components/Screen/right.vue index f99994d..090c5f5 100644 --- a/src/components/Screen/right.vue +++ b/src/components/Screen/right.vue @@ -2,17 +2,22 @@ <div class="current"> <div class="rightContainer" v-show="ChartDisplay"> <div class="current1"> - <div class="aside-title">鐩綍鍒嗗竷</div> - <echart11></echart11> + <div class="aside-title">宸ョ▼绉嶇被</div> + <project-category></project-category> </div> - <div class="current1"> + <!-- <div class="current1"> <div class="aside-title">鏁版嵁鍙婃湇鍔℃彁浜�</div> <echart12></echart12> - </div> - <div class="current1"> - <div class="aside-title">鍚勭被鏁版嵁瀛樺偍鍒嗗竷</div> - <!-- <echart13></echart13> --> - <chart></chart> + </div> --> + <div class="" > + <div class="aside-title">鏂囦欢鏍煎紡</div> + <div class="content" style="height: 542px"> + <div class="header"> + <div>鏍煎紡</div> + <div>鏁伴噺</div> + </div> + <file-format></file-format> + </div> </div> </div> <div class="rightarrow"> @@ -24,14 +29,16 @@ import echart11 from "@/components/echart11.vue" import echart12 from "@/components/echart12.vue" import echart13 from "@/components/echart13.vue" -import chart from "@/components/chart/index.vue" +import FileFormat from "@/components/chart/FileFormat.vue" +import ProjectCategory from "../chart/ProjectCategory.vue" export default { components: { echart11, echart12, echart13, - chart + FileFormat, + ProjectCategory }, data() { return { @@ -52,7 +59,7 @@ }, } </script> -<style lang="scss"> +<style lang="less"> .current { height: 100%; width: 100%; @@ -74,7 +81,7 @@ } .rightContainer { height: 100%; - width: calc(100% - 36px); + width: calc(100% - 7px); display: flex; flex-direction: column; @@ -89,4 +96,19 @@ } } } +.content { + width: 377px; + background: url(../../assets/img/Screen/contentBg.png); + background-size: 100% 100%; + background-repeat: no-repeat; + .header { + margin: 0px auto; + padding: 10px 0; + width: 80%; + display: flex; + justify-content: space-between; + color: #fff; + font-size: 13px; + } +} </style> diff --git a/src/components/Screen/top.vue b/src/components/Screen/top.vue index bb6f7c9..f79dc91 100644 --- a/src/components/Screen/top.vue +++ b/src/components/Screen/top.vue @@ -62,7 +62,7 @@ }, } </script> -<style lang="scss"> +<style lang="less"> .top { height: 100%; width: 100%; diff --git a/src/components/chart/CountDataApply.vue b/src/components/chart/CountDataApply.vue new file mode 100644 index 0000000..ac948f4 --- /dev/null +++ b/src/components/chart/CountDataApply.vue @@ -0,0 +1,188 @@ +<template> + <div class="CountDataApply" ref="chart"></div> +</template> + +<script> +import * as echarts from "echarts" +import { countDataApply } from "@/api/screen.js" +export default { + data() { + return { + option: {}, + } + }, + mounted() { + // const option = this.initData() + this.initChart() + }, + methods: { + async initChart() { + const res = await countDataApply() + if (res.code == 200) { + } + let xAxis = [] + let yAxis = [] + + res.result.forEach(item => { + xAxis.push(item.name) + yAxis.push(item.number) + }) + + // let data = [220, 182, 191, 234, 290, 330, 310] + // const sideData = data.map(item => { + // return { + // name: item.name, + // value: item.number, + // } + // }) + + let option = { + backgroundColor: "transparent", + tooltip: { + trigger: "axis", + formatter: "{b} : {c}", + axisPointer: { + // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥 + type: "shadow", // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow' + }, + }, + xAxis: { + data: xAxis, + //鍧愭爣杞� + axisLine: { + lineStyle: { + color: "#3eb2e8", + }, + }, + //鍧愭爣鍊兼爣娉� + axisLabel: { + show: true, + textStyle: { + color: "#fff", + }, + }, + }, + yAxis: { + //鍧愭爣杞� + axisLine: { + show: false, + }, + //鍧愭爣鍊兼爣娉� + axisLabel: { + show: true, + textStyle: { + color: "#fff", + }, + }, + //鍒嗘牸绾� + splitLine: { + lineStyle: { + color: "#4784e8", + }, + }, + }, + series: [ + { + name: "a", + tooltip: { + show: false, + }, + type: "bar", + barWidth: 12, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 1, + 0, + 0, + [ + { + offset: 0, + color: "#0B4EC3", // 0% 澶勭殑棰滆壊 + }, + { + offset: 0.6, + color: "#138CEB", // 60% 澶勭殑棰滆壊 + }, + { + offset: 1, + color: "#17AAFE", // 100% 澶勭殑棰滆壊 + }, + ], + false + ), + }, + }, + data: xAxis, + barGap: 0, + }, + { + type: "bar", + barWidth: 8, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 1, + 0, + 0, + [ + { + offset: 0, + color: "#09337C", // 0% 澶勭殑棰滆壊 + }, + { + offset: 0.6, + color: "#0761C0", // 60% 澶勭殑棰滆壊 + }, + { + offset: 1, + color: "#0575DE", // 100% 澶勭殑棰滆壊 + }, + ], + false + ), + }, + }, + barGap: 0, + data: yAxis, + }, + { + name: "b", + tooltip: { + show: false, + }, + type: "pictorialBar", + itemStyle: { + borderWidth: 1, + borderColor: "#0571D5", + color: "#1779E0", + }, + symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z", + symbolSize: ["30", "12"], + symbolOffset: ["0", "-11"], + //symbolRotate: -5, + symbolPosition: "end", + data: xAxis, + z: 3, + }, + ], + } + const chart = echarts.init(this.$refs.chart) + + chart.setOption(option) + window.addEventListener("resize", function () { + chart.resize() + }) + }, + }, +} +</script> + +<style lang="scss" scoped> +.CountDataApply { + width: 100%; + height: 100%; +} +</style> diff --git a/src/components/chart/DataStorage.vue b/src/components/chart/DataStorage.vue new file mode 100644 index 0000000..ce7a550 --- /dev/null +++ b/src/components/chart/DataStorage.vue @@ -0,0 +1,216 @@ +<template> + <div class="data-storage"> + <div class="data-storage__header"> + <div class="text"> + <img + class="img" + src="@/assets/img/Screen/cunchu.png" + alt="" + srcset="" + /> + <div class="title">鍏卞瓨鍌ㄦ枃浠舵暟閲�</div> + </div> + <div class="num"> + <dv-digital-flop :config="config1" style="width: 70px; height: 20px" /> + <!-- <div class="value">5</div> --> + </div> + </div> + <div class="data-storage__content"> + <!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> --> + <el-scrollbar class="scrollbar"> + <el-table + :data="tableData" + :row-style="{ background: 'rgba(135,180,248,0.10)' }" + :cell-style="{ background: 'rgba(135,180,248,0.10)' }" + :header-row-style="{ + background: 'rgba(57,128,236,0.29)', + color: '#fff', + }" + :header-cell-style="{ + background: 'rgba(57,128,236,0.29)', + color: '#fff', + }" + > + <el-table-column prop="index" label="缂栧彿" width="50"> + <template slot-scope="scope"> + <div + style=" + background: rgba(180, 188, 235, 0.25); + text-align: center; + " + > + {{ scope.row.index }} + </div> + </template> + </el-table-column> + <el-table-column align="center" prop="name" label="鍚嶇О"> + <template slot-scope="scope"> + <div>{{ scope.row.name }}</div> + </template> + </el-table-column> + <el-table-column prop="num" label="鏂囦欢鏁�" width="70"> + </el-table-column> + </el-table> + </el-scrollbar> + </div> + </div> +</template> + +<script> +import { countDataStorage } from "@/api/screen.js" +export default { + data() { + return { + tableData: [ + { + date: "2016-05-02", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�", + }, + { + date: "2016-05-04", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�", + }, + { + date: "2016-05-01", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�", + }, + { + date: "2016-05-03", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�", + }, + ], + config: { + header: ["缂栧彿", "鍚嶇О", "鏂囦欢鏁�"], + data: [ + ["琛�1鍒�1", "琛�1鍒�2", "琛�1鍒�3"], + ["琛�2鍒�1", "琛�2鍒�2", "琛�2鍒�3"], + ["琛�3鍒�1", "琛�3鍒�2", "琛�3鍒�3"], + ["琛�4鍒�1", "琛�4鍒�2", "琛�4鍒�3"], + ["琛�5鍒�1", "琛�5鍒�2", "琛�5鍒�3"], + ["琛�6鍒�1", "琛�6鍒�2", "琛�6鍒�3"], + ["琛�7鍒�1", "琛�7鍒�2", "琛�7鍒�3"], + ["琛�8鍒�1", "琛�8鍒�2", "琛�8鍒�3"], + ["琛�9鍒�1", "琛�9鍒�2", "琛�9鍒�3"], + ["琛�10鍒�1", "琛�10鍒�2", "琛�10鍒�3"], + ], + columnWidth: [40, 300, 50], + align: ["center"], + carousel: "page", + }, + config1: { + number: [0], + content: "{nt}涓�", + style: { + fontSize: 12, + fill: "#00baff", + }, + }, + } + }, + created() { + this.initTable() + }, + methods: { + async initTable() { + const res = await countDataStorage() + if (res.code == 200) { + let count = 0 + this.tableData = res.result.map((item, i) => { + count += item.鏂囦欢鏁� + return { + index: i + 1, + name: item.鍚嶇О, + num: item.鏂囦欢鏁�, + } + }) + console.log(count) + this.config1.number = [count] + this.config1 = { + ...this.config1, + } + } + }, + }, +} +</script> + +<style lang="scss" scoped> +.data-storage { + margin: 10px; + width: 377px; + &__header { + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: space-between; + height: 20px; + width: 340px; + box-sizing: border-box; + .text { + display: flex; + align-items: center; + } + .title { + font-family: Source Han Sans CN, Source Han Sans CN-Regular; + color: #ffffff; + } + .img { + margin-right: 4px; + + width: 16px; + height: 16px; + } + .value { + text-align: center; + color: #ffffff; + width: 16px; + height: 20px; + background: url("~@/assets/img/Screen/numBg.png"); + background-size: 100% 100%; + } + } + &__content { + width: 95%; + height: 220px; + } +} +</style> + +<style lang="scss"> +.index-wrap { + margin: 0 auto; + width: 14px; + height: 14px; + background: rgba(180, 188, 235, 0.25); +} +.scrollbar { + width: 100%; + overflow-x: hidden; + height: 200px; + .el-scrollbar__wrap { + overflow-x: hidden; + } + .el-table { + height: 100%; + width: 100%; + background-color: transparent; + color: #fff; + } + .el-table th.el-table__cell.is-leaf, + .el-table td.el-table__cell { + border: none; + } + .el-table--group::after, + .el-table--border::after, + .el-table::before { + border: none; + } + .el-table::before { + height: 0; + } +} +</style> diff --git a/src/components/chart/FileFormat.vue b/src/components/chart/FileFormat.vue new file mode 100644 index 0000000..306fafe --- /dev/null +++ b/src/components/chart/FileFormat.vue @@ -0,0 +1,252 @@ +<template> + <div class="file-format" ref="chart"></div> +</template> + +<script> +import * as echarts from "echarts" +import { countFileFormat } from "@/api/screen.js" +export default { + data() { + return { + option: {}, + } + }, + mounted() { + this.initChart() + }, + methods: { + async initChart() { + let data = [ + { + name: "user1", + value: 10, + }, + { + name: "user2", + value: 20, + }, + { + name: "user3", + value: 23, + }, + { + name: "user4", + value: 44, + }, + { + name: "user1", + value: 10, + }, + { + name: "user2", + value: 20, + }, + { + name: "user3", + value: 53, + }, + { + name: "user4", + value: 24, + }, + { + name: "user1", + value: 10, + }, + { + name: "user2", + value: 20, + }, + ] + const res = await countFileFormat() + if (res.code == 200) { + data = res.result.map(item => { + return { + name: item.type, + value: item.count, + } + }) + } + data.sort((a, b) => b.value - a.value) + data = data.slice(0, 10) + let getArrByKey = (data, k) => { + let key = k || "value" + let res = [] + if (data) { + data.forEach(function (t) { + res.push(t[key]) + }) + } + return res + } + let getSymbolData = data => { + let arr = [] + for (var i = 0; i < data.length; i++) { + arr.push({ + value: data[i].value, + symbolPosition: "end", + }) + } + return arr + } + let opt = { + index: 0, + } + let color = ["#A71A2B"] + data = data.sort((a, b) => { + return b.value - a.value + }) + let option = { + backgroundColor: "transparent", + grid: { + top: "2%", + bottom: "2%", + right: "5%", + left: "10%", + containLabel: true, + }, + xAxis: { + show: false, + }, + yAxis: [ + { + triggerEvent: true, + show: true, + inverse: true, + data: getArrByKey(data, "name"), + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: false, + interval: 0, + color: "#fff", + align: "left", + margin: 0, + fontSize: 13, + formatter: function (value, index) { + return "{title|" + value + "}" + }, + rich: { + title: { + width: 165, + }, + }, + }, + }, + { + triggerEvent: true, + show: true, + inverse: true, + data: getArrByKey(data, "name"), + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + shadowOffsetX: "-20px", + color: "#fff", + align: "right", + verticalAlign: "bottom", + lineHeight: 20, + fontSize: 13, + formatter: function (value, index) { + return data[index].value + }, + }, + }, + ], + series: [ + { + name: "XXX", + type: "pictorialBar", + symbol: + "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==", + symbolSize: [35, 35], + symbolOffset: [20, 0], + z: 5, + data: getSymbolData(data), + }, + { + name: "鏉�", + type: "bar", + showBackground: true, + barBorderRadius: 10, + yAxisIndex: 0, + data: data, + barWidth: 8, + // align: left, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 0, + [ + { + offset: 0, + color: "#5A9DFF", + }, + { + offset: 0.7, + color: "#1878FF", + }, + { + offset: 1, + color: "#164182", + }, + ], + false + ), + barBorderRadius: 5, + }, + // color: '#A71A2B', + barBorderRadius: 2, + }, + label: { + normal: { + color: "#fff", + show: true, + position: ["0px", "-25px"], + textStyle: { + fontSize: 14, + }, + formatter: function (a, b) { + return a.name + }, + }, + }, + }, + ], + } + + const chart = echarts.init(this.$refs.chart) + + chart.setOption(option) + window.addEventListener("resize", function () { + chart.resize() + }) + }, + }, +} +</script> + +<style lang="less" scoped> +.file-format { + width: 100%; + height: 100%; +} +</style> diff --git a/src/components/chart/ProjectCategory.vue b/src/components/chart/ProjectCategory.vue new file mode 100644 index 0000000..242cec7 --- /dev/null +++ b/src/components/chart/ProjectCategory.vue @@ -0,0 +1,136 @@ +<template> + <div class="project-category"> + <div class="content"> + + <div + :class="i % 2 ? 'rank2' : 'rank1'" + v-for="(item, i) in datalist.slice(0, 8)" + :key="item.projtype" + > + <div class="num">{{ item.count }}涓�</div> + <div class="name">{{ item.projtype }}</div> + <div class="bar"> + <img src="~@/assets/img/Screen/leftBar.png" alt="" /> + </div> + </div> + + + <!-- <div class="rank rank2"> + <div class="num">2涓�</div> + <div class="name">鍌ㄦ皵搴撳伐绋�</div> + <div class="bar"> + <img src="~@/assets/img/Screen/leftBar.png" alt=""> + </div> + </div> + <div class="rank rank3"> + <div class="num">2涓�</div> + <div class="name">鍌ㄦ皵搴撳伐绋�</div> + <div class="bar"> + <img src="~@/assets/img/Screen/leftBar.png" alt=""> + </div> + </div> + <div class="rank rank4"> + <div class="num">2涓�</div> + <div class="name">鍌ㄦ皵搴撳伐绋�</div> + <div class="bar"> + <img src="~@/assets/img/Screen/leftBar.png" alt=""> + </div> + </div> + <div class="rank rank1"> + <div class="num">2涓�</div> + <div class="name">鍌ㄦ皵搴撳伐绋�</div> + <div class="bar"> + <img src="~@/assets/img/Screen/leftBar.png" alt=""> + </div> + </div> + <div class="rank rank2"> + <div class="num">2涓�</div> + <div class="name">鍌ㄦ皵搴撳伐绋�</div> + <div class="bar"> + <img src="~@/assets/img/Screen/leftBar.png" alt=""> + </div> + </div> --> + </div> + </div> +</template> + +<script> +import { countProjectCategory } from "@/api/screen.js" +export default { + data() { + return { + datalist: [], + } + }, + created() { + this.initData() + }, + methods: { + async initData() { + const res = await countProjectCategory() + if (res.code == 200) { + this.datalist = res.result + } + }, + }, +} +</script> + +<style lang="scss" scoped> +.project-category { + position: relative; + width: 100%; + height: 100%; + background: url("~@/assets/img/Screen/projectBg.png") center center; + background-size: 330px 227px; + .content { + position: relative; + display: flex; + flex-wrap: wrap; + margin: 0 auto; + height: 90%; + justify-content: space-between; + .rank1, .rank2 { + // box-sizing: border-box; + // display: flex; + // flex-direction: column; + // width: 160px; + // flex: 1; + height: 25px; + // align-items: end; + + .num { + color: #839ecb; + } + .name { + // margin: 6px; + color: #fff; + } + .bar { + width: 61px; + height: 3px; + // background: url("~@/assets/img/Screen/leftBar.png"); + // background-size: 100% 100%; + img { + width: 100%; + height: 100%; + } + } + } + .rank1 { + width: 35%; + display: flex; + flex-direction: column; + align-items: end; + text-align: right; + } + .rank2 { + width: 35%; + display: flex; + flex-direction: column; + align-items: start; + text-align: left; + } + } +} +</style> diff --git a/src/components/chart/index.vue b/src/components/chart/ServiceType.vue similarity index 80% rename from src/components/chart/index.vue rename to src/components/chart/ServiceType.vue index c0d1e5d..d84e8be 100644 --- a/src/components/chart/index.vue +++ b/src/components/chart/ServiceType.vue @@ -4,7 +4,7 @@ <script> import * as echarts from "echarts" - +import { countDataVisit } from "@/api/screen.js" export default { data() { return {} @@ -13,15 +13,8 @@ this.initChart() }, methods: { - initChart() { - const chart = echarts.init(this.$refs.chart) - - chart.setOption(option) - window.addEventListener("resize", function () { - chart.resize() - }) - }, - initData() { + async initChart() { + const res = await countDataVisit() let dataPie = [ { value: 410, @@ -56,15 +49,26 @@ name: "涓汉5", }, ] + let count = 0 + if (res.code == 200) { + dataPie = res.result.map(item => { + count += item.count + return { + value: item.count, + name: item.modular1, + } + }) + } + let colorPie = ["#5f6d86", "#0b2036", "#002e49"] let colorWrap = [ + "#006CFF", "#3087d6", "#afe1ff", "#4be1ff", - "#006CFF", "#5C7AAE", "#15D0FF", - "#00BAFF", + "#7f44bb", "#9BD3FF", ] let baseDataPie = [], @@ -87,7 +91,7 @@ itemStyle: { normal: { color: colorWrap[i], - borderWidth: 5, + borderWidth: 4, borderColor: colorWrap[i], shadowBlur: 5, shadowColor: "rgba(48, 135, 214, 0.3)", @@ -109,35 +113,36 @@ } let option = { - backgroundColor: "#021228", + backgroundColor: "transparent", title: { text: "鏈嶅姟绫诲瀷鎬绘暟閲�", - subtext: "10,225", + subtext: count, textStyle: { - color: "#00b5f3", + color: "#fff", fontSize: 12, }, subtextStyle: { align: "center", - fontSize: 18, - color: ["#85c7e3"], - fontWeight: 800, + fontSize: 20, + color: ["#fff"], + fontWeight: 400, + fontFamily: "YouSheBiaoTiHei", }, x: "20%", y: "40%", }, - tooltip: { - show: true, - // trigger: "item", - // formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%", - }, + // tooltip: { + // show: true, + // // trigger: "item", + // // formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%", + // }, legend: { - data: ["浼佷笟", "鏀垮簻", "涓汉"], + data: dataPie, icon: "vertical", right: "1%", - top: "center", + top: "10%", orient: "vertical", - itemGap: 20, + itemGap: 7, itemWidth: 12, itemHeight: 3, @@ -148,11 +153,11 @@ target = dataPie[i].value } } - let arr = [name, target] - return arr.join("\n") + let arr = `${name} |${target}` + return arr }, textStyle: { - lineHeight: 20, + lineHeight: 15, color: "#9ed2f5", }, }, @@ -181,7 +186,7 @@ data: baseDataWrap, }, { - name: "鎶ヨ", + name: "鏈嶅姟绫诲瀷", type: "pie", color: "#5F6D86", selectedMode: "single", @@ -198,6 +203,12 @@ }, ], } + const chart = echarts.init(this.$refs.chart) + + chart.setOption(option) + window.addEventListener("resize", function () { + chart.resize() + }) }, }, } diff --git a/src/main.js b/src/main.js index a6fa7a2..2d26db7 100644 --- a/src/main.js +++ b/src/main.js @@ -17,6 +17,10 @@ import '@/assets/css/config.css' import 'animate.css'; import VueParticles from 'vue-particles' +import dataV from '@jiaminghi/data-view' + +Vue.use(dataV) + Vue.use(VueParticles) Vue.prototype.$echarts = echarts; import * as echarts from 'echarts'; @@ -27,6 +31,8 @@ Vue.prototype.$wkt = WKT; Vue.config.productionTip = false; + + new Vue({ router, i18n, diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue index 8806e59..d3b7ca7 100644 --- a/src/views/Thematic/index.vue +++ b/src/views/Thematic/index.vue @@ -104,14 +104,22 @@ <style lang="less"> .themaic { .aside-title { + box-sizing: border-box; padding-left: 30px; - height: 27px; - line-height: 27px; - background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%); + // height: 27px; + // line-height: 27px; + // background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%); font-size: 15px; font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular; - -webkit-background-clip: text; + // -webkit-background-clip: text; color: #fff; + width: 100%; + + height: 30px; + line-height: 30px; + background: url(~@/assets/img/Screen/asideTitleBg.png); + background-size: 100% 100%; + background-repeat: no-repeat; } } </style> -- Gitblit v1.9.3