fix：大屏样式修改
This commit is contained in:
parent
26e6fd8584
commit
d2a445b36c
@ -2,7 +2,7 @@
|
|||||||
* @Author: SunTao 328867980@qq.com
|
* @Author: SunTao 328867980@qq.com
|
||||||
* @Date: 2024-10-17 11:34:00
|
* @Date: 2024-10-17 11:34:00
|
||||||
* @LastEditors: SunTao 328867980@qq.com
|
* @LastEditors: SunTao 328867980@qq.com
|
||||||
* @LastEditTime: 2024-11-14 17:26:53
|
* @LastEditTime: 2024-11-15 10:52:41
|
||||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||||
* @Description: 大屏首页
|
* @Description: 大屏首页
|
||||||
-->
|
-->
|
||||||
@ -110,11 +110,12 @@
|
|||||||
<!-- 图背景下选择框 -->
|
<!-- 图背景下选择框 -->
|
||||||
<div class="map-image-select">
|
<div class="map-image-select">
|
||||||
病害类型筛选：
|
病害类型筛选：
|
||||||
<el-select
|
<!-- <el-select
|
||||||
:popper-append-to-body="false"
|
:popper-append-to-body="false"
|
||||||
v-model="mapCareSelect"
|
v-model="mapCareSelect"
|
||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
@change="getMapCare"
|
@change="getMapCare"
|
||||||
|
clearable
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in dieaseTypeList"
|
v-for="item in dieaseTypeList"
|
||||||
@ -122,7 +123,15 @@
|
|||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value"
|
:value="item.value"
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select> -->
|
||||||
|
<el-cascader
|
||||||
|
v-model="mapCareSelect"
|
||||||
|
popper-class="screen-index-cascader"
|
||||||
|
:options="dieaseOptions"
|
||||||
|
:props="{ checkStrictly: true, emitPath: false }"
|
||||||
|
@change="getMapCare"
|
||||||
|
clearable
|
||||||
|
></el-cascader>
|
||||||
</div>
|
</div>
|
||||||
<div class="map-care">
|
<div class="map-care">
|
||||||
<div
|
<div
|
||||||
@ -360,6 +369,227 @@ export default {
|
|||||||
mapCareSelect: "",
|
mapCareSelect: "",
|
||||||
// 图片背景下病害类型下拉选择数据
|
// 图片背景下病害类型下拉选择数据
|
||||||
dieaseTypeList: [],
|
dieaseTypeList: [],
|
||||||
|
dieaseOptions: [
|
||||||
|
{
|
||||||
|
value: "zhinan",
|
||||||
|
label: "指南",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: "shejiyuanze",
|
||||||
|
label: "设计原则",
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "daohang",
|
||||||
|
label: "导航",
|
||||||
|
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "zujian",
|
||||||
|
label: "组件",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: "basic",
|
||||||
|
label: "Basic",
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "form",
|
||||||
|
label: "Form",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: "radio",
|
||||||
|
label: "Radio 单选框",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "checkbox",
|
||||||
|
label: "Checkbox 多选框",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "input",
|
||||||
|
label: "Input 输入框",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "input-number",
|
||||||
|
label: "InputNumber 计数器",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "select",
|
||||||
|
label: "Select 选择器",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "cascader",
|
||||||
|
label: "Cascader 级联选择器",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "switch",
|
||||||
|
label: "Switch 开关",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "slider",
|
||||||
|
label: "Slider 滑块",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "time-picker",
|
||||||
|
label: "TimePicker 时间选择器",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "date-picker",
|
||||||
|
label: "DatePicker 日期选择器",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "datetime-picker",
|
||||||
|
label: "DateTimePicker 日期时间选择器",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "upload",
|
||||||
|
label: "Upload 上传",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "rate",
|
||||||
|
label: "Rate 评分",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "form",
|
||||||
|
label: "Form 表单",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "data",
|
||||||
|
label: "Data",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: "table",
|
||||||
|
label: "Table 表格",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "tag",
|
||||||
|
label: "Tag 标签",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "progress",
|
||||||
|
label: "Progress 进度条",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "tree",
|
||||||
|
label: "Tree 树形控件",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "pagination",
|
||||||
|
label: "Pagination 分页",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "badge",
|
||||||
|
label: "Badge 标记",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "notice",
|
||||||
|
label: "Notice",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: "alert",
|
||||||
|
label: "Alert 警告",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "loading",
|
||||||
|
label: "Loading 加载",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "message",
|
||||||
|
label: "Message 消息提示",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "message-box",
|
||||||
|
label: "MessageBox 弹框",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "notification",
|
||||||
|
label: "Notification 通知",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "navigation",
|
||||||
|
label: "Navigation",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: "menu",
|
||||||
|
label: "NavMenu 导航菜单",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "tabs",
|
||||||
|
label: "Tabs 标签页",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "breadcrumb",
|
||||||
|
label: "Breadcrumb 面包屑",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "dropdown",
|
||||||
|
label: "Dropdown 下拉菜单",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "steps",
|
||||||
|
label: "Steps 步骤条",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "others",
|
||||||
|
label: "Others",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: "dialog",
|
||||||
|
label: "Dialog 对话框",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "tooltip",
|
||||||
|
label: "Tooltip 文字提示",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "popover",
|
||||||
|
label: "Popover 弹出框",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "card",
|
||||||
|
label: "Card 卡片",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "carousel",
|
||||||
|
label: "Carousel 走马灯",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "collapse",
|
||||||
|
label: "Collapse 折叠面板",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "ziyuan",
|
||||||
|
label: "资源",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: "axure",
|
||||||
|
label: "Axure Components",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "sketch",
|
||||||
|
label: "Sketch Templates",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "jiaohu",
|
||||||
|
label: "组件交互文档",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
// 路段下拉绑定
|
// 路段下拉绑定
|
||||||
roadList: [],
|
roadList: [],
|
||||||
// 地图打点-路段绑定
|
// 地图打点-路段绑定
|
||||||
@ -484,7 +714,8 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
/* 获取图片背景下坐标数据 */
|
/* 获取图片背景下坐标数据 */
|
||||||
getMapCare() {
|
getMapCare(value) {
|
||||||
|
console.log(value, "获取图片背景下坐标数据");
|
||||||
comppanyImg({ type: this.mapCareSelect }).then(({ code, data }) => {
|
comppanyImg({ type: this.mapCareSelect }).then(({ code, data }) => {
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
this.mapCareList = data;
|
this.mapCareList = data;
|
||||||
@ -882,7 +1113,7 @@ export default {
|
|||||||
// 地图右上角多选按钮隐藏
|
// 地图右上角多选按钮隐藏
|
||||||
this.showIconList = false;
|
this.showIconList = false;
|
||||||
// 图层恢复
|
// 图层恢复
|
||||||
this.mapZoom="";
|
this.mapZoom = "";
|
||||||
} else if (item.component === "RoadScreen") {
|
} else if (item.component === "RoadScreen") {
|
||||||
this.leftModuleList = [
|
this.leftModuleList = [
|
||||||
{
|
{
|
||||||
@ -1490,4 +1721,46 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 修改级联样式
|
||||||
|
::v-deep .el-cascader {
|
||||||
|
width: 8rem;
|
||||||
|
|
||||||
|
.el-input--medium .el-input__inner {
|
||||||
|
height: 1.5rem;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #89c5e8;
|
||||||
|
border-color: #6991cd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.screen-index-cascader {
|
||||||
|
background-color: #102649;
|
||||||
|
border-color: #08204f;
|
||||||
|
|
||||||
|
.el-cascader-node__label {
|
||||||
|
color: #aaabb8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-cascader-node:hover {
|
||||||
|
background-color: #2b4c7e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-cascader-node:active {
|
||||||
|
background-color: #2b4c7e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-cascader-node:focus {
|
||||||
|
background-color: #2b4c7e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[aria-hidden="true"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user