center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge branch 'dev' of github.com:dataease/dataease into dev

Browse Source
This commit is contained in:
taojinlong 2021-12-22 17:03:05 +08:00
commit e9273e4263
22 changed files with 237 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
backend/pom.xml
View File

@ -255,6 +255,7 @@
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
</dependency>
</dependencies>
<build>
@ -408,14 +409,14 @@
</fileset>
</move>
<move todir="src/main/resources/static/de-app">
<copy todir="src/main/resources/static/de-app">
<fileset dir="../../dataease-app/dist/build/h5">
<exclude name="*.html"/>
</fileset>
</move>
</copy>
<move file="../../dataease-app/dist/build/h5/index.html" tofile="src/main/resources/templates/app.html" />
<copy file="../../dataease-app/dist/build/h5/index.html" tofile="src/main/resources/templates/app.html" />
</target>
@ -433,7 +434,7 @@
<repository>
<id>pentaho-public</id>
<name>Pentaho Public</name>
<url>http://nexus.pentaho.org/content/groups/omni</url>
<url>https://nexus.pentaho.org/content/groups/omni</url>
<releases>
<enabled>true</enabled>
<updatePolicy>always</updatePolicy>

3
backend/src/main/java/io/dataease/base/mapper/ext/HomeMapper.xml
View File

@ -7,10 +7,11 @@
s.panel_group_id as id,
g.name as title,
s.create_time as `time`
from panel_store s
from( SELECT GET_V_AUTH_MODEL_ID_P_USE_MOBILE ( #{userId}, 'panel' ) cids ) t, panel_store s
inner join panel_group g
on s.panel_group_id = g.id
where s.user_id = #{userId}
and FIND_IN_SET( g.id, cids )
order by s.create_time desc
</select>

4
backend/src/main/java/io/dataease/base/mapper/ext/MobileDirMapper.java
View File

@ -6,9 +6,9 @@ import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface MobileDirMapper {
List<PanelEntity> query(String pid);
List<PanelEntity> query(@Param("pid") String pid,@Param("userId") String userId);
List<PanelEntity> queryWithName(String name);
List<PanelEntity> queryWithName(@Param("name") String name,@Param("userId") String userId);
List<String> idsWithUser(String userId);

35
backend/src/main/java/io/dataease/base/mapper/ext/MobileDirMapper.xml
View File

@ -3,23 +3,30 @@
<mapper namespace="io.dataease.base.mapper.ext.MobileDirMapper">
<select id="query" resultType="io.dataease.mobile.entity.PanelEntity">
select
id,
name as text,
pid,
node_type as `type`
from panel_group g
where pid = #{pid} and g.mobile_layout = 1
SELECT
id,
NAME AS text,
pid,
node_type AS `type`
FROM
panel_group g,
( SELECT GET_V_AUTH_MODEL_ID_P_USE_MOBILE ( #{userId}, 'panel' ) cids ) t
WHERE
g.pid = #{pid}
AND FIND_IN_SET( g.id, cids )
</select>
<select id="queryWithName" resultType="io.dataease.mobile.entity.PanelEntity">
select
id,
name as text,
pid,
node_type as `type`
from panel_group g
where g.mobile_layout = 1
SELECT
id,
NAME AS text,
pid,
node_type AS `type`
FROM
panel_group g,
( SELECT GET_V_AUTH_MODEL_ID_P_USE_MOBILE ( #{userId}, 'panel' ) cids ) t
WHERE
FIND_IN_SET( g.id, cids )
<if test="name != null">
and name like CONCAT('%', #{name, jdbcType=VARCHAR}, '%')
</if>

30
backend/src/main/java/io/dataease/controller/sys/SystemParameterController.java
View File

@ -5,6 +5,8 @@ import io.dataease.commons.constants.ParamConstants;
import io.dataease.controller.sys.response.BasicInfo;
import io.dataease.controller.sys.response.MailInfo;
import io.dataease.dto.SystemParameterDTO;
import io.dataease.listener.DatasetCheckListener;
import io.dataease.listener.util.CacheUtils;
import io.dataease.service.FileService;
import io.dataease.service.system.EmailService;
import io.dataease.service.system.SystemParameterService;
@ -16,6 +18,7 @@ import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import springfox.documentation.annotations.ApiIgnore;
import javax.annotation.Resource;
import java.io.IOException;
import java.util.HashMap;
@ -45,7 +48,7 @@ public class SystemParameterController {
public BasicInfo basicInfo() {
return systemParameterService.basicInfo();
}
@GetMapping("/requestTimeOut")
public Integer RequestTimeOut() {
BasicInfo basicInfo = systemParameterService.basicInfo();
@ -73,19 +76,17 @@ public class SystemParameterController {
}
@GetMapping("/base/info")
public List<SystemParameterDTO> getBaseInfo () {
public List<SystemParameterDTO> getBaseInfo() {
return systemParameterService.getSystemParameterInfo(ParamConstants.Classify.BASE.getValue());
}
@GetMapping("/ui/info")
public List<SystemParameterDTO> getDisplayInfo () {
public List<SystemParameterDTO> getDisplayInfo() {
return systemParameterService.getSystemParameterInfo(ParamConstants.Classify.UI.getValue());
}
@GetMapping(value="/ui/image/{imageId}", produces = {MediaType.IMAGE_JPEG_VALUE, MediaType.IMAGE_PNG_VALUE})
@GetMapping(value = "/ui/image/{imageId}", produces = {MediaType.IMAGE_JPEG_VALUE, MediaType.IMAGE_PNG_VALUE})
public ResponseEntity<byte[]> image(@PathVariable("imageId") String imageId) {
byte[] bytes = fileService.loadFileAsBytes(imageId);
final HttpHeaders headers = new HttpHeaders();
@ -93,12 +94,19 @@ public class SystemParameterController {
return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
}
@PostMapping(value="/save/ui", consumes = {"multipart/form-data"})
public void saveUIInfo (@RequestPart("request") Map<String,List<SystemParameterDTO>> systemParameterMap,@RequestPart(value = "files", required = false) List<MultipartFile> bodyFiles) throws IOException {
systemParameterService.saveUIInfo(systemParameterMap,bodyFiles);
@PostMapping(value = "/save/ui", consumes = {"multipart/form-data"})
public void saveUIInfo(@RequestPart("request") Map<String, List<SystemParameterDTO>> systemParameterMap, @RequestPart(value = "files", required = false) List<MultipartFile> bodyFiles) throws IOException {
systemParameterService.saveUIInfo(systemParameterMap, bodyFiles);
}
@PostMapping(value = "/checkCustomDs")
public boolean checkCustomDs() {
try {
Object cache = CacheUtils.get(DatasetCheckListener.CACHE_NAME, DatasetCheckListener.CACHE_KEY);
return cache != null && (boolean) cache;
} catch (Exception e) {
return false;
}
}
}

4
backend/src/main/java/io/dataease/job/sechedule/strategy/impl/EmailTaskHandler.java
View File

@ -104,7 +104,7 @@ public class EmailTaskHandler extends TaskHandler implements Job {
@Async
public void sendReport(GlobalTaskInstance taskInstance, XpackEmailTemplateDTO emailTemplateDTO,
SysUserEntity user) {
SysUserEntity user) {
EmailXpackService emailXpackService = SpringContextUtil.getBean(EmailXpackService.class);
try {
byte[] bytes = emailXpackService.printData(panelUrl(emailTemplateDTO.getPanelId()), tokenByUser(user),
@ -153,7 +153,7 @@ public class EmailTaskHandler extends TaskHandler implements Job {
private String panelUrl(String panelId) {
String domain = ServletUtils.domain();
return domain + "/#/preview/" + panelId;
return domain + "/#/previewScreenShot/" + panelId + "/true";
}
}

39
backend/src/main/java/io/dataease/listener/DatasetCheckListener.java Normal file
View File

@ -0,0 +1,39 @@
package io.dataease.listener;
import io.dataease.base.domain.DatasetTable;
import io.dataease.base.domain.DatasetTableExample;
import io.dataease.base.mapper.DatasetTableMapper;
import io.dataease.listener.util.CacheUtils;
import io.dataease.plugins.loader.ClassloaderResponsity;
import org.apache.commons.collections4.CollectionUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.context.event.ApplicationReadyEvent;
import org.springframework.context.ApplicationListener;
import org.springframework.stereotype.Component;
import javax.annotation.Resource;
import java.util.List;
/**
* @Author gin
* @Date 2021/12/22 10:01 上午
*/
@Component
public class DatasetCheckListener implements ApplicationListener<ApplicationReadyEvent> {
private final Logger logger = LoggerFactory.getLogger(ClassloaderResponsity.class);
public static final String CACHE_NAME = "check_ds";
public static final String CACHE_KEY = "hide_custom_ds";
@Resource
private DatasetTableMapper datasetTableMapper;
@Override
public void onApplicationEvent(ApplicationReadyEvent applicationReadyEvent) {
logger.info("Start check custom dataset");
// 项目启动查找是否有'自定义数据集'
DatasetTableExample datasetTableExample = new DatasetTableExample();
datasetTableExample.createCriteria().andTypeEqualTo("custom");
List<DatasetTable> datasetTables = datasetTableMapper.selectByExampleWithBLOBs(datasetTableExample);
CacheUtils.put(CACHE_NAME, CACHE_KEY, CollectionUtils.isEmpty(datasetTables), null, null);
}
}

26
backend/src/main/java/io/dataease/mobile/service/DirService.java
View File

@ -40,12 +40,13 @@ public class DirService {
}
public List<DirItemDTO> query(DirRequest request) {
CurrentUserDto user = AuthUtils.getUser();
// CurrentUserDto user = AuthUtils.getUser();
String userId = String.valueOf(AuthUtils.getUser().getUserId());
List<PanelEntity> panelEntities = new ArrayList<>();
if (StringUtils.isNotBlank(request.getName())) {
panelEntities = mobileDirMapper.queryWithName(request.getName());
panelEntities = mobileDirMapper.queryWithName(request.getName(),userId);
}else {
panelEntities = mobileDirMapper.query(request.getPid());
panelEntities = mobileDirMapper.query(request.getPid(),userId);
}
if (CollectionUtils.isEmpty(panelEntities)) return null;
@ -56,16 +57,17 @@ public class DirService {
dirItemDTO.setType(data.getType());
return dirItemDTO;
}).collect(Collectors.toList());
return dtos;
if (user.getUserId() == 1 && StringUtils.equals("admin", user.getUsername())) {
return dtos;
}
List<String> permissions = proxy().permissions();
return dtos.stream().filter(
dto -> permissions.stream().anyMatch(
permission -> StringUtils.equals(permission, dto.getId())
)
).collect(Collectors.toList());
// if (user.getUserId() == 1 && StringUtils.equals("admin", user.getUsername())) {
// return dtos;
// }
// List<String> permissions = proxy().permissions();
// return dtos.stream().filter(
// dto -> permissions.stream().anyMatch(
// permission -> StringUtils.equals(permission, dto.getId())
// )
// ).collect(Collectors.toList());
}

6
backend/src/main/java/io/dataease/plugins/server/XEmailTaskServer.java
View File

@ -34,7 +34,7 @@ public class XEmailTaskServer {
@PostMapping("/queryTasks/{goPage}/{pageSize}")
public Pager<List<XpackTaskGridDTO>> queryTask(@PathVariable int goPage, @PathVariable int pageSize,
@RequestBody XpackGridRequest request) {
@RequestBody XpackGridRequest request) {
EmailXpackService emailXpackService = SpringContextUtil.getBean(EmailXpackService.class);
Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
List<XpackTaskGridDTO> tasks = emailXpackService.taskGrid(request);
@ -80,7 +80,7 @@ public class XEmailTaskServer {
String panelId = request.getPanelId();
String content = request.getContent();
String url = ServletUtils.domain() + "/#/preview/" + panelId;
String url = ServletUtils.domain() + "/#/previewScreenShot/" + panelId + "/true";
String token = ServletUtils.getToken();
String fileId = null;
@ -116,7 +116,7 @@ public class XEmailTaskServer {
@PostMapping("/queryInstancies/{goPage}/{pageSize}")
public Pager<List<XpackTaskInstanceDTO>> instancesGrid(@PathVariable int goPage, @PathVariable int pageSize,
@RequestBody XpackGridRequest request) {
@RequestBody XpackGridRequest request) {
EmailXpackService emailXpackService = SpringContextUtil.getBean(EmailXpackService.class);
Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
List<XpackTaskInstanceDTO> instances = emailXpackService.taskInstanceGrid(request);

71
backend/src/main/resources/db/migration/V29__de1.6.sql
View File

@ -22,3 +22,74 @@ ALTER TABLE `panel_link`CHANGE COLUMN `user_id` `user_id` BIGINT(20) NOT NULL ,D
ALTER TABLE `panel_group`
ADD COLUMN `mobile_layout` tinyint(1) NULL DEFAULT 0 COMMENT '启用移动端布局' AFTER `remark`;
-- ----------------------------
-- Function structure for GET_PANEL_WITH_PRIVILEGE_AND_MOBILE
-- ----------------------------
DROP FUNCTION IF EXISTS `GET_PANEL_WITH_PRIVILEGE_AND_MOBILE`;
delimiter ;;
CREATE FUNCTION `GET_PANEL_WITH_PRIVILEGE_AND_MOBILE`(userId longtext,modelType varchar(255),privilegeType varchar(255))
RETURNS longtext CHARSET utf8
READS SQL DATA
BEGIN
DECLARE oTempLeafIds longtext;
select GROUP_CONCAT(auth_source) into oTempLeafIds from (
SELECT
sys_auth.auth_source_type,
sys_auth.auth_source
FROM
sys_auth
LEFT JOIN sys_auth_detail ON sys_auth.id = sys_auth_detail.auth_id
WHERE
sys_auth_detail.privilege_type = privilegeType
and sys_auth.auth_source_type = modelType
AND (
(
sys_auth.auth_target_type = 'dept'
AND sys_auth.auth_target in ( SELECT dept_id FROM sys_user WHERE user_id = userId )
)
OR (
sys_auth.auth_target_type = 'user'
AND sys_auth.auth_target = userId
)
OR (
sys_auth.auth_target_type = 'role'
AND sys_auth.auth_target in ( SELECT role_id FROM sys_users_roles WHERE user_id = userId )
)
OR (1 = ( SELECT is_admin FROM sys_user WHERE user_id = userId ))
)
and sys_auth.auth_source in (select id from panel_group where mobile_layout='1')
GROUP BY
sys_auth.auth_source_type,
sys_auth.auth_source
having (sum( sys_auth_detail.privilege_value )> 0 or 1 = ( SELECT is_admin FROM sys_user WHERE user_id = userId ))) temp;
RETURN oTempLeafIds;
END
;;
delimiter ;
-- ----------------------------
-- Function structure for GET_V_AUTH_MODEL_ID_P_USE_MOBILE
-- ----------------------------
DROP FUNCTION IF EXISTS `GET_V_AUTH_MODEL_ID_P_USE_MOBILE`;
delimiter ;;
CREATE FUNCTION `GET_V_AUTH_MODEL_ID_P_USE_MOBILE`(userId longtext,modelType varchar(255))
RETURNS longtext CHARSET utf8
READS SQL DATA
BEGIN
DECLARE oTempLeafIds longtext;
DECLARE oTempAllIds longtext;
select GET_PANEL_WITH_PRIVILEGE_AND_MOBILE(userId,modelType,1) into oTempLeafIds;
select GROUP_CONCAT(id) into oTempAllIds from (select GET_V_AUTH_MODEL_WITH_PARENT ( oTempLeafIds ,modelType) cids) t, v_auth_model where v_auth_model.model_type=modelType and FIND_IN_SET(v_auth_model.id,cids) order by id asc;
RETURN oTempAllIds;
END
;;
delimiter ;

10
frontend/src/api/dataset/dataset.js
View File

@ -182,4 +182,12 @@ export function datasetRowPermissionsList(datasetId, page, size, data, loading)
})
}
export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree }
export function checkCustomDs() {
return request({
url: '/system/checkCustomDs',
method: 'post',
loading: true
})
}
export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, checkCustomDs }

6
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -148,7 +148,11 @@ export default {
height: '100%'
}
} else {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
if (this.terminal === 'pc') {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
} else {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate', 'fontSize'])
}
}
},

4
frontend/src/components/canvas/components/Editor/MobileCheckBar.vue
View File

@ -38,11 +38,11 @@ export default {
this.element.style.width = 1600
this.element.style.height = 300
this.element.style.left = 0
this.element.style.top = 0
this.element.style.top = 6000
this.element.sizex = 6
this.element.sizey = 4
this.element.x = 1
this.element.y = 1
this.element.y = 200
this.element.auxiliaryMatrix = true
this.$store.commit('addComponent', { component: this.element })
} else {

4
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -3,7 +3,9 @@ export const BASE_MOBILE_STYLE = {
style: {
width: 1600,
height: 300,
borderRadius: 5
left: 0,
top: 0,
borderRadius: 3
},
x: 1,
y: 1,

2
frontend/src/components/canvas/store/copy.js
View File

@ -28,6 +28,8 @@ export default {
}
const data = state.copyData.data
// 仪表板复制的组件默认不在移动端部署中mobileSelected = false
data.mobileSelected = false
if (!state.curComponent.auxiliaryMatrix) {
data.style.top += 20
data.style.left += 20

1
frontend/src/store/getters.js
View File

@ -16,6 +16,7 @@ const getters = {
errorLogs: state => state.errorLog.logs,
sceneData: state => state.dataset.sceneData,
table: state => state.dataset.table,
hideCustomDs: state => state.dataset.hideCustomDs,
loadingMap: state => state.request.loadingMap,
currentPath: state => state.permission.currentPath,
permissions: state => state.user.permissions,

18
frontend/src/store/index.js
View File

@ -149,11 +149,13 @@ const data = {
}
},
setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001
if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001)
if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001
if (rotate || rotate === 0) curComponent.style.rotate = rotate
if (curComponent) {
if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001
if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001)
if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001
if (rotate || rotate === 0) curComponent.style.rotate = rotate
}
},
setShapeSingleStyle({ curComponent }, { key, value }) {
@ -351,7 +353,11 @@ const data = {
// 移动端布局转换
state.componentData.forEach(item => {
if (item.mobileSelected) {
item.style = item.mobileStyle.style
item.style.width = item.mobileStyle.style.width
item.style.height = item.mobileStyle.style.height
item.style.top = item.mobileStyle.style.top
item.style.left = item.mobileStyle.style.left
item.style.borderRadius = 3
item.x = item.mobileStyle.x
item.y = item.mobileStyle.y
item.sizex = item.mobileStyle.sizex

9
frontend/src/store/modules/dataset.js
View File

@ -2,7 +2,8 @@
const getDefaultState = () => {
return {
sceneData: {},
table: {}
table: {},
hideCustomDs: false
}
}
@ -14,6 +15,9 @@ const mutations = {
},
setTable: (state, table) => {
state.table = table
},
setHideCustomDs: (state, hideCustomDs) => {
state.hideCustomDs = hideCustomDs
}
}
@ -23,6 +27,9 @@ const actions = {
},
setTable({ commit }, table) {
commit('setTable', table)
},
setHideCustomDs({ commit }, hideCustomDs) {
commit('setHideCustomDs', hideCustomDs)
}
}

11
frontend/src/views/dataset/data/ViewTable.vue
View File

@ -56,7 +56,7 @@
<el-tab-pane :label="$t('dataset.field_manage')" name="fieldEdit">
<field-edit :param="param" :table="table" />
</el-tab-pane>
<el-tab-pane v-if="table.type !== 'union' && table.type !== 'custom' && !(table.type === 'sql' && table.mode === 0)" :label="$t('dataset.join_view')" name="joinView">
<el-tab-pane v-if="!hideCustomDs && table.type !== 'union' && table.type !== 'custom' && !(table.type === 'sql' && table.mode === 0)" :label="$t('dataset.join_view')" name="joinView">
<union-view :param="param" :table="table" />
</el-tab-pane>
<el-tab-pane v-if="table.mode === 1 && (table.type === 'excel' || table.type === 'db' || table.type === 'sql')" :label="$t('dataset.update_info')" name="updateInfo">
@ -76,7 +76,7 @@ import FieldEdit from './FieldEdit'
export default {
name: 'ViewTable',
components: {FieldEdit, UnionView, DatasetChartDetail, UpdateInfo, TabDataPreview },
components: { FieldEdit, UnionView, DatasetChartDetail, UpdateInfo, TabDataPreview },
props: {
param: {
type: Object,
@ -103,10 +103,9 @@ export default {
}
},
computed: {
// tableRefresh() {
// this.initTable(this.param)
// return this.$store.state.dataset.table
// }
hideCustomDs: function() {
return this.$store.getters.hideCustomDs
}
},
watch: {
'param': function() {

5
frontend/src/views/dataset/group/Group.vue
View File

@ -91,7 +91,7 @@
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />
{{ $t('dataset.excel_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('custom',data)">
<el-dropdown-item v-show="!hideCustomDs" :command="beforeClickAddData('custom',data)">
<svg-icon icon-class="ds-custom" class="ds-icon-custom" />
{{ $t('dataset.custom_data') }}
</el-dropdown-item>
@ -309,6 +309,9 @@ export default {
}
},
computed: {
hideCustomDs: function() {
return this.$store.getters.hideCustomDs
}
},
watch: {
saveStatus() {

7
frontend/src/views/dataset/index.vue
View File

@ -26,6 +26,7 @@ import AddCustom from './add/AddCustom'
import AddUnion from '@/views/dataset/add/AddUnion'
import FieldEdit from './data/FieldEdit'
import { removeClass } from '@/utils'
import { checkCustomDs } from '@/api/dataset/dataset'
export default {
name: 'DataSet',
components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL, AddExcel, AddCustom },
@ -40,11 +41,17 @@ export default {
removeClass(document.body, 'showRightPanel')
},
created() {
this.initDs()
this.$store.dispatch('app/toggleSideBarHide', true)
const routerParam = this.$router.currentRoute.params
this.toMsgShare(routerParam)
},
methods: {
initDs() {
checkCustomDs().then(res => {
this.$store.dispatch('dataset/setHideCustomDs', res.data)
})
},
switchComponent(c) {
this.param = c.param
switch (c.name) {

2
frontend/src/views/panel/edit/ComponentWaitItem.vue
View File

@ -71,7 +71,7 @@ export default {
return {
padding: '5px',
display: 'inline-block',
width: '33.3333%'
width: '33%'
}
},
...mapState([