From 2c9fe4606e997b09eabb87afeb981d6ee924d420 Mon Sep 17 00:00:00 2001
From: wulitaotao <547306458@qq.com>
Date: 星期一, 27 二月 2023 18:23:32 +0800
Subject: [PATCH] 新增项目周期，项目简介，项目进度
---
src/components/Screen/bottom.vue | 115 +++++---
src/components/chart/projectintroduction.vue | 105 ++++++++
src/components/chart/projectState.vue | 169 +++++++++++++
src/components/chart/projectTime.vue | 306 +++++++++++++++++++++++
src/components/Screen/left.vue | 14 +
src/components/Screen/mapsdk.vue | 53 +--
6 files changed, 687 insertions(+), 75 deletions(-)
diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue
index 94e85d3..28de408 100644
--- a/src/components/Screen/bottom.vue
+++ b/src/components/Screen/bottom.vue
@@ -3,43 +3,23 @@
<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>
@@ -48,7 +28,8 @@
</div>
</div>
<div class="bottom13">
- <img :src="yxImg" @click="ChangeBaseLayer" />
+ <img :src="yxImg" @click="ChangeBaseLayer('yx')" title="褰卞儚鍥�" />
+ <img :src="xrImg" @click="ChangeBaseLayer('xr')" title="鏅曟覆鍥�"/>
</div>
</div>
<div class="bottom2">
@@ -57,6 +38,7 @@
</div>
</template>
<script>
+let yunxuanLayer = null
import PipeLine from "@/assets/json/pipeline.json"
import {
countProjectTour,
@@ -69,7 +51,10 @@
data() {
return {
YXState: true,
+ XRState: true,
+ yunxuanLayer: null,//鍏ㄧ悆鐪╂檿鍥�
yxImg: require("../../assets/img/Screen/yximg.png"),
+ xrImg: require("../../assets/img/Screen/bdimg.png"),
currMenu: "涓撻灞曠ず",
currProject: "",
searchName: "",
@@ -174,20 +159,50 @@
this.getCountProjectTour()
},
methods: {
- ChangeBaseLayer() {
- if (this.YXState) {
- this.yxImg = require("../../assets/img/Screen/bdimg.png")
- //鍔犺浇鐧惧害褰卞儚
- Viewer.imageryLayers._layers[1].show = true
- Viewer.imageryLayers._layers[2].show = false
- Viewer.imageryLayers._layers[3].show = false
- } else {
- this.yxImg = require("../../assets/img/Screen/yximg.png")
- Viewer.imageryLayers._layers[1].show = false
- Viewer.imageryLayers._layers[2].show = true
- Viewer.imageryLayers._layers[3].show = true
+ ChangeBaseLayer(parm) {
+ if (parm == 'yx') {
+ if (this.YXState) {
+ //this.yxImg = require("../../assets/img/Screen/bdimg.png")
+ //鍔犺浇鐧惧害褰卞儚
+ Viewer.imageryLayers._layers[1].show = true
+ Viewer.imageryLayers._layers[2].show = false
+ Viewer.imageryLayers._layers[3].show = false
+ } else {
+ //this.yxImg = require("../../assets/img/Screen/yximg.png")
+ Viewer.imageryLayers._layers[1].show = false
+ Viewer.imageryLayers._layers[2].show = true
+ Viewer.imageryLayers._layers[3].show = true
+ }
+ this.YXState = !this.YXState
}
- this.YXState = !this.YXState
+
+ if (parm == 'xr') {
+ if (yunxuanLayer == null) {
+ var urls = "https://tiles3.geovisearth.com/base/v1/ter"
+ // 鏄熷浘鍦扮悆鍦板舰鏅曟覆
+ yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
+ "鏄熷浘鍦扮悆鍦板舰鏅曟覆",
+ {
+ url:
+ urls +
+ "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
+ },
+ "0",
+ undefined,
+ true,
+ ""
+ )
+ }
+ if (this.XRState) {
+ yunxuanLayer.item.show = true;
+ } else {
+ yunxuanLayer.item.show = false;
+ }
+ this.XRState = !this.XRState;
+ }
+
+
+
},
handleMenuClick(menu) {
this.currMenu = menu.menuName
@@ -249,7 +264,7 @@
//椤圭洰灞曠ず
DisplayCurrentProject(params) {
- console.log(params)
+
//鎵撳紑鎴栬�呭姞杞藉浘灞�
@@ -278,7 +293,7 @@
return menu.children
// return menu.children.filter(item => item.name.indexOf(searchName) > -1)
},
- handleSearchChange(currMenu) {},
+ handleSearchChange(currMenu) { },
async getCountProjectDisplay() {
const res = await countProjectLocation()
if (res.code === 200) {
@@ -290,7 +305,7 @@
wkt: item.wkt,
}
})
-
+
}
},
async getCountProjectTour() {
@@ -304,7 +319,7 @@
wkt: item.wkt,
}
})
-
+
}
},
//涓撻灞曠ず
@@ -369,6 +384,7 @@
color: #fff;
font-weight: 600;
cursor: pointer;
+
&.active {
background: url(~@/assets/img/Screen/centerbtnc.png);
background-size: 100% 100%;
@@ -389,6 +405,7 @@
}
}
}
+
.popover {
display: flex;
justify-content: center;
@@ -397,9 +414,11 @@
background: url(~@/assets/img/Screen/centerTooltipBg.png);
background-size: 100% 100%;
border: none;
+
.popper__arrow {
display: none;
}
+
.popover-content {
&__header {
display: flex;
@@ -410,6 +429,7 @@
height: 30px;
font-size: 18px;
color: #fff;
+
&::before,
&::after {
margin: 0 5px;
@@ -421,15 +441,18 @@
height: 8px;
}
}
+
&__search {
margin-top: 8px;
width: 145px;
text-align: center;
+
.el-input {
width: 125px;
height: 21px;
background: rgba(0, 48, 111, 0.2);
border: 0.25px solid #2a80a9;
+
&__inner {
background: rgba(0, 48, 111, 0.2);
border-radius: inherit;
@@ -437,6 +460,7 @@
padding: 0 5px;
color: #fff;
}
+
.el-input-group__append {
width: 32px;
border: none;
@@ -479,6 +503,7 @@
}
}
}
+
::-webkit-scrollbar {
width: 2px;
height: 2px;
diff --git a/src/components/Screen/left.vue b/src/components/Screen/left.vue
index 2863288..4b2f82e 100644
--- a/src/components/Screen/left.vue
+++ b/src/components/Screen/left.vue
@@ -7,6 +7,9 @@
<div class="current1" id="leftCurrent1">
<div class="aside-title">鏁版嵁鐢宠娆℃暟</div>
<count-data-apply></count-data-apply>
+ <!-- <projectintroduction></projectintroduction> -->
+ <!-- <projectState></projectState> -->
+ <!-- <projectTime></projectTime> -->
</div>
<div class="current1" id="leftCurrent2">
<div class="aside-title">鐢ㄦ埛璁块棶閲�</div>
@@ -64,6 +67,12 @@
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"
+
+
+
export default {
components: {
ProjectTree,
@@ -72,7 +81,10 @@
DataStorage,
BaseBarChart,
BaseLineChart,
- BasePieChart
+ BasePieChart,
+ // projectintroduction,
+ // projectState,
+ // projectTime
},
data() {
return {
diff --git a/src/components/Screen/mapsdk.vue b/src/components/Screen/mapsdk.vue
index d912802..3800764 100644
--- a/src/components/Screen/mapsdk.vue
+++ b/src/components/Screen/mapsdk.vue
@@ -14,29 +14,29 @@
},
mounted() {
this.init3DMap()
- this.$bus.$on("changeProject", name => {
- if (!yunxuanLayer) {
- var urls = "https://tiles3.geovisearth.com/base/v1/ter"
- // 鏄熷浘鍦扮悆鍦板舰鏅曟覆
- yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
- "鏄熷浘鍦扮悆鍦板舰鏅曟覆",
- {
- url:
- urls +
- "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
- },
- "0",
- undefined,
- true,
- ""
- )
- }
- if (name == '鍏ㄧ悆椤圭洰') {
- yunxuanLayer.item.show = true
- } else {
- yunxuanLayer.item.show = false
- }
- })
+ // this.$bus.$on("changeProject", name => {
+ // if (!yunxuanLayer) {
+ // var urls = "https://tiles3.geovisearth.com/base/v1/ter"
+ // // 鏄熷浘鍦扮悆鍦板舰鏅曟覆
+ // yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
+ // "鏄熷浘鍦扮悆鍦板舰鏅曟覆",
+ // {
+ // url:
+ // urls +
+ // "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
+ // },
+ // "0",
+ // undefined,
+ // true,
+ // ""
+ // )
+ // }
+ // if (name == '鍏ㄧ悆椤圭洰') {
+ // yunxuanLayer.item.show = true
+ // } else {
+ // yunxuanLayer.item.show = false
+ // }
+ // })
},
methods: {
init3DMap() {
@@ -49,13 +49,8 @@
SmartEarthRootUrl + "Workers/image/earth.jpg",
function () {}
)
-
window.viewer = window.Viewer = window.sgworld._Viewer;
-
-
-
- Viewer.imageryLayers._layers[0].show = false
-
+ Viewer.imageryLayers._layers[0].show = false
sgworld.Navigate.jumpTo({ //璺宠浆瑙嗚
destination: new Cesium.Cartesian3.fromDegrees(110, 32, 50000000)
});
diff --git a/src/components/chart/projectState.vue b/src/components/chart/projectState.vue
new file mode 100644
index 0000000..b8bc6ce
--- /dev/null
+++ b/src/components/chart/projectState.vue
@@ -0,0 +1,169 @@
+<template>
+ <div class="projectState" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import { GetServicesVisitsCount } from "@/api/screen.js"
+export default {
+ data() {
+ return {
+ option: {},
+ }
+ },
+ mounted() {
+ // const option = this.initData()
+ this.initChart()
+ },
+ methods: {
+ initChart() {
+ // const res = await GetServicesVisitsCount()
+
+ // console.log(res.result);
+
+ // if (res.code == 200) {
+ // }
+ // let xAxis = []
+ // let yAxis = []
+
+ // res.result.forEach(item => {
+ // xAxis.push(item.type)
+ // yAxis.push(item.count)
+ // })
+
+ // let data = [220, 182, 191, 234, 290, 330, 310]
+ // const sideData = data.map(item => {
+ // return {
+ // name: item.name,
+ // value: item.number,
+ // }
+ // })
+
+ var XName = ["绔嬮」", "鍚姩", "寤鸿", "瀹屾垚"]
+ var data1 = [
+ [100, 100, 100, 100],
+ [100, 100, {
+ value: 100, 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: [50, 50],
+ }]
+ ]
+ var Line = ["绾�1", "绾�2"];
+ var color = ['#256589', '#3F88E9'];
+
+ //鏁版嵁澶勭悊
+ var datas = [];
+ Line.map((item, index) => {
+ if (index == 0) {
+ datas.push(
+ {
+ symbolSize: 10,
+ symbol: 'circle',
+ hoverAnimation: false,
+ name: item,
+ type: "line",
+ data: data1[index],
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ color: color[index],
+ }
+ }
+ }
+ )
+
+ } else {
+ datas.push(
+ {
+ symbolSize: 10,
+ symbol: 'circle',
+ hoverAnimation: false,
+ name: item,
+ type: "line",
+ data: data1[index],
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ color: color[index],
+ }
+ }
+ }
+ )
+
+ }
+
+ })
+
+ let option = {
+ grid: {
+ left: '5%',
+ top: '30%',
+ bottom: '30%',
+ right: '5%',
+ },
+ yAxis: [
+ {
+ type: 'value',
+ position: 'right',
+ max: 100,
+ splitLine: {
+ show: false
+ }
+ ,
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ }
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#6A989E',
+ }
+ },
+ axisLabel: {
+ inside: true,
+ show: true,
+ textStyle: {
+ color: '#90deff',// x杞撮鑹�
+ fontWeight: 'normal',
+ fontSize: '12',
+ lineHeight: 20
+ }
+
+ },
+ data: XName,
+ }
+ ],
+ series: datas,
+ };
+ const chart = echarts.init(this.$refs.chart)
+
+ chart.setOption(option)
+ window.addEventListener("resize", function () {
+ chart.resize()
+ })
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.projectState {
+ width: 100%;
+ height: calc(100% - 30px);
+}
+</style>
+
\ No newline at end of file
diff --git a/src/components/chart/projectTime.vue b/src/components/chart/projectTime.vue
new file mode 100644
index 0000000..cf4c8be
--- /dev/null
+++ b/src/components/chart/projectTime.vue
@@ -0,0 +1,306 @@
+<template>
+ <div class="projectTime" ref="chart">
+
+ </div>
+</template>
+<script>
+import * as echarts from "echarts"
+export default {
+ data() {
+ return {
+
+ }
+ },
+ mounted() {
+ this.initChart();
+ },
+ methods: {
+ initChart() {
+ var dataArr = 60;
+ var colorSet = '#45CAED';
+
+ var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ {
+ offset: 0,
+ color: '#8D00FF',
+ },
+ {
+ offset: 0.4,
+ color: '#0EBAFC',
+ },
+ {
+ offset: 1,
+ color: '#0EBAFC',
+ },
+ ]);
+ var option = {
+ title: {
+ text: '椤圭洰杩涘害',
+ textStyle: {
+ color: '#7DAEEF',
+ fontSize: 12,
+ },
+ padding: 0,
+ top: '80%',
+ left: 'center',
+ },
+ xAxis: {
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ },
+ yAxis: {
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ },
+ series: [
+ // 鍒诲害
+ {
+ type: 'gauge',
+ radius: '82%',
+ startAngle: 220,
+ endAngle: -40,
+ axisTick: {
+ show: true,
+ lineStyle: {
+ color: '#6B9DD7',
+ width: 1,
+ },
+ length: -8,
+ }, //鍒诲害鏍峰紡
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#6B9DD7',
+ width: 1,
+ },
+ length: -8,
+ }, //鍒嗛殧绾挎牱寮�
+ axisLabel: {
+ color: 'rgba(255,255,255,0)',
+ fontSize: 12,
+ }, //鍒诲害鑺傜偣鏂囧瓧棰滆壊
+ pointer: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ label: {
+ show: false,
+ },
+ // //浠〃鐩樿鎯咃紝鐢ㄤ簬鏄剧ず鏁版嵁銆�
+ // detail: {
+ // show: true,
+ // offsetCenter: [0, '50%'],
+ // color: '#ACCFFF',
+ // formatter: function (params) {
+ // return '褰撳墠閫熷害';
+ // },
+ // textStyle: {
+ // fontSize: 16,
+ // },
+ // },
+ },
+ {
+ name: '鍐呴儴杩涘害鏉�',
+ type: 'gauge',
+ center: ['50%', '50%'],
+ radius: '78%',
+ splitNumber: 10,
+ axisLine: {
+ lineStyle: {
+ color: [
+ [dataArr / 100, color],
+ [1, 'rgba(107,157,215,.25)'],
+ ],
+ width: 8,
+ },
+ },
+ z: 4,
+ axisLabel: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ itemStyle: {
+ color: colorSet,
+ },
+ detail: {
+ show: false,
+ },
+ label: {
+ show: false,
+ },
+
+ title: {
+ //鏍囬
+ show: true,
+ offsetCenter: [0, '35%'], // x, y锛屽崟浣峱x
+ textStyle: {
+ color: '#ACCFFF',
+ fontSize: 16, //琛ㄧ洏涓婄殑鏍囬鏂囧瓧澶у皬
+ fontWeight: 400,
+ fontFamily: 'PingFangSC',
+ },
+ },
+ data: [
+ {
+ name: dataArr + '%',
+ value: dataArr,
+ },
+ ],
+ pointer: {
+ show: true,
+ length: '40%',
+ radius: '20%',
+ width: 4, //鎸囬拡绮楃粏
+ },
+ },
+ {
+ //鎸囬拡涓婄殑鍦�
+ type: 'pie',
+ tooltip: {
+ show: false,
+ },
+ z: 5,
+ hoverAnimation: false,
+ legendHoverLink: false,
+ radius: ['0%', '6%'],
+ center: ['50%', '50%'],
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+ labelLine: {
+ normal: {
+ show: false,
+ },
+ },
+ data: [
+ {
+ value: 10,
+ itemStyle: {
+ normal: {
+ color: colorSet,
+ },
+ },
+ },
+ ],
+ },
+ // 澶栦竴灞傚湀
+ {
+ type: 'pie',
+ radius: '60%',
+ startAngle: 220,
+ endAngle: -40,
+ hoverAnimation: false,
+ center: ['50%', '50%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ {
+ value: 1,
+ },
+ ],
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#17A1FF',
+ },
+ {
+ offset: 1,
+ color: 'rgba(17, 90, 233, 0.16)',
+ },
+ ],
+ },
+ opacity: 0.12,
+ },
+ },
+ },
+ // 鍐呭渾
+ {
+ type: 'pie',
+ radius: ['0', '50%'],
+ center: ['50%', '50%'],
+ hoverAnimation: false,
+ z: 3,
+ data: [
+ {
+ value: dataArr,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#23A6FF',
+ },
+ {
+ offset: 1,
+ color: 'rgba(17, 90, 233, 0.21) ',
+ },
+ ]),
+ opacity: 0.59,
+ },
+ },
+ label: {
+ show: false,
+ },
+ },
+ ],
+ labelLine: {
+ show: false,
+ },
+ },
+ ],
+ };
+
+
+ const chart = echarts.init(this.$refs.chart)
+
+ chart.setOption(option)
+ window.addEventListener("resize", function () {
+ chart.resize()
+ })
+ },
+ },
+}
+
+</script>
+<style lang="scss">
+.projectTime {
+ height: calc(100% - 30px);
+ width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/chart/projectintroduction.vue b/src/components/chart/projectintroduction.vue
new file mode 100644
index 0000000..d1556a3
--- /dev/null
+++ b/src/components/chart/projectintroduction.vue
@@ -0,0 +1,105 @@
+<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>
+</template>
+<script>
+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;
+ }
+
+ }
+
+}
+</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;
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3