|
|
[其他]
单个选中点击变换颜色只有第一次可以，其他点击不会变色
[复制链接]
本帖最后由 胖墩不胖 于 2022-8-23 22:01 编辑
代码及其现在效果
<template name='tpl'>
<view class="page">
<!--顶部-->
<hoc-nav-bar-od
style="font-family ingFang SC;font-weight:600;background-color:red;;color:#303133;font-size:18px;"
msg="安全隐患">
</hoc-nav-bar-od>
<scroll-view style="background-color:#f4f5f8">
<!--搜索框-->
<view style="margin-top:20px;height:40px;width: 92%;margin:0 auto;border-radius:4px;">
<input v-model="this.data.yhnr"
style="text-align:center;height:40px;margin:0 auto;width: 100%;border:1px solid #fff;background-color:#ffffff;border-radius:4px;font-familyingFang SC;color:#999999;font-size:14px;"
placeholder="搜索人名、地名" maxlength="10" @blur="dangerListByName" />
</view>
<!--饼状图-->
<view class="main">
<view class="horizontal" style="margin-top:3%;">
<view class="item red" style="margin-left:-5px;font-familyingFang SC;font-weight:500;color:#303133;font-size:14px;letter-spacing:20px;text-align:center;">
<img src="../../image/sum.png" style="width:40px;height:40px;margin:0 auto;"/>
<view style="margin-top:10px"><text >全部问题</text></view>
<view><text style="margin-top:10px;color:#227fff">{{sum1}}</text></view>
</view>
<view class="item green" style="margin-left:30px;font-familyingFang SC;font-weight:500;color:#303133;font-size:14px;letter-spacing:20px;text-align:center;">
<img src="../../image/success.png" style="width:40px;height:40px;margin:0 auto;"/>
<view style="margin-top:10px"><text>已排除隐患</text></view>
<view ><text style="margin-top:10px;color:#227fff">{{sum2}}</text></view>
</view>
<view class="item blue" style="margin-left:30px;font-familyingFang SC;font-weight:500;color:#303133;font-size:14px;letter-spacing:20px;text-align:center;">
<img src="../../image/wait.png" style="width:40px;height:40px;margin:0 auto;" />
<view style="margin-top:10px"><text>待处理隐患</text></view>
<view ><text style="margin-top:10px;color:#fc1d1d">{{sum3}}</text></view>
</view>
</view>
</view>
<view class="title">
<text>安全问题趋势</text>
</view>
<!--折线图-->
<view class="main1" style="margin-top: 16px;height:189px;">
<view class="horizontal">
<view id="lemon_echarts_main" style="min-width: 320px; width:100%; height:400px;border-radius:4px">
<img src="../../image/zxt.png" style="width:96%;" />
</view>
</view>
</view>
<!--切换页-->
<view class="main2" style="margin-top:32px;height:25px;">
<!-- tab切换页 -->
<view class="a-tabs">
<view v-for="(item, index) in hocTabSwitchEtTabList" :key="`tab-switch-et-${index}`"
class="a-tab-item" @click="tabClick(item, index)">
<text
:class="`a-tab-item-text ${current === index ? 'a-tab-item-text-active' : ''}`">{item.name}</text>
<text class="a-tab-item-line" v-if="current === index"></text>
</view>
</view>
</view>
<view class="main11" style="margin-top:16px;height:20px;">
<view class="horizontal1">
<text>A:{{typeflag1}} B:{{typeflag2}} C:{{typeflag3}} D:{{typeflag4}}</text>
<view class="item red" id="A" @click="typeClick(1)" >
<a-tag round v-if="typeflag1===1" type="danger"
style="width:56px;height:24px;border-radius: 18px;text-align:center;line-height:20px;">A类隐患
</a-tag>
<a-tag round v-if="typeflag1===0"
style="width:56px;height:24px;border-radius: 18px;text-align:center;line-height:20px;">A类隐患
</a-tag>
</view>
<view class="item green" id="B" @click="typeClick(2)">
<a-tag round v-if="typeflag2===0"
style="width:56px;height:24px;border-radius: 18px;text-align:center;line-height:20px;">B类隐患
</a-tag>
<a-tag round v-if="typeflag2===1"
style="background:yellow;width:56px;height:24px;border-radius: 18px;text-align:center;line-height:20px;">B类隐患
</a-tag>
</view>
<view class="item blue" id="C" @click="typeClick(3)">
<a-tag round v-if="typeflag3===0"
style="width:56px;height:24px;border-radius: 18px;text-align:center;line-height:20px;">C类隐患
</a-tag>
<a-tag round v-if="typeflag3===1"
style="background:blue;width:56px;height:24px;border-radius: 18px;text-align:center;line-height:20px;">C类隐患
</a-tag>
</view>
<view class="item blue" id="D" @click="typeClick(4)">
<a-tag round v-if="typeflag4===0"
style="width:56px;height:24px;border-radius: 18px;text-align:center;line-height:20px;">D类隐患
</a-tag>
<a-tag round v-if="typeflag4===1"
style="background:green;width:56px;height:24px;border-radius: 18px;text-align:center;line-height:20px;">D类隐患
</a-tag>
</view>
</view>
</view>
<!--列表信息-->
<view class="main3" style="margin-top:16px;">
<view class="b-order-card" v-for="item in dangerLists" @click="detail(item)" :key="item.id">
<view class="b-order-card__header">
<image class="icons" src="../../image/page1/3.png" />
<text class="b-order-card__header--title01">{{item.fxr}}</text>
<image class="icons" src="../../image/page1/4.png" />
<text class="b-order-card__header--title0">{{item.jcDate}}</text>
</view>
<view class="b-order-card__header--status" v-if="item.yhjb==='D级'"
style="position:absolute;top:12px;right:0px;background-image: url(../../image/2.jpg); background-repeat: no-repeat;">
<text style="font-size:14px;line-height:24px;color:white">D级</text>
</view>
<view class="b-order-card__header--status" v-if="item.yhjb==='C级'"
style="position:absolute;top:12px;right:0px;background-image: url(../../image/1.jpg); background-repeat: no-repeat;">
<text style="font-size:14px;line-height:24px;color:white">C级</text>
</view>
<view class="b-order-card__header--status" v-if="item.yhjb==='B级'"
style="position:absolute;top:12px;right:0px;background-image: url(../../image/4.jpg); background-repeat: no-repeat;">
<text style="font-size:14px;line-height:24px;color:white">B级</text>
</view>
<view class="b-order-card__header--status" v-if="item.yhjb==='A级'"
style="position:absolute;top:12px;right:0px;background-image: url(../../image/3.jpg); background-repeat: no-repeat;">
<text style="font-size:14px;line-height:24px;color:white">A级</text>
</view>
<view class="b-order-card__content">
<text class="b-order-card__header--title">隐患地点：</text>
<text class="b-order-card__header--title1">{{item.yhdd}}</text>
</view>
<view class="b-order-card__content" style="border-bottom: 1px solid #f1f1f1;">
<text class="b-order-card__header--title">隐患内容：</text>
<text class="b-order-card__header--title1">{{item.yhnr}}</text>
</view>
<view class="b-order-card__footer" style="padding-top: 16px;">
<a-tag round type="primary" v-if="item.status===1"
style="background-color:#f80d2a;border:1px solid #f80d2a;width:56px;height:24px;border-radius: 18px;text-align:center;line-height:24px;">未处理
</a-tag>
<a-tag round type="primary" v-if="item.status!=1"
style="background-color:#409eff;border:1px solid #f80d2a;width:56px;height:24px;border-radius: 18px;text-align:center;line-height:24px;">未处理
</a-tag>
<a-tag round type="primary" v-if="item.status===2"
style="background-color:#409eff;border:1px solid #409eff;width:56px;height:24px;border-radius: 18px;text-align:center;line-height:24px;">待验收
</a-tag>
<a-tag round type="primary" v-if="item.status===3"
style="background-color:#67c23a;border:1px solid #67c23a;width:56px;height:24px;border-radius: 18px;text-align:center;line-height:24px;">已完成
</a-tag>
<text v-if="item.status===1" style="padding-top:5px;margin-left:12px;font-size:12px">整改人：未添加
</text>
<text v-if="item.status===2"
style="padding-top:5px;margin-left:12px;font-size:12px">整改人：{{item.zrr}}
</text>
<text v-if="item.status===3"
style="padding-top:5px;margin-left:12px;font-size:12px">整改人：{{item.zrr}}
</text>
</view>
</view>
</view>
<view class="tab-bar">
<view class="tab-bar-item" v-for="item in tabBarList" @click="tabClick1(item)">
<img class="tab-bar-item-icon"
:src="this.data.curTab === item.value ? item.selectedIcon : item.icon" alt="tab-bar-icon" />
<text
:class="`tab-bar-item-text ${this.data.curTab === item.value ? 'tab-bar-item-text-active' : ''}`">{item.text}</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import '../../components/feature-component/hoc-nav-bar-od.stml';
import '../../components/feature-component/hoc-search-bar-od.stml';
import "../../components/feature-component/hoc-tab-switch-et.stml";
import "../../components/feature-component/hoc-order-list-et.stml";
import "../../components/feature-component/hoc-platform-deal-sgm.stml";
import "../../components/avm-ui/tag";
import "../../components/avm-ui/steps";
import "../../components/avm-ui/check-list";
import "../../components/feature-component/hoc-tab-bar-et.stml";
import "../../components/feature-component/hoc-tab-bar-sgm.stml";
import "../../components/feature-component/hoc-about-us-es.stml";
import "../../components/avm-ui/radio";
import "../../components/avm-ui/selector";
import "../../components/avm-ui/checkbox";
import ATag from "../../components/avm-ui/a-tag/a-tag.stml";
import AButton from "../../components/avm-ui/a-button/a-button.stml";
export default {
name: 'yinhuan1',
apiready() {
var that = this;
that.data.user = api.getGlobalData({
key: 'user'
});
that.data.userName = that.data.user.userName;
that.data.deptName = that.data.user.dept.deptName;
that.data.deptId = that.data.user.deptId;
that.data.roleName = that.data.user.roles[0].roleName;
that.data.falg = 1;
that.dangerList(1, 'A级');
that.dangerCounts();
},
data() {
return {
deptName: '',
type: 'A级',
flagg: '',
current: this.props.curTabIndex !== undefined ? this.props.curTabIndex : 0,
placeholder: "搜索人名、地点",
curTab: this.props.curTab !== undefined ? this.props.curTab : 'classify',
deptId: '',
falg:'',
roleName: '',
hocTabSwitchEtTabList: [{
name: "未处理隐患"
}, {
name: "已处理隐患"
}, {
name: "全部隐患"
}],
orderList: [],
tabBarList: [{
icon: "http://ae8b3ee28597856d3283.qiniucdn.apicloud**.**/apicloud/795d0acd5ae4309205c4b5ab275f9eed.png",
selectedIcon: "http://ae8b3ee28597856d3283.qiniucdn.apicloud**.**/apicloud/aee091cbfd832e4ba13ef3830aac9d82.png",
text: "首页",
value: "index"
}, {
icon: "http://ae8b3ee28597856d3283.qiniucdn.apicloud**.**/apicloud/0f8f4afc96a56175b932e93f6e9ec74f.png",
selectedIcon: "http://ae8b3ee28597856d3283.qiniucdn.apicloud**.**/apicloud/f2481f239dc27b487fe542ad539e8714.png",
text: "安全隐患",
value: "classify"
}, {
icon: "http://ae8b3ee28597856d3283.qiniucdn.apicloud**.**/apicloud/16f5e7e5fac80d18a6400462bc4d4736.png",
selectedIcon: "http://ae8b3ee28597856d3283.qiniucdn.apicloud**.**/apicloud/c1d45623b04620c901cef7045d3c3fb6.png",
text: "我的",
value: "my"
}],
avmSelectorDefaultValue: ["1"],
avmSelectorOptions: [{
label: "A级隐患",
value: "1"
}, {
label: "B级隐患",
value: "2"
/*disabled: true*/
}, {
label: "C级隐患",
value: "3"
}, {
label: "D级隐患",
value: "4"
}, {
label: "E级隐患",
value: "5"
}],
dangerCount: '李芬芬测试11',
sum1:'',
sum2:'',
sum3:'',
dangerLists: [],
typeflag1:1,
typeflag2:0,
typeflag3:0,
typeflag4:0
};
},
methods: {
tabClick1(item) {
this.data.curTab = item.value
this.fire('tabClick', item.value)
if (item.value == 'index') {
//首页
api.openWin({
name: 'home',
url: 'widget://pages/page1/home.stml'
});
}
if (item.value == 'classify') {
//安全隐患
api.openWin({
name: 'yinhuan1',
url: 'widget://pages/yinhuan/yinhuan1.stml'
});
}
if (item.value == 'my') {
//安全隐患
api.openWin({
name: 'yinhuan1',
url: 'widget://pages/page2/My.stml'
})
}
}
},
//信息列表页切换
tabClick(item, index) {
console.log("页面信息："+JSON.stringify(item));
this.data.current = index;
this.fire('tabClick', { data: item, curTabIndex: index })
if (item.name == '未处理隐患') {
//未处理隐患
this.data.falg = 1;
this.dangerList(this.data.falg, this.data.type);
} else if (item.name == '已处理隐患') {
//已处理隐患
this.data.falg = 2;
this.dangerList(this.data.falg, this.data.type);
} else if (item.name == '全部隐患') {
//全部隐患
this.data.falg = 0;
this.dangerList(this.data.falg, this.data.type);
}
},
//类型新信息替换
typeClick(item) {
console.log(item);
var that = this;
//A类
if (item == 1) {
this.dangerList(this.data.falg, 'A级');
that.data.type = 'A级';
console.log("A类切换");
that.data.typeflag1=1;
that.data.typeflag2=0;
that.data.typeflag3=0;
that.data.typeflag4=0;
}
//B类
if (item == 2) {
this.dangerList(this.data.falg, "B级");
console.log("B类切换");
that.data.type = 'B级';
that.data.typeflag1=0;
that.data.typeflag2=1;
that.data.typeflag3=0;
that.data.typeflag4=0;
}
//C类
if (item == 3) {
console.log("C类切换");
this.dangerList(this.data.falg, "C级");
that.data.type = 'C级';
that.data.typeflag1=0;
that.data.typeflag2=0;
that.data.typeflag3=1;
that.data.typeflag4=0;
}
//D类
if (item == 4) {
console.log("D类切换");
this.dangerList(this.data.falg, "D级");
that.data.type = 'D级';
that.data.typeflag1=0;
that.data.typeflag2=0;
that.data.typeflag3=0;
that.data.typeflag4=1;
}
}
};
</script>
<style>
.page {
background-color: #f4f5f8;
height: 100%;
}
scroll-view {
background-color: white;
}
.avm-selector_1 {
text-align: justify;
}
.main {
width: 93%;
margin: 0 auto;
border-radius: 4px;
background-color: white;
margin-top: 20px;
height: 126px;
}
.main11 {
width: 93%;
margin: 0 auto;
border-radius: 4px;
margin-left: 20px;
background-color: #f4f5f8;
}
.main1 {
width: 93%;
height: 100px;
margin: 0 auto;
border-radius: 4px;
background-color: white;
margin-top: 16px;
}
.main2 {
width: 93%;
height: 189px;
margin: 0 auto;
border-radius: 4px;
background-color: white;
margin-top: 34px;
}
.main3 {
width: 93%;
margin: 0 auto;
border-radius: 4px;
margin-top: 12px;
}
.horizontal {
flex-direction: row;
width: 360px;
height: 100px;
margin: 0 auto;
}
.horizontal1 {
flex-direction: row;
width: 360px;
height: 50px;
margin: 0 auto;
}
.item {
flex: 1;
}
.scroll-view input {
width: 400px;
}
.title {
width: 93%;
background-color: #f4f5f8;
height: 58px;
margin: 0 auto;
font-family: PingFang SC;
font-weight: 600;
color: #303133;
font-size: 18px;
padding-top: 32px;
}
.icons {
width: 12.13px;
height: 12.13px;
margin-right: 2.93px;
margin-top: 2px;
}
.b-order-list {
padding: 16px;
}
.b-order-card {
background: #fff;
box-shadow: 0 2px 6px #e2e0e0;
margin-bottom: 10px;
padding-bottom: 10px;
border-radius: 8px;
}
.b-order-card__header {
flex-flow: row nowrap;
padding: 20px 10px;
border-bottom: 1px solid #f1f1f1;
margin: 0 auto;
height: 54px;
width: 85%;
}
.b-order-card__footer {
flex-flow: row nowrap;
padding: 0px 10px;
margin: 0 auto;
height: 55px;
width: 85%;
}
.b-order-card__header--title {
font-family: PingFang SC;
font-weight: 600;
color: #606266;
font-size: 14px;
width: 140px;
height: 17px;
}
.b-order-card__header--title0 {
font-family: PingFang SC;
font-weight: 600;
color: #606266;
font-size: 12px;
width: 180px;
height: 17px;
line-height: 17px;
}
.b-order-card__header--title01 {
font-family: PingFang SC;
font-weight: 600;
color: #606266;
font-size: 12px;
width: 110px;
height: 17px;
}
.b-order-card__header--title1 {
width: 390px;
height: 20px;
font-weight: 600;
font-family: PingFang SC;
font-weight: 600;
color: #303133;
}
.b-order-card__header--status {
width: 56px;
height: 28px;
padding-left: 15px;
color: rgba(255, 255, 255, 1);
margin-left: 90px;
}
.b-order-card__content {
padding: 10px;
flex-flow: row nowrap;
width: 85%;
margin: 0 auto;
}
.b-order-card__content--order {
margin-bottom: 10px;
}
.b-order-card__content--li {
color: #999;
font-size: 14px;
}
.tab-bar {
width: 100%;
height: 54px;
flex-direction: row;
align-items: center;
background: #fff;
border-top: 0.5px solid #e8e8e8;
}
.tab-bar-item {
flex: 1;
align-items: center;
justify-content: center;
}
.tab-bar-item-icon {
width: 24px;
height: 24px;
margin-bottom: 6px;
}
.tab-bar-item-text {
color: #aaa;
font-size: 10px;
}
.tab-bar-item-text-active {
color: #339dff;
}
.a-tabs {
width: 100%;
justify-content: space-between;
align-items: center;
height: 44px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
background-color: #f4f5f8;
overflow: auto;
}
.a-tab-item {
flex: 1;
height: 100%;
padding: 0 12px;
justify-content: center;
align-items: center;
}
.a-tab-item-text {
font-family: PingFang SC;
color: #606266;
font-size: 16px;
white-space: nowrap;
text-overflow: ellipsis;
}
.a-tab-item-text-active {
font-family: PingFang SC;
font-weight: 600;
color: #303133;
font-size: 18px;
}
.a-tab-item-line {
position: absolute;
bottom: 0;
background: #f1c694;
width: 20px;
height: 2px;
}
</style>
点击第一次：
点击第二次：
点击第三次：
点击第四次：
点击后值已经发生变化，前面的背景色没变换成设定的颜色
|
|
显示全部楼层
QQ空间
新浪微博
微信扫一扫
