12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736 |
- <template>
- <div class="comprehensive-analysis">
- <LawPopup class="comprehensive-analysis-law-popup" />
- <LabelCasePopup
- class="comprehensive-analysis-label-popup"
- style="left: 40%"
- v-if="updateCasePopupShow"
- ref="updateLabelRef"
- @close="closeLabelEvent"
- @save="modifyLabelEvent"
- />
- <div
- class="comprehensive-analysis-backbtn"
- @click="backEvent"
- v-if="$store.state.backMenu.index && $store.state.backMenu.subIndex"
- >
- <div class="left-arrow"></div>
- <div class="title">返回上级</div>
- </div>
- <div class="comprehensive-analysis-searchbox">
- <el-input placeholder="请输入地名地址" v-model="addressInput">
- <el-button
- type="primary"
- slot="append"
- icon="el-icon-search"
- style="vertical-align: bottom"
- ></el-button>
- </el-input>
- </div>
- <!-- 属性弹窗 -->
- <AttributePopup
- v-drag
- class="comprehensive-analysis-popup"
- v-if="attrTableShow"
- :boxWidth="boxWidth"
- :boxHeight="boxHeight"
- :tableType="tableType"
- :tableData="tableData"
- @close="closeEvent"
- />
- <!-- 图例 -->
- <Legend
- v-show="legendShow"
- class="comprehensive-analysis-legendbox"
- :legendData="{
- boxWidth: '230',
- boxHeight: legendHeight,
- menuIndex: '3',
- legendIcon: legendIcon,
- legendTitle: legendTitle,
- leftWidth: '30%',
- rightWidth: '70%',
- rightItemWidth: '120',
- }"
- />
- <!-- 开启左边面板的控制按钮 -->
- <div class="comprehensive-analysis-leftopenbox" v-show="leftBoxBtn">
- <div @click="leftPanelDisplay('show')"><div></div></div>
- </div>
- <!-- 开启右边面板的控制按钮 -->
- <div class="comprehensive-analysis-rightopenbox" v-show="rightBoxBtn">
- <div @click="rightPanelDisplay('show')"><div></div></div>
- </div>
- <!-- 左侧面板的显示与隐藏 -->
- <transition name="fade-left">
- <div class="comprehensive-analysis-left" v-show="showLeftBox">
- <div class="close-btnbox">
- <div @click="leftPanelDisplay('hide')"><div></div></div>
- </div>
- <div class="control-container">
- <el-input
- class="control-container-input"
- v-model="filterText"
- placeholder="请输入搜索内容"
- ></el-input>
- <el-tooltip
- effect="light"
- :content="isLeftLock ? '解锁面板' : '锁定面板'"
- placement="bottom-end"
- >
- <div
- :class="{ 'lock-style': isLeftLock }"
- class="control-container-pin-btn"
- @click="leftPanelLock"
- ></div>
- </el-tooltip>
- </div>
- <div class="contant-container">
- <div class="contant-container-innerbox">
- <el-tree
- :data="modelData"
- :props="defaultProps"
- @check-change="handleCheckChange"
- node-key="id"
- ref="tree"
- :filter-node-method="filterNode"
- >
- <span class="custom-tree-node" slot-scope="{ node }">
- <template
- v-if="
- node.data.mainType === '所有图层' ||
- node.data.mainType === '我的模型' ||
- node.data.mainType === '预设模型'
- "
- >
- <el-checkbox v-model="node.checked" style="position: relative"
- >{{ node.label
- }}<span
- ><el-button
- size="normal"
- type="text"
- icon="el-icon-location"
- @click="locateEvent(node)"
- style="position: absolute; right: -30px; top: -12px"
- ></el-button
- ></span>
- <span style="position: absolute; right: -80px; top: -9px">
- <el-button
- v-if="node.parent.label === '我的模型'"
- size="small"
- type="text"
- icon="el-icon-edit"
- @click="handleUpdate(node)"
- ></el-button>
- <el-button
- v-if="node.parent.label === '我的模型'"
- size="small"
- type="text"
- icon="el-icon-delete"
- @click="handleDelete(node)"
- ></el-button>
- </span>
- </el-checkbox>
- </template>
- <template v-else>
- <div
- :class="{
- 'tree-arrow': !node.expanded,
- 'tree-arrow-expanded': node.expanded,
- }"
- ></div>
- <span>{{ node.label }}</span>
- </template>
- </span>
- </el-tree>
- </div>
- </div>
- </div>
- </transition>
- <!-- 右侧面板的显示与隐藏 -->
- <transition name="fade-right">
- <div class="comprehensive-analysis-right" v-show="showRightBox">
- <div class="close-btnbox">
- <div @click="rightPanelDisplay('hide')"><div></div></div>
- </div>
- <div class="control-container">
- <el-tooltip
- effect="light"
- :content="isRightLock ? '解锁面板' : '锁定面板'"
- placement="bottom-start"
- >
- <div
- :class="{ 'lock-style': isRightLock }"
- @click="rightPanelLock"
- ></div>
- </el-tooltip>
- </div>
- <div class="contant-container">
- <div class="contant-container-innerbox">
- <el-collapse v-model="activeNames">
- <el-collapse-item
- v-for="key in Object.keys(originalData)"
- :key="key"
- :title="key"
- :name="key"
- >
- <div
- class="panel-list-item"
- v-for="(v, i) in originalData[key]"
- :key="v.id"
- @click.stop="listItemClick('default', v)"
- >
- <!-- {{ v.column_name + "_" + (i + 1) }} -->
- {{ v.title + "_" + (i + 1) }}
- </div>
- <div class="panel-footer" @mouseenter="mouseenter(key)">
- <Pagination :paginationData="paginationData" />
- </div>
- </el-collapse-item>
- <el-collapse-item title="我的标记" name="myLabel">
- <div
- class="panel-list-item"
- v-for="item in rightLabelData"
- :key="item.id"
- >
- <div @click="listItemClick('new', item)">
- {{ item.name }}
- </div>
- <span class="operation-icon"
- ><el-button
- size="normal"
- type="text"
- icon="el-icon-edit"
- @click="updateLabel(item)"
- ></el-button
- ><el-button
- size="normal"
- type="text"
- icon="el-icon-delete"
- @click="deleteLabel(item.id)"
- ></el-button
- ></span>
- <span
- class="visible-icon"
- :class="{ click: item.geometryChecked }"
- @click="controlLabel(item)"
- ></span>
- </div>
- </el-collapse-item>
- </el-collapse>
- </div>
- </div>
- </div>
- </transition>
- </div>
- </template>
- <script>
- // 综合分析 this.$store.state.leftMenuTitle
- import MenuCard from "@/components/layout/MenuCard.vue";
- import Legend from "@/components/map/Legend.vue";
- import Pagination from "@/components/common/Pagination.vue";
- import publicFun from "@/utils/publicFunction.js";
- import { treeModel, defaultLayers } from "@/config/common";
- import AttributePopup from "@/components/popup/AttributePopup.vue";
- import LabelCasePopup from "@/components/popup/LabelCasePopup.vue";
- import LawPopup from "@/components/popup/LawPopup.vue";
- import { nextTick } from "vue";
- export default {
- name: "ComprehensiveAnalysis",
- components: {
- MenuCard,
- Legend,
- AttributePopup,
- LawPopup,
- LabelCasePopup,
- Pagination,
- },
- data() {
- return {
- enteredPanelId: "",
- enteredColumnId: "",
- uploadBaseUrl: "/dms",
- classTextToIndex: {},
- addressInput: "",
- legendShow: false,
- tableType: "normal",
- tableData: [],
- legendHeight: "0",
- boxWidth: "600",
- boxHeight: "600",
- activeNames: ["myLabel"],
- rightPanelTitle: "",
- rightPanelDataMap: new Map(),
- originalData: {},
- rightLabelData: [],
- showLeftBox: true,
- showRightBox: true,
- leftBoxBtn: false,
- rightBoxBtn: false,
- modelData: [],
- defaultProps: {
- children: "children",
- label: "label",
- },
- legendIcon: [],
- legendTitle: [],
- // 我的模型相关数据
- myModel: null,
- filterText: "",
- // 存放对应图层的坐标
- treeCoordMap: new Map(),
- layerIdMap: new Map(),
- randomColor: new Map(),
- isLeftLock: true,
- isRightLock: true,
- currentPage: 1,
- currentPageSize: 10,
- paginationData: {
- pageSize: 10,
- pagerCount: 5,
- currentPage: 1,
- pageSizes: [5, 10, 20, 30],
- total: 50,
- currentChange: (val) => {
- let columnId = this.enteredColumnId;
- let panelId = this.enteredPanelId;
- this.changeSingleLayer(columnId, panelId, val);
- },
- handleSizeChange: (val) => {
- this.handleSizeChange(val);
- },
- },
- };
- },
- computed: {
- getCustomModel() {
- return this.$store.state.customModelsArr;
- },
- getLeftMenuTitle() {
- return this.$store.state.leftMenuTitle;
- },
- getMyLabelData() {
- return this.$store.getters.myLabelPointsArr;
- },
- getMyPoints() {
- return map2DViewer.myLabels;
- },
- attrTableShow: {
- get() {
- return this.$store.state.attrTableShow;
- },
- set(val) {
- this.$store.state.attrTableShow = val;
- },
- },
- updateCasePopupShow: {
- get() {
- return this.$store.state.updateCasePopupShow;
- },
- set(val) {
- this.$store.state.updateCasePopupShow = val;
- },
- },
- uploadDataArr() {
- return uploadDataIdArr;
- },
- },
- watch: {
- uploadDataArr: {
- handler(val) {
- if (val.length > 0) {
- // console.log(val, "uploadDataIdArr");
- }
- },
- immediate: true,
- deep: true,
- // console.log(val,"uploadDataIdArr");
- },
- getLeftMenuTitle: {
- handler(val) {
- this.$nextTick(() => {
- if (treeIdMap.has(val)) {
- // console.log(val, "678");
- // 设置默认勾选项
- this.$refs.tree.setCheckedKeys([treeIdMap.get(val)]);
- }
- });
- },
- immediate: true,
- },
- legendTitle(val) {
- // console.log(val, "监听当前图例item数量");
- if (val.length === 0) {
- this.legendShow = false;
- }
- if (val.length > 0 && val.length <= 10) {
- this.legendShow = true;
- this.legendHeight = 50 * val.length + 50 + "";
- }
- },
- filterText(val) {
- this.$refs.tree.filter(val);
- },
- getCustomModel: {
- handler(val) {
- // console.log(val, "目前存在的自定义模型");
- this.getMyModelData();
- },
- deep: true,
- },
- getMyLabelData: {
- handler(val) {
- // console.log("标记点保存事件成功,允许开始定位");
- this.rightLabelData = [];
- if (val.length > 0) {
- this.rightLabelData = val.map((v, i) => {
- let data = JSON.parse(v.geojson);
- return {
- id: v.id,
- name: `疑点 ${v.id}`,
- coord: data.geometry.coordinates[0][0],
- type: data.properties.title,
- des: data.properties.desc,
- geojson: v.geojson,
- geometryChecked: false,
- featureType: data.properties.featureType,
- };
- });
- // console.log(this.rightLabelData, "rightLabelData");
- }
- },
- deep: true,
- // immediate: true,
- },
- },
- created() {
- this.getColumnList();
- this.classDictQuery("0", "c_task_type", "任务类型");
- this.classDictQuery("0", "浦东新区行政区划", "浦东新区行政区划");
- //获取我的标记数据
- this.getUserMarkers();
- },
- mounted() {
- map2DViewer.map.on("move", (e) => {
- if (!this.isLeftLock) {
- this.showLeftBox = false;
- this.leftBoxBtn = true;
- }
- if (!this.isRightLock) {
- this.showRightBox = false;
- this.rightBoxBtn = true;
- }
- });
- },
- beforeDestroy() {
- treeIdMap.clear();
- uploadDataIdArr = [];
- this.treeCoordMap.clear();
- map2DViewer.map.off("move");
- if (Object.getOwnPropertyNames(map2DViewer.analysisGroups).length > 0) {
- for (let group in map2DViewer.analysisGroups) {
- this.$store.state.mapMethodsCollection
- .get("RENDER")
- .deleteGroupFromMap(group);
- map2DViewer.analysisGroups[group].remove();
- }
- }
- if (Object.getOwnPropertyNames(map2DViewer.myLabels).length > 0) {
- for (let label in map2DViewer.myLabels) {
- this.$store.state.mapMethodsCollection
- .get("RENDER")
- .deleteGeometry(map2DViewer.myLabels[label]);
- }
- }
- map2DViewer.analysisGroups = {};
- map2DViewer.polygons = {};
- map2DViewer.myLabels = {};
- this.attrTableShow = false;
- this.updateCasePopupShow = false;
- },
- methods: {
- mouseenter(val) {
- if (this.rightPanelDataMap.has(val)) {
- // 方便获取
- this.enteredPanelId = val;
- this.enteredColumnId = this.rightPanelDataMap.get(val);
- // console.log("当前的columnId", this.enteredColumnId);
- }
- },
- handleSizeChange(val) {
- console.log(`每页 ${val} 条`);
- this.currentPageSize = val;
- this.changeSingleLayer(
- this.enteredColumnId,
- this.enteredPanelId,
- this.currentPage
- );
- // this.getTableData(this.currentPage);
- },
- getTableData() {},
- /**
- * 获取图层信息 -- 所有模型和预设模型
- */
- displaySingleLayer(columnId, id) {
- // console.log(columnId, "columnId");
- let layerParams = new FormData();
- layerParams = {
- columnId: columnId,
- states: "0,1,2,3",
- pageSize: 10,
- page: 0,
- };
- this.$Post(this.urlsCollection.selectContentList, layerParams).then(
- (res) => {
- if (res.code === 202 && res.content === "数据不存在") {
- this.$message.info("暂无数据!");
- }
- if (res.code === 200 && res.content.data.length > 0) {
- this.paginationData.currentPage = 1
- this.paginationData.total = res.content.count
- let uniqueId = id;
- map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
- map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
- this.legendTitle.push({
- name: uniqueId,
- info: uniqueId,
- });
- this.legendIcon.push({
- name: uniqueId,
- background: "transparent",
- border: `1px solid ${this.randomColor.get(uniqueId)}`,
- });
- this.originalData[uniqueId] = res.content.data.map((ele) => {
- let cid = ele.id;
- let geometry = ele.c_content;
- this.layerIdMap.set(uniqueId, uniqueId);
- // 激活当前展开面板
- this.activeNames = ["myLabel", uniqueId];
- this.$store.state.mapMethodsCollection
- .get("RENDER")
- .addSinglePolygon(
- geometry,
- cid,
- this.randomColor.get(uniqueId),
- uniqueId
- );
- return {
- id: ele.id,
- // "垃圾堆放点"
- column_name: ele.column_name,
- // 是否疑点
- c_boolean: ele.c_boolean ? "是" : "否",
- // 行政区划
- c_xzqh: ele.c_xzqh,
- // 空间信息
- c_content: ele.c_content,
- // 疑点修改时间
- c_date_time: ele.c_date_time,
- // 修改人员名称
- // c_editor_name: ele.c_editor_name,
- // 标题
- title: ele.title,
- column_id: ele.column_id,
- content: ele.content,
- secret_level: ele.secret_level,
- };
- });
- }
- }
- );
- },
- /**
- * 切换页时改变图层数据
- */
- changeSingleLayer(columnId, id, val) {
- let layerParams = new FormData();
- layerParams = {
- columnId: columnId,
- states: "0,1,2,3",
- pageSize: 10,
- page: val - 1,
- };
- this.$Post(this.urlsCollection.selectContentList, layerParams).then(
- (res) => {
- // console.log(res, "changeSingeLayer");
- if (res.code === 200 && res.content.data.length > 0) {
- this.paginationData.currentPage = val;
- this.paginationData.total = res.content.count;
- let uniqueId = id;
- if (map2DViewer.analysisGroups[uniqueId]) {
- // console.log("当前的analysisGroups有数据");
- // map2DViewer.analysisGroups[uniqueId].remove()
- map2DViewer.analysisGroups[uniqueId].clearLayers();
- this.originalData[uniqueId] = res.content.data.map((ele) => {
- let cid = ele.id;
- let geometry = ele.c_content;
- this.layerIdMap.set(uniqueId, uniqueId);
- this.activeNames = ["myLabel", uniqueId];
- this.$store.state.mapMethodsCollection
- .get("RENDER")
- .addSinglePolygon(
- geometry,
- cid,
- this.randomColor.get(uniqueId),
- uniqueId
- );
- return {
- id: ele.id,
- // "垃圾堆放点"
- column_name: ele.column_name,
- // 是否疑点
- c_boolean: ele.c_boolean ? "是" : "否",
- // 行政区划
- c_xzqh: ele.c_xzqh,
- // 空间信息
- c_content: ele.c_content,
- // 疑点修改时间
- c_date_time: ele.c_date_time,
- // 修改人员名称
- // c_editor_name: ele.c_editor_name,
- // 标题
- title: ele.title,
- column_id: ele.column_id,
- content: ele.content,
- secret_level: ele.secret_level,
- };
- });
- }
- }
- }
- );
- },
- // 数据字典查询 -- 根据内容获取对应的index
- // this.classTextToIndex["任务类型"]
- classDictQuery(type, cName, keyName) {
- let params = new FormData();
- params = {
- type: type,
- cName: cName,
- };
- this.$Post(this.urlsCollection.selectByCNameAType, params).then((res) => {
- if (res.code === 200 && res.content.length > 0) {
- this.classTextToIndex[keyName] = new Map();
- res.content.forEach((v) => {
- this.classTextToIndex[keyName].set(v.name, v.index + "");
- });
- }
- });
- },
- // 获取分级栏目列表
- getColumnList() {
- this.modelData = [];
- this.$Post(this.urlsCollection.getColumnList).then((res) => {
- if (res.code === 200 && res.content.length > 0) {
- let data = res.content.map((item1) => {
- if (item1.title === "所有图层" && item1.columnList.length > 0) {
- treeIdMap.set(
- `${item1.title}_${item1.id}`,
- `${item1.title}_${item1.id}`
- );
- return {
- id: `${item1.title}_${item1.id}`,
- label: item1.title,
- // 镇
- children:
- item1.columnList.length === 0
- ? []
- : item1.columnList.map((item2) => {
- treeIdMap.set(
- `${item2.title}_${item2.id}`,
- `${item2.title}_${item2.id}`
- );
- return {
- id: `${item2.title}_${item2.id}`,
- label: item2.title,
- // 水资源,土地资源,林地资源
- children:
- item2.columnList.length === 0
- ? []
- : item2.columnList.map((item3) => {
- treeIdMap.set(
- `${item3.title}_${item3.id}`,
- `${item3.title}_${item3.id}`
- );
- return {
- id: `${item3.title}_${item3.id}`,
- label: item3.title,
- tag: item3.tag,
- children:
- item3.columnList &&
- item3.columnList.length === 0
- ? []
- : item3.columnList.map((item4) => {
- treeIdMap.set(
- `${item4.title}_${item4.id}`,
- `${item4.title}_${item4.id}`
- );
- this.rightPanelDataMap.set(
- `${item4.title}_${item4.id}`,
- item4.id
- );
- this.randomColor.set(
- `${item4.title}_${item4.id}`,
- publicFun.getRandomColor()
- );
- return {
- id: `${item4.title}_${item4.id}`,
- label: item4.title,
- children: [],
- columnId: item4.id,
- modelName: item4.modelName,
- modelId: item4.modelId,
- tag: item4.tag,
- type: item3.title,
- town: item2.title,
- mainType: item1.title,
- color: publicFun.getRandomColor(),
- };
- }),
- };
- }),
- };
- }),
- };
- }
- if (item1.title === "预设模型" && item1.columnList.length > 0) {
- treeIdMap.set(
- `${item1.title}_${item1.id}`,
- `${item1.title}_${item1.id}`
- );
- return {
- id: `${item1.title}_${item1.id}`,
- label: item1.title,
- children:
- item1.columnList.length === 0
- ? []
- : item1.columnList.map((item2) => {
- treeIdMap.set(
- `${item2.title}_${item2.id}`,
- `${item2.title}_${item2.id}`
- );
- return {
- id: `${item2.title}_${item2.id}`,
- label: item2.title,
- children:
- item2.columnList.length === 0
- ? []
- : item2.columnList.map((item3) => {
- treeIdMap.set(
- `${item3.title}_${item3.id}`,
- `${item3.title}_${item3.id}`
- );
- this.rightPanelDataMap.set(
- `${item3.title}_${item3.id}`,
- item3.id
- );
- this.randomColor.set(
- `${item3.title}_${item3.id}`,
- publicFun.getRandomColor()
- );
- return {
- id: `${item3.title}_${item3.id}`,
- label: item3.title,
- children: [],
- mainType: item1.title,
- columnId: item3.id,
- };
- }),
- };
- }),
- };
- }
- if (item1.title === "我的模型") {
- // treeIdMap.set(item1.title, `${item1.title}_${item1.id}`);
- treeIdMap.set(
- `${item1.title}_${item1.id}`,
- `${item1.title}_${item1.id}`
- );
- return {
- id: `${item1.title}_${item1.id}`,
- children: [],
- label: item1.title,
- };
- }
- });
- data.forEach((v) => {
- if (v) {
- this.modelData.unshift(v);
- }
- });
- this.modelData.push({
- id: "我的图层",
- label: "我的图层",
- children: [],
- });
- this.getMyModelData();
- }
- });
- },
- getMyModelData() {
- // 我的模型栏目信息
- // {
- // "level": 0,
- // "modelId": 94,
- // "updateTime": 1671432804228,
- // "authorId": 4,
- // "title": "我的模型",
- // "type": 1,
- // "content": "浦东审计-我的模型",
- // "parentId": -1,
- // "modelName": "pdsj_wdmx_m_ysmx_wdmx",
- // "createTime": 1671432804228,
- // "authorName": "user001",
- // "id": 89,
- // "state": 0,
- // "tag": "pdsj_wdmx"
- // },
- let params = new FormData();
- params = {
- columnId: 49,
- states: "0,1,2,3",
- pageSize: 10,
- page: 0,
- };
- this.$Post(this.urlsCollection.selectContentList, params)
- .then((res) => {
- // console.log(res, "判断是否有");
- if (res.code === 200 && res.content.data.length > 0) {
- // console.log(res.content.data, "我的模型 - 最终数据");
- let children = res.content.data.map((ele) => {
- customModelIdMap.set(ele.title, {
- column_id: ele.column_id,
- id: ele.id,
- });
- return {
- id: ele.id,
- label: ele.title,
- children: [],
- column_id: ele.column_id,
- model_name: ele.model_name,
- model_id: ele.model_id,
- state: ele.state,
- mainType: "我的模型",
- c_bind_layer: ele.c_bind_layer,
- c_dzfx_file: ele.c_dzfx_file || "",
- };
- });
- if (this.modelData.length > 0) {
- this.modelData.forEach((ele) => {
- if (ele.label == "我的模型") {
- // console.log(ele, "我的模型");
- ele.children = children;
- }
- });
- }
- }
- })
- .catch((err) => {
- console.log(err, "getMyModelData");
- });
- },
- // 调用我的标记接口
- getUserMarkers() {
- if (localStorage.getItem("USER_ID")) {
- let paramData = new FormData();
- paramData = {
- userId: Number(localStorage.getItem("USER_ID")),
- sourceId: 0,
- pageSize: 10,
- };
- this.$Post(this.urlsCollection.selectByUser, paramData).then((res) => {
- if (res.code === 200 && res.content.length >= 1) {
- // console.log(res);
- this.$store.state.myLabelPointsArr = [];
- this.$store.state.myLabelPointsArr = res.content.map((v) => {
- return {
- id: v.id,
- geojson: v.geojson,
- type: v.type,
- };
- });
- }
- // res.content 返回数据为空
- if (res.code === 205) {
- this.$store.state.myLabelPointsArr = [];
- }
- });
- }
- },
- // 回退事件
- backEvent() {
- if (
- this.$store.state.backMenu.index &&
- this.$store.state.backMenu.subIndex
- ) {
- this.$store.commit("changeNavSelect", {
- index: this.$store.state.backMenu.index,
- subIndex: this.$store.state.backMenu.subIndex,
- name: this.$store.state.backMenu.name
- ? this.$store.state.backMenu.name
- : "",
- });
- }
- },
- // 左侧面板的显示与隐藏
- leftPanelDisplay(val) {
- if (val === "show") {
- this.showLeftBox = true;
- this.leftBoxBtn = false;
- }
- if (val === "hide") {
- this.showLeftBox = false;
- this.leftBoxBtn = true;
- }
- },
- // 右侧面板的显示与隐藏
- rightPanelDisplay(val) {
- if (val === "show") {
- this.showRightBox = true;
- this.rightBoxBtn = false;
- }
- if (val === "hide") {
- this.showRightBox = false;
- this.rightBoxBtn = true;
- }
- },
- leftPanelLock() {
- this.isLeftLock = !this.isLeftLock;
- },
- rightPanelLock() {
- this.isRightLock = !this.isRightLock;
- },
- // 节点过滤事件
- filterNode(value, data) {
- if (!value) return true;
- return data.label.indexOf(value) !== -1;
- },
- locateEvent(node) {
- if (this.layerIdMap.has(node.data.id)) {
- let layer = this.layerIdMap.get(node.data.id);
- // console.log(layer, "layer");
- map2DViewer.map.fitBounds(
- map2DViewer.analysisGroups[node.data.id].getBounds()
- );
- }
- },
- handleUpdate(node) {
- this.$bus.$emit("updateModel", node);
- },
- handleDelete(node) {
- debugger;
- // console.log(node, "删除节点");
- let deleteParams = {
- id: customModelIdMap.get(node.data.label).id,
- columnId: 49,
- state: 4,
- };
- this.$Post(this.urlsCollection.updateAudit, deleteParams).then((res) => {
- if (res.code === 200) {
- this.$message.info("模型已删除!");
- this.$store.state.customModelsArr =
- this.$store.state.customModelsArr =
- this.$store.state.customModelsArr.filter((v) => {
- return v.name !== node.data.label;
- });
- // this.getMyModelData();
- }
- });
- },
- // 节点change事件
- handleCheckChange(data, checked) {
- if (data.mainType && data.mainType !== "我的模型") {
- if (checked) {
- this.showRightBox = true;
- // 第一级菜单是所有图层
- if (data.mainType === "所有图层") {
- this.rightPanelTitle = data.id;
- let searchParam = [];
- let targetTown = this.classTextToIndex["浦东新区行政区划"].get(
- data.town
- );
- let targetType = this.classTextToIndex["任务类型"].get(
- data.type + "审计"
- );
- let paramUser = {
- field: "c_user_id",
- searchType: "2",
- content: {
- value: localStorage.getItem("USER_ID"),
- },
- };
- searchParam.push(paramUser);
- let paramTown = {
- field: "c_area_code",
- searchType: "1",
- content: {
- value: targetTown,
- },
- };
- searchParam.push(paramTown);
- let paramType = {
- field: "c_task_type",
- searchType: "1",
- content: {
- value: targetType,
- },
- };
- searchParam.push(paramType);
- let params = new FormData();
- params = {
- columnId: 48,
- states: "2,3",
- pageSize: 10,
- page: 0,
- search: JSON.stringify(searchParam),
- };
- this.$Post(this.urlsCollection.selectContentList, params).then(
- (res) => {
- if (res.code === 202 && res.content === "数据不存在") {
- this.$message.info("当前用户无权限!");
- layerAuthorityMap.set(data.id, "无权限");
- }
- if (res.code === 200 && res.content.data.length > 0) {
- layerAuthorityMap.set(data.id, "有权限");
- this.$store.state.treeDataCollection.set(data.id, {
- mainType: data.mainType,
- });
- this.displaySingleLayer(data.columnId, data.id);
- }
- }
- );
- }
- // 第一级菜单是预设模型
- if (data.mainType === "预设模型") {
- layerAuthorityMap.set(data.id, "有权限");
- this.rightPanelTitle = data.id;
- this.$store.state.treeDataCollection.set(data.id, {
- mainType: data.mainType,
- // town: data.town,
- // type: data.type,
- });
- this.displaySingleLayer(data.columnId, data.id);
- }
- } else {
- delete this.originalData[data.id];
- map2DViewer.map.closePopup();
- // 移除图例
- if (this.legendTitle.length > 0) {
- this.legendTitle = this.legendTitle.filter((v) => {
- return v.name !== data.id;
- });
- this.legendIcon = this.legendIcon.filter((v) => {
- return v.name !== data.id;
- });
- }
- this.layerIdMap.delete(data.id);
- //关联自定义模型
- this.$store.state.treeDataCollection.delete(data.id);
- // 只激活我的标记
- this.activeNames = ["myLabel"];
- this.$store.state.mapMethodsCollection
- .get("RENDER")
- .deleteGroupFromMap(data.id);
- }
- }
- // 第一级菜单是我的模型
- if (data.mainType && data.mainType === "我的模型") {
- // 显示叠置分析的数据
- checked ? this.displayOverlayData(data) : this.deleteOverlayData(data);
- }
- },
- displayOverlayData(data) {
- if (data.c_dzfx_file) {
- this.$Get(this.uploadBaseUrl + data.c_dzfx_file, "").then(
- (response) => {
- if (response.features.length > 0) {
- response.features.forEach((v) => {
- let geojson = publicFun.standardGeojson(v.geometry.coordinates);
- // console.log(geojson, "geojson")
- this.readGeojson(geojson, data.id);
- });
- }
- }
- );
- }
- },
- readGeojson(geojson, id) {
- map2DViewer.overlay[id] = [];
- let states = [];
- states.push(geojson);
- let geojsonData = L.geoJSON(states, {
- style: function (feature) {
- // console.log(feature);
- },
- }).addTo(map2DViewer.map);
- map2DViewer.overlay[id] = geojsonData;
- },
- deleteOverlayData(data) {
- if (map2DViewer.overlay[data.id]) {
- map2DViewer.map.removeLayer(map2DViewer.overlay[data.id]);
- }
- },
- // 右侧面板项点击事件
- listItemClick(type, data) {
- this.$store.state.bottomMenuIndexs.index = -1;
- this.$store.state.bottomMenuIndexs.subIndex = -1;
- this.updateCasePopupShow = false;
- this.tableData = [];
- if (type === "default") {
- this.tableType = "normal";
- this.boxWidth = "400";
- this.boxHeight = "250";
- if (data.c_content) {
- let obj = JSON.parse(data.c_content).properties;
- console.log(obj);
- this.tableData.push(obj);
- }
- }
- if (type === "new") {
- this.rightLabelData.forEach((item) => {
- if (item.id == data.id) {
- item.geometryChecked = false;
- this.controlLabel(item);
- }
- });
- let geoType = JSON.parse(data.geojson).properties.featureType;
- this.$store.state.mapMethodsCollection
- .get("RENDER")
- .drawGeometry(geoType, data);
- this.tableType = "personal";
- this.boxWidth = "300";
- this.boxHeight = "300";
- this.tableData.push({
- name: data.name,
- type: data.type,
- des: data.des,
- });
- }
- this.attrTableShow = true;
- },
- closeEvent() {
- this.attrTableShow = false;
- },
- // 关闭修改标记弹窗
- closeLabelEvent() {
- this.updateCasePopupShow = false;
- },
- modifyLabelEvent() {
- this.$nextTick(() => {
- let selectType = this.$refs.updateLabelRef.selectVal;
- let desContent = this.$refs.updateLabelRef.textContent;
- let id = this.$refs.updateLabelRef.id;
- let params = new FormData();
- let geojson = JSON.parse(this.$refs.updateLabelRef.geojson);
- let geometryType = geojson.properties.featureTypeIndex;
- // 修改标题和描述
- geojson.properties.title = selectType;
- geojson.properties.desc = desContent;
- console.log(geojson, "修改后的geojson数据");
- params = {
- userId: Number(localStorage.getItem("USER_ID")),
- sourceId: 0,
- type: geometryType,
- geojson: JSON.stringify(geojson),
- id: id,
- };
- this.$Post(this.urlsCollection.updateConllection, params).then(
- (res) => {
- if (res.code === 200) {
- // console.log("修改成功", res);
- this.updateCasePopupShow = false;
- this.getUserMarkers();
- }
- },
- (error) => {
- this.$message.error("保存失败");
- console.log(error);
- }
- );
- });
- },
- // 修改标记 -- 仅支持修改类型和描述
- updateLabel(val) {
- // console.log("修改标记", val);
- this.$store.state.bottomMenuIndexs.index = -1;
- this.$store.state.bottomMenuIndexs.subIndex = -1;
- this.updateCasePopupShow = true;
- this.attrTableShow = false;
- if (this.updateCasePopupShow) {
- this.$nextTick(() => {
- // console.log(this.$refs.updateLabelRef, "updateLabelRef");
- this.$refs.updateLabelRef.selectVal = val.type;
- this.$refs.updateLabelRef.textContent = val.des;
- this.$refs.updateLabelRef.id = val.id;
- this.$refs.updateLabelRef.geojson = val.geojson;
- });
- }
- },
- // 删除标记
- deleteLabel(id) {
- if (localStorage.getItem("USER_ID")) {
- // console.log("删除标记");
- let params = new FormData();
- this.$store.state.mapMethodsCollection
- .get("RENDER")
- .deleteGeometry(map2DViewer.myLabels[`label_${id}`]);
- map2DViewer.myLabels[`label_${id}`] = null;
- params = {
- userId: Number(localStorage.getItem("USER_ID")),
- sourceId: 0,
- id: id,
- };
- this.$Post(this.urlsCollection.deleteConllection, params).then(
- (res) => {
- if (res.code === 200) {
- // console.log("疑点删除成功");
- this.getUserMarkers();
- }
- }
- );
- }
- },
- // 控制标记的显示与隐藏
- controlLabel(val) {
- val.geometryChecked = !val.geometryChecked;
- // 已经绘制了几何体
- if (map2DViewer.myLabels[`label_${val.id}`]) {
- if (val.featureType === "点") {
- map2DViewer.myLabels[`label_${val.id}`].setOpacity(
- val.geometryChecked ? 1 : 0
- );
- }
- if (val.featureType !== "点") {
- map2DViewer.myLabels[`label_${val.id}`].setStyle(
- val.geometryChecked
- ? {
- opacity: 1,
- fillOpacity: 0.4,
- }
- : {
- opacity: 0,
- fillOpacity: 0,
- }
- );
- }
- } else {
- // 未绘制几何体
- // console.log(val, "未绘制几何体");
- if (val.geometryChecked) {
- let geoType = JSON.parse(val.geojson).properties.featureType;
- this.$store.state.mapMethodsCollection
- .get("RENDER")
- .drawGeometry(geoType, val);
- }
- }
- },
- },
- };
- </script>
- <style lang="less" scoped>
- @commonBorderColor: rgb(0, 170, 255);
- .comprehensive-analysis {
- &-law-popup {
- position: absolute;
- top: 15%;
- left: 33%;
- pointer-events: auto;
- z-index: 99;
- }
- &-label-popup {
- position: absolute;
- top: 15%;
- left: 35%;
- pointer-events: auto;
- z-index: 99;
- }
- .el-checkbox {
- color: #fff;
- /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
- color: rgba(116, 255, 255, 1);
- }
- /deep/.el-checkbox__input.is-checked .el-checkbox__inner::after {
- width: 70%;
- height: 70%;
- background: #74ffff;
- border-radius: 0;
- transform: rotate(0deg) scaleY(1);
- position: static;
- }
- /deep/.el-checkbox__inner {
- border: 1px solid #dcdfe6;
- background: rgba(0, 170, 255, 0);
- display: flex;
- align-items: center;
- justify-content: center;
- position: static;
- &::after {
- transition: 0ms;
- }
- }
- /deep/.el-checkbox__label {
- padding-left: 0;
- font-size: 15px;
- position: absolute;
- top: 1px;
- left: 25px;
- }
- }
- &-searchbox {
- width: 300px;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- left: 21%;
- top: 30px;
- pointer-events: auto;
- /deep/.el-input-group__append,
- .el-input-group__prepend {
- background-color: transparent;
- color: #fff;
- border-left: none;
- }
- /deep/.el-input-group--append .el-input__inner,
- .el-input-group__prepend {
- border-right: none;
- }
- }
- &-backbtn {
- width: 120px;
- height: 35px;
- background: @commonBorderColor;
- color: #fff;
- border-radius: 3px;
- position: absolute;
- left: 30px;
- top: 15px;
- pointer-events: auto;
- cursor: pointer;
- .left-arrow {
- width: 7px;
- height: 7px;
- border-top: 2px solid #ffffff;
- border-right: 2px solid #ffffff;
- transform: translate(-50%, -50%) rotate(225deg);
- position: absolute;
- top: 16.5px;
- left: 25px;
- }
- .title {
- width: 80px;
- height: 35px;
- line-height: 35px;
- position: absolute;
- left: 34px;
- }
- }
- &-legendbox {
- position: absolute;
- right: 410px;
- top: 30px;
- z-index: 1;
- }
- /* 弹窗 */
- &-popup {
- // background: red;
- position: absolute;
- top: 10%;
- left: 35%;
- pointer-events: auto;
- z-index: 99;
- }
- /* 左侧面板开启按钮 */
- &-leftopenbox {
- position: absolute;
- left: 5px;
- width: 50px;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- & > div {
- pointer-events: auto;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: rgba(102, 203, 255, 1);
- position: relative;
- cursor: pointer;
- & > div {
- position: absolute;
- top: 8px;
- left: 16px;
- display: inline-block;
- width: 0px;
- height: 0px;
- border: 12px solid transparent;
- border-left-color: #fff;
- }
- }
- }
- /* 右侧面板开启按钮 */
- &-rightopenbox {
- position: absolute;
- right: 0;
- width: 50px;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- & > div {
- pointer-events: auto;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- cursor: pointer;
- position: relative;
- background: rgba(102, 203, 255, 1);
- & > div {
- position: absolute;
- top: 8px;
- right: 16px;
- display: inline-block;
- width: 0px;
- height: 0px;
- border: 12px solid transparent;
- border-right-color: #fff;
- }
- }
- }
- /* 左边树状面板 */
- &-left {
- width: 400px;
- height: 85%;
- position: absolute;
- top: 60px;
- left: 0;
- background: url("../assets/image/tree_background.png") no-repeat center;
- background-size: 100% 100%;
- pointer-events: auto;
- .close-btnbox {
- position: absolute;
- right: -20px;
- height: 100%;
- width: 40px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- & > div {
- pointer-events: auto;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- cursor: pointer;
- position: relative;
- background: rgba(102, 203, 255, 1);
- & > div {
- position: absolute;
- top: 8px;
- right: 16px;
- display: inline-block;
- width: 0px;
- height: 0px;
- border: 12px solid transparent;
- border-right-color: #fff;
- }
- }
- }
- .control-container {
- width: 100%;
- height: 8%;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- position: relative;
- &-pin-btn {
- width: 30px;
- height: 30px;
- background: url("../assets/image/panel_unlock.png") no-repeat center;
- position: absolute;
- top: 0;
- right: 3px;
- cursor: pointer;
- &.lock-style {
- background: url("../assets/image/panel_lock.png") no-repeat center;
- }
- }
- &-input {
- width: 320px;
- position: absolute;
- bottom: 5px;
- left: 30px;
- /deep/.el-input__inner {
- font-size: 15px;
- height: 35px;
- }
- }
- }
- .contant-container {
- width: 100%;
- height: 92%;
- overflow: auto;
- display: flex;
- align-items: center;
- justify-content: center;
- &-innerbox {
- width: 90%;
- height: 98%;
- .tree-arrow {
- position: relative;
- top: 0;
- left: 0;
- display: inline-block;
- width: 0px;
- height: 0px;
- border: 7px solid transparent;
- border-left-color: #fff;
- }
- .tree-arrow-expanded {
- position: relative;
- top: 4px;
- left: -3px;
- display: inline-block;
- width: 0px;
- height: 0px;
- border: 7px solid transparent;
- border-top-color: #fff;
- }
- .custom-tree-node {
- position: relative;
- width: 250px;
- .el-checkbox {
- width: 50%;
- }
- }
- }
- }
- }
- /* 右面板 -- 显示标记疑点 */
- &-right {
- width: 400px;
- height: 85%;
- position: absolute;
- top: 60px;
- right: 0;
- background: url("../assets/image/tree_background.png") no-repeat center;
- background-size: 100% 100%;
- pointer-events: auto;
- z-index: 2;
- // 关闭折叠面板
- .close-btnbox {
- position: absolute;
- left: -20px;
- height: 100%;
- width: 40px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- & > div {
- pointer-events: auto;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: rgba(102, 203, 255, 1);
- position: relative;
- cursor: pointer;
- & > div {
- position: absolute;
- top: 8px;
- left: 16px;
- display: inline-block;
- width: 0px;
- height: 0px;
- border: 12px solid transparent;
- border-left-color: #fff;
- }
- }
- }
- .control-container {
- width: 100%;
- height: 5%;
- position: relative;
- & > div {
- width: 30px;
- height: 30px;
- background: url("../assets/image/panel_unlock.png") no-repeat center;
- position: absolute;
- top: 0;
- left: 3px;
- cursor: pointer;
- &.lock-style {
- background: url("../assets/image/panel_lock.png") no-repeat center;
- }
- }
- }
- .contant-container {
- width: 100%;
- height: 95%;
- overflow: auto;
- display: flex;
- align-items: center;
- justify-content: center;
- &-innerbox {
- width: 90%;
- height: 98%;
- // /deep/.el-icon-arrow-right:before {
- // content: "";
- // }
- // /deep/.el-icon-arrow-right:after {
- // content: "";
- // }
- .panel-list-item {
- position: relative;
- margin: 0 auto;
- width: 80%;
- height: auto;
- background: #00aaff;
- font-family: "PingFangSC SC";
- font-weight: 400;
- font-size: 18px;
- line-height: 40px;
- background: rgba(0, 47, 86, 0.3);
- color: #fff;
- padding-left: 20px;
- border-left: 1px solid rgba(207, 222, 255, 0.2);
- border-right: 1px solid rgba(207, 222, 255, 0.2);
- border-bottom: 1px solid rgba(207, 222, 255, 0.2);
- cursor: pointer;
- .operation-icon {
- position: absolute;
- right: 100px;
- top: 0;
- display: flex;
- align-items: center;
- justify-content: space-around;
- width: 75px;
- // background: red;
- }
- .visible-icon {
- position: absolute;
- right: 60px;
- top: 9.5px;
- width: 20px;
- height: 20px;
- background: url("../assets/map/eye_invisible.png") no-repeat center;
- &.click {
- background: url("../assets/map/eye_visible.png") no-repeat center;
- }
- }
- }
- .panel-footer {
- border: none;
- width: 100%;
- height: 50px;
- margin-top: 10px;
- overflow-x: auto;
- }
- }
- }
- }
- /* 侧边栏收缩动画效果 */
- /* 左边 */
- .fade-left-enter-from {
- opacity: 0;
- transform: translateX(-300px);
- }
- .fade-left-enter-to {
- opacity: 1;
- transform: translateX(0);
- }
- /* 主动输入控住过渡的持续时间和缓动曲线 */
- .fade-left-enter-active {
- transition: all 0.3s ease;
- }
- .fade-left-leave-from {
- opacity: 1;
- transform: translateX(0);
- }
- .fade-left-leave-to {
- opacity: 0;
- transform: translateX(-300px);
- }
- .fade-left-leave-active {
- transition: all 0.3s ease;
- }
- /* 右边 */
- .fade-right-enter-from {
- opacity: 0;
- transform: translateX(300px);
- }
- .fade-right-enter-to {
- opacity: 1;
- transform: translateX(0);
- }
- .fade-right-enter-active {
- transition: all 0.3s ease;
- }
- .fade-right-leave-from {
- opacity: 1;
- transform: translateX(0);
- }
- .fade-right-leave-to {
- opacity: 0;
- transform: translateX(300px);
- }
- .fade-right-leave-active {
- transition: all 0.3s ease;
- }
- }
- </style>
|