二十六:交易详细信息

news2024/11/27 3:37:31

功能需求

用户在交易主页面,点击交易名称超级链接,跳转到交易明细页面,完成查看交易明细的功能。

*显示交易的基本信息

*显示交易的备注信息

*显示交易的历史信息

*显示交易的阶段图标信息

流程图

 

后端代码实现

1.tran

TranMapper

    /**
     * 根据id查询详细信息
     */
    Tran selectTranFortranId(String tranId);
    <select id="selectTranFortranId" resultMap="BaseResultMap">
        select t.id,u.name owner,t.money,t.name,t.expected_date,c.name as customer_id,dic1.value stage,dic2.value type,dic3.value source,
               a.name activity_id,co.fullname contacts_id,t.description,t.contact_summary,t.next_contact_time,
               u2.name create_by,t.create_time,u3.name edit_by,t.edit_time
        from tbl_tran t
                 join tbl_user u on t.owner = u.id
                 left join tbl_user u2 on t.create_by = u2.id
                 left join tbl_user u3 on t.edit_by = u3.id
                 left join tbl_dic_value dic1 on t.stage = dic1.id
                 left join tbl_dic_value dic2 on t.type = dic2.id
                 left join tbl_dic_value dic3 on t.source = dic3.id
                 left join tbl_activity a on t.activity_id=a.id
                 left join tbl_contacts co on t.contacts_id=co.id
                 left join tbl_customer c on t.customer_id = c.id
        where t.id=#{tranId}
    </select>

 TranService

	/**
	 * 详细信息:根据id
	 */
	Tran queryTranFortranId(String tranId);
	@Override
	public Tran queryTranFortranId(String tranId) {
		return tranMapper.selectTranFortranId(tranId);
	}

2.tranRemarkList

TranRemarkMapper

    /**
     * 根据交易id查询交易评论
     */
    List<TranRemark> selectTranHistoryForTranid(String tranId);
    <!--   List<TranRemark> selectTranHistoryForTranid(String tranId);-->
    <select id="selectTranHistoryForTranid" resultMap="BaseResultMap">
        select tr.id,
               tr.note_content,
               tr.create_time,
               u1.name as create_by,
               tr.edit_time,
               u2.name as edit_by,
               tr.edit_flag
        from tbl_tran_remark tr
                 join tbl_user u1 on tr.create_by = u1.id
                 left join tbl_user u2 on tr.edit_by = u2.id
        where tr.tran_id = #{tranId}
    </select>

TranRemarkService

	/**
	 * 根据交易id查询交易评论
	 */
	List<TranRemark> queryTranHistoryForTranid(String tranId);
@Service
public class TranRemarkServiceImpl implements TranRemarkService {
	@Autowired
	private TranRemarkMapper tranRemarkMapper;
	@Override
	public List<TranRemark> queryTranHistoryForTranid(String tranId) {
		return tranRemarkMapper.selectTranHistoryForTranid(tranId);
	}
}

3.tranHistoryList

TranHistoryMapper

    /**
     * 根据交易id查询阶段历史
     */
    List<TranHistory> selectTranHistoryForTranid(String tranId);
    <select id="selectTranHistoryForTranid" resultMap="BaseResultMap">
        select th.id, dic1.value stage, th.money, th.expected_date, th.create_time, u.name create_by
        from tbl_tran_history th
                 left join tbl_user u on th.create_by = u.id
                 left join tbl_dic_value dic1 on th.stage = dic1.id
        where th.tran_id = #{tranId}
    </select>

TranHistoryService

	/**
	 * 根据交易id查询阶段历史
	 */
	List<TranHistory> queryTranHistoryForTranid(String tranId);
@Service
public class TranHistoryServiceImpl implements TranHistoryService {
	@Autowired
	private TranHistoryMapper tranHistoryMapper;
	@Override
	public List<TranHistory> queryTranHistoryForTranid(String tranId) {
		return tranHistoryMapper.selectTranHistoryForTranid(tranId);
	}
}

4.stageList

DicValueMapper

    /**
     * 根据type-code查询字典
     */
    List<DicValue> selectDicValueByTypeCode(String typeCode);
    <!--     List<DicValue> queryDicValueByTypeCode(String typeCode); -->
    <select id="selectDicValueByTypeCode" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"></include>
        from tbl_dic_value
        where type_code=#{typeCode}
        order by order_no asc
    </select>

DicValueService

	/**
	 * 根据typecode查询字典
	 */
	List<DicValue> queryDicValueByTypeCode(String typeCode);
	@Autowired
	private DicValueMapper dicValueMapper;
	@Override
	public List<DicValue> queryDicValueByTypeCode(String typeCode) {
		return dicValueMapper.selectDicValueByTypeCode(typeCode);
	}

5.nowStageNo

DicValueMapper

    /**
     * 根据id查询所在的OrderNo
     */
    int selectDicToOrderNo(Map<String,Object> map);
    <!--    int selectDicToOrderNo(String typeCode, String dicValue);-->
    <select id="selectDicToOrderNo" resultType="java.lang.Integer">
        select order_no
        from tbl_dic_value
        where type_code=#{typeCode} and value=#{dicValue}
    </select>

DicValueService

	/**
	 * 根据类型的值,返回一个数字
	 */
	int queryDicToOrderNo(Map<String,Object> map);
	@Override
	public int queryDicToOrderNo(Map<String,Object> map) {
		return dicValueMapper.selectDicToOrderNo(map);
	}

6. TranController

	/**
	 * 查看交易详情
	 */
	@RequestMapping("/workbench/transaction/queryTranFortranId.do")
	public String queryTranFortranId(HttpServletRequest request,String tranId){
		// 调用Service
		Tran tran = tranService.queryTranFortranId(tranId);
		List<TranRemark> tranRemarkList = tranRemarkService.queryTranHistoryForTranid(tranId);
		List<TranHistory> tranHistoryList = tranHistoryService.queryTranHistoryForTranid(tranId);
		List<DicValue> stageList = dicValueService.queryDicValueByTypeCode("stage");
		// 查询阶段所在的order_no
		Map<String,Object> map = new HashMap<>();
		map.put("typeCode","stage");
		map.put("dicValue",tran.getStage());
		int nowStageNo = dicValueService.queryDicToOrderNo(map);
		// 保存请求域
		request.setAttribute("tran",tran);
		request.setAttribute("tranRemarkList",tranRemarkList);
		request.setAttribute("tranHistoryList",tranHistoryList);
		request.setAttribute("nowStageNo",nowStageNo);
		request.setAttribute("stageList",stageList);
		return "workbench/transaction/detail";
	}

前端代码实现

*显示交易的基本信息

<div style="position: relative; top: 0px;">
    <div style="position: relative; left: 40px; height: 30px;">
        <div style="width: 300px; color: gray;">所有者</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${tran.owner}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">金额</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${tran.money}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 10px;">
        <div style="width: 300px; color: gray;">名称</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${tran.name}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">预计成交日期</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${tran.expectedDate}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 20px;">
        <div style="width: 300px; color: gray;">客户名称</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${tran.customerId}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">阶段</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${tran.stage}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 30px;">
        <div style="width: 300px; color: gray;">类型</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;">
            <b>${tran.type==null?"&nbsp":tran.type}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">联系人名称</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;">
            <b>${tran.contactsId==null?"&nbsp":tran.contactsId}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 40px;">
        <div style="width: 300px; color: gray;">来源</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;">
            <b>${tran.source==null?"&nbsp":tran.source}</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">市场活动源</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;">
            <b>${tran.activityId==null?"&nbsp":tran.activityId}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 60px;">
        <div style="width: 300px; color: gray;">创建者</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${tran.createBy}&nbsp;&nbsp;</b><small
                style="font-size: 10px; color: gray;">${tran.createTime}</small></div>
        <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 70px;">
        <div style="width: 300px; color: gray;">修改者</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;">
            <b>${tran.editBy==null?"&nbsp":tran.editBy}&nbsp;&nbsp;</b><small
                style="font-size: 10px; color: gray;">${tran.editTime==null?"&nbsp":tran.editTime}</small></div>
        <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 80px;">
        <div style="width: 300px; color: gray;">描述</div>
        <div style="width: 630px;position: relative; left: 200px; top: -20px;">
            <b>
                ${tran.description==null?"&nbsp":tran.description}
            </b>
        </div>
        <div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 90px;">
        <div style="width: 300px; color: gray;">联系纪要</div>
        <div style="width: 630px;position: relative; left: 200px; top: -20px;">
            <b>
                ${tran.contactSummary==null?"&nbsp":tran.contactSummary}
            </b>
        </div>
        <div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 100px;">
        <div style="width: 300px; color: gray;">下次联系时间</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;">
            <b> ${tran.nextContactTime==null?"&nbsp":tran.nextContactTime}</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
</div>

*显示交易的备注信息

<div id="remarkDivList" style="position: relative; top: 100px; left: 40px;">
    <div class="page-header">
        <h4>备注</h4>
    </div>

    <!-- 备注1 -->
    <c:forEach items="${tranRemarkList}" var="remark">
        <div id="div_${remark.id}" class="remarkDiv" style="height: 60px;">
            <img title="${remark.createBy}" src="image/user-thumbnail.png" style="width: 30px; height:30px;">
            <div style="position: relative; top: -40px; left: 40px;">
                <small style="color: gray;">@${remark.editFlag=='1'?remark.editBy:remark.createBy}:${remark.editFlag=='1'?remark.editTime:remark.createTime}${remark.editFlag=='1'?'修改':'创建'}</small>
                <p>${remark.noteContent}</p>
                <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
                    <a class="myHref" name="editA" remarkId="${remark.id}" href="javascript:void(0);"><span
                            class="glyphicon glyphicon-edit"
                            style="font-size: 20px; color: #E6E6E6;"></span></a>
                    &nbsp;
                    <a class="myHref" name="deleteA" remarkId="${remark.id}" href="javascript:void(0);"><span
                            class="glyphicon glyphicon-remove"
                            style="font-size: 20px; color: #E6E6E6;"></span></a>
                </div>
            </div>
        </div>
    </c:forEach>


    <!-- 备注2 -->

    <div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
        <form role="form" style="position: relative;top: 10px; left: 10px;">
            <textarea id="remark" class="form-control" style="width: 850px; resize : none;" rows="2"
                      placeholder="添加备注..."></textarea>
            <p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
                <button id="cancelBtn" type="button" class="btn btn-default">取消</button>
                <button type="button" class="btn btn-primary" id="saveClueRemarkBtn">保存</button>
            </p>
        </form>
    </div>
</div>

*显示交易的历史信息

<div>
    <div style="position: relative; top: 100px; left: 40px;">
        <div class="page-header">
            <h4>阶段历史</h4>
        </div>
        <div style="position: relative;top: 0px;">
            <table id="activityTable" class="table table-hover" style="width: 900px;">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td>阶段</td>
                    <td>金额</td>
                    <td>预计成交日期</td>
                    <td>创建人</td>
                    <td>创建时间</td>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${tranHistoryList}" var="history">
                    <tr>
                        <td>${history.stage}</td>
                        <td>${history.money}</td>
                        <td>${history.expectedDate}</td>
                        <td>${history.createBy}</td>
                        <td>${history.createTime}</td>
                    </tr>
                </c:forEach>

                </tbody>
            </table>
        </div>

    </div>
</div>

*显示交易的阶段图标信息

<div style="position: relative; left: 40px; top: -50px;">
    阶段&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <c:forEach items="${stageList}" var="stage">
      <%--当前阶段--%>
        <c:if test="${stage.orderNo==nowStageNo}">
            <!--如果stage就是当前交易所处阶段,则图标显示为map-marker,颜色显示为绿色-->
            <span class="glyphicon glyphicon-map-marker mystage" data-toggle="popover" data-placement="bottom" data-content="${stage.value}" style="color: #90F790;"></span>
            -----------
        </c:if>
       <%--后面的--%>
        <c:if test="${stage.orderNo>nowStageNo}">
            <span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="${stage.value}"></span>
            -----------
        </c:if>
        <%--前面的--%>
        <c:if test="${stage.orderNo<nowStageNo}">
            <span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="${stage.value}" style="color: #90F790;"></span>
            -----------
        </c:if>
    </c:forEach>
    <span class="closingDate">${tran.expectedDate}</span>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/533661.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

实现Fast sigmoid和Softmax

Sigmoid 函数介绍 Sigmoid 函数&#xff08;Logistic 函数&#xff09;是神经网络中非常常用的激活函数&#xff0c;它的数学表示如下: 由于 e x e^x ex幂运算是非常耗时的计算&#xff0c;因此尝试通过替换sigmoid中的 e x e^x ex运算&#xff0c;来提高运行效率&#xff0c;同…

Linux篇4

Shell常用命令 1. 日期时间类1.1 date&#xff1a;日期时间类1.1.1 查看当前日期时间1.1.2 查看非当前日期时间1.1.3 设置系统日期时间 1.2 cal&#xff1a;日历类 2. 用户管理命令2.0 id&#xff1a;查看用户是否存在2.1 useradd&#xff1a;添加新用户2.2 passwd&#xff1a;…

Linux相关问题

中英文切换 super空格切换中英文&#xff1b;super指键盘上的Win键&#xff1b; 开机自启动服务设置 可视化方式&#xff1a;输入setup命令进入自启动服务配置&#xff1b;通过上下键选中服务&#xff0c;通过空格选择是否自启动该服务&#xff1b; 开启不同的终端 CTRLALT…

Jetson nano 之 ROS入门 - - 机器人坐标变换

文章目录 前言一、空间坐标变换原理1. 位姿描述2. 欧拉角与四元数 二、ROS中python实现坐标变换1. 坐标msg消息载体2. 乌龟跟随的程序实现 总结 前言 ROS给开发者们提供了很多集成度很高的开发工具&#xff0c;例如rviz和gazebo。rviz是三维可视化工具&#xff0c;可以显示图像…

【P23】JMeter 用户参数(User Parameters)

&#xff08;1&#xff09;、测试计划右键 <<< 添加 <<< 前置处理器 <<< 用户参数 如图&#xff0c;添加两个变量&#xff0c;每个变量包含两个用户 &#xff08;2&#xff09;、测试计划右键 <<< 添加 <<< 线程&#xff08;用户…

ChatGPT的工作原理(纯干货,万字长文)

ChatGPT 能够自动生成一些读起来表面上甚至像人写的文字的东西&#xff0c;这非常了不起&#xff0c;而且出乎意料。但它是如何做到的&#xff1f;为什么它能发挥作用&#xff1f;我在这里的目的是大致介绍一下 ChatGPT 内部的情况&#xff0c;然后探讨一下为什么它能很好地生成…

Python采集二手房源数据信息并做多线程

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 目录标题 前言环境使用:模块使用:代码展示多线程 尾语 &#x1f49d; 环境使用: Python 3.8 Pycharm 模块使用: requests >>> pip install requests 数据请求模块 parsel >>> pip install parsel 数据…

详述:冒泡排序

一、接下来讲解一下c语言中比较简单的排序方法&#xff1a;冒泡排序 1.冒泡排序的核心思想&#xff1a;是两两相邻的元素进行比较 动画演示&#xff1a; 应用冒泡排序需要明确2点&#xff1a; 1.需要进行多少趟冒泡排序 2.每趟冒泡排序&#xff0c;需要比较的对数 二、代码实…

发布 Copilot Chat Sample App

我们很高兴为您介绍 Semantic Kernel 的 Copilot Chat Sample App&#xff01;借助此应用程序&#xff0c;开发人员可以使用自然语言处理、语音识别和文件上传等高级功能轻松构建自己的聊天机器人。通过利用基于 LLM 的 AI&#xff0c;您可以通过 Semantic Kernel 使用您自己的…

LayerZero有何发展潜力?空投热潮和大额融资双重加持

前言 近期Arbitrum的如愿空投再次点燃了市场「刷空投」的热情&#xff0c;除了ZK系的zkSync、Starknet及Scroll&#xff0c;也有部分用户将注意力投向了估值30亿美元的LayerZero。而 LayerZero刚刚完成的1.2亿美元B轮融资也让其市场热度持续攀升&#xff0c;在「空投热潮」及「…

【1++的Linux】之Linux常见指令(二)

&#x1f44d;作者主页&#xff1a;进击的1 &#x1f929; 专栏链接&#xff1a;【1的Linux】 文章目录 一&#xff0c;man指令二&#xff0c;cp指令三&#xff0c;mv指令四&#xff0c;cat指令五&#xff0c;more指令六&#xff0c;less指令七&#xff0c;head与tail指令八&am…

【免交互】

目录 一、免交互1.1、语法格式1.2、命令演示1、多行写入文件内容2、多行注释 二、Expect2.1、基本命令2.2、脚本操作 一、免交互 1、使用I/O重定向的方式将命令列表提供给交互式程序或命令&#xff0c;比如 ftp、cat 或 read 命令。 2、是标准输入的一种替代品可以帮助脚本开发…

从C语言到C++⑩(第四章_模板初阶+STL简介)如何学习STL

目录 1. 泛型编程 1.1 函数重载弊端 1.2 泛型编程概念 2. 函数模板 2.1 函数模板的概念 2.2 函数模板格式 2.3 函数模板原理 2.4 函数模板实例化 2.4.1 隐式实例化 2.4.2 显式实例化 2.5 模板参数的匹配原则 3. 类模板 3.1 类模板的定义 3.2 类模板实例化 4.…

David Silver Lecture 7: Policy Gradient

1 Introduction 1.1 Policy-Based Reinforcement Learning 1.2 Value-based and policy based RL 基于值的强化学习 在基于值的 RL 中&#xff0c;目标是找到一个最优的值函数&#xff0c;通常是 Q 函数或 V 函数。这些函数为给定的状态或状态-动作对分配一个值&#xff0c;表…

【JAVAEE】JUC(java.util.concurrent)的常见类

目录 1.Callable接口 1.1简介 1.2代码演示 1.3Runnable与Callable的区别 2.ReentrantLock 2.1ReentrantLock的常用方法 2.2ReentrantLock的代码演示 2.3ReentrantLock和synchronized的区别 3.Semaphore信号量 3.1概念 3.2代码演示 4.CountDownLatch 4.1概念 4.2代…

【SpringBoot整合RabbitMQ(下)】

八、死信队列 先从概念解释上搞清楚这个定义&#xff0c;死信&#xff0c;顾名思义就是无法被消费的消息&#xff0c;字面意思可以这样理解&#xff0c;一般来说&#xff0c;producer 将消息投递到 broker 或者直接到 queue 里了&#xff0c; consumer 从 queue 取出消…

用Pin自动对二进制文件脱壳

Intel Pin Intel Pin在可执行二进制代码中插入一些探测函数,用于观察、记录、分析宿主代码执行过程中的一些与计算机体系结构相关的特性,如访存指令,寄存器内容,寄存器地址等,通过Pin提供的API可以编写各种分析函数,这样程序运行完以后,统计和分析结果也同时产生,分析…

I3D--视频理解必读论文总结

论文标题&#xff1a;Quo Vadis, Action Recognition? A New Model and the Kinetics会议期刊&#xff1a; CVPR 2017Dataset 论文地址&#xff1a;https://arxiv.org/pdf/1705.07750.pdf 文章目录 前言文章核心摘要引入方法a. 2DConvLSTMb. 3DConvc d. Two-StrwamTwo-Stream …

C语言学习分享(第七次)------操作符

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C语言学习分享⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多C语言知识   &#x1f51d;&#x1f51d; 操作符详解 1. 前言&#x1f6a9;2…

Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署

Ajax介绍 Axios <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-wid…