From 234409bb4a612c5b69b78b1e844492f0a7122521 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期二, 28 二月 2023 19:15:32 +0800
Subject: [PATCH] 工程&管线接口对接
---
src/components/chart/projectintroduction.vue | 214 +++++----
src/assets/img/Screen/all.png | 0
src/components/Screen/top.vue | 57 ++
src/components/chart/FileFormat.vue | 19
src/components/chart/BasePieChart .vue | 66 +-
src/components/Screen/left.vue | 89 +++
src/components/Screen/right.vue | 85 +++
src/components/Screen/bottom.vue | 100 +++-
src/components/chart/ServiceType.vue | 2
src/components/chart/DataStorageType.vue | 429 ++++++++++++++++++++
src/components/chart/BaseBarChart.vue | 55 ++
src/components/chart/BaseLineChart.vue | 46 +
src/views/Thematic/index.vue | 24
src/api/screen.js | 44 +
14 files changed, 1,009 insertions(+), 221 deletions(-)
diff --git a/src/api/screen.js b/src/api/screen.js
index 1ff92b7..d01f1a2 100644
--- a/src/api/screen.js
+++ b/src/api/screen.js
@@ -1,6 +1,6 @@
import request from "@/utils/request"
-// 涓�寮犲浘鏁版嵁鎺ュ彛
+// 涓�寮犲浘鏁版嵁鎺ュ彛
// 鏁版嵁鐢宠
export function countDataApply(params) {
@@ -45,11 +45,45 @@
}
//鏈嶅姟璁块棶娆℃暟
-export function GetServicesVisitsCount(){
- return request.get("/oneMap/countDataServiceType")
+export function GetServicesVisitsCount(params) {
+ return request.get("/oneMap/countDataServiceType", { params: params })
}
//鎸夌収绫诲埆璁块棶缁熻璁块棶娆℃暟
-export function GetTypeVisitsCount(){
- return request.get("/oneMap/countLargeCategories")
+export function GetTypeVisitsCount(params) {
+ return request.get("/oneMap/countLargeCategories", { params: params })
+}
+
+//鍏ㄥ浗绔欏満搴ф暟銆侀榾瀹ゃ�佺閬撴暟绛�
+export function countZhPipeStations(params) {
+ return request.get("/oneMap/countZhPipeStations", { params: params })
+}
+//鍏ㄥ浗绠＄綉鍥捐緭閫佷粙璐ㄩ暱搴�
+export function countZhPipeMapLength(params) {
+ return request.get("/oneMap/countZhPipeMapLength", { params: params })
+}
+//鍦扮伨countLargeCategories
+export function countLargeCategories(params) {
+ return request.get("/oneMap/countLargeCategories", { params: params })
+}
+
+// 鑾峰彇椤圭洰鍒楄〃 閮ㄥ垎淇℃伅涓嶅叏
+export function selectProjectFileList(params) {
+ return request.get("/oneMap/selectProjectFileList", { params: params })
+}
+// 鍗曚釜椤圭洰鏂囦欢涓嬭浇
+export function countProjectType(params) {
+ return request.get("/oneMap/countProjectType", { params: params })
+}
+// 鍗曚釜椤圭洰鏁版嵁瀛樺偍閲�
+export function countProjectStorage(params) {
+ return request.get("/oneMap/countProjectStorage", { params: params })
+}
+// 鍗曚釜椤圭洰涓嬭浇閲�
+export function countProjectDown(params) {
+ return request.get("/oneMap/countProjectDown", { params: params })
+}
+// 鍗曚釜椤圭洰淇℃伅
+export function selectProjectInfo(params) {
+ return request.get("/oneMap/selectProjectInfo", { params: params })
}
diff --git a/src/assets/img/Screen/all.png b/src/assets/img/Screen/all.png
new file mode 100644
index 0000000..f3e0278
--- /dev/null
+++ b/src/assets/img/Screen/all.png
Binary files differ
diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue
index f937682..2e2d4e7 100644
--- a/src/components/Screen/bottom.vue
+++ b/src/components/Screen/bottom.vue
@@ -3,33 +3,61 @@
<div class="bottom1">
<div class="bottom11"></div>
<div class="bottom12">
- <div :class="currMenu == item.menuName ? 'active' : ''" v-for="item in menuList" :key="item.menuName"
- class="bottombtn" @click="handleMenuClick(item)">
- <el-popover popper-class="popover" placement="top" width="100" trigger="click">
+ <div
+ :class="currMenu == item.menuName ? 'active' : ''"
+ v-for="item in menuList"
+ :key="item.menuName"
+ class="bottombtn"
+ @click="handleMenuClick(item)"
+ >
+ <el-popover
+ popper-class="popover"
+ placement="top"
+ width="100"
+ trigger="click"
+ >
<!-- 鍐呭 -->
<span slot="reference">{{ item.menuName }}</span>
<div class="popover-content">
<div class="popover-content__header">椤圭洰淇℃伅</div>
<div class="popover-content__search">
- <el-input size="mini" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchName" @change="handleSearchChange(item)">
+ <el-input
+ size="mini"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ v-model="searchName"
+ @change="handleSearchChange(item)"
+ >
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
<div class="popover-content__list">
- <div class="popover-content__list__item" v-for="(child, i) in currMenuList" :key="child.id + i"
- :class="currProject == child.name ? 'active' : ''" @click="handlePopoverClick(child)"
- :title="child.name">
+ <div
+ class="popover-content__list__item"
+ v-for="(child, i) in currMenuList"
+ :key="child.id + i"
+ :class="currProject == child.name ? 'active' : ''"
+ @click="handlePopoverClick(child)"
+ :title="child.name"
+ >
{{ child.name.slice(0, 8) }}
</div>
</div>
</div>
</el-popover>
</div>
+
+ <div
+ class="bottombtn"
+ :class="showTree ? 'active' : ''"
+ @click="handleTree"
+ >
+ 鍥惧眰绠＄悊
+ </div>
</div>
<div class="bottom13">
- <img :src="yxImg" @click="ChangeBaseLayer('yx')" title="褰卞儚鍥�" />
- <img :src="xrImg" @click="ChangeBaseLayer('xr')" title="鏅曟覆鍥�"/>
+ <img :src="yxImg" @click="ChangeBaseLayer('yx')" title="褰卞儚鍥�" />
+ <img :src="xrImg" @click="ChangeBaseLayer('xr')" title="鏅曟覆鍥�" />
</div>
</div>
<div class="bottom2">
@@ -44,6 +72,7 @@
countProjectTour,
countProjectDisplay,
countProjectLocation,
+ selectProjectFileList,
} from "@/api/screen.js"
import { wktToGeoJSON } from "@terraformer/wkt"
@@ -52,7 +81,7 @@
return {
YXState: true,
XRState: true,
- yunxuanLayer: null,//鍏ㄧ悆鐪╂檿鍥�
+ yunxuanLayer: null, //鍏ㄧ悆鐪╂檿鍥�
yxImg: require("../../assets/img/Screen/yximg.png"),
xrImg: require("../../assets/img/Screen/bdimg.png"),
currMenu: "涓撻灞曠ず",
@@ -139,6 +168,7 @@
],
},
],
+ showTree: false,
}
},
computed: {
@@ -160,7 +190,7 @@
},
methods: {
ChangeBaseLayer(parm) {
- if (parm == 'yx') {
+ if (parm == "yx") {
if (this.YXState) {
//this.yxImg = require("../../assets/img/Screen/bdimg.png")
//鍔犺浇鐧惧害褰卞儚
@@ -176,7 +206,7 @@
this.YXState = !this.YXState
}
- if (parm == 'xr') {
+ if (parm == "xr") {
if (yunxuanLayer == null) {
var urls = "https://tiles3.geovisearth.com/base/v1/ter"
// 鏄熷浘鍦扮悆鍦板舰鏅曟覆
@@ -194,15 +224,12 @@
)
}
if (this.XRState) {
- yunxuanLayer.item.show = true;
+ yunxuanLayer.item.show = true
} else {
- yunxuanLayer.item.show = false;
+ yunxuanLayer.item.show = false
}
- this.XRState = !this.XRState;
+ this.XRState = !this.XRState
}
-
-
-
},
handleMenuClick(menu) {
this.currMenu = menu.menuName
@@ -215,12 +242,15 @@
this.showPathLine(child)
break
case "椤圭洰灞曠ず":
- this.DisplayCurrentProject(child)
+ // this.DisplayCurrentProject(child)
this.changeProject(child)
+ this.$bus.$emit("changeProjectCode", child.id)
+
break
case "涓撻灞曠ず":
this.changeProject(child)
break
+
default:
break
}
@@ -265,8 +295,6 @@
//椤圭洰灞曠ず
DisplayCurrentProject(params) {
-
-
//鎵撳紑鎴栬�呭姞杞藉浘灞�
//椋炲埌鎸囧畾浣嶇疆
@@ -294,20 +322,31 @@
return menu.children
// return menu.children.filter(item => item.name.indexOf(searchName) > -1)
},
- handleSearchChange(currMenu) { },
+ handleSearchChange(currMenu) {},
async getCountProjectDisplay() {
- const res = await countProjectLocation()
+ // const res = await countProjectLocation()
+ // if (res.code === 200) {
+ // const menu = this.menuList.find(item => item.menuName == "椤圭洰灞曠ず")
+ // menu.children = res.result.map(item => {
+ // return {
+ // name: item.projname,
+ // id: item.projname,
+ // wkt: item.wkt,
+ // }
+ // })
+ // }
+ const res = await selectProjectFileList()
if (res.code === 200) {
const menu = this.menuList.find(item => item.menuName == "椤圭洰灞曠ず")
menu.children = res.result.map(item => {
return {
- name: item.projname,
- id: item.projname,
+ name: item.name,
+ id: item.code,
wkt: item.wkt,
}
})
-
}
+ selectProjectFileList
},
async getCountProjectTour() {
const res = await countProjectTour()
@@ -320,13 +359,16 @@
wkt: item.wkt,
}
})
-
}
},
//涓撻灞曠ず
changeProject(params) {
- this.$bus.$emit('changeProject', params.name)
- }
+ this.$bus.$emit("changeProject", params.name)
+ },
+ handleTree(params) {
+ this.showTree = !this.showTree
+ this.$bus.$emit("changeTree", this.showTree)
+ },
},
}
</script>
diff --git a/src/components/Screen/left.vue b/src/components/Screen/left.vue
index eb15e3c..2f30e4b 100644
--- a/src/components/Screen/left.vue
+++ b/src/components/Screen/left.vue
@@ -20,33 +20,47 @@
<!-- 鍏ㄧ悆銆佸叏鍥界粺璁℃鏁� -->
<div class="leftContainer" v-if="currentDisplay == '椤圭洰'">
<div class="current1" id="leftCurrent1">
- <div class="aside-title">鍥藉唴銆佸浗澶�</div>
+ <div class="aside-title">鏁版嵁鎬昏</div>
+ <div class="wrapper">
+ <div class="title">{{ currentProject }}</div>
+ <dv-digital-flop style="height: 40px" :config="xmCountConfig" />
+ </div>
</div>
<div class="current1" id="leftCurrent2">
- <div class="aside-title">缁熻鍦扮伨銆佹礊搴撶瓑涓撲笟鏁版嵁瀛樺偍閲�</div>
- <base-line-chart :project="currProject"></base-line-chart>
+ <div class="aside-title">瀛樺偍淇℃伅</div>
+ <base-line-chart
+ :requsetFn="requsetFn"
+ :project="currentProject"
+ title="鏁版嵁瀛樺偍閲�"
+ ></base-line-chart>
</div>
<div class="current1" id="leftCurrent3">
<div class="aside-title">鏁版嵁瀛樺偍閲�</div>
- <data-storage></data-storage>
+ <data-storage-type></data-storage-type>
</div>
</div>
<!-- 鍏ㄧ悆銆佸叏鍥界缃戝浘 -->
<div class="leftContainer" v-if="currentDisplay == '绠＄綉'">
<div class="current1" id="leftCurrent1">
- <div class="aside-title">绠＄綉鍥藉唴銆佸浗澶�</div>
- <!-- <base-bar-chart :project="currProject"></base-bar-chart> -->
- <!-- <count-data-apply></count-data-apply> -->
+ <div class="aside-title">鏁版嵁鎬昏</div>
+ <div class="wrapper">
+ <div class="title">{{ currentProject }}</div>
+ <dv-digital-flop style="height: 40px" :config="xmCountConfig" />
+ </div>
</div>
<div class="current1" id="leftCurrent2">
- <div class="aside-title">杈撻�佷粙璐ㄧ被鍒粺璁￠暱搴�</div>
- <base-line-chart :project="currProject"></base-line-chart>
- <!-- <base-pie-chart :project="currProject"></base-pie-chart> -->
+ <div class="aside-title">绠＄綉闀垮害</div>
+ <base-line-chart
+ :requsetFn="requsetFn"
+ :project="currentProject"
+ title="绠＄綉闀垮害"
+ ></base-line-chart>
+ <!-- <base-pie-chart :project="currentProject"></base-pie-chart> -->
<!-- <service-type></service-type> -->
</div>
<div class="current1" id="leftCurrent3">
<div class="aside-title">鏁版嵁瀛樺偍閲�</div>
- <data-storage></data-storage>
+ <data-storage-type></data-storage-type>
</div>
</div>
<!-- 鍗曚釜宸ョ▼灞曠ず -->
@@ -64,9 +78,6 @@
<projectTime></projectTime>
</div>
</div>
- <!-- <div class="leftContainer" v-if="ProjectreeDisplay">
- <project-tree></project-tree>
- </div> -->
</div>
</template>
<script>
@@ -74,13 +85,28 @@
import countDataApply from "@/components/chart/CountDataApply.vue"
import ServiceType from "../chart/ServiceType.vue"
import DataStorage from "../chart/DataStorage.vue"
+import DataStorageType from "../chart/DataStorageType.vue"
+
import BaseBarChart from "../chart/BaseBarChart.vue"
import BaseLineChart from "../chart/BaseLineChart.vue"
import BasePieChart from "../chart/BasePieChart .vue"
import projectintroduction from "../chart/projectintroduction.vue"
import projectState from "../chart/projectState.vue"
import projectTime from "../chart/projectTime.vue"
+import {
+ countCountryDimension,
+ countProvinceDimension,
+ countZhPipeStations,
+ countZhPipeMapLength,
+} from "@/api/screen.js"
+function formatter(number) {
+ const numbers = number.toString().split("").reverse()
+ const segs = []
+ while (numbers.length) segs.push(numbers.splice(0, 3).join(""))
+
+ return segs.join(",").split("").reverse().join("")
+}
export default {
components: {
ProjectTree,
@@ -93,6 +119,7 @@
projectintroduction,
projectState,
projectTime,
+ DataStorageType
},
data() {
return {
@@ -102,8 +129,14 @@
GlobleChartDisplay: false,
CountryChartDisplay: false,
leftImg: require("../../assets/img/Screen/rightArrow.png"),
- currProject: "鍏ㄧ悆椤圭洰",
+ currentProject: "鍏ㄧ悆椤圭洰",
currentDisplay: "澶у睆",
+ requsetFn: countZhPipeMapLength,
+ xmCountConfig: {
+ number: [0],
+ content: "{nt}",
+ formatter,
+ },
}
},
mounted() {
@@ -118,7 +151,16 @@
} else {
this.currentDisplay = "宸ョ▼"
}
+
this.currentProject = name
+ })
+ this.$bus.$on("changeCount", count => {
+ if (typeof count == "number") {
+ this.xmCountConfig.number = [count]
+ this.xmCountConfig = {
+ ...this.xmCountConfig,
+ }
+ }
})
},
methods: {
@@ -639,6 +681,23 @@
background-size: 100% 100%;
background-repeat: no-repeat;
}
+ .wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin: 15px auto;
+ width: 180px;
+ height: 180px;
+ background: url(../../assets/img/Screen/all.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ .title {
+ color: #fff;
+ font-size: 20px;
+ width: 100%;
+ text-align: center;
+ }
+ }
}
}
</style>
diff --git a/src/components/Screen/right.vue b/src/components/Screen/right.vue
index dda3675..1dc7ac9 100644
--- a/src/components/Screen/right.vue
+++ b/src/components/Screen/right.vue
@@ -17,9 +17,9 @@
<!-- 鍏ㄧ悆銆佸叏鍥介」鐩� -->
<div class="rightContainer" v-if="currentDisplay == '椤圭洰'">
<div class="current1">
- <div class="aside-title">椤圭洰鏌辩姸鍥�</div>
+ <div class="aside-title"></div>
<!-- <country-dimension-bar ref="barRef"></country-dimension-bar> -->
- <base-bar-chart :project="currentProject"></base-bar-chart>
+ <base-bar-chart title="椤圭洰涓暟" :project="currentProject"></base-bar-chart>
</div>
<div class="current1">
<div class="aside-title">椤圭洰楗肩姸鍥�</div>
@@ -32,7 +32,10 @@
</div>
<div class="current1">
<div class="aside-title">椤圭洰鏁版嵁浣跨敤鎯呭喌</div>
- <dv-capsule-chart :config="config" style="width: 360px; height: 85%" />
+ <dv-capsule-chart
+ :config="barConfig"
+ style="width: 360px; height: 85%"
+ />
</div>
</div>
<!-- 鍏ㄥ浗銆佸叏鐞冪缃� -->
@@ -40,7 +43,7 @@
<div class="current1">
<div class="aside-title">绔欏満搴ф暟</div>
<!-- <country-dimension-bar ref="barRef"></country-dimension-bar> -->
- <base-bar-chart :project="currentProject"></base-bar-chart>
+ <base-bar-chart title="绔欏満搴ф暟" :project="currentProject"></base-bar-chart>
</div>
<div class="current1">
<div class="aside-title">闃�瀹ゅ骇鏁�</div>
@@ -61,11 +64,11 @@
<div class="rightContainer" v-if="currentDisplay == '宸ョ▼'">
<div class="current1">
<div class="aside-title">鏁版嵁瀛樺偍閲�</div>
- <base-line-chart :project="currentProject"></base-line-chart>
+ <base-line-chart title="鏁版嵁瀛樺偍閲�" :project="currentProject" :params="params"></base-line-chart>
</div>
<div class="current1">
<div class="aside-title">鏁版嵁涓嬭浇娆℃暟</div>
- <base-pie-chart height="90%" :project="currentProject"></base-pie-chart>
+ <base-pie-chart height="90%" :project="currentProject" :params="params"></base-pie-chart>
</div>
<div class="current1">
<div class="aside-title">缁熻涓嶅悓杈撻�佷粙璐ㄧ閬撴潯鏁�</div>
@@ -75,7 +78,7 @@
<div>鏁伴噺</div>
</div>
</div>
- <file-format></file-format>
+ <file-format :params="params"></file-format>
</div>
</div>
@@ -100,7 +103,11 @@
import BasePieChart from "../chart/BasePieChart .vue"
import VisitCount from "../chart/VisitCount.vue"
-import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
+import {
+ countCountryDimension,
+ countProvinceDimension,
+ countZhPipeStations,
+} from "@/api/screen.js"
export default {
components: {
@@ -180,9 +187,37 @@
],
lineWidth: 10,
},
+ barConfig: {
+ data: [
+ {
+ name: "鍗楅槼",
+ value: 167,
+ },
+ {
+ name: "鍛ㄥ彛",
+ value: 123,
+ },
+ {
+ name: "婕渤",
+ value: 98,
+ },
+ {
+ name: "閮戝窞",
+ value: 75,
+ },
+ {
+ name: "瑗垮场",
+ value: 66,
+ },
+ ],
+ showValue: true,
+ },
+ params: {}
}
},
-
+ created() {
+ this.getZhPipeStations()
+ },
mounted() {
this.OpenLeftInit()
this.$bus.$on("changeProject", name => {
@@ -195,7 +230,14 @@
}
this.currentProject = name
})
+ this.$bus.$on('changeProjectCode', code => {
+ this.params = {
+ projectCode: code
+ }
+ })
+
},
+
methods: {
ChangeRight() {
if (this.leftMessage == "init") {
@@ -236,6 +278,31 @@
// this.leftMessage = "projectree"
// this.$parent.ChangeWidth("leftTree")
// },
+ async getZhPipeStations() {
+ const res = await countZhPipeStations()
+ if (res.code == 200) {
+ const data = res.result
+ this.pieconfig.data = res.result.map(item => {
+ return {
+ name: item.杈撻�佷粙璐�,
+ value: item.绠￠亾鏁伴噺,
+ }
+ })
+
+ this.pieconfig = {
+ ...this.pieconfig,
+ }
+ this.config.data = res.result.map(item => {
+ return {
+ name: item.杈撻�佷粙璐�,
+ value: item.绠￠亾鏁伴噺,
+ }
+ })
+ this.config = {
+ ...this.config,
+ }
+ }
+ },
},
}
</script>
diff --git a/src/components/Screen/top.vue b/src/components/Screen/top.vue
index 8279555..7647ac6 100644
--- a/src/components/Screen/top.vue
+++ b/src/components/Screen/top.vue
@@ -1,14 +1,14 @@
<template>
<div class="top">
<div class="topleft">
- <div
+ <!-- <div
class="topleft1"
:class="currView == 'chart' ? 'active' : ''"
@click="OpenInitChart"
>
<img src="../../assets/img/Screen/bigST.png" />
<span>澶у睆瑙嗗浘</span>
- </div>
+ </div> -->
<!-- <div
class="topleft1"
@click="OpenProjectree"
@@ -17,15 +17,24 @@
<img src="../../assets/img/Screen/ptree.png" />
<span>宸ョ▼椤圭洰</span>
</div> -->
+ <div class="topleft__curr">
+ <img src="../../assets/img/Screen/ptree.png" />
+ <span :title="currentProject">{{ currentProject }}</span>
+ </div>
</div>
<div class="topCenter">
<div>绠＄綉涓�寮犲浘</div>
</div>
<div class="topRight">
<div
- class="topright1 toprightC"
- @click="ReturnLast"
+ class="topright1"
+ :class="currView == 'chart' ? 'active' : ''"
+ @click="OpenInitChart"
>
+ <img src="../../assets/img/Screen/bigST.png" />
+ <span>杩斿洖澶у睆</span>
+ </div>
+ <div class="topright1 toprightC" @click="ReturnLast">
<img src="../../assets/img/Screen/return.png" />
<span>杩斿洖涓婄骇</span>
</div>
@@ -39,18 +48,21 @@
tree: false,
screen: false,
currView: "chart",
+ currentProject: "澶у睆瑙嗗浘",
}
},
mounted() {
- // this.$bus.$on('changeProject', name => {
- // if (name == '鍏ㄥ浗椤圭洰' || name == '鍏ㄧ悆椤圭洰') {
- // this.OpenProjectree()
- // }
- // })
+ this.$bus.$on("changeProject", name => {
+ // if (name == '鍏ㄥ浗椤圭洰' || name == '鍏ㄧ悆椤圭洰') {
+ // this.OpenProjectree()
+ // }
+ this.currView = "tree"
+ this.currentProject = name
+ })
},
methods: {
ReturnLast() {
- sessionStorage.setItem("changeSelectStyle", 1);
+ sessionStorage.setItem("changeSelectStyle", 1)
this.$router.push("/Synthesis")
},
@@ -60,6 +72,7 @@
this.screen = true
this.$parent.$refs.mapleft.OpenLeftInit()
this.$parent.$refs.mapright.OpenLeftInit()
+ this.currentProject = "澶у睆瑙嗗浘"
},
//鎵撳紑宸ョ▼鏍�
@@ -89,6 +102,22 @@
align-items: flex-end;
// justify-content: space-around;
cursor: pointer;
+ .topleft__curr {
+ // overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ height: 36px;
+ border-radius: 4px;
+ background-image: url(../../assets/img/Screen/btnbg.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ margin-left: 5%;
+ span {
+ padding-right: 10px;
+ }
+ }
.topleft1 {
width: 127px;
height: 36px;
@@ -143,13 +172,19 @@
.topright1 {
width: 131px;
height: 40px;
- background-image: url(../../assets/img/Screen/btnc.png);
+ background-image: url(../../assets/img/Screen/btnbg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
margin-right: 10%;
+ &.active {
+ background-image: url(../../assets/img/Screen/btnc.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ }
}
+
.toprightC {
width: 131px;
height: 40px;
diff --git a/src/components/chart/BaseBarChart.vue b/src/components/chart/BaseBarChart.vue
index ea195ce..ed0e9c4 100644
--- a/src/components/chart/BaseBarChart.vue
+++ b/src/components/chart/BaseBarChart.vue
@@ -4,7 +4,11 @@
<script>
import * as echarts from "echarts"
-import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
+import {
+ countCountryDimension,
+ countProvinceDimension,
+ countZhPipeStations,
+} from "@/api/screen.js"
export default {
props: {
width: {
@@ -30,6 +34,10 @@
project: {
type: String,
default: "鍏ㄥ浗椤圭洰",
+ },
+ title: {
+ type: String,
+ default: "",
},
},
data() {
@@ -92,11 +100,36 @@
if (this.dataList) {
data = this.dataList
}
+ let count = 0
+ let countVal = 0
+
+ const title = this.title
data.forEach(item => {
- let name = item.province || item.country
+ let name = item.province || item.country || item.杈撻�佷粙璐�
+ let value = item.count || item.绔欏満鏁伴噺
+ if (title == "绔欏満搴ф暟" && item.绠￠亾鏁伴噺) {
+ count += item.绠￠亾鏁伴噺
+ } else {
+ count += item.count || 0
+ }
+
+ // switch (title) {
+ // case "绔欏満搴ф暟":
+ // countVal = item.绠￠亾鏁伴噺
+ // break
+ // case "椤圭洰涓暟":
+ // countVal = item.count
+ // break
+ // }
+
xAxisData.push(name)
- yAxisData.push(item.count)
+ yAxisData.push(value)
})
+ console.log("绠￠亾鏁伴噺", countVal)
+
+ if (typeof count === "number") {
+ this.$bus.$emit("changeCount", count)
+ }
let option = {
backgroundColor: "transparent",
tooltip: {
@@ -134,6 +167,9 @@
var maxLength = 2 //姣忛」鏄剧ず鏂囧瓧涓暟
var valLength = value.length //X杞寸被鐩」鐨勬枃瀛椾釜鏁�
var rowN = Math.ceil(valLength / maxLength) //绫荤洰椤归渶瑕佹崲琛岀殑琛屾暟
+ if (xAxisData.length < 7) {
+ return value
+ }
if (rowN > 1) {
//濡傛灉绫荤洰椤圭殑鏂囧瓧澶т簬3,
for (var i = 0; i < rowN; i++) {
@@ -170,6 +206,7 @@
],
series: [
{
+ name: this.title,
type: "bar",
data: yAxisData,
barWidth: "12px",
@@ -252,6 +289,7 @@
},
project: {
deep: true,
+ immediate: true,
handler(newVal) {
let requsetFn = null
switch (newVal) {
@@ -261,7 +299,12 @@
case "鍏ㄥ浗椤圭洰":
requsetFn = countProvinceDimension
break
-
+ case "鍏ㄧ悆绠＄綉鍥�":
+ requsetFn = countZhPipeStations
+ break
+ case "鍏ㄥ浗绠＄綉鍥�":
+ requsetFn = countZhPipeStations
+ break
default:
break
}
@@ -271,7 +314,7 @@
},
},
mounted() {
- this.initData()
+ // this.initData()
this.initChart()
if (this.autoResize) {
window.addEventListener("resize", this.resizeHandler)
@@ -289,7 +332,7 @@
},
methods: {
resizeHandler() {
- this.chart.resize()
+ this.chart && this.chart.resize()
},
initChart() {
this.chart = echarts.init(this.$refs.chart, "", {
diff --git a/src/components/chart/BaseLineChart.vue b/src/components/chart/BaseLineChart.vue
index f78d2e8..fb37072 100644
--- a/src/components/chart/BaseLineChart.vue
+++ b/src/components/chart/BaseLineChart.vue
@@ -8,6 +8,10 @@
countCountryDimension,
countProvinceDimension,
GetServicesVisitsCount,
+ countZhPipeMapLength,
+ countLargeCategories,
+ countProjectType,
+ countProjectDown
} from "@/api/screen.js"
export default {
props: {
@@ -34,6 +38,18 @@
project: {
type: String,
default: "鍏ㄥ浗椤圭洰",
+ },
+ params: {
+ type: Object,
+ default: () => null,
+ },
+ project: {
+ type: String,
+ default: "鍏ㄥ浗椤圭洰",
+ },
+ title: {
+ type: String,
+ default: "",
},
},
data() {
@@ -66,10 +82,10 @@
},
grid: {
right: "5%",
- top: '10%',
+ top: "10%",
left: "5%",
bottom: "17%",
- containLabel: true
+ containLabel: true,
},
xAxis: {
@@ -77,9 +93,9 @@
boundaryGap: true,
axisLine: {
lineStyle: {
- color: "#fff"
+ color: "#fff",
},
- show: false
+ show: false,
},
nameRotate: 45,
axisTick: {
@@ -116,7 +132,7 @@
},
series: [
{
- name: "鏈嶅姟璁块棶娆℃暟",
+ name: this.title,
type: "line",
showAllSymbol: false,
lineStyle: {
@@ -143,17 +159,25 @@
},
project: {
deep: true,
+ immediate: true,
handler(newVal) {
let requsetFn = null
switch (newVal) {
case "鍏ㄧ悆椤圭洰":
- requsetFn = countCountryDimension
+ requsetFn = countLargeCategories
break
case "鍏ㄥ浗椤圭洰":
- requsetFn = countProvinceDimension
+ requsetFn = countLargeCategories
break
-
+ case "鍏ㄧ悆绠＄綉鍥�":
+ requsetFn = countZhPipeMapLength
+ break
+ case "鍏ㄥ浗绠＄綉鍥�":
+ requsetFn = countZhPipeMapLength
+ break
default:
+ requsetFn = GetServicesVisitsCount
+
break
}
requsetFn && this.initData(requsetFn)
@@ -163,7 +187,7 @@
},
},
mounted() {
- this.initData()
+ // this.initData()
this.initChart()
if (this.autoResize) {
window.addEventListener("resize", this.resizeHandler)
@@ -181,7 +205,7 @@
},
methods: {
resizeHandler() {
- this.chart.resize()
+ this.chart && this.chart.resize()
},
initChart() {
this.chart = echarts.init(this.$refs.chart, "", {
@@ -207,7 +231,7 @@
this.chart && this.chart.clear()
},
async initData(requsetFn = GetServicesVisitsCount) {
- const res = await requsetFn()
+ const res = await requsetFn(this.params)
if (res.code == 200) {
this.dataList = res.result
console.log("requsetFn", res)
diff --git a/src/components/chart/BasePieChart .vue b/src/components/chart/BasePieChart .vue
index 29d58b9..d9e253d 100644
--- a/src/components/chart/BasePieChart .vue
+++ b/src/components/chart/BasePieChart .vue
@@ -4,7 +4,11 @@
<script>
import * as echarts from "echarts"
-import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
+import {
+ countCountryDimension,
+ countProvinceDimension,
+ countProjectStorage,
+} from "@/api/screen.js"
export default {
props: {
width: {
@@ -31,6 +35,10 @@
type: String,
default: "鍏ㄥ浗椤圭洰",
},
+ params: {
+ type: Object,
+ default: () => null,
+ },
},
data() {
return {
@@ -40,32 +48,7 @@
},
computed: {
option() {
- let echartData = [
- {
- value: 2154,
- name: "鏇查槣甯堣寖澶у",
- },
- {
- value: 3854,
- name: "娼嶅潑瀛﹂櫌",
- },
- {
- value: 3515,
- name: "闈掑矝鑱屼笟鎶�鏈闄�",
- },
- {
- value: 3515,
- name: "娣勫崥甯堣寖楂樼瓑涓撶",
- },
- {
- value: 3854,
- name: "椴佷笢澶у",
- },
- {
- value: 2154,
- name: "灞变笢甯堣寖澶у",
- },
- ]
+ let echartData = []
let data = []
let xAxisData = []
let yAxisData = []
@@ -73,7 +56,7 @@
if (this.dataList) {
data = this.dataList
echartData = data.map(item => {
- let name = item.province || item.country
+ let name = item.province || item.country || item.name
// xAxisData.push(name)
// yAxisData.push(item.count)
count += item.count
@@ -183,8 +166,8 @@
"#18edc9",
"#6ac5fa",
],
- // minAngle: 15,
- // startAngle: 270,
+ minAngle: 15,
+ startAngle: 270,
label: {
normal: {
formatter: function (params, ticket, callback) {
@@ -209,7 +192,7 @@
},
labelLine: {
normal: {
- length: 55 * scale,
+ length: 30,
length2: 0,
lineStyle: {
color: "#0b5263",
@@ -233,6 +216,7 @@
},
project: {
deep: true,
+ immediate: true,
handler(newVal) {
let requsetFn = null
switch (newVal) {
@@ -242,17 +226,28 @@
case "鍏ㄥ浗椤圭洰":
requsetFn = countProvinceDimension
break
+ case "鍏ㄧ悆绠＄綉鍥�":
+ requsetFn = countProvinceDimension
+ break
+ case "鍏ㄥ浗绠＄綉鍥�":
+ requsetFn = countProvinceDimension
+ break
default:
+ requsetFn = countProjectStorage
+
break
}
requsetFn && this.initData(requsetFn)
+
this.setOptions(this.option)
},
},
},
+ created() {
+ // this.initData()
+ },
mounted() {
- this.initData()
this.initChart()
if (this.autoResize) {
window.addEventListener("resize", this.resizeHandler)
@@ -270,7 +265,7 @@
},
methods: {
resizeHandler() {
- this.chart.resize()
+ this.chart && this.chart.resize()
},
initChart() {
this.chart = echarts.init(this.$refs.chart, "", {
@@ -288,6 +283,7 @@
if (this.chart) {
this.chart.setOption(option)
}
+
},
refresh() {
this.setOptions(this.option)
@@ -295,8 +291,8 @@
clearChart() {
this.chart && this.chart.clear()
},
- async initData(requsetFn = countCountryDimension) {
- const res = await requsetFn()
+ async initData(requsetFn) {
+ const res = await requsetFn(this.params)
if (res.code == 200) {
this.dataList = res.result
console.log("requsetFn", res)
diff --git a/src/components/chart/DataStorageType.vue b/src/components/chart/DataStorageType.vue
new file mode 100644
index 0000000..cc02e60
--- /dev/null
+++ b/src/components/chart/DataStorageType.vue
@@ -0,0 +1,429 @@
+<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">
+ <ul class="contentTitle">
+ <li class="title">缂栧彿</li>
+ <li class="name">鍚嶇О</li>
+ <li class="num">鏁伴噺</li>
+ <li class="size">鏂囦欢澶у皬(MB)</li>
+ </ul>
+ <div class="scroolData">
+ <vue-seamless-scroll
+ :data="tableData"
+ class="ClassScroll"
+ :class-option="defaultOption"
+ >
+ <ul class="item">
+ <li v-for="(item, index) in tableData" :key="index">
+ <span class="title">
+ <div>{{ item.index }}</div></span
+ >
+ <span class="name" :title="item.name">{{
+ item.name.substring(0, 15)
+ }}</span>
+ <span class="num">{{ item.num || 0 }}</span>
+ <span class="size">{{ item.size || 0 }}</span>
+ </li>
+ </ul>
+ </vue-seamless-scroll>
+ </div>
+ </div>
+ </div>
+
+ <!-- <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
+ style="
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ "
+ :title="scope.row.name"
+ >
+ {{ scope.row.name }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="num" label="鏂囦欢鏁�" width="70">
+ </el-table-column>
+ </el-table>
+ </el-scrollbar> -->
+</template>
+
+<script>
+import vueSeamlessScroll from "vue-seamless-scroll"
+import { countDataStorage, countLargeCategories } from "@/api/screen.js"
+export default {
+ components: {
+ vueSeamlessScroll,
+ },
+ 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",
+ },
+ },
+ }
+ },
+ computed: {
+ defaultOption() {
+ return {
+ step: 0.2, // 鏁板�艰秺澶ч�熷害婊氬姩瓒婂揩
+ limitMoveNum: this.tableData.length, // 寮�濮嬫棤缂濇粴鍔ㄧ殑鏁版嵁閲� this.dataList.length
+ hoverStop: true, // 鏄惁寮�鍚紶鏍囨偓鍋渟top
+ direction: 1, // 0鍚戜笅 1鍚戜笂 2鍚戝乏 3鍚戝彸
+ openWatch: true, // 寮�鍚暟鎹疄鏃剁洃鎺у埛鏂癲om
+ singleHeight: 0, // 鍗曟杩愬姩鍋滄鐨勯珮搴�(榛樿鍊�0鏄棤缂濅笉鍋滄鐨勬粴鍔�) direction => 0/1
+ singleWidth: 0, // 鍗曟杩愬姩鍋滄鐨勫搴�(榛樿鍊�0鏄棤缂濅笉鍋滄鐨勬粴鍔�) direction => 2/3
+ waitTime: 1000, // 鍗曟杩愬姩鍋滄鐨勬椂闂�(榛樿鍊�1000ms)
+ }
+ },
+ },
+
+ created() {
+ this.initTable()
+ },
+ methods: {
+ async initTable() {
+ const res = await countLargeCategories()
+ if (res.code == 200) {
+ let count = 0
+ this.tableData = res.result.map((item, i) => {
+ count += item.count
+ return {
+ index: i + 1,
+ name: item.name,
+ num: item.count,
+ sizes: item.sizes,
+ }
+ })
+ this.config1.number = [count]
+ this.config1 = {
+ ...this.config1,
+ }
+ }
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.data-storage {
+ height: calc(100% - 30px);
+ width: 100%;
+}
+
+.data-storage__header {
+ height: 40px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .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;
+ }
+
+ .num {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+
+.data-storage__content {
+ height: calc(100% - 40px);
+ width: 100%;
+
+ .contentTitle {
+ height: 40px;
+ width: 100%;
+ display: flex;
+ background-color: rgba(52, 78, 147, 0.5);
+ flex-direction: row;
+
+ li {
+ align-items: center;
+ justify-content: space-around;
+ color: #ffffff;
+ }
+
+ .title {
+ width: 15%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .name {
+ width: 60%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .num {
+ width: 25%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+}
+
+.scroolData {
+ height: calc(100% - 40px);
+ width: 100%;
+ overflow: hidden;
+}
+.ClassScroll {
+ height: 100%;
+ width: 100%;
+
+ .item {
+ width: 100%;
+ height: 100%;
+ color: #ffffff;
+
+ li {
+ height: 40px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+
+ .title {
+ width: 15%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ div {
+ height: 20px;
+ width: 20px;
+ background-color: #495477;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ .name {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .num {
+ width: 25%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .size {
+ width: 25%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+}
+
+// .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">
+// .data-storage {
+// .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
index 9418542..df5e5e6 100644
--- a/src/components/chart/FileFormat.vue
+++ b/src/components/chart/FileFormat.vue
@@ -4,12 +4,27 @@
<script>
import * as echarts from "echarts"
-import { countFileFormat } from "@/api/screen.js"
+import { countFileFormat, countProjectType } from "@/api/screen.js"
export default {
+ props: {
+ params: {
+ type: Object,
+ default: () => null,
+ },
+ },
data() {
return {
option: {},
}
+ },
+ watch: {
+ params : {
+ deep: true,
+ immediate: true,
+ handler(newVal) {
+ this.initChart()
+ },
+ },
},
mounted() {
this.initChart()
@@ -58,7 +73,7 @@
value: 20,
},
]
- const res = await countFileFormat()
+ const res = await countProjectType(this.params)
if (res.code == 200) {
data = res.result.map(item => {
return {
diff --git a/src/components/chart/ServiceType.vue b/src/components/chart/ServiceType.vue
index 80ae7d2..fb74e71 100644
--- a/src/components/chart/ServiceType.vue
+++ b/src/components/chart/ServiceType.vue
@@ -115,7 +115,7 @@
let option = {
backgroundColor: "transparent",
title: {
- text: "鏈嶅姟绫诲瀷鎬绘暟閲�",
+ text: "鐢ㄦ埛璁块棶鎬婚噺",
subtext: count,
textStyle: {
color: "#fff",
diff --git a/src/components/chart/projectintroduction.vue b/src/components/chart/projectintroduction.vue
index d1556a3..87cf7ba 100644
--- a/src/components/chart/projectintroduction.vue
+++ b/src/components/chart/projectintroduction.vue
@@ -1,105 +1,133 @@
<template>
- <div class="projectintroduction">
- <div class="item">
- <div class="itemName">椤圭洰鍚嶇О:</div>
- <div class="itemValue" :title="result.projname">{{ result.projname.length>15?result.projname.substring(0,15):result.projname }}</div>
- </div>
- <div class="item">
- <div class="itemName">椤圭洰鐘舵��:</div>
- <div class="itemValue">{{ result.projstate }}</div>
- </div>
- <div class="item">
- <div class="itemName">椤圭洰绉嶇被:</div>
- <div class="itemValue">{{ result.projtype }}</div>
- </div>
- <div class="item">
- <div class="itemName">鎵�灞為儴闂�:</div>
- <div class="itemValue">{{ result.corpname }}</div>
- </div>
- <div class="item">
- <div class="itemName">鍚姩鏃堕棿:</div>
- <div class="itemValue">{{ parseTime(result.createtime) }}</div>
- </div>
- <div class="item">
- <div class="itemName">宸ョ▼鍐呭:</div>
- <div class="itemValue">{{ result.contents.length>15? result.contents.substring(0,15): result.contents }}</div>
- </div>
+ <div class="projectintroduction">
+ <div class="item">
+ <div class="itemName">椤圭洰鍚嶇О:</div>
+ <div class="itemValue" :title="result.projname">
+ {{
+ result.projname.length > 15
+ ? result.projname.substring(0, 15)
+ : result.projname
+ }}
+ </div>
</div>
+ <div class="item">
+ <div class="itemName">椤圭洰鐘舵��:</div>
+ <div class="itemValue">{{ result.projstate }}</div>
+ </div>
+ <div class="item">
+ <div class="itemName">椤圭洰绉嶇被:</div>
+ <div class="itemValue">{{ result.projtype }}</div>
+ </div>
+ <div class="item">
+ <div class="itemName">鎵�灞為儴闂�:</div>
+ <div class="itemValue">{{ result.corpname }}</div>
+ </div>
+ <div class="item">
+ <div class="itemName">鍚姩鏃堕棿:</div>
+ <div class="itemValue">{{ parseTime(result.createtime) }}</div>
+ </div>
+ <div class="item">
+ <div class="itemName">宸ョ▼鍐呭:</div>
+ <div class="itemValue">
+ {{
+ result.contents.length > 15
+ ? result.contents.substring(0, 15)
+ : result.contents
+ }}
+ </div>
+ </div>
+ </div>
</template>
<script>
+import { selectProjectInfo } from "@/api/screen.js"
export default {
- data() {
- return {
- result:
- {
- "eventid": "4dfd814a-a262-4a93-880b-5ef488883a35",
- "country": "涓浗",
- "projstate": "鏂藉伐涓�",
- "createtime": 1675071993161,
- "gid": 38,
- "conperiod": "24",
- "datastatus": null,
- "geom": "01010000208A110000925A28999C225C40F1811DFF05364040",
- "createuser": 1,
- "parentid": null,
- "verid": 0,
- "province": "婀栧寳鐪�",
- "projname": "瑗挎皵涓滆緭涓夌嚎锛堜腑鍗�-鏋ｉ槼锛�",
- "contents": "绠￠亾绾胯矾鏂藉伐",
- "projtype": "绠＄嚎鏂藉伐",
- "location": "姝︽眽",
- "dirid": "03",
- "depid": null,
- "corpname": "绠￠亾璁捐闄�",
- "department": "鍕樺療閮ㄩ棬",
- "updatetime": 1675072198376,
- "belongsid": null,
- "remarks": "娴嬭瘯鐢紝鍐呭铏氭瀯",
- "updateuser": 1
- },
- }
- },
- methods: {
- //鑾峰彇鏃堕棿
- parseTime(timestamp){
- var date = new Date(timestamp);//鏃堕棿鎴充负10浣嶉渶*1000锛屾椂闂存埑涓�13浣嶇殑璇濅笉闇�涔�1000
- var Y = date.getFullYear() + '-';
- var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
- var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
- let strDate = Y+M+D;
- return strDate;
- }
-
+ data() {
+ return {
+ result: {
+ eventid: "4dfd814a-a262-4a93-880b-5ef488883a35",
+ country: "涓浗",
+ projstate: "鏂藉伐涓�",
+ createtime: 1675071993161,
+ gid: 38,
+ conperiod: "24",
+ datastatus: null,
+ geom: "01010000208A110000925A28999C225C40F1811DFF05364040",
+ createuser: 1,
+ parentid: null,
+ verid: 0,
+ province: "婀栧寳鐪�",
+ projname: "瑗挎皵涓滆緭涓夌嚎锛堜腑鍗�-鏋ｉ槼锛�",
+ contents: "绠￠亾绾胯矾鏂藉伐",
+ projtype: "绠＄嚎鏂藉伐",
+ location: "姝︽眽",
+ dirid: "03",
+ depid: null,
+ corpname: "绠￠亾璁捐闄�",
+ department: "鍕樺療閮ㄩ棬",
+ updatetime: 1675072198376,
+ belongsid: null,
+ remarks: "娴嬭瘯鐢紝鍐呭铏氭瀯",
+ updateuser: 1,
+ },
}
-
+ },
+ created() {
+ this.$bus.$on("changeProjectCode", code => {
+ let params = {
+ projectCode: code,
+ }
+ this.getDataList(params)
+ })
+ },
+ methods: {
+ async getDataList(params) {
+ const res = await selectProjectInfo(params)
+ if (res.code == 200) {
+ this.result = res.result
+ }
+ },
+ //鑾峰彇鏃堕棿
+ parseTime(timestamp) {
+ var date = new Date(timestamp) //鏃堕棿鎴充负10浣嶉渶*1000锛屾椂闂存埑涓�13浣嶇殑璇濅笉闇�涔�1000
+ var Y = date.getFullYear() + "-"
+ var M =
+ (date.getMonth() + 1 < 10
+ ? "0" + (date.getMonth() + 1)
+ : date.getMonth() + 1) + "-"
+ var D =
+ (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "
+ let strDate = Y + M + D
+ return strDate
+ },
+ },
}
</script>
<style lang="scss">
.projectintroduction {
- height: calc(100% - 30px);
- width: 100%;
- .item{
- margin: 5px;
- height: 30px;
- display: flex;
- flex-direction: row;
- border-bottom: dotted 1px rgba(48,135,214,.2);
- .itemName{
- width: 40%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- }
- .itemValue{
- width: 60%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: flex-start;
- color: #9ED2F5;
- }
+ height: calc(100% - 30px);
+ width: 100%;
+ .item {
+ margin: 5px;
+ height: 30px;
+ display: flex;
+ flex-direction: row;
+ border-bottom: dotted 1px rgba(48, 135, 214, 0.2);
+ .itemName {
+ width: 40%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
}
+ .itemValue {
+ width: 60%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ color: #9ed2f5;
+ }
+ }
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index 175b16d..21bba06 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -7,6 +7,9 @@
:style="{ width: leftWidth, left: leftWidth == '22%' ? '-19px' : '0' }"
ref="mapleft"
></left>
+
+ <project-tree class="project-tree" v-if="ProjectreeDisplay"></project-tree>
+
<right
class="mapright"
:style="{ width: rightWidth }"
@@ -22,20 +25,25 @@
import left from "@/components/Screen/left.vue"
import right from "../../components/Screen/right.vue"
import bottom from "../../components/Screen/bottom.vue"
-
+import ProjectTree from "../../components/Screen/ProjectTree.vue"
import axios from "axios"
export default {
- components: { mapsdk, top, left, right, bottom },
+ components: { mapsdk, top, left, right, bottom, ProjectTree },
data() {
return {
leftWidth: "22%",
rightWidth: "22%",
leftTree: false,
- currTree: false
+ currTree: false,
+ ProjectreeDisplay: false,
}
},
mounted() {},
- created() {},
+ created() {
+ this.$bus.$on("changeTree", key => {
+ this.ProjectreeDisplay = key
+ })
+ },
methods: {
//淇敼宸︿晶瀹藉害
ChangeWidth(parm) {
@@ -113,6 +121,14 @@
width: 100%;
z-index: 999;
}
+.project-tree {
+ position: absolute;
+ top: 90px;
+ right: 22%;
+ width: 15%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
</style>
<style lang="less">
--
Gitblit v1.9.3