up
This commit is contained in:
BIN
src/assets/images/close1.png
Normal file
BIN
src/assets/images/close1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 596 B |
186
src/layout/components/KeepAlive/index.js
Normal file
186
src/layout/components/KeepAlive/index.js
Normal file
@ -0,0 +1,186 @@
|
||||
/**
|
||||
* 验证数据类型是否是正则
|
||||
* @param v
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function isRegExp(v) {
|
||||
return Object.prototype.toString.call(v) === '[object RegExp]'
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除数组中指定的项
|
||||
* @param arr
|
||||
* @param item
|
||||
* @returns {*|{}|number|Array|*[]|[]|T[]}
|
||||
*/
|
||||
export function remove(arr, item) {
|
||||
if (arr.length) {
|
||||
const index = arr.indexOf(item)
|
||||
if (index > -1) {
|
||||
return arr.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断数据是否定义了
|
||||
* @param v
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function isDef(v) {
|
||||
return v !== undefined && v !== null
|
||||
}
|
||||
|
||||
function isAsyncPlaceholder(node) {
|
||||
return node.isComment && node.asyncFactory
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取KeepAlive下的第一个子组件
|
||||
* @param children
|
||||
* @returns {*}
|
||||
*/
|
||||
function getFirstComponentChild(children) {
|
||||
if (Array.isArray(children)) {
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const c = children[i]
|
||||
if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) {
|
||||
return c
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 匹配缓存的页面组件
|
||||
* @param pattern
|
||||
* @param name
|
||||
* @returns {boolean|*}
|
||||
*/
|
||||
function matches(pattern, name) {
|
||||
if (Array.isArray(pattern)) {
|
||||
return pattern.indexOf(name) > -1
|
||||
} else if (typeof pattern === 'string') {
|
||||
return pattern.split(',').indexOf(name) > -1
|
||||
} else if (isRegExp(pattern)) {
|
||||
return pattern.test(name)
|
||||
}
|
||||
/* istanbul ignore next */
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* 原先对于没有设置组件name值的，设置为路由的name
|
||||
* 现在我们直接取fullPath为name
|
||||
* @param {*} opts
|
||||
*/
|
||||
function getComponentName(opts) {
|
||||
// return (opts && opts.Ctor.options.name) || this.$route.name
|
||||
return this.$route.fullPath
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除缓存
|
||||
* @param keepAliveInstance
|
||||
* @param filter
|
||||
*/
|
||||
function pruneCache(keepAliveInstance, filter) {
|
||||
const { cache, keys, _vnode } = keepAliveInstance
|
||||
Object.keys(cache).forEach(key => {
|
||||
const cachedNode = cache[key]
|
||||
if (cachedNode) {
|
||||
if (key && !filter(key)) {
|
||||
pruneCacheEntry(cache, key, keys, _vnode)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除缓存条目
|
||||
* @param cache
|
||||
* @param key
|
||||
* @param keys
|
||||
* @param current
|
||||
*/
|
||||
function pruneCacheEntry(cache, key, keys, current) {
|
||||
const cached = cache[key]
|
||||
if (cached && (!current || cached.tag !== current.tag)) {
|
||||
cached.componentInstance.$destroy()
|
||||
}
|
||||
cache[key] = null
|
||||
remove(keys, key)
|
||||
}
|
||||
|
||||
const patternTypes = [String, RegExp, Array]
|
||||
|
||||
export default {
|
||||
name: 'KeepAlive',
|
||||
// abstract: true,
|
||||
props: {
|
||||
include: patternTypes,
|
||||
exclude: patternTypes,
|
||||
max: [String, Number]
|
||||
},
|
||||
|
||||
created() {
|
||||
// Object.create(null)创建一个非常干净且高度可定制的对象
|
||||
// 新创建的对象除了自身属性外，原型链上没有任何属性，也就是说没有继承Object的任何东西
|
||||
this.cache = Object.create(null)
|
||||
this.keys = []
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$watch('include', val => {
|
||||
pruneCache(this, name => matches(val, name))
|
||||
})
|
||||
this.$watch('exclude', val => {
|
||||
pruneCache(this, name => !matches(val, name))
|
||||
})
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
Object.keys(this.cache).forEach(key => {
|
||||
pruneCacheEntry(this.cache, key, this.keys)
|
||||
})
|
||||
},
|
||||
|
||||
render() {
|
||||
const slot = this.$slots.default
|
||||
const vnode = getFirstComponentChild(slot)
|
||||
const componentOptions = vnode && vnode.componentOptions
|
||||
if (componentOptions) {
|
||||
// 获取组件的名称，此处修改后取fullPath作为name
|
||||
const key = getComponentName.call(this, componentOptions)
|
||||
|
||||
const { include, exclude } = this
|
||||
// 没有缓存的直接返回vnode
|
||||
if (
|
||||
// not included
|
||||
(include && (!key || !matches(include, key))) ||
|
||||
// excluded
|
||||
(exclude && key && matches(exclude, key))
|
||||
) {
|
||||
return vnode
|
||||
}
|
||||
|
||||
const { cache, keys } = this
|
||||
if (cache[key]) {
|
||||
// 取缓存中的实例作为vnode的实例
|
||||
vnode.componentInstance = cache[key].componentInstance
|
||||
// 将当前缓存的key设置为最新的，便于后面缓存的数量超了以后删除最老的
|
||||
remove(keys, key)
|
||||
keys.push(key)
|
||||
} else {
|
||||
cache[key] = vnode
|
||||
keys.push(key)
|
||||
// 移除最老的缓存
|
||||
if (this.max && keys.length > parseInt(this.max)) {
|
||||
pruneCacheEntry(cache, keys[0], keys, this._vnode)
|
||||
}
|
||||
}
|
||||
vnode.data.keepAlive = true
|
||||
}
|
||||
return vnode || (slot && slot[0])
|
||||
}
|
||||
}
|
||||
@ -105,7 +105,35 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftFoldDiv" @click="leftFoldClick()">
|
||||
<el-icon><ArrowRightBold /></el-icon>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
:show-arrow="false"
|
||||
:disabled="leftWraFlag"
|
||||
hide-after="0"
|
||||
show-after="200"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="!leftWraFlag"
|
||||
:show-arrow="false"
|
||||
class="box-item"
|
||||
show-after="200"
|
||||
hide-after="0"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="leftWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightWra">
|
||||
@ -163,7 +191,35 @@
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
<el-tooltip
|
||||
:disabled="!rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="rightWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="!rightWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -840,6 +896,17 @@ function villageClick(layers, xy, level, cartographic) {
|
||||
promise.then(data => {
|
||||
if (data.length > 0) {
|
||||
let newData = data['0'];
|
||||
console.log(newData);
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
newData.data.bbox[0],
|
||||
newData.data.bbox[1],
|
||||
newData.data.bbox[2],
|
||||
newData.data.bbox[3]
|
||||
),
|
||||
duration: 2,
|
||||
});
|
||||
|
||||
if (newData.properties && newData.properties.XZQDM) {
|
||||
if (XZQDM !== newData.properties.XZQDM) {
|
||||
//防止
|
||||
@ -1144,11 +1211,11 @@ const selectTab = () => {
|
||||
};
|
||||
areatext = '8383894';
|
||||
typesofdata = {
|
||||
小麦: { value: 12364, percent: '20%' },
|
||||
花生: { value: 12364, percent: '20%' },
|
||||
大豆: { value: 12364, percent: '20%' },
|
||||
地瓜: { value: 12364, percent: '20%' },
|
||||
花生: { value: 12364, percent: '20%' },
|
||||
小麦: { value: 30111, percent: '20%' },
|
||||
花生: { value: 52590, percent: '20%' },
|
||||
大豆: { value: 1767, percent: '20%' },
|
||||
地瓜: { value: 797, percent: '20%' },
|
||||
花生: { value: 1820, percent: '20%' },
|
||||
};
|
||||
Pie3D = reactive({
|
||||
arr: [
|
||||
@ -2309,6 +2376,7 @@ function back() {
|
||||
duration: 2,
|
||||
});
|
||||
flag.value = false;
|
||||
hiddenOverlayChart();
|
||||
}
|
||||
// 图表点击事件
|
||||
function ChartClick(item) {
|
||||
@ -3025,7 +3093,6 @@ function hiddenOverlayChart() {
|
||||
|
||||
deleteEntityByName('villageLine');
|
||||
deleteEntityByName('townLine');
|
||||
|
||||
const pop = document.getElementById('pop');
|
||||
pop.style.display = 'none'; // 清除监听事件
|
||||
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
@ -3035,7 +3102,9 @@ function hiddenOverlayChart() {
|
||||
duration: 2,
|
||||
});
|
||||
removeWms(['gbznt'], true);
|
||||
// addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||||
if (flag.value) {
|
||||
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||||
}
|
||||
flag.value = false;
|
||||
}
|
||||
//显示弹窗
|
||||
@ -3062,7 +3131,9 @@ $height: calc(100vh - 100px);
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.imgrotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
@ -3124,7 +3195,7 @@ $height: calc(100vh - 100px);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: -12%;
|
||||
right: -14%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 30px;
|
||||
|
||||
@ -5,7 +5,13 @@
|
||||
<div class="leftTop">
|
||||
<div class="title">
|
||||
<span>作物分类面积统计</span>
|
||||
<p>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -18,7 +24,13 @@
|
||||
<div class="leftbottom">
|
||||
<div class="title">
|
||||
<span>作物类型统计</span>
|
||||
<p>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -29,14 +41,50 @@
|
||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||
</div>
|
||||
<div class="leftFoldDiv" @click="leftFoldClick()">
|
||||
<el-icon><ArrowRightBold /></el-icon>
|
||||
<el-tooltip
|
||||
:disabled="leftWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<!-- <el-icon v-if="!leftWraFlag"><ArrowRightBold /></el-icon> -->
|
||||
<img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="!leftWraFlag"
|
||||
:show-arrow="false"
|
||||
hide-after="0"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<!-- <el-icon v-if="leftWraFlag"><ArrowLeftBold /></el-icon> -->
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="leftWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightWra">
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<span>作物类型统计-高标准农田</span>
|
||||
<p>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -50,7 +98,13 @@
|
||||
<div class="rightbottom">
|
||||
<div class="title">
|
||||
<span>作物类型统计-行政区划</span>
|
||||
<p>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
@ -75,7 +129,35 @@
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
<el-tooltip
|
||||
:disabled="!rightWraFlag"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="收起"
|
||||
placement="top"
|
||||
>
|
||||
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
:disabled="rightWraFlag"
|
||||
hide-after="0"
|
||||
:show-arrow="false"
|
||||
show-after="200"
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="展开"
|
||||
placement="top"
|
||||
>
|
||||
<img
|
||||
class="imgrotate"
|
||||
v-if="!rightWraFlag"
|
||||
src="@/assets/images/close1.png"
|
||||
alt=""
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<el-collapse class="legend" accordion>
|
||||
@ -209,6 +291,19 @@ const clickInfoMap = ref({ info: [] });
|
||||
const flag = ref(false);
|
||||
let leftWraFlag = ref(true);
|
||||
let rightWraFlag = ref(true);
|
||||
//下载
|
||||
/*---------------------------*/
|
||||
const Deta = item => {
|
||||
downloadURL(item);
|
||||
};
|
||||
const downloadURL = url => {
|
||||
let link = document.createElement('a');
|
||||
link.style.display = 'none';
|
||||
link.href = url;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
let dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
@ -2161,7 +2256,10 @@ $height: calc(100vh - 100px);
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.imgrotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
@ -2223,7 +2321,7 @@ $height: calc(100vh - 100px);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: -12%;
|
||||
right: -14%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 30px;
|
||||
@ -2429,7 +2527,7 @@ $height: calc(100vh - 100px);
|
||||
.bottom_center {
|
||||
position: absolute;
|
||||
// left: calc(400px + 20px + 8vw);
|
||||
left: 0;
|
||||
left: -2%;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: calc(100% - (400px * 2) - (10vw * 2));
|
||||
|
||||
@ -67,21 +67,17 @@
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<span>墒情、土质监测数据</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||
<div ref="Phdiv" class="Phdiv"></div>
|
||||
|
||||
<div class="depth">
|
||||
<p class="SelectedDiv">0cm</p>
|
||||
<p>-10cm</p>
|
||||
<p>-20cm</p>
|
||||
<p>-30cm</p>
|
||||
</div>
|
||||
<div ref="soilDiv" class="soilDiv"></div>
|
||||
</div>
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
@ -89,7 +85,44 @@
|
||||
</div>
|
||||
|
||||
<div class="bottom_center">
|
||||
<TimeLine />
|
||||
<div class="left_bottom">
|
||||
<div class="title">
|
||||
<span>设备照片</span>
|
||||
</div>
|
||||
<div class="imgdiv">
|
||||
<img
|
||||
width="100%"
|
||||
src="https://img.js.design/assets/img/641d73a7cece21d6b61bedf9.png#d27dd8c8c5369101dca2dcf160e5bba9"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_bottom">
|
||||
<div class="title">
|
||||
<span>作物长势等级面积占比</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
历史数据
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="tableDiv">
|
||||
<el-table max-height="200px" :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column prop="date" label="设备编号" />
|
||||
<el-table-column prop="name" label="监测时间" />
|
||||
<el-table-column prop="address" label="预警情况" />
|
||||
<el-table-column prop="address" label="照片" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool">
|
||||
<span><img src="@/assets/images/LAYER.png" alt="" /></span>
|
||||
@ -132,6 +165,8 @@ import { download } from '@/utils/request';
|
||||
|
||||
let viewer = ref(null);
|
||||
const farmlandDiv = ref(null);
|
||||
const Phdiv = ref(null);
|
||||
const soilDiv = ref(null);
|
||||
const ProgressBarDiv = ref(null);
|
||||
const value = ref('370211');
|
||||
const leftProgressBarDiv = ref(null);
|
||||
@ -143,89 +178,6 @@ const formLandRef = ref([]);
|
||||
const flag = ref(false);
|
||||
let leftWraFlag = ref(true);
|
||||
let rightWraFlag = ref(true);
|
||||
let ff = ref('{x:765,y:191}');
|
||||
let Pie3D = reactive({
|
||||
arr: [
|
||||
{
|
||||
name: '小麦',
|
||||
value: 101,
|
||||
itemStyle: {
|
||||
opacity: 0.5,
|
||||
color: 'rgba(110, 209, 84, 0.9)',
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '花生',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(251, 201, 3, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '大豆',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(240, 129, 31, 0.9)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '地瓜',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(27, 85, 222, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '蓝莓',
|
||||
value: 56,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(72, 102, 211, 0.9)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '茶叶',
|
||||
value: 56,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
// 扇形颜色
|
||||
color: 'rgba(26, 255, 140, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
watch(
|
||||
() => Township.arr,
|
||||
val => {
|
||||
@ -277,12 +229,6 @@ let tableData = [
|
||||
address: '19%',
|
||||
},
|
||||
];
|
||||
let TypeTime = {
|
||||
大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
|
||||
小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
|
||||
地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
|
||||
花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
|
||||
};
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
@ -293,8 +239,9 @@ onMounted(() => {
|
||||
//地图
|
||||
initMap();
|
||||
farmland();
|
||||
// ProgressBar();
|
||||
getFarmland();
|
||||
Ph();
|
||||
soil();
|
||||
});
|
||||
|
||||
/*-------------地图------------------------*/
|
||||
@ -911,7 +858,6 @@ const getaArea = () => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
//下载
|
||||
/*---------------------------*/
|
||||
const Deta = item => {
|
||||
@ -931,114 +877,131 @@ const downloadURL = url => {
|
||||
function farmland() {
|
||||
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||||
var option = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '15%',
|
||||
right: '2%',
|
||||
bottom: '14%',
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
data: ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'transparent', //底部边框颜色
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '17%',
|
||||
right: '2%',
|
||||
bottom: '14%',
|
||||
},
|
||||
axisLabel: {
|
||||
legend: {
|
||||
data: ['EC值'],
|
||||
inactiveColor: 'rgba(92,200,255,0.35)',
|
||||
icon: 'roundRect',
|
||||
top: 0,
|
||||
right: 0,
|
||||
itemWidth: 20,
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
color: '#fff', //底部文字颜色
|
||||
fontSize: 12,
|
||||
color: '#FFF',
|
||||
},
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)', //网格线的颜色
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
data: ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'transparent', //左边框颜色
|
||||
color: 'transparent', //底部边框颜色
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
textStyle: {
|
||||
color: '#ADD6FF', //左文字颜色
|
||||
color: '#fff', //底部文字颜色
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '毕业学员',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
// color: '#00FFE3',//渐变1
|
||||
color: 'rgba(43, 224, 152, 1)', //渐变1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
// color: '#4693EC',//渐变2
|
||||
color: 'rgba(185, 250, 224, 1)', //渐变2
|
||||
},
|
||||
]),
|
||||
yAxis: [
|
||||
{
|
||||
name: 'EC值(mS/cm) ',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 14,
|
||||
},
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)', //网格线的颜色
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'transparent', //左边框颜色
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
textStyle: {
|
||||
color: '#ADD6FF', //左文字颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// fontSize: 14,
|
||||
// color: '#fff', //柱状顶部文字颜色
|
||||
// formatter: function (params) {
|
||||
// return '20%';
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(2, 31, 26, 0.85)', //数据的间隔颜色
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'EC值',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
// color: '#00FFE3',//渐变1
|
||||
color: 'rgba(43, 224, 152, 1)', //渐变1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
// color: '#4693EC',//渐变2
|
||||
color: 'rgba(185, 250, 224, 1)', //渐变2
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// fontSize: 14,
|
||||
// color: '#fff', //柱状顶部文字颜色
|
||||
// formatter: function (params) {
|
||||
// return '20%';
|
||||
// },
|
||||
// },
|
||||
},
|
||||
symbolRepeat: 'fixed',
|
||||
symbolMargin: 3,
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 4],
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, 0],
|
||||
data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
|
||||
z: 1,
|
||||
zlevel: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(2, 31, 26, 0.85)', //数据的间隔颜色
|
||||
},
|
||||
},
|
||||
symbolRepeat: 'fixed',
|
||||
symbolMargin: 3,
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 4],
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, 0],
|
||||
data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
|
||||
z: 1,
|
||||
zlevel: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
farmlandDivIntance.on('click', function (params) {
|
||||
console.log(params.name);
|
||||
@ -1047,74 +1010,295 @@ function farmland() {
|
||||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
}
|
||||
function ProgressBar() {
|
||||
const ProgressBarDivIntance = echarts.init(ProgressBarDiv.value);
|
||||
var option = {
|
||||
// backgroundColor: '#031d33',
|
||||
function Ph() {
|
||||
const PhDivIntance = echarts.init(Phdiv.value);
|
||||
let dataC1 = [20, 30, 60, 40, 50, 30];
|
||||
let dataC2 = [20, 30, 60, 40, 50, 30];
|
||||
let dataC3 = [20, 30, 60, 40, 50, 30];
|
||||
let xData = [
|
||||
'2023/03/0814:52:00',
|
||||
'2023/03/0814:52:00',
|
||||
'2023/03/0814:52:00',
|
||||
'2023/03/0814:52:00',
|
||||
];
|
||||
|
||||
var fontColor = '#30eee9';
|
||||
let option = {
|
||||
backgroundColor: 'transparent',
|
||||
grid: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
left: '15%',
|
||||
right: '2%',
|
||||
top: '15%',
|
||||
bottom: '17%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
lineStyle: {
|
||||
color: '#57617B',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0],
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
},
|
||||
},
|
||||
offset: 12,
|
||||
axisTick: {
|
||||
show: false,
|
||||
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#dddddd',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
interval: 0, //使x轴文字显示全
|
||||
textStyle: {
|
||||
color: 'rgba(219, 225, 255, 1)',
|
||||
},
|
||||
formatter: function (params) {
|
||||
var newParamsName = '';
|
||||
var paramsNameNumber = params.length;
|
||||
var provideNumber = 10; //一行显示几个字
|
||||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
||||
if (paramsNameNumber > provideNumber) {
|
||||
for (var p = 0; p < rowNumber; p++) {
|
||||
var tempStr = '';
|
||||
var start = p * provideNumber;
|
||||
var end = start + provideNumber;
|
||||
if (p == rowNumber - 1) {
|
||||
tempStr = params.substring(start, paramsNameNumber);
|
||||
} else {
|
||||
tempStr = params.substring(start, end) + '\n';
|
||||
}
|
||||
newParamsName += tempStr;
|
||||
}
|
||||
} else {
|
||||
newParamsName = params;
|
||||
}
|
||||
return newParamsName;
|
||||
},
|
||||
},
|
||||
|
||||
data: xData,
|
||||
},
|
||||
yAxis: [
|
||||
yAxis: {
|
||||
name: 'PH值(ph)',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#dddddd',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)', //网格线的颜色
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
},
|
||||
boundaryGap: ['20%', '20%'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
showSymbol: false,
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaStyle: {
|
||||
//color: '#94C9EC'
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0.4,
|
||||
color: 'rgba(163, 198, 255, 0.4)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(163, 198, 255, 0.01)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
markPoint: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
},
|
||||
data: dataC1,
|
||||
},
|
||||
],
|
||||
};
|
||||
useEcharts(PhDivIntance, option);
|
||||
}
|
||||
function soil() {
|
||||
const soilDivIntance = echarts.init(soilDiv.value);
|
||||
var time = ['06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00'];
|
||||
var sportData = [688, 108, 2288, 188, 929, 3108, 1008];
|
||||
var sportTime = [1140, 2135, 125, 140, 1130, 138, 120];
|
||||
let option = {
|
||||
// backgroundColor: '#2C313E',
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
top: 7,
|
||||
left: 'center',
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
itemGap: 30,
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '5%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [''],
|
||||
axisLine: { show: false },
|
||||
axisTick: [
|
||||
{
|
||||
show: false,
|
||||
data: time,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
},
|
||||
],
|
||||
},
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
//坐标轴刻度相关设置。
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: 'PH值(ph)',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#dddddd',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)', //左侧数标
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ccc',
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '土壤湿度(%RH)',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#dddddd',
|
||||
},
|
||||
},
|
||||
position: 'right',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)', //右侧数标
|
||||
},
|
||||
formatter: '{value}',
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '金额',
|
||||
type: 'bar',
|
||||
zlevel: 1,
|
||||
name: '土壤温度',
|
||||
type: 'line',
|
||||
data: sportTime,
|
||||
symbolSize: 1,
|
||||
// symbol: 'circle',
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
barBorderRadius: 30,
|
||||
color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(7,99,84,0.95) ',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(71,179,161,0.95)',
|
||||
},
|
||||
]),
|
||||
color: 'rgba(252, 186, 211, 1)',
|
||||
},
|
||||
},
|
||||
barWidth: 20,
|
||||
data: [10],
|
||||
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(252, 186, 211, 1)',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '背景',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barGap: '-100%',
|
||||
data: [20],
|
||||
name: '土壤湿度',
|
||||
type: 'line',
|
||||
data: sportData,
|
||||
symbolSize: 1,
|
||||
yAxisIndex: 1,
|
||||
// symbol: 'circle',
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: 'rgba(255, 255, 255, 0.2)',
|
||||
barBorderRadius: 50,
|
||||
color: 'rgba(168, 216, 234, 1)',
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(168, 216, 234, 1)',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// option && ProgressBarDivIntance.setOption(option);
|
||||
useEcharts(ProgressBarDivIntance, option);
|
||||
useEcharts(soilDivIntance, option);
|
||||
}
|
||||
|
||||
// 添加wms
|
||||
function addWms(layers, customName) {
|
||||
let map = new Cesium.WebMapServiceImageryProvider({
|
||||
@ -1512,7 +1696,7 @@ $height: calc(100vh - 100px);
|
||||
--el-table-tr-bg-color: none;
|
||||
--el-table-border-color: none;
|
||||
::v-deep .el-table__body tr.el-table__row--striped td {
|
||||
background: rgba(38, 255, 255, 0.01)
|
||||
background: rgba(38, 255, 255, 0.01);
|
||||
}
|
||||
// ::v-deep .el-table__row {
|
||||
// background: linear-gradient(
|
||||
@ -1581,7 +1765,7 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -1590,11 +1774,58 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.farmlandDiv {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
height: 30%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.Phdiv {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 30%;
|
||||
justify-content: center;
|
||||
}
|
||||
.depth {
|
||||
width: 244px;
|
||||
height: 26px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin-top: 20px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 0.1) 0%,
|
||||
rgba(47, 214, 214, 0.1) 100%
|
||||
);
|
||||
|
||||
border: 1px solid rgba(23, 194, 180, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
p {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.SelectedDiv {
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
.soilDiv {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 30%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ProgressBar {
|
||||
width: 100%;
|
||||
@ -1678,15 +1909,71 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.bottom_center {
|
||||
position: absolute;
|
||||
left: calc(400px + 12vw);
|
||||
width: calc(100% - (400px * 2) - (10vw * 2));
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
width: calc(100% - 50% - (1vw * 2));
|
||||
min-width: 380px;
|
||||
bottom: 5%;
|
||||
height: 75px;
|
||||
height: 30%;
|
||||
opacity: 1;
|
||||
border-radius: 5px;
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
display: flex;
|
||||
div {
|
||||
flex: 1;
|
||||
}
|
||||
.el-table {
|
||||
--el-table-tr-bg-color: none;
|
||||
--el-table-border-color: none;
|
||||
::v-deep .el-table__body tr.el-table__row--striped td {
|
||||
background: rgba(38, 255, 255, 0.01);
|
||||
}
|
||||
// ::v-deep .el-table__row {
|
||||
// background: linear-gradient(
|
||||
// 90deg,
|
||||
// rgba(38, 255, 255, 0.15) 0%,
|
||||
// rgba(38, 255, 255, 0.01) 100%
|
||||
// );
|
||||
// }
|
||||
|
||||
::v-deep .el-table__body tr:hover > td {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(38, 255, 255, 0.15) 0%,
|
||||
rgba(38, 255, 255, 0.01) 100%
|
||||
) !important;
|
||||
}
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ones) {
|
||||
width: 100%;
|
||||
height: 171;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
--el-table-tr-bg-color: null;
|
||||
--el-table-border-color: null;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.imgdiv {
|
||||
width: 100%;
|
||||
height: 248px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool {
|
||||
|
||||
Reference in New Issue
Block a user