Skip to content

Y
yjjbnt-project
提交 eec00994 authored 作者: xushangshu's avatar xushangshu
浏览文件
操作

永农定位工具

上级 63297dac
隐藏空白字符变更
内嵌 并排
正在显示 包含 925 行增加 和 142 行删除
src/main.js
浏览文件 @ eec00994
...@@ -8,6 +8,7 @@ import App from './App.vue' ...@@ -8,6 +8,7 @@ import App from './App.vue'
import '@/assets/iconfont/iconfont.js' import '@/assets/iconfont/iconfont.js'
import '@/assets/iconfont/iconfont.css' import '@/assets/iconfont/iconfont.css'
const env = import.meta.env const env = import.meta.env
const app = createApp(App) const app = createApp(App)
......
src/views/home/index.vue
浏览文件 @ eec00994
...@@ -11,77 +11,60 @@ ...@@ -11,77 +11,60 @@
</header> </header>
<main class="main"> <main class="main">
<!-- 地图 --> <!-- 地图 -->
<div class="map-container" /> <div class="map-container"
ref="testMap" />
<!-- 资源目录最小化 --> <!-- 资源目录最小化 -->
<div <div v-show="resourceIsFold"
v-show="resourceIsFold" class="resource-min"
class="resource-min" title="展开资源目录"
title="展开资源目录" @click="resourceIsFold = false">
@click="resourceIsFold = false"
>
<i class="iconfont icon-widget-layer1" /> <i class="iconfont icon-widget-layer1" />
</div> </div>
<!-- 资源目录 --> <!-- 资源目录 -->
<div <div v-show="!resourceIsFold"
v-show="!resourceIsFold" class="resource-panel">
class="resource-panel"
>
<div class="panel-title"> <div class="panel-title">
<i class="iconfont icon-widget-layer1" /> <i class="iconfont icon-widget-layer1" />
<span>资源目录</span> <span>资源目录</span>
<div <div class="fold-btn"
class="fold-btn" title="收起"
title="收起" @click="resourceIsFold = true">
@click="resourceIsFold = true"
>
<i class="iconfont icon-widget-menufold" /> <i class="iconfont icon-widget-menufold" />
</div> </div>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<lay-input <lay-input suffix-icon="layui-icon-search"
suffix-icon="layui-icon-search" size="sm" />
size="sm"
/>
<div class="list-box"> <div class="list-box">
<div <div v-for="(item) in resourceData"
v-for="(item) in resourceData" :key="item.id"
:key="item.id" class="list-item">
class="list-item" <lay-checkbox v-model="item.status"
> :name="item.id"
<lay-checkbox skin="primary"
v-model="item.status" value=""
:name="item.id" :label="item.name" />
skin="primary"
value=""
:label="item.name"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 图例最小化 --> <!-- 图例最小化 -->
<div <div v-show="lengendIsFold"
v-show="lengendIsFold" class="lengend-min"
class="lengend-min" title="展开图例"
title="展开图例" @click="lengendIsFold = false">
@click="lengendIsFold = false"
>
<i class="iconfont icon-widget-mulu" /> <i class="iconfont icon-widget-mulu" />
</div> </div>
<div <div v-show="!lengendIsFold"
v-show="!lengendIsFold" class="lengend-panel">
class="lengend-panel"
>
<div class="panel-title"> <div class="panel-title">
<i class="iconfont icon-widget-mulu" /> <i class="iconfont icon-widget-mulu" />
<span>图例</span> <span>图例</span>
<div <div class="fold-btn"
class="fold-btn" title="收起"
title="收起" @click="lengendIsFold = true">
@click="lengendIsFold = true"
>
<i class="iconfont icon-widget-menufold" /> <i class="iconfont icon-widget-menufold" />
</div> </div>
</div> </div>
...@@ -117,69 +100,56 @@ ...@@ -117,69 +100,56 @@
</div> </div>
<!-- 工具栏 --> <!-- 工具栏 -->
<div class="map-tools"> <div class="map-tools">
<div <div class="tools-arrow-part"
class="tools-arrow-part" :title="!toolIsFold ? '收起' : '展开'"
:title="!toolIsFold ? '收起' : '展开'" @click="toolIsFold = !toolIsFold">
@click="toolIsFold = !toolIsFold" <i class="iconfont"
> :class="!toolIsFold ? 'icon-widget-move-right' : 'icon-widget-move-left'" />
<i
class="iconfont"
:class="!toolIsFold ? 'icon-widget-move-right' : 'icon-widget-move-left'"
/>
</div> </div>
<div <div v-show="!toolIsFold"
v-show="!toolIsFold" class="tool-part-box">
class="tool-part-box" <div class="tool-part"
> @click="showQueryPanel=true">
<div class="tool-part">
<i class="iconfont icon-widget-info-query" /> <i class="iconfont icon-widget-info-query" />
<span>查询</span> <span>查询</span>
</div> </div>
<lay-line <lay-line direction="vertical"
direction="vertical" theme="black" />
theme="black" <div class="tool-part"
/> @click="showPointPanel=true">
<div class="tool-part">
<i class="iconfont icon-widget-location1" /> <i class="iconfont icon-widget-location1" />
<span>点定位</span> <span>点定位</span>
</div> </div>
<lay-line <lay-line direction="vertical"
direction="vertical" theme="black" />
theme="black" <div class="tool-part"
/> @click="showPolygonPanel=true">
<div class="tool-part">
<i class="iconfont icon-widget-guanxianchaxun-duobianxing" /> <i class="iconfont icon-widget-guanxianchaxun-duobianxing" />
<span>面定位</span> <span>面定位</span>
</div> </div>
<lay-line <lay-line direction="vertical"
direction="vertical" theme="black" />
theme="black" <div class="tool-part"
/> @click="DrawUtils.startDraw(map, 'Polygon')">
<div class="tool-part">
<i class="iconfont icon-widget-huizhi" /> <i class="iconfont icon-widget-huizhi" />
<span>绘制范围</span> <span>绘制范围</span>
</div> </div>
<lay-line <lay-line direction="vertical"
direction="vertical" theme="black" />
theme="black"
/>
<div class="tool-part"> <div class="tool-part">
<i class="iconfont icon-widget-hand-point" /> <i class="iconfont icon-widget-hand-point" />
<span>点选</span> <span>点选</span>
</div> </div>
<lay-line <lay-line direction="vertical"
direction="vertical" theme="black" />
theme="black"
/>
<div class="tool-part"> <div class="tool-part">
<i class="iconfont icon-widget-map-full" /> <i class="iconfont icon-widget-map-full" />
<span>全幅</span> <span>全幅</span>
</div> </div>
<lay-line <lay-line direction="vertical"
direction="vertical" theme="black" />
theme="black" <div class="tool-part"
/> @click="MeasureUtils.startMeasure(map, 'length')">
<div class="tool-part">
<i class="iconfont icon-widget-celiang" /> <i class="iconfont icon-widget-celiang" />
<span>测距</span> <span>测距</span>
</div> </div>
...@@ -188,53 +158,41 @@ ...@@ -188,53 +158,41 @@
<!-- 行政区村庄等输入框下拉框 --> <!-- 行政区村庄等输入框下拉框 -->
<div class="input-box"> <div class="input-box">
<lay-cascader <lay-cascader v-model="regionData"
v-model="regionData" :options="cascaderOptions"
:options="cascaderOptions" :only-last-level="true"
:only-last-level="true" allow-clear
allow-clear placeholder="请选择行政区"
placeholder="请选择行政区" :replace-fields="replaceFields"
:replace-fields="replaceFields" content-class="cascaderClass"
content-class="cascaderClass" size="sm"
size="sm" content-style="--global-checked-color: #2c5f9e" />
content-style="--global-checked-color: #2c5f9e" <lay-input suffix-icon="layui-icon-search"
/> size="sm"
<lay-input placeholder="请输入村庄名称、图斑编号"
suffix-icon="layui-icon-search" :allow-clear="true"
size="sm" @input="villageSearch" />
placeholder="请输入村庄名称、图斑编号"
:allow-clear="true"
@input="villageSearch"
/>
</div> </div>
<!-- 地图类型 --> <!-- 地图类型 -->
<div <div class="map-type"
class="map-type" @mouseenter="mapTypeIsExpand = true"
@mouseenter="mapTypeIsExpand = true" @mouseleave="mapTypeIsExpand = false">
@mouseleave="mapTypeIsExpand = false"
>
<ul class="list-box"> <ul class="list-box">
<li <li v-for="(item, index) in mapTypeData"
v-for="(item, index) in mapTypeData" :key="index"
:key="index" class="list-item"
class="list-item" :class="selectIndex == index ? 'active' : ''"
:class="selectIndex == index ? 'active' : ''" :style="mapTypeIsExpand ? `right:${(mapTypeData.length - index - 1) * 96}px` : `right:${(mapTypeData.length - index - 1) * 10}px`"
:style="mapTypeIsExpand ? `right:${(mapTypeData.length - index - 1) * 96}px` : `right:${(mapTypeData.length - index - 1) * 10}px`" @click="toSelectDt(index)">
@click="toSelectDt(index)" <img :src="item.imgUrl"
> alt="">
<img
:src="item.imgUrl"
alt=""
>
<div class="top-check"> <div class="top-check">
<lay-checkbox <lay-checkbox v-model="item.isCheck"
v-model="item.isCheck" name="sc"
name="sc" skin="primary"
skin="primary" value=""
value="" :label="item.label" />
:label="item.label"
/>
</div> </div>
<p class="detail-info"> <p class="detail-info">
{{ item.title }} {{ item.title }}
...@@ -242,10 +200,117 @@ ...@@ -242,10 +200,117 @@
</li> </li>
</ul> </ul>
</div> </div>
<!-- 点定位 -->
<div class="draggable-panel point"
v-show="showPointPanel">
<div class="panel-title"><span>定位点查询</span>
<div class="fold-btn"
title="关闭"
@click="showPointPanel = false">
<i class="iconfont icon-widget-close" />
</div>
</div>
<div class="panel-content">
<div class="tabs">
<div class="tab"
@click="changeTab(0)">度分秒</div>
<div class="tab"
@click="changeTab(1)">十进制</div>
</div>
<div class="tab-content">
<div class="content"
style="display: block;">
<div class="row"> <span>经度：</span><input type="text"
placeholder="度"><span>°</span><input type="text"
placeholder="分"><span>′</span><input type="text"
placeholder="秒"><span>″</span></div>
<div class="row"> <span>纬度：</span>
<input type="text"
placeholder="度"><span>°</span><input type="text"
placeholder="分"><span>′</span><input type="text"
placeholder="秒"><span>″</span>
</div>
</div>
<div class="content">
<div class="row"> <span>x坐标：</span><input type="text"
placeholder="x"><span>米</span></div>
<div class="row"> <span>y坐标：</span><input type="text"
placeholder="y"><span>米</span></div>
</div>
</div>
<div class="buffer"><span>缓冲区范围</span>
<div class="slider">
<LaySlider></LaySlider>
</div>
<span>米</span>
</div>
<div class="bottomBtn">
<lay-button><i class="iconfont icon-widget-location1" />定位</lay-button>
<lay-button type="normal"
class="btn-right">确定</lay-button>
<lay-button class="btn-right">取消</lay-button>
</div>
</div>
</div>
<!-- 面定位 -->
<div class="draggable-panel polygon"
v-show="showPolygonPanel">
<div class="panel-title"><span>定位面查询</span>
<div class="fold-btn"
title="关闭"
@click="showPolygonPanel = false">
<i class="iconfont icon-widget-close" />
</div>
</div>
<div class="panel-content">
<div class="xyTable"
id="xyTable">
<div class="row"
v-if="false"> <span class="label">坐标点1</span><span>X:</span><input type="text"
name="x1">
<span>Y:</span><input type="text"
name="y1">
</div>
</div>
<button class="circle-button"
@click="addRow()">+</button>
<div class="text"
style="margin-left:10px;color:#e62121">注意：云查询面积不得大于4500亩，仅支持经纬度查询！</div>
<div class="bottomBtn">
<lay-button><i class="iconfont icon-widget-location1" />定位</lay-button>
<lay-button type="normal"
class="btn-right"
@click="addGeoJson">确定</lay-button>
<lay-button class="btn-right">取消</lay-button>
</div>
</div>
</div>
<!-- 查询 -->
<div class="draggable-panel query"
v-show="showQueryPanel">
<div class="panel-title"><span>永久基本农田信息</span>
<div class="fold-btn"
title="关闭"
@click="showQueryPanel = false">
<i class="iconfont icon-widget-close" />
</div>
</div>
<div class="panel-content">
<div class="name"><span>座落单位名称：</span><span>辽宁省铁岭市西丰县林昌村</span></div>
<div class="count"><span>图斑个数：</span><span>5</span></div>
</div>
</div>
</main> </main>
</template> </template>
<script setup> <script setup>
import { reactive, ref, toRefs } from 'vue' import {
MapUtils, Config, ViewUtils, LayerUtils, GeojsonUtils, DrawUtils, MeasureUtils, GeometryUtils
} from 'gt-maputils'
import { divIcon, marker } from 'leaflet'
import { reactive, ref, toRefs, onMounted } from 'vue'
import { getList } from '../../api/module/main' import { getList } from '../../api/module/main'
const imgUrl1 = new URL('../../assets/img/dt.png', import.meta.url).href const imgUrl1 = new URL('../../assets/img/dt.png', import.meta.url).href
const imgUrl2 = new URL('../../assets/img/yx.png', import.meta.url).href const imgUrl2 = new URL('../../assets/img/yx.png', import.meta.url).href
...@@ -257,6 +322,12 @@ const resourceIsFold = ref(false) ...@@ -257,6 +322,12 @@ const resourceIsFold = ref(false)
const lengendIsFold = ref(false) const lengendIsFold = ref(false)
// 影像图 // 影像图
const openCollect = ref(false) const openCollect = ref(false)
// 点定位显示
const showPointPanel = ref(false)
// 面定位显示
const showPolygonPanel = ref(false)
// 查询显示
const showQueryPanel = ref(false)
const openLw = ref(false) const openLw = ref(false)
// 选择行政区 // 选择行政区
...@@ -296,12 +367,31 @@ const replaceFields = { ...@@ -296,12 +367,31 @@ const replaceFields = {
* @property {cascaders[]} areaList - 子级 * @property {cascaders[]} areaList - 子级
*/ */
/**
* @type {Ref<HTMLDivElement>}
*/
const testMap = ref()
/**
* @type {Map}
*/
let map
/**
* @type {LayerWithId}
*/
let layer
/** /**
* @type {{ * @type {{
* resourceData: resourceItemType[], * resourceData: resourceItemType[],
* cascaderOptions: cascadersItemType[] * cascaderOptions: cascadersItemType[]
* }} * }}
*/ */
const supermapServiceUrl = 'http://192.168.2.205:8090/iserver/services/map-DLTB2019-2/rest/maps/dltb2019%40dltb'
const state = reactive({ const state = reactive({
resourceData: [], resourceData: [],
cascaderOptions: [] cascaderOptions: []
...@@ -347,6 +437,593 @@ const toSelectDt = function (index) { ...@@ -347,6 +437,593 @@ const toSelectDt = function (index) {
selectIndex.value = index selectIndex.value = index
} }
onMounted(() => {
map = MapUtils.createBaseMap(testMap.value, {
crs: {
wkid: 4490
}
})
ViewUtils.setHome(map, {
bounds: [
[118.46, 31.92],
[118.47, 32.03]
],
minZoom: 8
})
addLayer()
draggable('.point')
draggable('.polygon')
changeTab(0)
addRow()
addRow()
addRow()
})
function addLayer () {
layer = LayerUtils.addLayer(map, {
type: 'supermap_rest',
url: supermapServiceUrl
})
}
function draggable (key) {
const draggablePanel = document.querySelector(key);
let active = false;
let currentX;
let currentY;
let initialX;
let initialY;
let initialWindowX;
let initialWindowY;
draggablePanel.addEventListener('mousedown', (e) => {
initialX = e.clientX - draggablePanel.offsetLeft;
initialY = e.clientY - draggablePanel.offsetTop;
initialWindowX = window.scrollX;
initialWindowY = window.scrollY;
active = true;
});
document.addEventListener('mousemove', (e) => {
if (e.target.className != 'panel-title') { return; }
if (!active) return;
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
draggablePanel.style.left = `${currentX + initialWindowX}px`;
draggablePanel.style.top = `${currentY + initialWindowY}px`;
});
document.addEventListener('mouseup', () => {
active = false;
});
}
function changeTab (index) {
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementsByClassName("content")[index].style.display = "block";
tablinks[index].className += " active";
}
let pointCount = 0;
function addRow () {
console.log(pointCount)
pointCount += 1;
let table = document.getElementById("xyTable");
const newRow = document.createElement('div');
newRow.className = "row";
newRow.style = "margin:5px;";
newRow.innerHTML = `<span class="label" style="margin-right: 20px;">坐标点` + pointCount + `</span><span>X:</span>
<input type="text" style="border: none;outline: none;padding: 8px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
border-radius: 4px;display: inline;width: 80px;margin: 0px 10px;" name="x`+ pointCount +
`"><span>Y:</span><input type="text" style="border: none;outline: none;padding: 8px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
border-radius: 4px;display: inline;width: 80px;margin: 0px 10px;" name="y`+ pointCount + `">`;
table.appendChild(newRow);
}
function addGeoJson () {
let data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "定位面",
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
118.897299,
32.02599
],
[
118.893303,
32.026212
],
[
118.895235,
32.028178
],
[
118.894384,
32.032069
],
[
118.892003,
32.034575
],
[
118.885522,
32.034631
],
[
118.883062,
32.035544
],
[
118.885012,
32.036735
],
[
118.885706,
32.039075
],
[
118.882035,
32.041
],
[
118.882474,
32.042578
],
[
118.878943,
32.041401
],
[
118.877634,
32.045555
],
[
118.879646,
32.046496
],
[
118.877766,
32.048919
],
[
118.87954,
32.049736
],
[
118.881587,
32.047881
],
[
118.887313,
32.05076
],
[
118.888262,
32.054747
],
[
118.888244,
32.058637
],
[
118.885969,
32.06099
],
[
118.88806,
32.060962
],
[
118.884915,
32.067108
],
[
118.882658,
32.067648
],
[
118.881499,
32.06935
],
[
118.875904,
32.072395
],
[
118.877002,
32.075343
],
[
118.880225,
32.072617
],
[
118.883879,
32.070762
],
[
118.881604,
32.074167
],
[
118.8851,
32.075523
],
[
118.884959,
32.078319
],
[
118.888051,
32.076644
],
[
118.888657,
32.074707
],
[
118.892961,
32.07461
],
[
118.894173,
32.077862
],
[
118.893066,
32.078554
],
[
118.897177,
32.081045
],
[
118.89766,
32.082457
],
[
118.900918,
32.082429
],
[
118.90834,
32.086512
],
[
118.907883,
32.088103
],
[
118.904054,
32.090663
],
[
118.900637,
32.095326
],
[
118.897124,
32.094565
],
[
118.891538,
32.098066
],
[
118.889834,
32.098315
],
[
118.887006,
32.101802
],
[
118.883589,
32.103642
],
[
118.878197,
32.103255
],
[
118.877547,
32.100847
],
[
118.874323,
32.09974
],
[
118.871741,
32.101013
],
[
118.868685,
32.099671
],
[
118.867437,
32.100709
],
[
118.863854,
32.100169
],
[
118.859963,
32.098343
],
[
118.858619,
32.096627
],
[
118.854316,
32.09772
],
[
118.849037,
32.096973
],
[
118.847851,
32.097554
],
[
118.84281,
32.09707
],
[
118.841765,
32.099035
],
[
118.844698,
32.098869
],
[
118.843029,
32.101885
],
[
118.834466,
32.093998
],
[
118.833491,
32.095063
],
[
118.840307,
32.101041
],
[
118.839569,
32.103296
],
[
118.842318,
32.105275
],
[
118.841677,
32.106036
],
[
118.834431,
32.104279
],
[
118.831392,
32.105275
],
[
118.826438,
32.104901
],
[
118.82628,
32.103601
],
[
118.819149,
32.10367
],
[
118.818033,
32.095672
],
[
118.811674,
32.095575
],
[
118.809127,
32.09617
],
[
118.806606,
32.098066
],
[
118.802461,
32.097042
],
[
118.799773,
32.095133
],
[
118.799115,
32.093237
],
[
118.796831,
32.091839
],
[
118.797788,
32.089113
],
[
118.793476,
32.088408
],
[
118.784096,
32.092268
],
[
118.784104,
32.041761
],
[
118.827167,
32.038729
],
[
118.826676,
32.034174
],
[
118.828292,
32.0338
],
[
118.830066,
32.039034
],
[
118.831655,
32.039809
],
[
118.838067,
32.040058
],
[
118.836934,
32.035752
],
[
118.839745,
32.034921
],
[
118.838076,
32.029757
],
[
118.843126,
32.028801
],
[
118.844171,
32.027804
],
[
118.844285,
32.022445
],
[
118.845981,
32.022043
],
[
118.846472,
32.020008
],
[
118.850275,
32.018845
],
[
118.853367,
32.020132
],
[
118.85327,
32.023636
],
[
118.857416,
32.021573
],
[
118.862536,
32.023567
],
[
118.864838,
32.021143
],
[
118.875105,
32.024204
],
[
118.876572,
32.021116
],
[
118.876273,
32.017446
],
[
118.880638,
32.014842
],
[
118.884959,
32.018914
],
[
118.895051,
32.022847
],
[
118.897299,
32.02599
]
]
]
]
}
},
]
}
GeojsonUtils.addGeojsonLayer(map, data, {
style: {
polygon: {
color: 'yellow',
weight: 5,
fillOpacity: 0.5,
fillColor: '#ff0000'
}
}
})
let newData = {
type: 'FeatureCollection',
features: data.features.map((item) => {
return { ...GeometryUtils.getCenter(item), properties: item.properties }
})
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.header { .header {
...@@ -379,7 +1056,6 @@ const toSelectDt = function (index) { ...@@ -379,7 +1056,6 @@ const toSelectDt = function (index) {
font-size: 18px; font-size: 18px;
} }
} }
} }
.main { .main {
...@@ -410,7 +1086,7 @@ const toSelectDt = function (index) { ...@@ -410,7 +1086,7 @@ const toSelectDt = function (index) {
// color: rgba(242, 119, 11); // color: rgba(242, 119, 11);
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
margin: 0 5px; margin: 0 5px;
} }
} }
...@@ -480,7 +1156,6 @@ const toSelectDt = function (index) { ...@@ -480,7 +1156,6 @@ const toSelectDt = function (index) {
color: #2c5f9e; color: #2c5f9e;
} }
} }
} }
} }
} }
...@@ -558,7 +1233,7 @@ const toSelectDt = function (index) { ...@@ -558,7 +1233,7 @@ const toSelectDt = function (index) {
line-height: 30px; line-height: 30px;
color: #333; color: #333;
&>div:first-child { & > div:first-child {
width: 34px; width: 34px;
height: 20px; height: 20px;
box-sizing: border-box; box-sizing: border-box;
...@@ -666,7 +1341,6 @@ const toSelectDt = function (index) { ...@@ -666,7 +1341,6 @@ const toSelectDt = function (index) {
} }
} }
} }
} }
.input-box { .input-box {
...@@ -710,13 +1384,11 @@ const toSelectDt = function (index) { ...@@ -710,13 +1384,11 @@ const toSelectDt = function (index) {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
padding: 2px 5px; padding: 2px 5px;
} }
&:hover { &:hover {
.detail-info { .detail-info {
background: #2c5f9e; background: #2c5f9e;
} }
.top-check { .top-check {
...@@ -747,7 +1419,6 @@ const toSelectDt = function (index) { ...@@ -747,7 +1419,6 @@ const toSelectDt = function (index) {
} }
:deep(.layui-form-checkbox)[lay-skin="primary"] { :deep(.layui-form-checkbox)[lay-skin="primary"] {
i { i {
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
...@@ -758,7 +1429,6 @@ const toSelectDt = function (index) { ...@@ -758,7 +1429,6 @@ const toSelectDt = function (index) {
border-color: #2c5f9e; border-color: #2c5f9e;
color: #fff; color: #fff;
} }
} }
:deep(.layui-form-checked)[lay-skin="primary"] { :deep(.layui-form-checked)[lay-skin="primary"] {
...@@ -773,7 +1443,6 @@ const toSelectDt = function (index) { ...@@ -773,7 +1443,6 @@ const toSelectDt = function (index) {
} }
} }
} }
} }
.cascaderClass { .cascaderClass {
...@@ -788,6 +1457,119 @@ const toSelectDt = function (index) { ...@@ -788,6 +1457,119 @@ const toSelectDt = function (index) {
.layui-cascader-selected { .layui-cascader-selected {
background: #2c5f9e; background: #2c5f9e;
} }
}
.draggable-panel {
width: 29vw;
// height: 10vh;
background: white;
position: absolute;
top: 10%;
left: 40%;
user-select: none;
padding: 10px;
.panel-title {
height: 30px;
line-height: 30px;
background: #dbdbdb;
padding-left: 10px;
color: #fff;
text-align: center;
cursor: move;
.fold-btn {
width: 36px;
height: 30px;
line-height: 30px;
text-align: center;
float: right;
&:hover i {
cursor: pointer;
font-weight: bold;
}
}
}
.panel-content {
margin-top: 10px;
padding: 5px;
input[type="text"] {
border: none;
outline: none;
padding: 8px;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
border-radius: 4px;
display: inline;
width: 80px;
margin: 0px 10px;
}
.row {
margin: 5px;
}
.buffer {
margin: 5px;
.slider {
display: inline;
margin: 0px 10px;
}
.layui-slider {
width: calc(80% - 20px);
.layui-slider-bar {
background: var(--global-normal-color) !important;
}
}
}
.bottomBtn {
margin: 10px;
.btn-right {
float: right;
}
}
.xyTable {
width: 90%;
.label {
margin-right: 20px;
}
}
.circle-button {
background-color: #007bff;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
overflow: hidden;
float: right;
margin-top: -30px;
margin-right: 100px;
}
.circle-button::after {
content: "+";
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
}
.tabs .tab {
padding: 10px;
display: inline;
width: 50px;
border: 1px solid #ccc;
cursor: pointer;
}
.tabs .tab.active {
background-color: #ccc;
}
.tab-content .content {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top-width: 0;
}
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论