fanzhen 1121
This commit is contained in:
fanzhen123
125
src/components/addCollect/AddCollect.vue
Normal file
125
src/components/addCollect/AddCollect.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="addCollect">
|
||||
<div class="contanier">
|
||||
<div class="top">
|
||||
<span>添加收藏</span>
|
||||
<img :src="imgUrl" alt @click="$store.state.addCollectState=false" />
|
||||
</div>
|
||||
<div class="center">
|
||||
<input type="text" placeholder="请输入名称" v-model="nameCollect" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div>保存</div>
|
||||
<div @click="$store.state.addCollectState=false">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'addCollect',
|
||||
data () {
|
||||
return {
|
||||
imgUrl: require('../../../static/nav/deleteImg.png'),
|
||||
nameCollect: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.addCollect {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > .contanier {
|
||||
width: 37.5rem;
|
||||
height: 24.6875rem;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > .top {
|
||||
margin-top: 1rem;
|
||||
width: 32.8125rem;
|
||||
height: 3.875rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 0.125rem solid #bdbdbd;
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
& > img {
|
||||
width: 1.3125rem;
|
||||
height: 1.3125rem;
|
||||
}
|
||||
& > img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .center {
|
||||
width: 32.8125rem;
|
||||
& > input {
|
||||
width: 100%;
|
||||
height: 3.4375rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
}
|
||||
& > .bottom {
|
||||
width: 32.8125rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
& > div:nth-child(1) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
border: solid 0.125rem #dbdbdb;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div {
|
||||
margin: 3rem 1.2rem;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="chartsCont">
|
||||
<div class="chartsCont" v-if="transBefore.tableExplain!==''">
|
||||
<Echarts
|
||||
v-if="indStatic!==0"
|
||||
:echartsDatarts="echartsDatarts"
|
||||
@@ -265,39 +265,48 @@ export default {
|
||||
nowDataTJ: { text: '无', stateType: 'line' },
|
||||
// 转置前总数据
|
||||
transBefore: {
|
||||
// 数据表说明
|
||||
tableExplain: '注： 按照统计制度要求，我国CPI每五年进行一次基期轮换，2016年1月开始使用2015年作为新一轮的对比基期，前三轮基期分别为2000年、2005年和2010年。CPI基期轮换是一项国际惯例，目的是使CPI调查所涉及到的商品和服务更具有代表性，更及时准确反映居民消费结构的新变化和物价的实际变动。 参考联合国制定的《按目的划分的个人消费分类》（COICOP）和国家统计局发布的《居民消费支出分类（2013）》，我们对CPI调查目录进行了调整，新基期调查目录和规格品与国际标准更为接近，一些新产品新服务纳入其中，能进一步反映居民消费和经济结构的变化。与上一轮基期相比，本轮基期的CPI调查目录有几个主要变化。一是按照《居民消费支出分类（2013）》，原来的“食品”、“烟酒”合并为现在的“食品烟酒”；原来的“医疗保健和个人用品”被拆分到现在的“生活用品及服务”、“医疗保健”和“其他用品和服务”中；原来的“娱乐教育文化用品及服务”被拆分到现在的“教育文化和娱乐”和“其他用品和服务”中；原来的“家庭设备用品及维修服务”被拆分到现在的“生活用品及服务”和“其他用品及服务”中。二是食品的指标内涵发生了变化，旧分类中的“食品”为大类，包括粮食、肉禽、鲜菜、鲜果、水产品、茶及饮料、在外餐饮等分类；新“食品”为“食品烟酒”大类下的中类，仅包括粮食、畜肉、禽肉、鲜菜、鲜果、水产品等，不再包括“茶及饮料”和“在外餐饮”两项。三是新增了“园艺花卉及用品”、“宠物及用品”、“养老服务”和“金融服务”等居民支出增加较快的分类，能够更加及时准确反映居民消费结构的新变化。',
|
||||
// 时间（2019年10月30日）
|
||||
timeArr: ['2019年10月23日', '2019年10月24日', '2019年10月25日', '2019年10月26日', '2019年10月27日', '2019年10月28日', '2019年10月29日', '2019年10月30日'],
|
||||
// 指标名称
|
||||
termsName: ['价格指数', '工业', '能源', '固定资产投资', '服务业生产指数', '城镇调查失业率', '房地产', '国内贸易'],
|
||||
// 指标解释
|
||||
termsExplain: ['价格指数指标解释', '工业指标解释', '能源指标解释', '固定资产投资指标解释', '服务业生产指数指标解释', '城镇调查失业率指标解释', '房地产指标解释', '国内贸易指标解释'],
|
||||
// 地区名
|
||||
areaName: ['北京市', '临沂市', '上海市', '河北省', '兰陵县', '天津市', '兰山区', '荣盛锦绣外滩'],
|
||||
// (行：指标名称，列：指标、时间)===>第一列为指标 { 指标名称数据 }
|
||||
transBeforeTermsData: [
|
||||
['10210.23', '10152.23', '12556.23', '23689.23', '25698.01', '54565.26', '48915.32', '15862.32'],
|
||||
['10520.23', '10212.23', '12526.23', '23689.23', '25658.01', '54665.26', '57915.32', '71762.32'],
|
||||
['10530.23', '10242.23', '12565.23', '23389.23', '25698.01', '46365.26', '59145.32', '16233.32'],
|
||||
['10320.23', '10252.23', '15650.23', '23089.23', '25498.01', '53065.26', '55845.32', '45633.32'],
|
||||
['13230.23', '10622.23', '89785.23', '23889.23', '25498.01', '78965.26', '46845.32', '36733.32'],
|
||||
['14520.23', '45622.23', '89455.23', '45739.23', '49898.01', '53965.26', '49845.32', '16733.32'],
|
||||
['14540.23', '44562.23', '89945.23', '45576.23', '56898.01', '46965.26', '59845.32', '54563.32'],
|
||||
['14210.23', '44562.23', '48994.23', '43476.23', '25698.01', '79696.26', '44565.32', '65563.32']
|
||||
],
|
||||
// (行：地区名，列：地区、时间)===>第一列为地区{ 地区名称数据 }
|
||||
transBeforeAreaData: [
|
||||
['23210.23', '10562.23', '12456.23', '23696.23', '69598.01', '54543.26', '57157.32', '15352.32'],
|
||||
['10350.23', '10612.23', '12786.23', '26589.23', '56698.01', '56934.26', '56915.32', '45962.32'],
|
||||
['10450.23', '10542.23', '12665.23', '29639.23', '21259.01', '54495.26', '25945.32', '55483.32'],
|
||||
['13692.23', '10262.23', '12625.23', '22628.23', '25298.01', '52625.26', '52245.32', '26233.32'],
|
||||
['13690.23', '26222.23', '89762.23', '23889.23', '25428.01', '56265.26', '57445.32', '56233.32'],
|
||||
['13690.23', '45622.23', '89225.23', '45629.23', '25298.01', '32965.26', '57845.32', '14533.32'],
|
||||
['13650.23', '46222.23', '32445.23', '45576.23', '21528.01', '45265.26', '56245.32', '14263.32'],
|
||||
['14230.23', '42622.23', '48262.23', '43426.23', '21268.01', '78626.26', '56265.32', '16263.32']
|
||||
]
|
||||
tableExplain: '',
|
||||
timeArr: [],
|
||||
termsName: [],
|
||||
termsExplain: [],
|
||||
areaName: [],
|
||||
transBeforeTermsData: [],
|
||||
transBeforeAreaData: []
|
||||
},
|
||||
// transBefore: {
|
||||
// // 数据表说明
|
||||
// tableExplain: '注： 按照统计制度要求，我国CPI每五年进行一次基期轮换，2016年1月开始使用2015年作为新一轮的对比基期，前三轮基期分别为2000年、2005年和2010年。CPI基期轮换是一项国际惯例，目的是使CPI调查所涉及到的商品和服务更具有代表性，更及时准确反映居民消费结构的新变化和物价的实际变动。 参考联合国制定的《按目的划分的个人消费分类》（COICOP）和国家统计局发布的《居民消费支出分类（2013）》，我们对CPI调查目录进行了调整，新基期调查目录和规格品与国际标准更为接近，一些新产品新服务纳入其中，能进一步反映居民消费和经济结构的变化。与上一轮基期相比，本轮基期的CPI调查目录有几个主要变化。一是按照《居民消费支出分类（2013）》，原来的“食品”、“烟酒”合并为现在的“食品烟酒”；原来的“医疗保健和个人用品”被拆分到现在的“生活用品及服务”、“医疗保健”和“其他用品和服务”中；原来的“娱乐教育文化用品及服务”被拆分到现在的“教育文化和娱乐”和“其他用品和服务”中；原来的“家庭设备用品及维修服务”被拆分到现在的“生活用品及服务”和“其他用品及服务”中。二是食品的指标内涵发生了变化，旧分类中的“食品”为大类，包括粮食、肉禽、鲜菜、鲜果、水产品、茶及饮料、在外餐饮等分类；新“食品”为“食品烟酒”大类下的中类，仅包括粮食、畜肉、禽肉、鲜菜、鲜果、水产品等，不再包括“茶及饮料”和“在外餐饮”两项。三是新增了“园艺花卉及用品”、“宠物及用品”、“养老服务”和“金融服务”等居民支出增加较快的分类，能够更加及时准确反映居民消费结构的新变化。',
|
||||
// // 时间（2019年10月30日）
|
||||
// timeArr: ['2019年10月23日', '2019年10月24日', '2019年10月25日', '2019年10月26日', '2019年10月27日', '2019年10月28日', '2019年10月29日', '2019年10月30日'],
|
||||
// // 指标名称
|
||||
// termsName: ['价格指数', '工业', '能源', '固定资产投资', '服务业生产指数', '城镇调查失业率', '房地产', '国内贸易'],
|
||||
// // 指标解释
|
||||
// termsExplain: ['价格指数指标解释', '工业指标解释', '能源指标解释', '固定资产投资指标解释', '服务业生产指数指标解释', '城镇调查失业率指标解释', '房地产指标解释', '国内贸易指标解释'],
|
||||
// // 地区名
|
||||
// areaName: ['北京市', '临沂市', '上海市', '河北省', '兰陵县', '天津市', '兰山区', '荣盛锦绣外滩'],
|
||||
// // (行：指标名称，列：指标、时间)===>第一列为指标 { 指标名称数据 }
|
||||
// transBeforeTermsData: [
|
||||
// ['10210.23', '10152.23', '12556.23', '23689.23', '25698.01', '54565.26', '48915.32', '15862.32'],
|
||||
// ['10520.23', '10212.23', '12526.23', '23689.23', '25658.01', '54665.26', '57915.32', '71762.32'],
|
||||
// ['10530.23', '10242.23', '12565.23', '23389.23', '25698.01', '46365.26', '59145.32', '16233.32'],
|
||||
// ['10320.23', '10252.23', '15650.23', '23089.23', '25498.01', '53065.26', '55845.32', '45633.32'],
|
||||
// ['13230.23', '10622.23', '89785.23', '23889.23', '25498.01', '78965.26', '46845.32', '36733.32'],
|
||||
// ['14520.23', '45622.23', '89455.23', '45739.23', '49898.01', '53965.26', '49845.32', '16733.32'],
|
||||
// ['14540.23', '44562.23', '89945.23', '45576.23', '56898.01', '46965.26', '59845.32', '54563.32'],
|
||||
// ['14210.23', '44562.23', '48994.23', '43476.23', '25698.01', '79696.26', '44565.32', '65563.32']
|
||||
// ],
|
||||
// // (行：地区名，列：地区、时间)===>第一列为地区{ 地区名称数据 }
|
||||
// transBeforeAreaData: [
|
||||
// ['23210.23', '10562.23', '12456.23', '23696.23', '69598.01', '54543.26', '57157.32', '15352.32'],
|
||||
// ['10350.23', '10612.23', '12786.23', '26589.23', '56698.01', '56934.26', '56915.32', '45962.32'],
|
||||
// ['10450.23', '10542.23', '12665.23', '29639.23', '21259.01', '54495.26', '25945.32', '55483.32'],
|
||||
// ['13692.23', '10262.23', '12625.23', '22628.23', '25298.01', '52625.26', '52245.32', '26233.32'],
|
||||
// ['13690.23', '26222.23', '89762.23', '23889.23', '25428.01', '56265.26', '57445.32', '56233.32'],
|
||||
// ['13690.23', '45622.23', '89225.23', '45629.23', '25298.01', '32965.26', '57845.32', '14533.32'],
|
||||
// ['13650.23', '46222.23', '32445.23', '45576.23', '21528.01', '45265.26', '56245.32', '14263.32'],
|
||||
// ['14230.23', '42622.23', '48262.23', '43426.23', '21268.01', '78626.26', '56265.32', '16263.32']
|
||||
// ]
|
||||
// },
|
||||
// 调用存储的对象
|
||||
objCompBefore: null,
|
||||
// echarts渲染的数据======>非饼图
|
||||
@@ -315,7 +324,12 @@ export default {
|
||||
pieStatic: false,
|
||||
// 获取数据所用参数
|
||||
// 晒选状态 1筛选指标 2筛选地区
|
||||
selectState: 1
|
||||
selectState: 1,
|
||||
// 下来帅选的数据
|
||||
downLaSelect: {
|
||||
area: '',
|
||||
label: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -329,6 +343,11 @@ export default {
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
transBefore (newval, oldval) {
|
||||
if (newval) {
|
||||
this.showTable()
|
||||
}
|
||||
},
|
||||
indStatic (newValue, oldValue) {
|
||||
console.log(newValue, 'newValue1212')
|
||||
this.chartsShow()
|
||||
@@ -348,7 +367,10 @@ export default {
|
||||
this.dataTJComput()
|
||||
// 重新渲染表
|
||||
this.$nextTick(() => {
|
||||
this.$refs.table.doLayout()
|
||||
console.log(this.$refs.table, 'this.$refs.table')
|
||||
if (this.$refs.table !== undefined) {
|
||||
this.$refs.table.doLayout()
|
||||
}
|
||||
})
|
||||
},
|
||||
immediate: true,
|
||||
@@ -414,6 +436,8 @@ export default {
|
||||
indexExplain (labIndexName) {
|
||||
if (this.transBefore.termsName.indexOf(labIndexName) !== -1) {
|
||||
console.log('指标解释：', this.transBefore.termsExplain[this.transBefore.termsName.indexOf(labIndexName)])
|
||||
this.$store.state.labelExplainData = this.transBefore.termsExplain[this.transBefore.termsName.indexOf(labIndexName)]
|
||||
this.$store.state.labelExplainState = true
|
||||
}
|
||||
},
|
||||
// 统计数据对行，对列处理
|
||||
@@ -615,21 +639,32 @@ export default {
|
||||
// 获取后台数据表中的数据
|
||||
getDatas () {
|
||||
console.log(this.defaultDataRight, '获取数据')
|
||||
// 初始化计算数据
|
||||
this.$axios({
|
||||
method: 'GET',
|
||||
url: 'data/data/detail',
|
||||
params: {
|
||||
type: this.$route.query.type === 'area' ? 1 : 2, // 1非地区 2地区
|
||||
type: this.$route.query.type === 'area' ? 2 : 1, // 1非地区 2地区
|
||||
table_name: this.defaultDataRight.table_name, // 表名
|
||||
id: this.defaultDataRight.id, // 分类id
|
||||
area: '', // 选中的地区
|
||||
quota: this.defaultDataRight.name, // 选中的指标
|
||||
area: this.downLaSelect.area, // 选中的地区
|
||||
quota: this.downLaSelect.label, // 选中的指标
|
||||
cate: this.selectState// 1帅选指标 2筛选地区
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res, '获取数据展示数据')
|
||||
// 请求接口完成 请求成功
|
||||
if (res.data.code === 200) {
|
||||
// if (res.data.data.areaName.length !== 0) {
|
||||
// this.transBefore = {}
|
||||
// this.transBefore.tableExplain = res.data.data.tableExplain
|
||||
// this.transBefore.timeArr = res.data.data.timeArr
|
||||
// this.transBefore.termsName = res.data.data.termsName
|
||||
// this.transBefore.termsExplain = res.data.data.termsExplain
|
||||
// this.transBefore.areaName = res.data.data.areaName
|
||||
// this.transBefore.transBeforeTermsData = res.data.data.transBeforeTermsData
|
||||
// this.transBefore.transBeforeAreaData = res.data.data.transBeforeAreaData
|
||||
// }
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail, 2369)
|
||||
@@ -670,12 +705,14 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getDatas()
|
||||
},
|
||||
mounted () {
|
||||
// console.log(new ComputedData())
|
||||
this.showTable()
|
||||
// this.showTable()
|
||||
// 转置状态
|
||||
this.transState = this.chartsStatusMegger.transState
|
||||
this.getDatas()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -140,13 +140,15 @@ export default {
|
||||
},
|
||||
// 被选中时触发
|
||||
choiceCallerArea (resu) {
|
||||
console.log(resu)
|
||||
console.log(resu, '5+656565')
|
||||
console.log(this.cityDefaultName)
|
||||
},
|
||||
// 被选中时触发
|
||||
choiceCallerTime (resu) {
|
||||
console.log(resu)
|
||||
console.log(resu, '66666')
|
||||
console.log(this.cityDefaultName)
|
||||
// 将值传给父组件
|
||||
this.$emit('comTime', resu[2].name)
|
||||
this.showInputStu = !this.showInputStu
|
||||
},
|
||||
changesInputStu () {
|
||||
|
||||
265
src/components/dimension/Dimension.vue
Normal file
265
src/components/dimension/Dimension.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div class="dimension">
|
||||
<div class="container">
|
||||
<div class="top">
|
||||
<span>维度转换</span>
|
||||
<img :src="imgUrl" alt @click="$store.state.dimensionState = false" />
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="row">
|
||||
<div></div>
|
||||
<div class="row_main">
|
||||
<div :class="{active:rowVal==='指标'}" @click="changeTabel('指标','row')">指标</div>
|
||||
<div :class="{active:rowVal==='地区'}" @click="changeTabel('地区','row')">地区</div>
|
||||
<div :class="{active:rowVal==='时间'}" @click="changeTabel('时间','row')">时间</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row_main">
|
||||
<div :class="{active:colVal==='指标'}" @click="changeTabel('指标','col')">指标</div>
|
||||
<div :class="{active:colVal==='地区'}" @click="changeTabel('地区','col')">地区</div>
|
||||
<div :class="{active:colVal==='时间'}" @click="changeTabel('时间','col')">时间</div>
|
||||
</div>
|
||||
<div class="tabel">
|
||||
<div>
|
||||
<div>{{rowVal}}</div>
|
||||
<div>{{colVal}}</div>
|
||||
<div>{{colVal}}</div>
|
||||
<div>{{colVal}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{rowVal}}</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{rowVal}}</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{rowVal}}</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div>确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'dimension',
|
||||
data () {
|
||||
return {
|
||||
imgUrl: require('../../../static/nav/deleteImg.png'),
|
||||
rowVal: '指标',
|
||||
colVal: '时间'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTabel (stateSD, strd) {
|
||||
if (strd === 'row') {
|
||||
this.rowVal = stateSD
|
||||
} else if (strd === 'col') {
|
||||
this.colVal = stateSD
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dimension {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > .container {
|
||||
width: 64.375rem;
|
||||
height: 33rem;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .top {
|
||||
margin-top: 1rem;
|
||||
width: 59.375rem;
|
||||
height: 3.875rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 0.125rem solid #bdbdbd;
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
& > img {
|
||||
width: 1.3125rem;
|
||||
height: 1.3125rem;
|
||||
}
|
||||
& > img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .main {
|
||||
margin-top: 2.6rem;
|
||||
width: 59.375rem;
|
||||
& > .row {
|
||||
width: 59.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > div:nth-child(1) {
|
||||
width: 5.25rem;
|
||||
height: 3.125rem;
|
||||
}
|
||||
& > .row_main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > div {
|
||||
width: 5.25rem;
|
||||
height: 3.125rem;
|
||||
background-color: #a8daf1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
border-radius: 0.1875rem 0 0 0.1875rem;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
border-radius: 0 0.1875rem 0.1875rem 0;
|
||||
}
|
||||
& > .active {
|
||||
background-color: #52b6e3;
|
||||
}
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .col {
|
||||
width: 59.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
& > .row_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > div {
|
||||
width: 5.25rem;
|
||||
height: 3.125rem;
|
||||
background-color: #a8daf1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
border-radius: 0.1875rem 0 0 0.1875rem;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
border-radius: 0 0.1875rem 0.1875rem 0;
|
||||
}
|
||||
& > .active {
|
||||
background-color: #52b6e3;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .tabel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
& > div {
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > div {
|
||||
height: 2.5rem;
|
||||
width: 13.265rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .bottom {
|
||||
width: 59.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
& > div:nth-child(1) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
border: solid 0.125rem #dbdbdb;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div {
|
||||
margin: 3rem 1.2rem;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
201
src/components/editCom/EditCom.vue
Normal file
201
src/components/editCom/EditCom.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="editCom">
|
||||
<div class="container">
|
||||
<div class="top">
|
||||
<span>编辑</span>
|
||||
<img :src="imgUrl" alt @click="$store.state.editWindowState=false" />
|
||||
</div>
|
||||
<div class="titles">
|
||||
<div>
|
||||
<input type="radio" value="hang" v-model="radioSelect" />行
|
||||
<input type="radio" value="lie" v-model="radioSelect" />列
|
||||
</div>
|
||||
<div>
|
||||
<span>全选</span>
|
||||
<span>|</span>
|
||||
<span>反选</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contanin">
|
||||
<div v-for="(item,index) in datalist" :key="index">
|
||||
<input type="checkbox" v-model="item.state" />
|
||||
{{item.text}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 确定取消 -->
|
||||
<div class="bottom">
|
||||
<div>确定</div>
|
||||
<div @click="$store.state.editWindowState=false">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'editCom',
|
||||
data () {
|
||||
return {
|
||||
imgUrl: require('../../../static/nav/deleteImg.png'),
|
||||
radioSelect: 'hang',
|
||||
datalist: [
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false },
|
||||
{ text: '接收到符合', state: false }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.editCom {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > .container {
|
||||
width: 43.3125rem;
|
||||
height: 44.125rem;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .top {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 38.375rem;
|
||||
height: 3.875rem;
|
||||
border-bottom: 0.125rem solid #bdbdbd;
|
||||
& > span {
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > img {
|
||||
width: 1.3125rem;
|
||||
height: 1.3125rem;
|
||||
}
|
||||
& > img:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .titles {
|
||||
margin: 1rem 0;
|
||||
width: 38.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:nth-child(1) {
|
||||
& > input {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
& > input:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
& > span {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
& > span:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .contanin {
|
||||
padding: 0.5rem;
|
||||
width: 37.375rem;
|
||||
height: 27rem;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
overflow: auto;
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
& > .bottom {
|
||||
width: 38.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
& > div:nth-child(1) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
border: solid 0.125rem #dbdbdb;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div {
|
||||
margin: 3rem 1.2rem;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
309
src/components/insertLabel/InsertLabel.vue
Normal file
309
src/components/insertLabel/InsertLabel.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<div class="insertLabel">
|
||||
<div class="container">
|
||||
<div class="top">
|
||||
<span>新增指标</span>
|
||||
<img :src="imgUrl" alt @click="closeX" />
|
||||
</div>
|
||||
<!-- 行列转换 -->
|
||||
<div class="rowCol">
|
||||
<input type="radio" name="rowCols" value="hang" v-model="radioValue" />行
|
||||
<input type="radio" name="rowCols" value="lie" v-model="radioValue" />列
|
||||
</div>
|
||||
<!-- 运算框 -->
|
||||
<div class="computkuang">
|
||||
<div class="left">
|
||||
<input type="text" placeholder="请输入新增指标名称" v-model="insertName" />
|
||||
<div class="label">
|
||||
<div
|
||||
v-for="(item,index) in labelData"
|
||||
:key="index"
|
||||
:class="{bgcolor:item.state}"
|
||||
@click="bgclick(index)"
|
||||
>{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div>=</div>
|
||||
<div>></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<textarea v-model="fontComput"></textarea>
|
||||
<div class="computer">
|
||||
<div v-for="(item,index) in computers" :key="index">{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 提示 -->
|
||||
<div class="explains">说明：指标只能从上表中显示</div>
|
||||
<!-- 确认取消 -->
|
||||
<div class="bnottom">
|
||||
<div>确认</div>
|
||||
<div @click="closeX">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'insertLabel',
|
||||
data () {
|
||||
return {
|
||||
imgUrl: require('../../../static/nav/deleteImg.png'),
|
||||
radioValue: 'hang',
|
||||
fontComput: '',
|
||||
insertName: '',
|
||||
labelData: [
|
||||
{ text: '健康的说法更健康', state: false },
|
||||
{ text: '健康的说jksdfhjjk', state: false },
|
||||
{ text: '健聚划算df覅㐇', state: false },
|
||||
{ text: '健聚dfgs划算覅㐇', state: false },
|
||||
{ text: '健聚jdskfasdfhn 划算覅㐇', state: false },
|
||||
{ text: '健聚sdg划asd算覅㐇', state: false },
|
||||
{ text: '健聚dsfg划f算覅㐇', state: false },
|
||||
{ text: '健聚划sdasdffasf算覅㐇', state: false },
|
||||
{ text: '健聚划sdasdff算覅㐇', state: false },
|
||||
{ text: '健聚划sdf算覅s㐇', state: false },
|
||||
{ text: '健聚划sdafsdf算ssd覅㐇', state: false },
|
||||
{ text: '健聚划sasdfdf算覅㐇', state: false },
|
||||
{ text: '健聚划ssadfdf算覅㐇', state: false },
|
||||
{ text: '健聚划sdf算覅㐇', state: false },
|
||||
{ text: '健聚划ssdafgfdf算s覅㐇', state: false },
|
||||
{ text: '健聚划sdaasfdf算s覅㐇', state: false },
|
||||
{ text: '健聚划sdasfdfa算覅㐇', state: false }
|
||||
],
|
||||
computers: [
|
||||
{ text: '*', state: false },
|
||||
{ text: '-', state: false },
|
||||
{ text: '7', state: false },
|
||||
{ text: '8', state: false },
|
||||
{ text: '9', state: false },
|
||||
{ text: '/', state: false },
|
||||
{ text: '+', state: false },
|
||||
{ text: '4', state: false },
|
||||
{ text: '5', state: false },
|
||||
{ text: '6', state: false },
|
||||
{ text: '(', state: false },
|
||||
{ text: ')', state: false },
|
||||
{ text: '1', state: false },
|
||||
{ text: '2', state: false },
|
||||
{ text: '3', state: false },
|
||||
{ text: '.', state: false },
|
||||
{ text: '0', state: false }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bgclick (ind) {
|
||||
this.labelData.forEach((item, index) => {
|
||||
index === ind ? item.state = true : item.state = false
|
||||
})
|
||||
},
|
||||
closeX () {
|
||||
this.$store.state.insertWindowState = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.insertLabel {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > .container {
|
||||
width: 51.25rem;
|
||||
height: 51.25rem;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .top {
|
||||
margin-top: 1.875rem;
|
||||
width: 46.25rem;
|
||||
height: 3.875rem;
|
||||
border-bottom: 0.125rem solid #bdbdbd;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > span {
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > img {
|
||||
width: 1.3125rem;
|
||||
height: 1.3125rem;
|
||||
}
|
||||
& > img:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .rowCol {
|
||||
margin: 1.25rem 0;
|
||||
width: 46.25rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > input {
|
||||
margin: 0 0.4rem;
|
||||
}
|
||||
}
|
||||
& > .computkuang {
|
||||
width: 46.25rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .left {
|
||||
width: 16rem;
|
||||
& > input {
|
||||
width: 16rem;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.0625rem;
|
||||
}
|
||||
& > .label {
|
||||
margin: 0.75rem 0;
|
||||
width: 16.16rem;
|
||||
height: 30rem;
|
||||
border: 0.0625rem solid #bdbbdb;
|
||||
overflow: auto;
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 2.125rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.0625rem;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > .bgcolor {
|
||||
background-color: #25aff3;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .center {
|
||||
margin: 0 1rem;
|
||||
width: 5rem;
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
& > div {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
background-color: #25aff3;
|
||||
color: #fff;
|
||||
}
|
||||
& > div:nth-child(2):hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .right {
|
||||
width: 25rem;
|
||||
height: 32.875rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > textarea {
|
||||
width: 24rem;
|
||||
height: 16rem;
|
||||
}
|
||||
& > .computer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
border: 1px solid #bdbdbd;
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0.75rem 0.82rem;
|
||||
width: 3rem;
|
||||
height: 1.8rem;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
background: url("../../../static/data/bt_counter.jpg") repeat-x;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .explains {
|
||||
width: 46.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
& > .bnottom {
|
||||
width: 46.25rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > div:nth-child(1) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
border-radius: 0.3125rem;
|
||||
border: solid 0.125rem #dbdbdb;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
}
|
||||
& > div {
|
||||
margin:1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
154
src/components/labelExplain/LabelExplain.vue
Normal file
154
src/components/labelExplain/LabelExplain.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="editCom">
|
||||
<div class="container">
|
||||
<div class="top">
|
||||
<span>指标解释</span>
|
||||
<img :src="imgUrl" alt @click="$store.state.labelExplainState=false" />
|
||||
</div>
|
||||
<div class="contanin">{{$store.state.labelExplainData}}</div>
|
||||
<!-- 确定取消 -->
|
||||
<div class="bottom">
|
||||
<div>复制到粘贴板</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'editCom',
|
||||
data () {
|
||||
return {
|
||||
imgUrl: require('../../../static/nav/deleteImg.png')
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.editCom {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > .container {
|
||||
width: 43.3125rem;
|
||||
height: 44.125rem;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .top {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 38.375rem;
|
||||
height: 3.875rem;
|
||||
border-bottom: 0.125rem solid #bdbdbd;
|
||||
& > span {
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > img {
|
||||
width: 1.3125rem;
|
||||
height: 1.3125rem;
|
||||
}
|
||||
& > img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .titles {
|
||||
margin: 1rem 0;
|
||||
width: 38.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:nth-child(1) {
|
||||
& > input {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
& > input:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
& > span {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
& > span:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .contanin {
|
||||
margin-top: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: 37.375rem;
|
||||
height: 27rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 2rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
overflow: auto;
|
||||
}
|
||||
& > .bottom {
|
||||
width: 38.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
& > div:nth-child(1) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
border: solid 0.125rem #dbdbdb;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div {
|
||||
margin: 3rem 1.2rem;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="mapData">
|
||||
<div class="mapDataLeft">
|
||||
<!-- 左侧导航 -->
|
||||
<el-row class="tac" style="overflow: auto;height:44.875rem;" v-if="defaultSelectLies">
|
||||
<el-row class="tac" style="overflow: auto;height:54.875rem;" v-if="defaultSelectLies">
|
||||
<el-col :span="24">
|
||||
<el-menu
|
||||
:default-openeds="defaultSelectLies"
|
||||
@@ -48,11 +48,37 @@
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="mapDataRight">
|
||||
<div class="maptopSty">
|
||||
<!-- 年 -->
|
||||
<div class="yearD">
|
||||
<cityPicker
|
||||
:level="jishuTime"
|
||||
:selectpattern="selectpatternTime"
|
||||
:city-data="cityDataTime"
|
||||
:default-city="cityDefaultNameTime"
|
||||
@choice-caller="choiceCallerTime"
|
||||
@visible-change="changesInputStu"
|
||||
></cityPicker>
|
||||
</div>
|
||||
<!-- 月 --> <!-- 季 -->
|
||||
<div class="monthD">
|
||||
<cityPicker
|
||||
:level="jishuTime"
|
||||
:selectpattern="selectMonth"
|
||||
:city-data="monthDatas"
|
||||
:default-city="monthData"
|
||||
@choice-caller="monthDataState"
|
||||
@visible-change="monthDataChange"
|
||||
></cityPicker>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="mapRefs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入下拉组件
|
||||
import cityPicker from '@/components/cityPicker/CityPicker.vue'
|
||||
// 引入数据计算js用于机选渲染的数据
|
||||
import ComputedData from '../../assets/js/computeddata'
|
||||
import china from 'echarts/map/json/china.json'
|
||||
@@ -62,8 +88,13 @@ echarts.registerMap('china', china)
|
||||
require('echarts/theme/shine')
|
||||
export default {
|
||||
name: 'mapData',
|
||||
components: {
|
||||
cityPicker: cityPicker
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 控制下拉框显示隐藏
|
||||
isHideProp: true,
|
||||
// 左侧当前默认
|
||||
defaultSelectLies: null,
|
||||
// 右侧默认显示数据
|
||||
@@ -159,7 +190,41 @@ export default {
|
||||
}
|
||||
]
|
||||
},
|
||||
myEchartsObj: null// 图表渲染对象
|
||||
myEchartsObj: null, // 图表渲染对象
|
||||
// 栏目级数
|
||||
jishuTime: 1,
|
||||
// 默认显示栏目
|
||||
cityDefaultNameTime: '2019年',
|
||||
// 筛选数据
|
||||
selectpatternTime: [
|
||||
{
|
||||
field: 'userProvinceId',
|
||||
placeholder: '2019年'
|
||||
}
|
||||
],
|
||||
// 栏目数据 结构不可变
|
||||
cityDataTime: [
|
||||
{ 'id': '110000', 'name': '1985年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '1986年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '1987年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '2019年', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
|
||||
],
|
||||
// 默认选中月
|
||||
monthData: '1月',
|
||||
// 筛选数据月
|
||||
selectMonth: [
|
||||
{
|
||||
field: 'userProvinceId',
|
||||
placeholder: '1月'
|
||||
}
|
||||
],
|
||||
// 月 结构不可变
|
||||
monthDatas: [
|
||||
{ 'id': '110000', 'name': '1月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '2月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '3月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
|
||||
{ 'id': '110000', 'name': '4月', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -246,6 +311,21 @@ export default {
|
||||
// 绘制图表
|
||||
this.myEchartsObj.setOption(this.option, true)
|
||||
this.myEchartsObj.resize()
|
||||
},
|
||||
// 被选中时触发
|
||||
choiceCallerTime (resu) {
|
||||
console.log(resu)
|
||||
console.log(this.cityDefaultName)
|
||||
},
|
||||
changesInputStu () {
|
||||
console.log(12569)
|
||||
},
|
||||
monthDataState (resu) {
|
||||
console.log(resu)
|
||||
console.log(this.cityDefaultName)
|
||||
},
|
||||
monthDataChange () {
|
||||
console.log(12569)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@@ -278,9 +358,23 @@ export default {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
|
||||
border: 1px solid red;
|
||||
&>div{
|
||||
width:100%;
|
||||
min-height: 44.5rem;
|
||||
& > div:nth-child(2) {
|
||||
width: 100%;
|
||||
min-height: 50.875rem;
|
||||
}
|
||||
& > .maptopSty {
|
||||
width: 100%;
|
||||
height:4rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .yearD {
|
||||
margin:0 2rem;
|
||||
}
|
||||
& > .monthD {
|
||||
margin:0 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<img :src="imageUrl.userpwds" alt />
|
||||
<input type="text" placeholder="请输入密码" v-model="userpwd" />
|
||||
<input type="password" placeholder="请输入密码" v-model="userpwd" />
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" placeholder="请输入验证码" v-model="useryzm" />
|
||||
@@ -184,7 +184,12 @@ export default {
|
||||
localStorage.setItem('token', 'Bearer ' + res.data.data.token)
|
||||
// 登录状态
|
||||
localStorage.setItem('userLogin', true)
|
||||
this.$router.go(0)
|
||||
console.log(this.$route, '000111')
|
||||
if (this.$route.path === '/') {
|
||||
this.$router.go(0)
|
||||
} else {
|
||||
this.$router.push({ path: '/' })
|
||||
}
|
||||
}
|
||||
}).catch((fail) => {
|
||||
console.log(fail)
|
||||
@@ -278,7 +283,7 @@ export default {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.28);
|
||||
|
||||
340
src/components/screenCom/ScreenCom.vue
Normal file
340
src/components/screenCom/ScreenCom.vue
Normal file
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div class="screenCom">
|
||||
<div class="container">
|
||||
<div class="top">
|
||||
<span>筛选</span>
|
||||
<img :src="imgUrl" alt @click="$store.state.selcettWindowState = false" />
|
||||
</div>
|
||||
<!-- 行列转换 -->
|
||||
<div class="rowCol">
|
||||
<input type="radio" value="hang" v-model="selectAudio" />行
|
||||
<input type="radio" value="lie" v-model="selectAudio" />列
|
||||
</div>
|
||||
<!-- 主要筛选框 -->
|
||||
<div class="mainKuang">
|
||||
<div class="left">
|
||||
<div
|
||||
v-for="(item,index) in dataList"
|
||||
:key="index"
|
||||
:class="{active:item.state}"
|
||||
@click="changeBgcolor(index)"
|
||||
>{{item.text}}</div>
|
||||
</div>
|
||||
<div class="center1">
|
||||
<div>
|
||||
<div>
|
||||
<input type="radio" value="大于(>)" v-model="selectChange" />
|
||||
{{datarts.list1}}
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" value="小于(<)" v-model="selectChange" />
|
||||
{{datarts.list2}}
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" value="大于等于(>=)" v-model="selectChange" />
|
||||
{{datarts.list3}}
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" value="小于等于(<=)" v-model="selectChange" />
|
||||
{{datarts.list4}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
数量：
|
||||
<input type="text" v-model="nums" placeholder="请输入数量" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="center2">
|
||||
<div>{{datarts.list5}}</div>
|
||||
<div>{{datarts.list6}}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<textarea v-model="textareas"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 确定取消 -->
|
||||
<div class="bottom">
|
||||
<div>确定</div>
|
||||
<div @click="$store.state.selcettWindowState = false">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'screenCom',
|
||||
data () {
|
||||
return {
|
||||
imgUrl: require('../../../static/nav/deleteImg.png'),
|
||||
selectAudio: 'hang',
|
||||
dataList: [
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
text: 'h就开始',
|
||||
state: false
|
||||
}
|
||||
],
|
||||
datarts: {
|
||||
list1: '大于(>)',
|
||||
list2: '小于(<)',
|
||||
list3: '大于等于(>=)',
|
||||
list4: '小于(<=)',
|
||||
list5: '>',
|
||||
list6: '<'
|
||||
},
|
||||
selectChange: '大于(>)',
|
||||
textareas: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeBgcolor (ind) {
|
||||
this.dataList.forEach((item, index) => {
|
||||
index === ind ? item.state = true : item.state = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.screenCom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > .container {
|
||||
width: 69.125rem;
|
||||
height: 44.75rem;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .top {
|
||||
margin-top: 1.375rem;
|
||||
width: 64.125rem;
|
||||
height: 3.875rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 0.125rem solid #bdbdbd;
|
||||
& > span {
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > img {
|
||||
width: 1.3125rem;
|
||||
height: 1.3125rem;
|
||||
}
|
||||
}
|
||||
& > .rowCol {
|
||||
width: 64.125rem;
|
||||
height: 4.125rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > input {
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
& > .mainKuang {
|
||||
width: 64.125rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
& > .left {
|
||||
width: 18.0625rem;
|
||||
height: 22.875rem;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
overflow: auto;
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 2.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > .active {
|
||||
background-color: deepskyblue;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
& > .center1 {
|
||||
width: 17.25rem;
|
||||
height: 22.875rem;
|
||||
& > div:nth-child(1) {
|
||||
width: 17.25rem;
|
||||
height: 19.875rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
& > div {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
& > .center2 {
|
||||
width: 3rem;
|
||||
height: 22.875rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
& > div {
|
||||
width: 2.5rem;
|
||||
height: 2.125rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
& > .right {
|
||||
& > textarea {
|
||||
width: 20.625rem;
|
||||
height: 22.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .bottom {
|
||||
width: 64.125rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
& > div:nth-child(1) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
width: 15.625rem;
|
||||
height: 3.1875rem;
|
||||
border: solid 0.125rem #dbdbdb;
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&>div{
|
||||
margin:3rem 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
15
src/store.js
15
src/store.js
@@ -5,7 +5,20 @@ Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
|
||||
// 定义一个窗口状态（新增指标）
|
||||
insertWindowState: false,
|
||||
// 定义一个筛选窗口状态
|
||||
selcettWindowState: false,
|
||||
// 定义一个编辑窗口状态
|
||||
editWindowState: false,
|
||||
// 定义一个添加收藏的窗口状态
|
||||
addCollectState: false,
|
||||
// 指标解释状态
|
||||
labelExplainState: false,
|
||||
// 指标解释数据
|
||||
labelExplainData: '这是指标解释使劲儿发红包健康撒大部分更健康',
|
||||
// 维度转换状态
|
||||
dimensionState: false
|
||||
},
|
||||
mutations: {
|
||||
|
||||
|
||||
100
src/views/cs.vue
100
src/views/cs.vue
@@ -1,36 +1,100 @@
|
||||
<template>
|
||||
<div>
|
||||
<input type="text" v-model="iphones" />
|
||||
<button @click="sendInfor">发送</button>
|
||||
<div class="native">
|
||||
<div class="nav1">
|
||||
<div
|
||||
v-for="(item1,index1) in nativeData1"
|
||||
:key="index1"
|
||||
:class="{bgcolor:item1.state}"
|
||||
@click="changeData('native1',index1)"
|
||||
>{{item1.text}}</div>
|
||||
</div>
|
||||
<div class="nav2">
|
||||
<div
|
||||
v-for="(item2,index2) in nativeData2"
|
||||
:key="index2"
|
||||
:class="{bgcolor:item2.state}"
|
||||
@click="changeData('native2',index2)"
|
||||
>{{item2.text}}</div>
|
||||
</div>
|
||||
<div class="nav3">
|
||||
<div
|
||||
v-for="(item3,index3) in nativeData3"
|
||||
:key="index3"
|
||||
:class="{bgcolor:item3.state}"
|
||||
@click="changeData('native3',index3)"
|
||||
>{{item3.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'cs',
|
||||
data () {
|
||||
return {
|
||||
iphones: ''
|
||||
nativeData1: [
|
||||
{ text: '导航1-1', state: true },
|
||||
{ text: '导航1-2', state: false },
|
||||
{ text: '导航1-3', state: false }
|
||||
],
|
||||
nativeData2: [
|
||||
{ text: '导航2-1', state: true },
|
||||
{ text: '导航2-2', state: false },
|
||||
{ text: '导航2-3', state: false }
|
||||
],
|
||||
nativeData3: [
|
||||
{ text: '导航3-1', state: true },
|
||||
{ text: '导航3-2', state: false },
|
||||
{ text: '导航3-3', state: false }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
sendInfor () {
|
||||
this.$axios({
|
||||
method: 'POST',
|
||||
url: 'Main/Verification',
|
||||
data: {
|
||||
Verification: this.iphones
|
||||
},
|
||||
then: (res) => {
|
||||
console.log(res)
|
||||
},
|
||||
catch: (e) => {
|
||||
}
|
||||
})
|
||||
changeData (lab, states) {
|
||||
switch (lab) {
|
||||
case 'native1':
|
||||
this.nativeData1.forEach((item, index) => {
|
||||
index === states ? item.state = true : item.state = false
|
||||
})
|
||||
console.log(this.selectNow)
|
||||
break
|
||||
case 'native2':
|
||||
this.nativeData2.forEach((item, index) => {
|
||||
index === states ? item.state = true : item.state = false
|
||||
})
|
||||
break
|
||||
case 'native3':
|
||||
this.nativeData3.forEach((item, index) => {
|
||||
index === states ? item.state = true : item.state = false
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.native {
|
||||
width: 100%;
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
& > div {
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
border: 1px solid #bdbdbd;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > .bgcolor {
|
||||
background-color: #0dbc79;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -183,6 +183,7 @@
|
||||
:indStatic="indStatic"
|
||||
:chartsStatusMegger="chartsStatusMegger"
|
||||
:defaultDataRight="defaultDataRight"
|
||||
@comTime="comTime"
|
||||
></ChartsCont>
|
||||
</div>
|
||||
<div class="container">
|
||||
@@ -219,6 +220,18 @@
|
||||
</section>
|
||||
<!-- 页脚信息 -->
|
||||
<FooterInfors></FooterInfors>
|
||||
<!-- 指标解释 -->
|
||||
<LabelExplain v-if="$store.state.labelExplainState"></LabelExplain>
|
||||
<!-- 新增指标 -->
|
||||
<InsertLabel v-if="$store.state.insertWindowState"></InsertLabel>
|
||||
<!-- 筛选 -->
|
||||
<ScreenCom v-if="$store.state.selcettWindowState"></ScreenCom>
|
||||
<!-- 编辑 -->
|
||||
<EditCom v-if="$store.state.editWindowState"></EditCom>
|
||||
<!-- 添加收藏 -->
|
||||
<AddCollect v-if="$store.state.addCollectState"></AddCollect>
|
||||
<!-- 维度转换 -->
|
||||
<Dimension v-if="$store.state.dimensionState"></Dimension>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -239,6 +252,18 @@ import ChartsCont from '@/components/chartsCont/ChartsCont.vue'
|
||||
import AdvancedQuery from '@/components/advancedQuery/AdvancedQuery.vue'
|
||||
// 引入数据地图组件
|
||||
import MapData from '@/components/mapData/MapData.vue'
|
||||
// 新增指标组件
|
||||
import InsertLabel from '@/components/insertLabel/InsertLabel.vue'
|
||||
// 筛选
|
||||
import ScreenCom from '@/components/screenCom/ScreenCom.vue'
|
||||
// 编辑
|
||||
import EditCom from '@/components/editCom/EditCom.vue'
|
||||
// 添加收藏
|
||||
import AddCollect from '@/components/addCollect/AddCollect.vue'
|
||||
// 指标解释
|
||||
import LabelExplain from '@/components/labelExplain/LabelExplain.vue'
|
||||
// 维度转换
|
||||
import Dimension from '@/components/dimension/Dimension.vue'
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
@@ -250,7 +275,13 @@ export default {
|
||||
ChartsCut: ChartsCut,
|
||||
ChartsCont: ChartsCont,
|
||||
AdvancedQuery: AdvancedQuery,
|
||||
MapData: MapData
|
||||
MapData: MapData,
|
||||
InsertLabel: InsertLabel,
|
||||
ScreenCom: ScreenCom,
|
||||
EditCom: EditCom,
|
||||
AddCollect: AddCollect,
|
||||
LabelExplain: LabelExplain,
|
||||
Dimension: Dimension
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -357,7 +388,12 @@ export default {
|
||||
},
|
||||
leftCateData: null,
|
||||
// 简单查询、高级查询、数据地图切换状态(simpleness（简单）、advanced（高级） 、map（地图）)
|
||||
cutStateSeach: 'simpleness'
|
||||
cutStateSeach: 'simpleness',
|
||||
// 下来帅选的数据
|
||||
downLaSelect: {
|
||||
area: '',
|
||||
label: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -458,6 +494,7 @@ export default {
|
||||
this.cutStateSeach = 'map'
|
||||
break
|
||||
case 3:
|
||||
this.$store.state.addCollectState = true
|
||||
break
|
||||
case 4:
|
||||
break
|
||||
@@ -491,14 +528,17 @@ export default {
|
||||
clickCate (hierarchy, ind, textType) {
|
||||
switch (textType) {
|
||||
case '新增指标':
|
||||
this.$store.state.insertWindowState = true
|
||||
break
|
||||
case '筛选':
|
||||
this.$store.state.selcettWindowState = true
|
||||
break
|
||||
case '恢复':
|
||||
break
|
||||
case '清除空行空列':
|
||||
break
|
||||
case '编辑':
|
||||
this.$store.state.editWindowState = true
|
||||
break
|
||||
case '转置':
|
||||
console.log(100000)
|
||||
@@ -506,6 +546,7 @@ export default {
|
||||
console.log(this.chartsStatusMegger.transState)
|
||||
break
|
||||
case '维度转换':
|
||||
this.$store.state.dimensionState = true
|
||||
break
|
||||
case '保存默认':
|
||||
break
|
||||
@@ -690,6 +731,9 @@ export default {
|
||||
})
|
||||
this.defaultDataRight = dataDome
|
||||
console.log(this.defaultDataRight, '1250')
|
||||
},
|
||||
comTime (res) {
|
||||
this.downLaSelect.time = res
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
4
src/views/personalCenter/index.json
Normal file
4
src/views/personalCenter/index.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"khjj": "jsdbhjh",
|
||||
"hgas": "hghdfg57457"
|
||||
}
|
||||
BIN
static/data/bt_counter.jpg
Normal file
BIN
static/data/bt_counter.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Reference in New Issue
Block a user